EY-Office ブログ

コンピューター関連の良書を出版しているオライリーから来春に出版される Fluent React のアーリーリリースが、現在10日間無料で読めます❗

Fluent Reactは、Reactバージョン18の機能や内部構造、SSR/useTransitionなどの最新のトピックに付いて詳しく書かれた、React中級者向けの書籍です。

もちろん英語ですが、現在は優秀な翻訳サービスやAIサービスがあるので、英語が苦手な方も読んで欲しいです。そして来春に出版されたら購入して欲しいです。

https://www.oreilly.com/library/view/fluent-react/9781098138707/ より

目次と概要

1. The Entry-level Stuff
   • なぜReactが生まれたのか
   • React以前のフレームワーク/ライブラリーに付いての解説
   • Reactの価値・位置づけ
2. JSX
   • JSXの原理に付いての詳しい解説
   • JSXのデザインパターン
3. The Virtual DOM
   • DOM操作の問題点
   • 仮想DOM(Virtual DOM)の仕組みを詳しく解説
4. Inside Reconciliation
   • React16以前のレンダリングの問題点
   • React16で実装され、18で正式に採用された並行処理機能（Fiber）の詳しい解説
5. Common Questions and Powerful Patterns
   • メモ化(useMemo)の解説
   • 遅延ローディング(Lazy Loading)
   • useStateとuseReducerの比較
6. Server-Side React
   • クライアントサイド・レンダリングの問題点
   • サーバーサイド・レンダリングの概要、Hydrationなど
   • サーバーサイド・レンダリングの実装例
   • Reactの持つサーバーサイド・レンダリング用API
   • サーバーサイド・レンダリングまとめ、Next.js等のフレームワークの推奨
7. Async React
   • React並行処理機能のアプリから見た解説
   • 再び並行処理機能の実装の解説(Render Lanes)
   • useTransitionに付いての解説
   • useDeferredValueに付いての解説
   • useTransitionとuseDeferredValueの比較
8. Frameworks
   • フレームワークが必要な理由
   • フレームワークのメリット/デメリット
   • 人気フレームワークの解説
     • Remix
     • Next.js
   • フレームワークの選択方法
   • Reactの最新情報の入手方法

感想

JSXのデザインパターン

JSXの章には、JSXというかReactコンポーネントのデザインパターンに付いて書かれています。はじめてJSXのデザインパターン一覧を見ました❗
ここに登場するパターンは、Reactを長年書いている人は、ああ！このパターン書いたなぁ〜と感じると思います。

デザインパターンの重要性の1つはパターンに名前（パターン名）を付ける事だと思います。 この名前が一般化すると、プログラマー同士の会話で「このコンポーネントはChildren as a Functionで作ってね」などとコミュニケーションが円滑になります。

ここに登場するデザインパターンには以下のものがあります

• Presentational/Container Components
• Higher Order Components
• Render Props
• Children as a Function
• Control Props
• Prop Collections
• Prop Getters
• Compound Components
• Context Module

React18の並行処理機能の詳しい解説

以前はReact Fiberと呼ばれていたReactの新レンダリング機構は、React16で実験的に実装されましたがデフォルトでOFFになっていました。その後React17で十分にデバッグされ、React18で正式なレンダリング機構として採用されました。

この書籍では、4章のInside Reconciliation、7章のAsync Reactを使い、実装にまで入り詳しく解説しています。
以前このブログでReact18の紹介でフンワリとした解説を書きましたが（ → Suspense 、 Concurrent Mode 、 Automatic batching）、本書では深いレベルで並行処理機能について解説されています❗

ただし図が少なく文章中心で、判りやすいのかと言われると少し疑問だと思います。

Server-Side React, Next.js, Remixの詳しい解説

このブログでも何度も取り上げていますが、React18に導入されたReact Server Components(RSC)は、今後のReactの世界を大きく変えて行く可能性があります。

6章のServer-Side Reactでは、サーバーサイド・レンダリングを実装したコードを通して学び、 8章のFrameworksは、Next.js, Remixのサンプルコードを通してフレームワークを解説しています。

これを知ることは、React Server Components時代への羅針盤になると思います。

React以前のライブラリー等の歴史がわかる

歴史好きには、1章にあるReact以前のフレームワーク/ライブラリーに付いての解説があるのは嬉しいです。😃
素のJavaScript, Backbone, KnockoutJS, jQuery, AngularJSに付いてサンプルコードで解説し、メリット・デメリットを解説しています。

私のフロントエンド歴は、jQueryに始まり次はReactなので、Backbone, KnockoutJS, AngularJSの概要が知れるのは嬉しいです。

まとめ

この本は、React初心者向けではありません。何度か仕事でReactを使って初歩的な事はわかったつもりだがモヤモヤがあり、Reactの仕組みをもっと知りたいと思っている中級者には良い本だと思います。
また、現在のReact18の新機能を深く理解するためにも役に立つ書籍だと思います。

私も英語は得意ではありませんが、DeepLのおかげで、この本を読むことができました。 DeepLさん、ありがとうございます。🙇‍♀️