クリーンなReactプロジェクトの21のベストプラクティス

本記事は、[Mohammad Faisal](https://56faisal.medium.com/)氏による「[21 Best Practices for a Clean React Project](https://betterprogramming.pub/21-best-practices-for-a-clean-react-project-df788a682fb)」（2021年4月23日公開）の和訳を、著者の許可を得て掲載しているものです。

#クリーンなReactプロジェクトの21のベストプラクティス
>コード品質向上のための実践的アドバイス

![Woman with index finger over mouth](https://miro.medium.com/max/630/0*wueohBheYq-ekUeC)
Photo by [Diana Polekhina](https://unsplash.com/@diana_pole?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_source=medium&utm_medium=referral).

#はじめに

Reactは、構成の方法について特に決まりがありません。まさにこれが理由で、プロジェクトをクリーンで保守可能な状態に保つことは、私たちの責任なのです。

今日は、Reactアプリケーションの状態を改善するために従うべきベストプラクティスについて説明します。これらのルールは広く受け入れられているため、この知識を持つことは必須です。

すべてコードで示します。さあ始めましょう！

##1. JSXの省略形を使用する

ブール変数の受け渡しには、JSXの省略形を使うようにしましょう。例えば、`Navbar`コンポーネントのタイトルの可視性を制御するとします。

**悪い例**

```react
return (
    <Navbar showTitle={true} />
);
```

[shorthand-bad.jsx](https://gist.github.com/Mohammad-Faisal/b36048cd2b7810390125fbe60cfee4ff#file-shorthand-bad-jsx)

**良い例**

```react
return(
    <Navbar showTitle />
)
```

[shorthand-good.jsx](https://gist.github.com/Mohammad-Faisal/af61bcf957da6f8f56a4daa226fffc96#file-shorthand-good-jsx)

##2. 三項演算子を使用する

例えば、ロールに基づいて特定のユーザーの詳細を表示するとします。

**悪い例**

```react
const { role } = user;
if(role === ADMIN) {
    return <AdminUser />
}else{
    return <NormalUser />
}
```

[ternary-bad.jsx](https://gist.github.com/Mohammad-Faisal/44d8e6cf3ef66b9e1a69540c3254dba0#file-ternary-bad-jsx)

**良い例**

```react
const { role } = user;
return role === ADMIN ? <AdminUser /> : <NormalUser />
```

[ternary-good.jsx](https://gist.github.com/Mohammad-Faisal/01b85e9570a74d359a284d859de33979#file-ternary-good-jsx)

##3. オブジェクトリテラルを活用する

オブジェクトリテラルは、コードを読みやすくするのに役立ちます。例えば、役割に応じて3種類のユーザーを表示するとします。選択肢の数が3つ以上なので、三項演算子は使えません。

**悪い例**

```react
const {role} = user
switch(role){
    case ADMIN:
        return <AdminUser />
    case EMPLOYEE:
        return <EmployeeUser />
    case USER:
        return <NormalUser />
}
```

[conditional-rendering-bad.jsx](https://gist.github.com/Mohammad-Faisal/6c4c1978f49184c503f111b316656f3d#file-conditional-rendering-bad-jsx)

**良い例**

```react
const {role} = user
const components = {
    ADMIN: AdminUser,
    EMPLOYEE: EmployeeUser,
    USER: NormalUser
};

const Component = components[role];
return <Componenent />;
```

[conditional-rendering-good.jsx](https://gist.github.com/Mohammad-Faisal/c1c39a4b32a206cfd7a6c78226c702bf#file-conditional-rendering-good-jsx)

これでかなり見やすくなりました。

##4. フラグメントを使用する

常に`div`よりも`Fragment`を使うようにしましょう。コードをクリーンに保ち、仮想DOMに作成されるノードが1つ減るため、パフォーマンスにも役立ちます。

**悪い例**

```react
return (
    <div>
        <Component1 />
        <Component2 />
        <Component3 />
    </div>
)
```

[fragment-bad.jsx](https://gist.github.com/Mohammad-Faisal/9b22f4b53a1976a600967fae397d79b0#file-fragment-bad-jsx)

**良い例**

```react
return (
    <>
        <Component1 />
        <Component2 />
        <Component3 />
    </>
)
```

[fragment-good.jsx](https://gist.github.com/Mohammad-Faisal/96e6947e3c3322e9c735adabde9a2f31#file-fragment-good-jsx)

##5. レンダー内で関数を定義しない

レンダー内で関数を定義しないようにしましょう。レンダー内のロジックは最小限に抑えるようにしてください。

**悪い例**

```react
return (
    <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}> // NOTICE HERE
        This is a bad example
    </button>
)
```

[function-render-bad.jsx](https://gist.github.com/Mohammad-Faisal/8ef6be341f70210a394fc27d5aa704db#file-function-render-bad-jsx)

**良い例**

```react
const submitData = () => dispatch(ACTION_TO_SEND_DATA)

return (
    <button onClick={submitData}>
        This is a good example
    </button>
)
```

[function-render-good.js](https://gist.github.com/Mohammad-Faisal/d443774d9ae4dad565c93c68aff4ce2b#file-function-render-good-js)

##6. メモを使用する

`React.PureComponent`と`memo`は、アプリケーションのパフォーマンスを大幅に向上させます。不必要なレンダリングを回避できます。

**悪い例**

```react
import React, { useState } from "react";

export const TestMemo = () => {
    const [userName, setUserName] = useState("faisal");
    const [count, setCount] = useState(0);
    const increment = () => setCount((count) => count + 1);
    return (
        <>
            <ChildrenComponent userName={userName} />
            <button onClick={increment}> Increment </button>
        </>
    );
};

const ChildrenComponent =({ userName }) => {
    console.log("rendered", userName);
    return <div> {userName} </div>;
};
```

[memo-bad.jsx](https://gist.github.com/Mohammad-Faisal/9f9efea49e187188a5917f20d2fbb76a#file-memo-bad-jsx)

countの値は`ChildComponent`とは関係がないため、子コンポーネントは1回だけレンダリングする必要があります。しかし、ボタンをクリックするたびにレンダリングされてしまいます。

![Output](https://miro.medium.com/max/630/1*UC19Qvfj06VAy63lR8mOFg.png)

**良い例**

`ChildrenComponent`を次のように編集しましょう。

```react
import React ,{useState} from "react";

const ChildrenComponent = React.memo(({userName}) => {
    console.log('rendered')
    return <div> {userName}</div>
})
```

[memo-good.jsx](https://gist.github.com/Mohammad-Faisal/a5e4afed5a0e2884f3f16f9f3f2d7d98#file-memo-good-jsx)

これでボタンを何回クリックしても、必要な時だけレンダリングされるようになりました。

##7. CSSをJavaScriptに入れる

CSSの整理はJSの整理よりもはるかに難しいため、Reactアプリケーションを作成する時は、生のJavaScriptを避けるようにしましょう。

**悪い例**

```react
// CSS FILE
.body {
    height: 10px;
}

//JSX
return <div className='body'>
</div>
```

[css-bad.jsx](https://gist.github.com/Mohammad-Faisal/70687534159f44a6d5056bbb933b3ce2#file-css-bad-jsx)

**良い例**

```react
const bodyStyle = {
    height: "10px"
}
return <div style={bodyStyle}>
</div>
```

[css-good.jsx](https://gist.github.com/Mohammad-Faisal/684e1aedc41366e24b9bea3ef021089e#file-css-good-jsx)

##8. オブジェクト分割代入を使用する

オブジェクト分割代入を活用しましょう。例えば、ユーザーの詳細を表示する必要があるとします。

**悪い例**

```react
return (
    <>
        <div> {user.name} </div>
        <div> {user.age} </div>
        <div> {user.profession} </div>
    </>
)
```

[descrutcure-bad.jsx](https://gist.github.com/Mohammad-Faisal/3f452b5a54c6a7542869c1448caaaa7e#file-descrutcure-bad-jsx)

**良い例**

```react
const { name, age, profession } = user;

return (
    <>
        <div> {name} </div>
        <div> {age} </div>
        <div> {profession} </div>
    </>
)
```

[descructuring-good.jsx](https://gist.github.com/Mohammad-Faisal/faba3ee5ee16ea2ad0dd65d012a7e5f5#file-descructuring-good-jsx)

##9. 文字列属性に波括弧は不要

例えば、文字列属性を子コンポーネントに渡すとします。

**悪い例**

```react
return(
    <Navbar title={"My Special App"} />
)
```

[string-props.-bad.jsx](https://gist.github.com/Mohammad-Faisal/82b46cdfe707408829188bc4987b09a2#file-string-props-bad-jsx)

**良い例**

```react
return(
    <Navbar title="My Special App" />
)
```

[string-prop-good.jsx](https://gist.github.com/Mohammad-Faisal/45594789b9d6fff8c0b1f401421a0b32#file-string-prop-good-jsx)

##10. JSXからJSコードを削除する

レンダリングやUI機能に役立たないJSコードは、JSX外に移動させましょう。

**悪い例**

```react
return (
    <ul>
        {posts.map((post) => (
            <li onClick={event => {
                console.log(event.target, 'clicked!'); // <- THIS IS BAD
                }} key={post.id}>{post.title}
            </li>
        ))}
    </ul>
);
```

[js-in-jsx-bad.jsx](https://gist.github.com/Mohammad-Faisal/331aee513c27d7a2e951f35a9f81446a#file-js-in-jsx-bad-jsx)

**良い例**

```react
const onClickHandler = (event) => {
    console.log(event.target, 'clicked!');
}
return (
    <ul>
        {posts.map((post) => (
            <li onClick={onClickHandler} key={post.id}> {post.title} </li>
        ))}
    </ul>
);
```

[jsx-in-js-good.jsx](https://gist.github.com/Mohammad-Faisal/2eda63340eeedcb338e48787fd17235f#file-jsx-in-js-good-jsx)

##11. テンプレートリテラルを使用する

大きな文字列を作るには、テンプレートリテラルを使いましょう。文字列の連結は避けてください。素晴らしくてクリーンです。

**悪い例**

```react
const userDetails = user.name + "'s profession is" + user.proffession
return (
    <div> {userDetails} </div>
)
```

[concatention-bad.jsx](https://gist.github.com/Mohammad-Faisal/8fbebee6772a45deb265d120e50155b9#file-concatention-bad-jsx)

**良い例**

```react
const userDetails = `${user.name}'s profession is ${user.proffession}`
return (
    <div> {userDetails} </div>
)
```

[cancatention-good.jsx](https://gist.github.com/Mohammad-Faisal/9ce5b99cafe26601525da73d31c69881#file-cancatention-good-jsx)

##12. 順番にインポートする

常に特定の順序でインポートしましょう。コードの可読性が向上します。

**悪い例**

```react
import React from 'react';
import ErrorImg from '../../assets/images/error.png';
import styled from 'styled-components/native';
import colors from '../../styles/colors';
import { PropTypes } from 'prop-types';
```

[import-bad.jsx](https://gist.github.com/Mohammad-Faisal/887437ec6b22ff36de025118854f6d97#file-import-bad-jsx)

## **良い例**

インポートの順番はこのようにするのが鉄則です。

-   ビルトイン
-   外部
-   内部

つまり、上の例は次のようになります。

```react
import React from 'react';

import { PropTypes } from 'prop-types';
import styled from 'styled-components/native';

import ErrorImg from '../../assets/images/error.png';
import colors from '../../styles/colors';
```

[import-good.jsx](https://gist.github.com/Mohammad-Faisal/a6fb17168d8f3f5d10402254eedfb017#file-import-good-jsx)

##13. 暗黙の戻り値を使用する

JavaScriptの機能である暗黙の戻り値を使って、美しいコードを書きましょう。例えば、関数が単純な計算をして、その結果を返すとします。

**悪い例**

```react
const add = (a, b) => {
    return a + b;
}
```

[implicit-return-bad.js](https://gist.github.com/Mohammad-Faisal/6f8b446ac5b18f15218f2ed86e815c05#file-implicit-return-bad-js)

**良い例**

```react
const add = (a, b) => a + b;
```

[implicit-return-good.js](https://gist.github.com/Mohammad-Faisal/9c64bfddbaab1c9560c40f7da41c389f#file-implicit-return-good-js)

##14. コンポーネントの命名

コンポーネントにはパスカルケース、インスタンスにはキャメルケースを使いましょう。

**悪い例**

```react
import reservationCard from './ReservationCard';
const ReservationItem = <ReservationCard />;
```

[naming-component-bad.jsx](https://gist.github.com/Mohammad-Faisal/f6b308e7e4d952799aa2d585224e1f54#file-naming-component-bad-jsx)

**良い例**

```react
import ReservationCard from './ReservationCard';
const reservationItem = <ReservationCard />;
```

[naming-good.jsx](https://gist.github.com/Mohammad-Faisal/0c220bf87aa8b900d7fa07e5295c9207#file-naming-good-jsx)

##15. 予約済み属性の命名

コンポーネント間の属性の受け渡しに DOMコンポーネントの属性名を使わないようにしましょう。

**悪い例**

```react
<MyComponent style="dark" />
<MyComponent className="dark" />
```

[prop-naming-bad.jsx](https://gist.github.com/Mohammad-Faisal/5a2c2a091e9bf8829bb3f268049e1e77#file-prop-naming-bad-jsx)

**良い例**

```react
<MyComponent variant="fancy" />
````

[prop-naming-good.jsx](https://gist.github.com/Mohammad-Faisal/ca3f10c1a0764eb75ffc51b6770521e3#file-prop-naming-good-jsx)

##16. 引用符

JSX の属性には二重引用符を使い、その他の JS には一重引用符を使います。

**悪い例**

```react
<Foo bar='bar' />
<Foo style={{ left: "20px" }} />
```

[quotes-bad.jsx](https://gist.github.com/Mohammad-Faisal/0bcf311a50ba4c4712119daf602ad21e#file-quotes-bad-jsx)

**良い例**

```react
<Foo bar="bar" />
<Foo style={{ left: '20px' }} />
```

[quotes-good.jsx](https://gist.github.com/Mohammad-Faisal/1f006c58b3c3eb66490b57869c259d4b#file-quotes-good-jsx)

##17. 属性の命名

属性名には常にキャメルケースを、属性値がReactコンポーネントの場合はパスカルケースを使いましょう。

**悪い例**

```react
<Component
    UserName="hello"
    phone_number={12345678}
/>
```

[prop-naming-bad.jsx](https://gist.github.com/Mohammad-Faisal/e10dbf0ee7abcc0b3002cd2972d9f4be#file-prop-naming-bad-jsx)

**良い例**

```react
<MyComponent
    userName="hello"
    phoneNumber={12345678}
    Component={SomeComponent}
/>
```

[prop-name-good.jsx](https://gist.github.com/Mohammad-Faisal/0a4c7d3ac4b8dca4659dca6f84a71606#file-prop-name-good-jsx)

##18. 括弧内のJSX

コンポーネントが複数行にわたる場合は、必ず括弧で囲みましょう。

**悪い例**

```react
return <MyComponent variant="long">
            <MyChild />
        </MyComponent>;
```

[jsx-bad.jsx](https://gist.github.com/Mohammad-Faisal/7601659ffd7d9690210a910620ea9bdf#file-jsx-bad-jsx)

## **良い例**

```react
return (
    <MyComponent variant="long">
        <MyChild />
    </MyComponent>
);
```

[jsx-good.jsx](https://gist.github.com/Mohammad-Faisal/3d56db77f5cf34d93f66d4c92ebea426#file-jsx-good-jsx)

##19. 自己終了タグ

コンポーネントに子要素がない場合は、自己終了タグを使いましょう。可読性が向上します。

**悪い例**

```react
<SomeComponent variant="stuff"></SomeComponent>
```

[self-closing-bad.jsx](https://gist.github.com/Mohammad-Faisal/ffc7c4a8694e7ab20932d7d89a49be2a#file-self-closing-bad-jsx)

**良い例**

```react
<SomeComponent variant="stuff" />
```

[self-closing-good.jsx](https://gist.github.com/Mohammad-Faisal/1ab1cbb37bda633a020475c6f1b31c8d#file-self-closing-good-jsx)

##20. メソッド名のアンダースコア

Reactの内部メソッドではアンダースコアを使わないようにしましょう。

**悪い例**

```react
const _onClickHandler = () => {
    // do stuff
}
```

[underscore-bad.jsx](https://gist.github.com/Mohammad-Faisal/8b476e93f82859a8a41a8909453e8e08#file-underscore-bad-jsx)

**良い例**

```react
const onClickHandler = () => {
    // do stuff
}
```

[underscore-good.jsx](https://gist.github.com/Mohammad-Faisal/6f3414347ab85c900c0cb20b5e87d139#file-underscore-good-jsx)

##21. alt属性

`<img>`タグには必ず alt属性を入れましょう。スクリーンリーダーはすでに`img`要素を画像として認識しているため、alt属性に`picture`や`image`を使わないでください。その必要はありません。

**悪い例**

```react
<img src="hello.jpg" />
<img src="hello.jpg" alt="Picture of me rowing a boat" />
```

[alt-bad.jsx](https://gist.github.com/Mohammad-Faisal/9e56c8ee0643147a303c13e60cbe32d2#file-alt-bad-jsx)

**良い例**

```react
<img src="hello.jpg" alt="Me waving hello" />
```

[alt-good.jsx](https://gist.github.com/Mohammad-Faisal/bb34a815a72c8bb9a3ee071bb76c2bfa#file-alt-good-jsx)

##おわりに

これで終了です。ここまで読んだ方に、拍手を送ります！この記事から何かを学んでいただけたら嬉しいです。良い一日を！:D

何かありましたら、ぜひ[LinkedIn](https://www.linkedin.com/in/56faisal/)でご連絡ください。

>**Reactの16の問題を解決する45のNPMパッケージ**
>完璧なnpmパッケージの選び方を徹底解説
>[javascript.plainenglish.io](https://javascript.plainenglish.io/45-npm-packages-to-solve-16-react-problems-a9ab18946224)

###

>**圧倒的に速いReactJSアプリケーションのトップライブラリ7選**
>凄腕デベロッパーの必携ツール
>[betterprogramming.pub](https://betterprogramming.pub/top-7-libraries-for-blazingly-fast-reactjs-applications-c0069e87c8b7)

###

>**API設計スキルを次のレベルに引き上げる22のベストプラクティス**
>REST APIを設計するための実践的アドバイス
>[betterprogramming.pub](https://betterprogramming.pub/22-best-practices-to-take-your-api-design-skills-to-the-next-level-65569b200b9)

###

>**大規模Reactアプリに欠かせない20の必須項目**
>企業レベルのコードを作成しているなら、これを知っておく必要があります
>[javascript.plainenglish.io](https://javascript.plainenglish.io/20-essential-parts-of-any-large-scale-react-app-ee4bd35436a0)

##リソース

-   Airbnbガイドライン：<https://github.com/airbnb/javascript/tree/master/react>

>Anupam Chughに謝意を表します。

##翻訳協力

この記事は以下の方々のご協力により公開する事ができました。改めて感謝致します。

Original Author: [Mohammad Faisal](https://56faisal.medium.com/) ([Linkedin](https://www.linkedin.com/in/56faisal/))
Original Article: [21 Best Practices for a Clean React Project](https://betterprogramming.pub/21-best-practices-for-a-clean-react-project-df788a682fb)
Thank you for letting us share your knowledge!

選定担当: @gracen
翻訳担当: @gracen
監査担当: -
公開担当: @gracen

>**こちらもどうぞ**
>[すごいReactパッケージ5選](https://qiita.com/baby-degu/items/e183b20dd20b20920e00)
>[すごいReactフック8選](https://qiita.com/baby-degu/items/52dbb382bbaf6c43e2db)

##ご意見・ご感想をお待ちしております
今回の記事はいかがでしたか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。
頂いたお声は、今後の記事の質向上に役立たせて頂きますので、お気軽に
コメント欄にてご投稿ください。[Twitter](https://twitter.com/BabyDegu?lang=ja)でもご意見を受け付けております。
皆様のメッセージをお待ちしております。