Reactを使ってプロダクト開発している開発者だけでなく、マネージャにも読んでほしい「Fluent React」

チームでReactを使って開発していると、コードレビューをする際に、「この書き方はしない方がいいが、それを説明するには800文字くらい必要。図も描きたい。でもそれらを準備する時間はない。」ということが度々ありました。

また、フレームワークやライブラリの技術選定をする際、マネージャに「どうして技術選定が必要なのか」を説明する必要がありました。ROUTE06のマネージャはエンジニアリングへの造詣が深い方が多いので、対立構造になることはありませんが、説明するためには1000文字くらい必要で、やはり図も描きたい。時間はない。と同じ気持ちになることがありました。

参考情報として紹介できる情報がないか探してみると、「とりあえずこうすればOK」というベストプラクティスについては検索エンジンやSNSですぐに見つかります。ただ、どうしてその方法がベストプラクティスなのか、仕組みや原理を説明している情報は少なかったり、前提する情報が多く、そのまま紹介するのは難しいことが多かったです。

余談ですが、もちろんベストプラクティスを使うことは悪いことではないと思っています。ただ、「ベストプラクティスだから」というという理由で仕組みをわからずに使っていると、前提となる状態が変わった時に判断を誤ることがあります。

Oreillyから出版された「Fluent React¹」は、そういった状況に対して、役立つ情報を提供してくれると感じたのでこのブログで紹介します。

チャプターの内容

全部で11チャプターあり、Reactを使っている開発者には全てのチャプターに学びがある内容だと思います。さらに、コードを書いていないマネージャが読むことで、Reactを使ったアプリケーション開発を進める際によく課題になったり、議論になるところの理解を深められる内容でした。

私の主観ですが、チャプターごとに開発者向け、マネージャー向けをまとめると以下のようになりました。例えば、「どうしてNext.jsやRemixのようなフレームワークが必要になるのだろう。Reactだけじゃダメなんだろうか？」という疑問がある場合はチャプター8を読むと解決すると思います(もしくは、理解が深まった上で新たな問いが生まれると思うので、開発者と議論すると良いと思います)。

チャプター	タイトル	開発者抜け	マネージャー向け
1	The Entry-Level Stuff	✅	✅
2	JSX	✅
3	The Virtual DOM	✅
4	Inside Reconcilation	✅
5	Common Questions and Powerful Patterns	✅
6	Server-Side React	✅	✅
7	Concurrent React	✅
8	Frameworks	✅	✅
9	React Server Components	✅	✅
10	React Alternatives	✅
11	Conclusion	✅	✅

チャプターごとの概要は以下の通りです。

チャプター1

「どうしてReactが必要なのか」という問いから始まり、React以前のウェブアプリケーション開発方法や、その時に使われていたライブラリやフレームワークについてコード例を示しながら問題点を示し、Reactがどうやって解決しようとしたかがまとめられています。
チャプター2

「JSXのXとは」というという問いから始まり、JSXを使うことのメリット、デメリットや、JSXで書いたコードがどうやってブラウザで動くのか、といったことがまとめられています。
チャプター3

「Virtual DOM」について、ウェブアプリケーションに求められる複雑性にDOMでは対応できなくなった理由を示した上で、Virtual DOMがどうやってその問題を解決しようとしたかがまとめられています。
チャプター4

「Reconciliation(差分検出)」について、ReactDOM.createRoot(element).renderが何をやっているのかを追いかけながら説明されています。
チャプター5

「Common Questions and Powerful Pattern」です。ここでは、Reactを使ってアプリケーション開発しているときによく遭遇する課題に対する考え方と、よくあるユースケースに対応するための実装手法がまとめられています。この章の内容は後ほど詳しく紹介します。
チャプター6

「サーバーサイドレンダリング」の必要性について、クライアントサイドだけで実装する時に制約を示した上で解決方法をまとめています。
チャプター7

「Concurrent React(並行処理機能)」について、同期処理での問題点を示した上で非同期処理機能の仕組みがまとめられています。また、非同期処理機能を使うときに気をつけるべき点についても紹介されています。
チャプター8

ここでようやく「Framework」が登場します。「どうしてフレームワークが必要なのか？」という問いに答える形で、まず、これまでのチャプターの内容を踏まえながら自分たちでフレームワークを作ります。その後、フレームワークを導入するメリット、デメリットと、よく使われているフレームワークとしてRemixとNext.jsが紹介されています。また、フレームワークを選定する際に考えるべきポイントも紹介されています。
チャプター9

「React Server Components(RSCs)」について25ページに渡って詳しく説明されています。RSCsは概念が難しく、これまでにも国内外で色々な解説がされていますが、前提とする知識が多いのでよくわからなかった人も多いかもしれません。チャプター2でJSXを理解し、チャプター6でサーバーサイドレンダリングを理解した後にこのチャプターを読むと、だいぶ理解しやすいと思うので、RSCsを使ってプロダクト開発をする際にはチームメンバーで読むといいなと思いました。
チャプター10

「React Alternatives」として、Vue, Angular, Solid, The Qwik framework, Svelteが紹介されています。それぞれのライブラリやフレームワークがUIを構築するためにReactと異なるどういうアプローチを取っているのかを知ることで、必要であればそれらのライブラリやフレームワークを選択できるようになると思います。
チャプター11

「Conclusion(まとめ)」というタイトルですが、まとめは半分で、残りの半分は筆者の技術に対する向き合い方みたいなものが書かれています。とても良い内容でした。

チャプター5「Common Questions and Powerful Patterns」の紹介

チャプター5は、一番即効性のある内容が詰まっていると思いました。以下のセクションに分かれており、気になるキーワードがあればそのセクションだけ読んでもすぐに活かせるし、前のチャプターを読むことでより深い理解を得られると思います。コードレビューの時の説明にも引用できる文章がたくさんありました(チームメンバー全員が持っていればページ数を言うだけでいいかもしれません)。

Memoization with React.memo
- Getting Fluent in React.memo
- Memoized Components That Still Rerender
- It’s a Guideline, Not a Rule
Memoization with useMemo
- useMemo Considered Harmful
- Forget About All of This
Lazy Loading
- Greater UI Control with Suspense
useState Versus useReducer
- Immer and Ergonomics
Powerful Patterns
- Presentational/Container Components
- Higher-Order Component
- Render Props
- Control Props
- Prop Collections
- Compound Components
- State Reducer