流暢なReact

第10章. Reactの代替案

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

前の章では、React Server Components（RSC）という新たなトピックを深く取り上げた。RSCがどのように機能するのか、どのような場合に使用するのか、そしてなぜ次世代バンドルラーやルーターなどの強力なツールが必要なのかを探った。さらに、サーバ・コンポーネントとサーバ・レンダリングを区別し、基本的なメカニズムを理解するために、ゼロからRSCsレンダラーを実装した。

Reactに代わる選択肢を探るにあたり、フレームワークとサーバコンポーネントの役割と機能を理解することは、貴重な文脈を提供することになる。この章で説明する各ライブラリには、関連するフレームワークも同梱されており、Reactで説明した原則やトレードオフの多くは、これらのエコシステムにも適用される。

Reactとそのエコシステムから目をそらし、フロントエンド開発のエコシステムで人気のある代替案を掘り下げてみよう：Vue.js、Angular、Svelte、Solid、Qwikだ。Vue.js、Angular、Svelte、Solid、Qwikだ。それぞれのライブラリやフレームワークは、独自のリアクティビティ・モデルやUI開発に対する考え方を導入している。これらの異なるモデルを理解することで、視野が広がり、プロジェクトの問題を解決するツールが増える。

Vue.js

Vue.js Vue.jsは、ユーザインタフェースを構築するための人気のあるJavaScriptフレームワークである。AngularJSのプロジェクトに携わっていた元GoogleエンジニアのEvan Youによって開発されたVue.jsは、Angularの良い部分を抽出し、より軽量で保守しやすく、意見の少ないパッケージを目指している。

Vueの最も特徴的な機能のひとつに、控えめなリアクティブ・システムがある。コンポーネントの状態 は、リアクティブなJavaScriptオブジェクトで構成されている。それらを変更すると、ビューが更新される。これによって状態管理がシンプルで直感的になるが、よくあるゴチャゴチャを避けるためには、その仕組みを理解することも重要だ。

Vueのリアクティブ・モデルでは、オブジェクト・プロパティの読み取りと書き込みをインターセプトする。Vue 2では、ブラウザサポートの制限からゲッター／セッターのみを使用していたが、Vue 3では、リアクティブオブジェクトにはプロキシが使用され、refにはゲッター／セッターが使用される。Vueのドキュメントから、これらがどのように機能するかを示す擬似コードを紹介しよう：

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key)
      return target[key]
    },
    set(target, key, value) {
      target[key] = value
      trigger(target, key)
    }
  })
}

function ref(value) {
  const refObject = {
    get value() {
      track(refObject, 'value')
      return value
    },
    set value(newValue) {
      value = newValue