LoginSignup
289
340

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-11-21

本記事は、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)を配列で返します。また、配列の破棄を使って、valuesetValueにアクセスします。

関数コンポーネントは、デフォルトではライフサイクルメソッドにアクセスできません。しかし現在は、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でもご意見を受け付けております。
皆様のメッセージをお待ちしております。

289
340
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
289
340