Professional React Development
- 2022年に最も普及するReactの技術スタック
- Screaming Architecture - Reactのディレクトリ構成を進化させる
- プロフェッショナルなReactプロジェクトの立ち上げ方
- React開発者のためのGitワークフローとGitHubセットアップ
(こちらの記事の和訳です)
React開発者としてのキャリアをスタートさせたいなら、難しい決断に迫られる。次のプロジェクトでは、どのライブラリとツールを使うべきでしょうか。Reactのエコシステムは巨大です。常に新しいハイプがあり、あまりにも多くの矛盾した意見があります。どうしても混乱する...
しかし、決断は簡単です。最も人気のあるライブラリやツールに焦点を当てるのです。これらは、実際のプロジェクトでも広く使われている可能性が高い。こうすることで、あなたの技術スタックが仕事の要件に合致する可能性が高まります。
ただ問題なのは、その技術スタックとは何なのか？おそらくご想像の通りです。その答えはこのページにあります。
この記事では、Reactコミュニティで使用されている最も重要なライブラリとツールのリストを提供します。やや客観的なリストです。一人の意見ではなく、ダウンロードの統計、調査、コミュニティの議論に基づいています。
方法論に関する簡単なメモ
この記事で使用している主なデータソースは、npmの週間ダウンロード統計です。
確かに、これは理想的なデータソースではありません。ダウンロードのほとんどはCIパイプラインが原因です。しかし、誰がどの程度貢献しているかは不明です。チームによってはCIを導入し、頻繁に新しいパッケージをダウンロードするところもある。また、キャッシュを使用して、npmから何かをダウンロードする必要がほとんどないチームもあります。
とはいえ、ダウンロード統計は、現在私たちが持っている最も客観的できめ細かい人気度測定のひとつです。特に、異なるパッケージを相対的に比較するために利用する場合は、なおさらです。
State of JS調査、コミュニティ投票、議論などの他のデータソースと組み合わせることで、Reactエコシステムで最も人気のある選択肢の確かな概要を得ることができるのです。
1. 最も人気のあるReactライブラリ
ネットのコミュニティを見ていると、こんな質問を頻繁に見かけます。
- 「Next.js vs Gatsby vs Remix? 私のプロジェクトにはどちらを使うべきか」
- 「プロジェクトでReduxを使うべきか？」という問いに対して、「Contextを使えばいい」という意見から「Zustandの方がずっといい」という意見まで、さまざまな意見がありました。
これは非常にわかりにくいことです。そこで、この最初のセクションでは、状態管理、フォーム、スタイリングなどのさまざまなユースケースについて、最も重要なライブラリの概要を説明します。
Next.js (最も人気のあるReactフレームワーク)
ソース: npmtrends.com, 2022年1月
Next.jsが明確な選択であることがわかります。Gatsbyは停滞しているように見えるが、Remixは（現在の誇大広告にもかかわらず）まだごく初期の靴である。おそらく、当分の間、Remixが使われている仕事を見つけるのは難しいでしょう。
Next.jsの週間ダウンロード数が2Mと高いのは興味深い。React自体の週間ダウンロード数が1400万であることと比較してみてください。つまり、NextはReactアプリを作るためのフレームワークとして定着してきたということです。
それは驚くことではありません。Next.jsは、サーバーサイドレンダリングやコード分割のような多くの利点を、複雑なWebpackのセットアップなしで提供します。非常に成熟しているので、実運用で使っても安全です。
Next.js vs Create-React-Appでプロジェクトを始めるという議論でのこのコメントがすべてを物語っています。
(訳：SEOを重視するならnextJSを、そうでないならnextJSを。)
Redux (最も人気のあるReactの状態管理ライブラリ)
ほんの数年前まで、状態管理の標準は間違いなくReduxでした。最近では、Reduxに不満を持ち、ZustandやJotaiのような他のライブラリを推奨する人が増えているようです。
ソース: npmtrends.com, 2022年1月
しかし、ダウンロードの統計は、違う絵を描いています。Reduxは圧倒的に最も使われている状態管理ライブラリだ。この投票が示すように、ネイティブのContext APIだけがそれに近いようだ。
また、投票の下にあるコメントから、Reduxが特にプロの世界で浸透していることがわかります。
近年は、多くの議論や「State of JS 2020」調査の満足度を見ればわかるように、Reduxに対する不満が多くなってきているようです。
否定的なコメントの多くは、Reduxの古いバージョンに起因しています。現在では、Redux Toolkit（RTK）を使用することが推奨されています。なぜなら、セットアップがはるかに簡単で、多くの定型句が削除されているからです。データ取得のためにRedux Toolkit Queryと組み合わせることもできます。
上のグラフで2番目にダウンロードされたパッケージになっているように、RTKの採用は急速に増えているようです。Reduxで作られたWebサイトの6つに1つはRTKを使用しているようです。
react-query または Apollo (人気のある React フェッチライブラリ)
ソース: npmtrends.com, 2022年1月
この統計によると、データ取得に関してはApolloが最も人気のある選択肢のようです。ここでは省略したが、レガシーバージョンであるapollo-clientのダウンロードも毎週1Mほどある。
Apolloの問題点：GraphQL APIのために作られていること。
そこで登場するのがreact-queryです。これは比較的新しいライブラリで、急速に勢いを増している。開発者の間でとても人気があり、あらゆる種類のAPIに接続するために使用することができる。キャッシュやリトライなど、多くの一般的なユースケースを処理することができる。
react-queryの方が汎用性が高いので、データ取得のためのライブラリとしてはこちらをお勧めします。でも、GraphQLを使うならApolloも見てみてください。
あなたのアプリがすでにRedux Toolkitを使用している場合、理にかなっている注目すべき第3のオプションがあります。RTK Queryです。これはreact-queryと同様の機能を持ち、@redux/toolkitパッケージに含まれています。これは独立したパッケージではないので、ダウンロード数は上のグラフには表示されておらず、どの程度広く使われているかはわかりません。
要約すると、Mark Erikson氏（Reduxのメンテナの一人）のコメントが参考になります。
何を使うにしてもデータ取得のコードを手書きで書かないことをお勧めします。すでにReduxを使っているなら、RTK Queryを使うべきでしょう。Reactだけを使っているのであれば、React Queryを見るべきでしょう。
React Hook Form (最も人気のあるReactのフォームライブラリ)
ソース: npmtrends.com, 2022年1月
純粋にダウンロード数だけを見ると、最も普及しているフォームライブラリはFormikで、React Hook Formがそれに続いています。しかし、後者が急速に採用数を伸ばしているのは明らかです。
この議論や他の議論でReact Hook Formが愛されていることから判断すると、明確な選択であると言えます。
(訳：とてもシンプルで軽く、生産に適しています。私はFromikや他のフォームライブラリよりも、常にこれを使いたいと思います。)
注意
必ずしもフォームライブラリが必要なわけではありません。多くの単純なフォームは、SwyxやJosh W. Comeauが提案するように、状態管理なしで処理することができます。
Styled-ComponentsまたはMUI (最も人気のあるReact UIライブラリ)
この世論調査によると、プロの世界のおよそ半分がコンポーネントライブラリを使い、残りの半分がカスタムCSSを書いている（下の2つの棒グラフを合わせたもの）そうです。
MUIのようなコンポーネントライブラリは柔軟性に欠けると不満を言う開発者もいれば、車輪の再発明は意味がないと述べる開発者もいる。しかし、製品をコンポーネントライブラリで構築するかどうかは、常にカスタム設計と実装・保守のコストとのトレードオフの関係にあるのです。
投票の下のコメントによると、最も使われているライブラリは、styled-components（カスタムスタイル用）とMUI（コンポーネントライブラリとして）であるようです。ダウンロード数と比較してみましょう。
まず、CSS-in-JSの代表的な2つのソリューションを紹介します。
ソース: npmtrends.com, 2022年1月
カスタムスタイルについては、CSS-in-JSのソリューションが以前から増えていて、styled-componentsが最も人気があり、Emotionも急速に普及しています。どちらも非常によく似ているので、どちらを選んでも問題ありません。もし、すべてのコンポーネントを一から作りたくない場合は、Headless UIのようなヘッドレスコンポーネントライブラリと組み合わせてカスタムスタイルを使用することができます。
ソース: npmtrends.com, 2022年1月
コンポーネントライブラリの中では、MUI（旧Material UI）が最も普及しているようです。なお、最近Material UIからMUIに名称が変わったので、緑と黄色の線を追加する必要があります。
CSSを学ぶか、コンポーネントライブラリを学ぶか、どちらかを選ばなければならないのであれば、個人的にはこのコメントが正しいように思います。
(訳：私が10年以上働いてきた職場では、ほとんどの場合、独自のUI開発部門が独自のコンポーネント・ライブラリを構築していました。フレームワークやライブラリには移り変わりがありますが、しっかりとした基礎はいつまでもあなたの手元に残ります。)
2. Reactで使用される最も一般的な開発者向けツール
ほとんどのプロフェッショナルチームは、IDEやCIパイプラインでツールを使用して、バグを早期に発見し、コードの品質/可読性を高めています。ここでは、最も重要なツールのダウンロード数を紹介します。
ソース: npmtrends.com, 2022年1月
TypeScript、Prettier、ESLintは、ダウンロード数に関してどれも同じようなレベルであることがおわかりいただけると思います。これらのツールはJSコミュニティ全体で使用されており、Reactコミュニティに限定されないことに注意することが重要です。
以下、それぞれのツールについて簡単に説明します。
Prettier(コードフォーマット用)
Prettierは、意見交換型のコードフォーマッターです。何年も前から存在し、広く使われている。このPrettierのプレイグラウンドのスクリーンショットを見ればわかるように、本当に醜いコードを書いても、Prettierはそれをきれいに見せてくれます。
コードフォーマッターを使うことで、チーム内のすべての開発者が一定のコードスタイルに従うことが保証されます。その結果、コードの一貫性が高まり、可読性も向上します。
簡単に使えるので、個人プロジェクトでも採用することをお勧めします。エディターの「保存時に書式設定する」機能にも取り付けられます。
ESLint(問題点を把握するため)
ESLintのようなリンターは、あなたのコードを静的に分析し、問題のあるパターンを検出し、ベストプラクティスを実行します。ESLintは、あなたのコードがバグを含んでいることを、リリースする前にあなたに警告することができます。この例のように。
ESLintは非常にカスタマイズ性が高いです。しかし、人気のあるプリセットを使い、標準的なものに従う方が良いでしょう。
どのプリセットを使えばいいのか？Airbnbが長い間デフォルトでしたが、多くの人はそれがあまりにも規定的だと感じています。むしろデフォルトのeslint:recommendedの設定とPrettierを組み合わせて使うことをお勧めします。
TypeScript（型チェック用）
TypeScriptは、プロの世界でも広く採用されています。その指標となるのが、State of JS 2020の調査における利用率だ。参加した開発者の78%がTSを使用したことがある。
Reactコミュニティは、TypeScriptの学習に関するこの議論にあるように、TS側でかなり結束しているようです。
(訳：はい、覚えてください。そして一度慣れたら、あなたのreactプロジェクトをすべてTypeScriptに変換したくなるはずです)
個人的には、最近、TypeScriptに触れないReactの求人情報はほとんど見かけません。これは、仕事を得るための必須条件（特にジュニア開発者）という意味ではなく、TSが企業の技術スタックにおける一般的なツールであることを意味しています。
この採用の理由は、TypeScriptはコードを書きながら、そのコードの問題を検出するのに役立つからです（ESLintと似ています）。しかし、ESLintが規約や問題のあるパターンを見つけることに重点を置いているのに対して、TSはもう少し深いところまで踏み込んでいます。この例を見てください。
ESLintにとっては、これは問題ないように見えます。しかし、数値はtoUpperCaseメソッドを持っていないので、明らかに間違っています。このコードは私たちのリンターを通過し、バグを発生させるでしょう。
TypeScriptは変数の型をチェックする。TypeScriptはtextが数値であることを知っている（そして名前が示すように文字列ではない）。そのため、text.toUpperCaseという関数が存在しないと文句を言う。
3. 最も人気のあるReactのテストフレームワークとツール
ESLintとTypeScriptは、コードを静的に解析することで、バグに対する最初のセーフガードとなります。自動化されたテストは、3番目のセーフガードです。
自動化されたテストは、アプリの機能が正しく動作することを保証します。これは特にリグレッション（既存のコードを変更することで発生するバグ）を防ぐのに有効です。
一見すると、テスト環境は細分化されているように見えます。State of JS 2020の調査による、各テストライブラリの利用比率です。
一見するとかなりの数に見えますが、ユースケースごとにグループ化して比較することができます。
・テストフレームワーク：JestとMocha vs Jasmine
・Reactコンポーネントをテストするためのユーティリティライブラリ：React Testing Library vs Enyzme
・エンドツーエンドのテスト：Cypress vs Puppeteer vs Playwright
・UIテストとドキュメント作成：Storybook
Jest (最も人気のあるReactのテストフレームワーク)
ソース: npmtrends.com, 2022年1月
ご覧の通り、JestはJSのテスト環境において最も使用されているテストフレームワークです。Reactのコミュニティに絞れば、Jestはさらに優位に立つと思われます。私自身は、Jestの代わりにJasmineやMochaを使っているReactのプロジェクトを知りません。
Jestは、主にビジネスロジックなどのユニットテストや、React Testing Libraryなどのユーティリティライブラリと組み合わせた基礎的なテストフレームワークとして使用されます。
React Testing Library (最も人気のあるReact統合テストライブラリとして)
ソース: npmtrends.com, 2022年1月
2020年からの調査では、Testing Libraryの使用率は低いものの、ダウンロードの統計によると、Reactのテストに適したライブラリとして明らかに引き継いでいます。このコメンターはそれをうまく指摘しています。
(訳：React Testing Liraryをチェックしてみてください。Reactのテストのコミュニティスタンダードになりつつあります。)
React Testing Libraryは、統合テストを書くために使用します。つまり、すべてのコンポーネントを単独でテストするのではなく、システム（例えば、ページやより大きな親コンポーネント）と統合してテストするのです。Reactアプリケーションのほとんどのテストは、一般的に統合テストです。
注意：テストの種類についてもっと知りたい方は、Kent C. Dodds氏のブログ記事をご覧ください。
Enzymeと呼ばれるReact Testing Library（RTL）の前身は、まだ使われているにもかかわらず、もう死んでしまった。Enzymeのテストはまだたくさん残っていますが、今後、より多くのプロジェクトが新しいバージョンのReactにアップデートされれば、その使用量は減少していくでしょう。
Cypress（最も普及しているend-to-endテストツールとして）
ソース: npmtrends.com, 2022年1月
end-to-end テスト (e2e-tests) は、フロントエンドからデータベースまで、システム全体をテストするために使用されます。これらのテストは、すべてが一緒に動作することを保証します。
ダウンロード統計によると、e2e-testsのための最も人気のあるツールはCypressで、Puppeteerが最も近い競争相手です。私は個人的に、多くのチームが Cypress を採用するのを見てきましたし、非常にお勧めできます。ブラウザでテストを見ることができ、すべてのステップをタイムトラベルすることができます。このため、Cypressは、テストを始めたばかりの人にとって素晴らしい選択肢となります。
Storybook (最も人気のあるReact UIテストおよびドキュメント作成ツール)
Storybookは基本的にライバルがいないので、React Testing LibraryとCypressを追加して、実社会での使用頻度を説明しましょう。なお、StorybookとCypressはフレームワークに依存しない。
ソース: npmtrends.com, 2022年1月
Storybookのダウンロード数は、Cypressのそれよりもさらに高い。Storybookの競合であるreact-styleguidistは、基本的に存在しないに等しい。そして、そのウェブサイトによると、多くの有名企業が利用している。
Storybookがどんなものなのか気になりますよね。
大規模なアプリでは、何千ものコンポーネントを使います。そのため、概要を把握するのは本当に難しく、重複のリスクも高まります。この問題を解決するのがStorybookです。Storybookを使えば、コンポーネントを分離して作成し、別の環境で実行することができます。UIからプロップスやスクリーンサイズを変更するなどして、簡単にテストすることができます。
4. 最も人気のあるReact開発者のワークフロー
トランクベース開発（共同作業のためのGitワークフロー）
特定のツールやライブラリを除けば、ほとんどすべての開発チームは、バージョン管理、コラボレーション、そしてリント、タイプチェック、テストなどのツールを自動的に統合するためにGitに依存しています。
世の中には、さまざまなGitワークフローがあります。数年前、私はほとんどGit Flowのことを聞いていました。しかし、今では本家の作者でさえ、彼のウェブサイトでほとんどのウェブアプリにGit Flowを使うことを勧めています。
ウェブアプリは通常、継続的に配信され、ロールバックされることはなく、また、複数のバージョンのソフトウェアが野放しになっているのをサポートする必要もありません。(中略）もしあなたのチームがソフトウェアの継続的デリバリーを行うのであれば、git-flowをあなたのチームに組み込もうとするのではなく、もっとシンプルなワークフロー（GitHub flowなど）を採用することをお勧めします。
私の経験では、トランクベース開発は、Webアプリを構築しているプロのチームで使われている最も一般的で人気のあるGitワークフローです（残念ながら、数字に基づくことはできませんが）。上の引用文にある GitHub Flow と非常によく似ています。要するに、次のような仕組みです。
- メインブランチから新しいブランチを作成します。
- このブランチにコードをコミットし、リモートリポジトリ(例：GitHub)にプッシュします。
- リモートリポジトリで Pull Request (Merge Request) を開く。
- リンター、タイプチェック、テストを実行します。
- チームメンバーにコードをレビューさせる。
- ブランチをメインブランチにマージします。
私の無料講座では、ボットでマインスイーパーをしながら、トランクベースの開発／GitHub Flowを学び、体験することができます。
ステップ4は、継続的インテグレーション（CI）ツールを使って自動化します。最近では、GitHub ActionsがGitHubと簡単に連携できるため、人気が出てきているようです。
CIとコードレビューの目的は、リリース前にできるだけ多くのバグを捕らえ、コードの可読性、一貫性、品質を向上させることです。
まとめ：Reactの上級学習コース
Reactの基本を学んだら、あとはプロジェクトを作ってスキルを上げるのが一番です。上記のツールやライブラリのリストを使って、プロのようにプロジェクトに取り組むことで、時間を最大限に活用することができます。
ここで、次のプロジェクトの技術スタックについて提案します。
1. トランクベース開発を学ぶ
開発ワークフローの基礎として、Trunk Based Developmentについて学び、プロジェクトで活用しましょう。私の無料コースでは、ボットでマインスイーパーをプレイすることで、最初のハンズオンを体験することができます。1時間か2時間程度で終わります。
2. Next.jsを使用する
npx create-next-app@latestを実行して、Next.jsでプロジェクトをセットアップします。Next.jsはReactの周りにいくつかの便利な機能を追加しますが、始めるのはかなり簡単です。他のReactコンポーネントと同じように、pagesフォルダにあるページを編集したり追加したりするだけで、必要なときに段階的に高度な機能を学ぶことができます。もし、もう少し詳しい説明が必要であれば、この公式チュートリアルを参考にしてください。
3. オプションで TypeScriptを使用する
ジュニア開発者にTypeScriptの知識は求められないと思います。しかし、TypeScriptをある程度知っている、あるいは試してみたいという方は、npx create-next-app@latest --typescriptでプロジェクトを初期化します。
個人的な意見ですが、すでに多くのことを抱えているのであれば、無理にTSを学ぶ必要はないでしょう。最初のうちは、TSを使うのはかなり面倒だし、スピードもかなり落ちる。もし、既存のTSプロジェクトに携わっているのなら、他の開発者の型定義を覗いて、彼らに助けを求めることができるので、習得するのはずっと簡単です。
4. ESLintを使用する
Next.jsにはESLintがプリインストールされています。デフォルトのnext/core-web-vitalsに加えて、eslint:recommendedを追加すると、ある程度厳しいルールが設定できるかもしれません。
5. Prettierを使用する
最初からきれいなコードフォーマットに慣れることができます。ここでは、Next.jsのアプリでPrettierとESLintを併用する方法を説明します。
6. styled-componentsかMUIを使用する
少なくとも1つのプロジェクトでは、カスタムスタイルを書いて、CSSのスキルを磨いてください。
デフォルトのNext.jsアプリは、そのままCSSモジュールを使用します。すでに学ぶべきことがたくさんあるのなら、それを使い続けることができます。そうでなければ、styled-componentsを試してみてください。
コンポーネントライブラリを使うなら、最も普及しているMUIを選ぶとよいでしょう。
7. Cypressでテストを書く
React Testing LibraryかCypressを使って、最低でもいくつかのテストを書いてください。そうすることで、他のジュニア開発者と差をつけることができます。
TypeScriptと同様、テストを書き始めるのは残念ながら大きな苦痛を伴います。Cypressには、ここにいくつかの利点があります。React Testing Library (RTL)と比較した場合
・セットアップが少なくて済む（アプリを起動し、テスト用のURLにアクセスするだけでよい）
・テストのデバッグを直感的に行える、優れた機能をたくさん備えています。
例えば、ブラウザ上でテストの実行を見たり、各ステップをクリックしてタイムトラベルしたりすることができます。React Testing LibraryのAPIを既に知っている場合は、上からCypress Testing Libraryを使うことも可能です。
Reactアプリのテストは通常RTLで書かれることが多いのですが、初めてテストをする場合はCypressで始めるのが理にかなっているかもしれません。
8. オプションで Reduxを使用する
あなたのアプリケーションがグローバルな状態を持つ場合、Reduxを追加します。ポートフォリオ用のプロジェクトや、単に練習用として構築するのであれば、何も考えずにReduxを使うことができます。Reduxは実世界のアプリで広く普及しているので、いずれにせよ実地経験を積むことは有用です。一方、本番アプリを作りたい場合は、このアドバイスを検討した方が良いでしょう。
9. オプションでStorybookを使用する
多くのプロジェクトで使用されているため、あなたのプロジェクトにStorybookを追加することは理にかなっています。間違いなくプロフェッショナルなタッチを加えることができます。そしてそれは、採用担当者に好印象を与えるかもしれません。
テストと同様、コツをつかむために、いくつかの簡単なコンポーネントをドキュメント化することで十分です。