流暢なReact

序文

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

本書はReactの使い方を学びたい人向けではない。Reactに馴染みがなくチュートリアルを探しているなら、react.devのReactドキュメントから始めるのがいいだろう。その代わり、本書は好奇心旺盛な人向けだ。Reactの使い方にはそれほど興味がないが、Reactがどのように機能するのかには興味がある人向けだ。

Reactを使ったアプリケーションをより効果的に作成するために、Reactの概念とその基礎となるメカニズムを理解する。基礎となるメカニズムを理解することで、Reactとそのエコシステムについて忠実に推論するために必要なメンタルモデルを開発する。

ブラウザはWebページをレンダリングする。Webページとは、CSSでスタイルを設定し、JavaScriptでインタラクティブにしたHTML文書のことである。また、Reactの使い方にある程度慣れていて、Reactアプリを1つか2つ作ったことがあることも前提にしている。理想的なのは、Reactアプリのいくつかが本番稼動していることだ。

まずはReactの紹介から始め、その歴史を振り返り、Reactが初めてオープンソースソフトウェアとしてリリースされた2013年まで遡る。そこから、コンポーネント・モデル、仮想DOM、リコンシリエーションを含むReactの中核概念を探る。JSXがどのように機能するかというコンパイラー理論に飛び込み、ファイバーについて語り、その並行プログラミング・モデルを深く理解する。このようにして、React.memo やuseTransition のような強力なプリミティブを通して、より流暢にメモすべきものをメモし、遅延させるべきレンダリング作業を遅延させるのに役立つ強力なヒントを得ることができるだろう。

本書の後半では、Reactフレームワークについて、どのような問題を解決し、どのようなメカニズムで解決するのかを探っていく。ほぼすべてのウェブ・アプリケーションに共通する3つの重要な問題、つまり、サーバ・レンダリング、ルーティング、データ・フェッチを解決する独自のフレームワークを書くことで、それを実現する。

これらの問題を自分たちで解決すれば、フレームワークがどのように解決するのかを理解することが、より身近なものになる。また、React Server Components（RSC）やサーバアクションについても深く掘り下げ、バンドルラーや同型ルータといった次世代ツールの役割についても理解する。

最後に、Reactからズームアウトし、Vue、Solidity、Angular、Qwikなどの選択肢を見ていく。Reactの粗いリアクティビティ・モデルとは対照的に、シグナルときめ細かいリアクティビティについて探求する。また、Reactのシグナルに対するレスポンス、つまりForgetツールチェーンと、シグナルと比較した場合のReactのスタックについても探る。

これ以上時間を無駄にするのはもったいない、さっそく始めよう！

本書で使用されている慣例

本書では、以下の表記規則を用いている：

イタリック体

新しい用語、URL、メールアドレス、ファイル名、ファイル拡張子を示す。

Constant width

変数名や関数名、データベース、データ型、環境変数、ステートメント、キーワードなどのプログラム要素を指すために、プログラムリストや段落内で使用される。 ...