流暢なReact

第8章. フレームワーク

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

これまでのReactの旅（ ）では、Reactのパワーと汎用性に貢献する幅広い機能と原則を発見してきた。前章では、非同期 Reactの魅力的な世界を掘り下げた。Reactは、useTransitionやuseDeferredValue のようなツールによって、高度にレスポンスに優れたユーザフレンドリーなインタフェースを作成する力を与えてくれる。これらのツールが、ファイバー・リコンシラによって実現されたReactの洗練されたスケジューリングと優先順位付けのメカニズムをどのように活用し、最適なパフォーマンスを実現しているのかを探った。これらの非同期パターンを理解することは、本章でReactフレームワークの領域に踏み込む上で非常に重要である。

React単体でも非常にパワフルだが、アプリケーションが複雑化すると、似たようなパターンを繰り返したり、よくある課題に対してより合理的なソリューションが必要になったりすることがしばしば発見される。そこで登場するのがフレームワークだ。Reactフレームワークは、Reactの上に構築されたソフトウェア・ライブラリやツールキットであり、一般的なタスクをより効率的に処理し、ベストプラクティスを実施するための追加の抽象化を提供する。

なぜフレームワークが必要なのか

Reactは、インタラクティブなユーザインタフェースを作成するための構成要素を提供する一方で、多くの重要なアーキテクチャの決定を開発者に委ねている。Reactはこの点で独裁的であり、開発者が適切と考える方法でアプリケーションを構成する柔軟性を与えてくれる。 しかし、アプリケーションがスケールするにつれて、この自由が重荷に変わる可能性がある。ルーティング、データフェッチ、サーバ側レンダリングといった一般的な課題に何度も対処し、車輪の再発明に気づくかもしれない。

そこでReactフレームワークの出番だ。フレームワークは、あらかじめ定義された構造と一般的な問題に対する解決策を提供するため、開発者は定型的なコードに煩わされることなく、アプリケーションの独自性に集中することができる。フレームワークによって強制されるベストプラクティスを遵守することで、開発プロセスを大幅に加速し、コードベースの品質を向上させることができる。

これを完全に理解するために、独自の最小限のフレームワーク を書いてみよう。これを行うには、フレームワークから得られる主要な機能のうち、素のReactからは簡単には得られないものをいくつか特定する必要がある。簡潔にするために、フレームワークから得られる、これらの行に沿った3つの主要な機能を特定することにしよう。フレームワークにはもっと多くの機能があることは注目に値するが、このサブセットは素晴らしい議論の基礎を形成するのに役立つだろう：

• サーバのレンダリング

• ルーティング

• データ・フェッチ

フレームワークが何をしてくれるのかを理解するために、既存のReactアプリケーションを想定し、これらの機能をインクリメント的に追加してみよう。今回「フレームワーク化」するReactアプリは、以下のような構造になっている：

- index.js
- List.js
- Detail.js
- dist/
  - clientBundle.js

それぞれのファイルはこんな感じだ：

// index.js