より良いReactJS開発者になるための10のヒントとコツ

本記事は、[Simon Holdorf](https://simonholdorf.com/)氏による「[10 Tips and Tricks That Will Make You a Better ReactJS Dev](https://thesmartcoder.dev/10-tips-and-tricks-that-will-make-you-a-better-reactjs-dev/)」（2021年4月4日公開）の和訳を、著者の許可を得て掲載しているものです。

#より良いReactJS開発者になるための10のヒントとコツ
>より良いReact開発者になり、より優れたコードを書き、コーディング面接で抜き出るため、Reactの技量を改善するすぐに使える知識です。

![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.unsplash.com%2Fphoto-1566241440091-ec10de8db2e1%3Fcrop%3Dentropy%26cs%3Dtinysrgb%26fit%3Dmax%26fm%3Djpg%26ixid%3DMnwxMTc3M3wwfDF8c2VhcmNofDF8fHJlYWN0fGVufDB8fHx8MTYxNzU1NTM3Nw%26ixlib%3Drb-1.2.1%26q%3D80%26w%3D2000&w=3120&q=80)
さあ、皆さん。始めましょう。

##1. Reactフックを使った関数コンポーネント

フックはReact v16.8で導入され、Reactの関数型プログラミングを大きく向上させました。[Reactフック](https://thesmartcoder.dev/awesome-react-hooks/)で、クラスコンポーネントの代わりに関数コンポーネントが使えますし、使うべきです。しかし...関数コンポーネントとステートとは？ライフサイクルメソッドとは？
怖がる必要はありません。Reactフックを使えばできます。

例をいくつか見てみましょう。

![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F3FxHoFiapxayOwsnDxcjvb%2F4dd91cc61320f55ccd3f63273629b0b4%2Fcode1.png&w=2048&q=75)
これは、クラスを使う従来の方法です。次のように`useState`フックが使えます。

![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F6NkhYbtdNNKtbromqGvJI6%2F4c68a3320e96c1356c859859bd0d47a5%2Fcode2.png&w=2048&q=75)
簡単に見えますか？その通りです！`useState`フックを使って、初期状態を空の文字列（''）に設定し、現在の状態（`value`）とその状態を変更するメソッド（`setValue`）を配列で返します。また、配列の破棄を使って、`value`と`setValue`にアクセスします。

関数コンポーネントは、デフォルトではライフサイクルメソッドにアクセスできません。しかし現在は、`useEffect`フックが助けになります。

まず、クラスを使う従来の方法です。
![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2FBjINBzW9Fw10dz8DQrDc6%2F6f56b2f14a9b0f0ddc09b25c8d2cb6de%2Fcode3.png&w=2048&q=75)

次に、`useEffect`フックを使う例です。
![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F3UP9tbdgSLLQIFbSljEIeV%2F2efe53e1070c9b37ce8af489d2b1fae3%2Fcode4.png&w=2048&q=75)

すごいでしょう？`useEffect`は、渡された配列（`value`）の1つを変更すると、実行されます。

紹介したのはReactフックの2例だけですが、もっとあります。独自のカスタムフックを作成することもできます。すべてのReactJS開発者はこの概念を学ぶべきだと思います！

##2. React Context APIを使ったpropsの受け渡し

コンポーネントが深くネストされていて、propsを上位層から下位層に受け渡す必要があり、間にあるコンポーネントはただpropsを通過するだけという状況を経験したことがあるかもしれません。チェーン内の各コンポーネントを編集する代わりに、React Context APIが使えます。

この例では、次のように新しいコンテキストを別ファイルで作成します。
![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F6PuDyKkoiDpyfxPpIgXeSg%2Fcadd20ec8a8667a2d70552be97747e83%2Fcode5.png&w=2048&q=75)

次に、親要素をラップする必要があります。この親要素は、作成したproviderにpropsを渡す最上位層です。

![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F6zSdlCtqU6dNOYLQ81RFEj%2Faba3e387d7a2266171325ed4a03fd520%2Fcode6.png&w=2048&q=75)

`ParentComponent`のすべての子要素が、propsとしてauthにアクセスできるようになりました。便利でしょう？

あとは子コンポーネントでコンテキストを消費するだけです。関数コンポーネントと`useContext`フックを使います。
![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F3PrmnUZhhi54QQ4JS6IIvh%2F19201a8c278097b588f97831764dbfdd%2Fcode7.png&w=2048&q=75)

ネストされた子コンポーネントがもっとある場合は、それも同様にコンテキストにアクセスできます。すごい！

##3. styled-components

styled-componentsは、CSSをコンポーネントレベルに抽象化するCSS-in-JSライブラリに効果的に属し、JavaScriptだけを使ってスタイルを記述します。次のように、バッククォートを使ったES6テンプレートリテラル記法で作成できます。

![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2FiCAWQWVmx4rvods5zjEfU%2F774e9ab5ea73c0075dc48ae11eb159b6%2Fcode8.png&w=2048&q=75)

これで、通常のHTMLボタンの代わりに、カスタムスタイルのボタンコンポーネントをアプリケーション全体で使えます。すべてのスタイルはカプセル化されており、DOMの他のスタイルと干渉することはありません。すごくいいでしょう？

##4. React Fragment

ReactをDOMで正しくレンダリングしたり、配列記法を使ったりするには、長い間、return文のすべてを1つのdivにラップする必要がありました。

例えば、次のようになります。

![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F5f9FAVJAWEc2YkimgV1HBi%2Ff130b649dc2ab09c6c1f53d1f166084b%2Fcode9.png&w=2048&q=75)

React Fragmentの導入により、そのいずれの方法も使う必要がなくなりました。代わりに、次のようにできます。
![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F1PXpx2qZoSi4eFqqyWpfV1%2F4ad23356f8dba49307d1e31d71028701%2Fcode10.png&w=2048&q=75)

Babel 7以降は、次のようにもできます。

![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F1yHvdhMcAvw6AUrRqib6dZ%2Fa608459cae4e00bc0702329b3804b4d3%2Fcode11.png&w=2048&q=75)

##5. Error Boundary

アプリケーションにエラーがあることがありますが、もしエラーがビューに表示された場合、少なくともアプリケーション全体を壊すべきではありません。このような時のために、ReactにError Boundaryが実装されています。これは基本的に、他のコンポーネントをラップするためのコンポーネントです。ツリーのレンダリング中や、ライフサイクルメソッド内でエラーをキャッチします。`componentDidCatch`メソッドを介して（注：これにはまだReactフックがないため、クラスベースのコンポーネントを使う必要があります）エラーに対応し、フォールバックをレンダリングしたり、エラーをログに記録したりします。

次は、簡単な例です。
![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F1lkyf2VQm0ad3oR8yHYVwZ%2F29c9dc5c9d340fb5a6b5ea841f6e7397%2Fcode12.png&w=2048&q=75)

これで、`ErrorBoundary`コンポーネントを次のように使うことができます。
![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F7HkteQjkx9Ov1Kdqjy7svx%2Ffe6be24e7964ba2f2518864ba1b0306b%2Fcode13.png&w=2048&q=75)

##6. ReactとTypescript

Typescriptはとてもホットな話題で、開発者が近い将来に習得したい言語の1つです。新しいバージョンのcreate-react-app (CRA) には、Typescriptのサポートが組み込まれています。CRAで新しいプロジェクトを作成する時に、次のように typescriptフラグを追加するだけです。

![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F4XrgwaCADGnRRc052fXE3p%2Ffbe1f54cf50e3fcb4a9c41f5c8603a97%2Fcode14.png&w=2048&q=75)

ReactでTypescriptを使う主な利点は次の通りです。

-   最新のJavaScript機能
-   複雑な型定義のためのインターフェイス
-   TypeScriptのためのVS Code
-   開発中のバグを回避するための可読性と検証

React機能コンポーネントでTypeScriptを使う簡単な例です。

![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F3VAjIARiyYc3NnpX6if1ry%2F5c926ce178ade7ede5dc4e6438933a31%2Fcode15.png&w=2048&q=75)

インターフェイス付きのものです。
![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F2bJTH69rggmAZu6D1tri24%2F8a147d4ae63123391a15fad6fb58693b%2Fcode16.png&w=2048&q=75)

2021年に何か新しいことを学びたいと思っているなら、ぜひTypeScriptを試してみてください！

##7. JestとEnzymeを使ったテスト

すべての開発者は、アプリケーションをテストする必要があります。多くの企業では義務です。適切な設定で行えば、Reactアプリのテストはとても便利です。よく使われている設定は、JestとEnzymeで構成されています。見てみましょう！

Jestはデフォルトでcreate-react-appにバンドルされており、テストランナー、アサーションライブラリ、モッキングライブラリです。スナップショットテストも提供しており、基本的にはコンポーネントのレンダリングされたスナップショットを作成し、以前のスナップショットと自動的に比較します。2つが一致しない場合、テストは失敗します。

これはユニットテストや統合テストにはぴったりですが、Reactアプリの実際のコンポーネントについてはどうでしょうか？Airbnbが開発・保守しているReactコンポーネントのテストライブラリであり、Jestの理想的なパートナーであるEnzymeを使ってください。

これらのライブラリで、次のようなきちんとしたテストを実行できます。
![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F4k1BYrIZHhZ28ZOX70bmeO%2F5bc740002e8769b6b75cdc2922641aee%2Fcode17.png&w=2048&q=75)

これにより、このコンポーネントの基本的なレンダリング動作をテストできます。しかし、もっと多くのことができます。

例えば、propsのテストです。
![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F2ecYgtMvdrVNfP6dzHWmSx%2F6527a0d4bdf3ebdc24888a1f2534d055%2Fcode18.png&w=2048&q=75)

すごいですよね？API呼び出しのモックやライフサイクルメソッドのテストなど、この設定でできることは他にもたくさんあります。

##8. JSXの条件

JSXの記述はとてもクールで、Reactの主な機能の1つです。より質を高めるために、次のコツを使うことができます。

これを使う代わりに
![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F2eskxrpvtk9OhJCFHI0157%2Ffb76354cd60d6c595472e12153639580%2Fcode19.png&w=2048&q=75)

このような短絡評価ができます。
![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F2izu91MzZsYdlZOWMpRz8m%2F002004797132b3fb9bd171fb4e80c766%2Fcode20.png&w=2048&q=75)

##9. 高階コンポーネント

高階コンポーネント（Higher-Order Components, HOC）は、共有コードを抽象化して必要な場所でアクセス可能にするために使われるReactの高度な概念です。この概念は、JavaScriptの高階関数に似ています。HOCはコンポーネントを受け取り、コンポーネントを返しますが、それ自体はコンポーネントではなく、関数です。抽象レベルでは次のようになります。

![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F6fstd3FCagvnKqUmph5GWc%2F56581e760cb7abd9299e60a6ccf4850f%2Fcode21.png&w=2048&q=75)

Reduxのconnectが良い例です。次は、より実用的な例です。
![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F7gdUj0qdtEIuL4NMpwnQ0B%2F2d6a818127e20da27505061a19dd02bf%2Fcode22.png&w=2048&q=75)

まず、すべてのpropsを保持し、色（blue）の新しいpropsを取得する要素を使ってHOC（`colorizeElement`）を作成します。次に、そのHOCを使って、次のように新しい青色のボタンを作成します。
![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F7N2AFjqZ7CddMAGaEpbAS%2F83541a056ec495d70f33eb93f02afde9%2Fcode23.png&w=2048&q=75)

いいでしょう？

##10. React DevTools

React DevToolsは、ChromeとFirefoxで使えるブラウザ拡張機能で、FacebookのReact Core Teamが保守しています。2019年8月にバージョン4がリリースされました。この拡張機能は、あらゆるReact開発者にとって本当に便利です。

![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2FVBkhuSbAX0pLLJ3zve1JL%2Fb8eea88c45c3561b4570ea5b3020972f%2Fdevtools1.png&w=1040&q=75)

ReactやReact Nativeと相性がよく、Reactアプリで起こっていることを理解するのにとても役立ちます。

知らないかもしれませんが、AirbnbやNetflixなどの大企業はReactを使っています。React DevToolsがインストールされていれば、ブラウザのコンソールで彼らのサイト情報を見ることができます。

![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2Fkmn7SeLd8jDWbP7TYgYop%2F5bece6ddbacd6f6666a55e36373dd391%2Fnet1.png&w=1040&q=75)

大企業がしていることを見るのはいつでもいいことです。同じことがRedux DevToolsにも当てはまります！

##ボーナス：React開発者に必須のVS Code拡張機能

さて、ここまでたどり着いたあなたに、ちょっとしたボーナスの時間です！React開発者に最適なVS Code拡張機能をいくつかご紹介します。

###ES7 React/Redux/GraphQL/React-Nativeスニペット

![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2FIZdAzCx3T2rnP5TbmO8oV%2Fa324c7db480b15d4ad510595132f0c52%2Fex1.png&w=1040&q=75)

約400万件のダウンロード数を誇る、とても役に立つ拡張機能です。React、Redux、GraphQLのコードスニペットを大量に提供します。

###JestとJestスニペット

![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F3Kmaey8uukYDfpKjXdvhzD%2F16aa71db3f5199566951df68a5a77311%2Fex2.png&w=1040&q=75)

![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2FBZ5MC4UH12QejLmN3xiyS%2F955897e7ca665c8a3b99a2ac4643794b%2Fex3.png&w=1040&q=75)

Jestと完全に調和し、より良いテストのためのスニペットを提供する2つの拡張機能です。

### **Typescript Reactコードスニペット**

![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F28643bqnqgzl%2F6pwRnImRptdXbcQMgGrbwF%2F369f7247d6d381d9fec4a354125cfa5a%2Fex4.png&w=1040&q=75)

TypescriptとReactを使う時に役立つ拡張機能です。

これらはReact開発に特化した拡張機能ですが、より一般的なものも使うべきです。[フロントエンド開発者向けVS Code拡張機能10選](https://thesmartcoder.dev/10-awesome-visual-studio-code-extensions-for-frontend-developers/)、[2021年にフロントエンド開発者が学ぶべき10のこと](https://thesmartcoder.dev/10-things-front-end-developers-should-learn-in-2021/)という記事を書きましたので、そちらもぜひご覧ください！

##おわりに

さて、今回の記事はこれで終わりです。始めたばかりの人も、経験豊富な人も、より良いReact開発者になるための知見を得られたなら嬉しいです。

**記事を気に入ったら[Twitter](https://twitter.com/simonholdorf)でフォローしてください。**
**プログラミング、制作、執筆、キャリアについてもっと学べます🥰**

##翻訳協力

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

Original Author: [Simon Holdorf](https://simonholdorf.com/) ([@simonholdorf](https://twitter.com/simonholdorf))
Original Article: [10 Tips and Tricks That Will Make You a Better ReactJS Dev](https://thesmartcoder.dev/10-tips-and-tricks-that-will-make-you-a-better-reactjs-dev/)
Thank you for letting us share your knowledge!

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

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