本記事は、Simon Holdorf氏による「10 Tips and Tricks That Will Make You a Better ReactJS Dev」（2021年4月4日公開）の和訳を、著者の許可を得て掲載しているものです。
#より良いReactJS開発者になるための10のヒントとコツ
より良いReact開発者になり、より優れたコードを書き、コーディング面接で抜き出るため、Reactの技量を改善するすぐに使える知識です。
さあ、皆さん。始めましょう。
##1. Reactフックを使った関数コンポーネント
フックはReact v16.8で導入され、Reactの関数型プログラミングを大きく向上させました。Reactフックで、クラスコンポーネントの代わりに関数コンポーネントが使えますし、使うべきです。しかし...関数コンポーネントとステートとは？ライフサイクルメソッドとは？
怖がる必要はありません。Reactフックを使えばできます。
例をいくつか見てみましょう。
これは、クラスを使う従来の方法です。次のようにuseStateフックが使えます。
簡単に見えますか？その通りです！useStateフックを使って、初期状態を空の文字列（''）に設定し、現在の状態（value）とその状態を変更するメソッド（setValue）を配列で返します。また、配列の破棄を使って、valueとsetValueにアクセスします。
関数コンポーネントは、デフォルトではライフサイクルメソッドにアクセスできません。しかし現在は、useEffectフックが助けになります。
まず、クラスを使う従来の方法です。
次に、useEffectフックを使う例です。
すごいでしょう？useEffectは、渡された配列（value）の1つを変更すると、実行されます。
紹介したのはReactフックの2例だけですが、もっとあります。独自のカスタムフックを作成することもできます。すべてのReactJS開発者はこの概念を学ぶべきだと思います！
##2. React Context APIを使ったpropsの受け渡し
コンポーネントが深くネストされていて、propsを上位層から下位層に受け渡す必要があり、間にあるコンポーネントはただpropsを通過するだけという状況を経験したことがあるかもしれません。チェーン内の各コンポーネントを編集する代わりに、React Context APIが使えます。
この例では、次のように新しいコンテキストを別ファイルで作成します。
次に、親要素をラップする必要があります。この親要素は、作成したproviderにpropsを渡す最上位層です。
ParentComponentのすべての子要素が、propsとしてauthにアクセスできるようになりました。便利でしょう？
あとは子コンポーネントでコンテキストを消費するだけです。関数コンポーネントとuseContextフックを使います。
ネストされた子コンポーネントがもっとある場合は、それも同様にコンテキストにアクセスできます。すごい！
##3. styled-components
styled-componentsは、CSSをコンポーネントレベルに抽象化するCSS-in-JSライブラリに効果的に属し、JavaScriptだけを使ってスタイルを記述します。次のように、バッククォートを使ったES6テンプレートリテラル記法で作成できます。
これで、通常のHTMLボタンの代わりに、カスタムスタイルのボタンコンポーネントをアプリケーション全体で使えます。すべてのスタイルはカプセル化されており、DOMの他のスタイルと干渉することはありません。すごくいいでしょう？
##4. React Fragment
ReactをDOMで正しくレンダリングしたり、配列記法を使ったりするには、長い間、return文のすべてを1つのdivにラップする必要がありました。
例えば、次のようになります。
React Fragmentの導入により、そのいずれの方法も使う必要がなくなりました。代わりに、次のようにできます。
Babel 7以降は、次のようにもできます。
##5. Error Boundary
アプリケーションにエラーがあることがありますが、もしエラーがビューに表示された場合、少なくともアプリケーション全体を壊すべきではありません。このような時のために、ReactにError Boundaryが実装されています。これは基本的に、他のコンポーネントをラップするためのコンポーネントです。ツリーのレンダリング中や、ライフサイクルメソッド内でエラーをキャッチします。componentDidCatchメソッドを介して（注：これにはまだReactフックがないため、クラスベースのコンポーネントを使う必要があります）エラーに対応し、フォールバックをレンダリングしたり、エラーをログに記録したりします。
次は、簡単な例です。
これで、ErrorBoundaryコンポーネントを次のように使うことができます。
##6. ReactとTypescript
Typescriptはとてもホットな話題で、開発者が近い将来に習得したい言語の1つです。新しいバージョンのcreate-react-app (CRA) には、Typescriptのサポートが組み込まれています。CRAで新しいプロジェクトを作成する時に、次のように typescriptフラグを追加するだけです。
ReactでTypescriptを使う主な利点は次の通りです。
- 最新のJavaScript機能
- 複雑な型定義のためのインターフェイス
- TypeScriptのためのVS Code
- 開発中のバグを回避するための可読性と検証
React機能コンポーネントでTypeScriptを使う簡単な例です。
インターフェイス付きのものです。
2021年に何か新しいことを学びたいと思っているなら、ぜひTypeScriptを試してみてください！
##7. JestとEnzymeを使ったテスト
すべての開発者は、アプリケーションをテストする必要があります。多くの企業では義務です。適切な設定で行えば、Reactアプリのテストはとても便利です。よく使われている設定は、JestとEnzymeで構成されています。見てみましょう！
Jestはデフォルトでcreate-react-appにバンドルされており、テストランナー、アサーションライブラリ、モッキングライブラリです。スナップショットテストも提供しており、基本的にはコンポーネントのレンダリングされたスナップショットを作成し、以前のスナップショットと自動的に比較します。2つが一致しない場合、テストは失敗します。
これはユニットテストや統合テストにはぴったりですが、Reactアプリの実際のコンポーネントについてはどうでしょうか？Airbnbが開発・保守しているReactコンポーネントのテストライブラリであり、Jestの理想的なパートナーであるEnzymeを使ってください。
これらのライブラリで、次のようなきちんとしたテストを実行できます。
これにより、このコンポーネントの基本的なレンダリング動作をテストできます。しかし、もっと多くのことができます。
例えば、propsのテストです。
すごいですよね？API呼び出しのモックやライフサイクルメソッドのテストなど、この設定でできることは他にもたくさんあります。
##8. JSXの条件
JSXの記述はとてもクールで、Reactの主な機能の1つです。より質を高めるために、次のコツを使うことができます。
これを使う代わりに
このような短絡評価ができます。
##9. 高階コンポーネント
高階コンポーネント（Higher-Order Components, HOC）は、共有コードを抽象化して必要な場所でアクセス可能にするために使われるReactの高度な概念です。この概念は、JavaScriptの高階関数に似ています。HOCはコンポーネントを受け取り、コンポーネントを返しますが、それ自体はコンポーネントではなく、関数です。抽象レベルでは次のようになります。
Reduxのconnectが良い例です。次は、より実用的な例です。
まず、すべてのpropsを保持し、色（blue）の新しいpropsを取得する要素を使ってHOC（colorizeElement）を作成します。次に、そのHOCを使って、次のように新しい青色のボタンを作成します。
いいでしょう？
##10. React DevTools
React DevToolsは、ChromeとFirefoxで使えるブラウザ拡張機能で、FacebookのReact Core Teamが保守しています。2019年8月にバージョン4がリリースされました。この拡張機能は、あらゆるReact開発者にとって本当に便利です。
ReactやReact Nativeと相性がよく、Reactアプリで起こっていることを理解するのにとても役立ちます。
知らないかもしれませんが、AirbnbやNetflixなどの大企業はReactを使っています。React DevToolsがインストールされていれば、ブラウザのコンソールで彼らのサイト情報を見ることができます。
大企業がしていることを見るのはいつでもいいことです。同じことがRedux DevToolsにも当てはまります！
##ボーナス：React開発者に必須のVS Code拡張機能
さて、ここまでたどり着いたあなたに、ちょっとしたボーナスの時間です！React開発者に最適なVS Code拡張機能をいくつかご紹介します。
###ES7 React/Redux/GraphQL/React-Nativeスニペット
約400万件のダウンロード数を誇る、とても役に立つ拡張機能です。React、Redux、GraphQLのコードスニペットを大量に提供します。
###JestとJestスニペット
Jestと完全に調和し、より良いテストのためのスニペットを提供する2つの拡張機能です。
Typescript Reactコードスニペット
TypescriptとReactを使う時に役立つ拡張機能です。
これらはReact開発に特化した拡張機能ですが、より一般的なものも使うべきです。フロントエンド開発者向けVS Code拡張機能10選、2021年にフロントエンド開発者が学ぶべき10のことという記事を書きましたので、そちらもぜひご覧ください！
##おわりに
さて、今回の記事はこれで終わりです。始めたばかりの人も、経験豊富な人も、より良いReact開発者になるための知見を得られたなら嬉しいです。
記事を気に入ったらTwitterでフォローしてください。
プログラミング、制作、執筆、キャリアについてもっと学べます🥰
##翻訳協力
この記事は以下の方々のご協力により公開する事ができました。改めて感謝致します。
Original Author: Simon Holdorf (@simonholdorf)
Original Article: 10 Tips and Tricks That Will Make You a Better ReactJS Dev
Thank you for letting us share your knowledge!
選定担当: @gracen
翻訳担当: @gracen
監査担当: -
公開担当: @gracen
##ご意見・ご感想をお待ちしております
今回の記事はいかがでしたか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。
頂いたお声は、今後の記事の質向上に役立たせて頂きますので、お気軽に
コメント欄にてご投稿ください。Twitterでもご意見を受け付けております。
皆様のメッセージをお待ちしております。