Reactを学ぶ前に歴史を知る

React は、どうして生まれたのか歴史について簡単に紹介します。(ちょっと調べただけ)

背景

最近、React を学び始めました。その過程で、どうして React って学ぶべきなのか、どういう特徴があるのか気になった次第です。

歴史

言語やフレームワーク問わず、何かしら学ぶ際には、学ぶ対象の歴史や背景を知ることは大切だと思います。

対象ソフトウェアの公式ドキュメントに、BackgroundやMotivation、History、Under the roof を読むと良いです。

しかし、React の公式ドキュメントは、そのような情報を発見できませんでした。

React の作成者 Jordan Walke のReact についての記事を発見したので、それを読みました。

ざっくり要約すると、

1. Facebook の広告系のプロダクト(Ads)のコードベースが大きくなった
2. コードベースツリー(DOM ツリー?CSSOM ツリー?)の下位の変更で、全体の再描画(カスケード更新)が必要になり、メンテナンスが大変になった
3. Reactive 特性(状態変化に基づく自動更新) を活かした FaxJS (後の React)が誕生

カスケード更新

カスケードとは、カスケード（カスケーディング）とは - IT 用語辞典 e-Words より

カスケードとは、何段も連なった小さな滝のこと。転じて、同じものがいくつも数珠つなぎに連結された構造や、連鎖的あるいは段階的に物事が生じる様子を表す。 Web ページの見栄えを定義する CSS（Cascading Style Sheet）で、ある要素に適用されるスタイルを、大域的に定義されたものから局所的に定義されたものへと順番に引き継ぎながら適用していくことをカスケードあるいはカスケーディングという。

ブラウザにおける CSS や DOM の更新が、まさにカスケードです。 例えば、DOM の場合、親 Node から子 Node へ(API 等で取得した)データを伝搬します(prop)。 データ変更があった場合、親 Node から子 Node を順々に、再描画されます。(レンダリングエンジンの処理に従い)

CSS や DOM のツリーの縦横が大きくなるにつれて、カスケード更新が大変になるのは、想像しやすいと思います。

React の目的

React は、このコードベース規模が肥大化した際におけるカスケード更新を簡単にできることを目的としたフレームワークだと、私は思いました。

逆を言えば、

Not コードベース規模が肥大化 OR Not カスケード更新 ならば React は不要なのかなと思います。

仮想 DOM と差分検出処理(reconciliation)

DOM 自体のレンダリングは、ブラウザのレンダリングエンジンに依存します。 React は、DOM ではなく、仮想 DOM と呼ばれる概念を生み出しました。

仮想 DOM と内部処理 - React より

仮想 DOM とは？ 仮想 DOM (virtual DOM; VDOM) は、インメモリに保持された想像上のまたは「仮想の」UI 表現が、ReactDOM のようなライブラリによって「実際の」DOM と同期されるというプログラミング上の概念です。このプロセスは差分検出処理 (reconciliation)と呼ばれます。 このアプローチにより React の宣言型 API が可能になっています。あなたは UI をどのような状態にしたいのか React に伝え、React は必ず DOM をその状態と一致させます。これにより、React なしではアプリケーションを構築するために避けて通れない属性の操作やイベントハンドリング、および手動での DOM 更新が抽象化されます。

カスケード更新をブラウザに任せるというより、フレームワーク(React)で仮想 DOM を管理し、(全体の再描画する必要なく)必要箇所のみ DOM を更新(再描画)するのだと思います。

React とカスケード更新

React を学ぶ前には、このカスケード更新という単語を脳の片隅に置いておくのが、良いと思います。

例えば、React.memo という関数が存在します。

React の最上位 API - React

もしあるコンポーネントが同じ props を与えられたときに同じ結果をレンダーするなら、結果を記憶してパフォーマンスを向上させるためにそれを React.memo でラップすることができます。つまり、React はコンポーネントのレンダーをスキップし、最後のレンダー結果を再利用します。

この関数も、React の目的であるカスケード更新を改善するための関数だと、思います。

小話

何かを学ぶ際に、次の 3 つの軸を考えると良いです。

• 時間
  • 過去、現在、未来
    • どういう経緯で現在に至るのか。未来は、どうありたいか。
• 周辺
  • 類似するモノ、競合他社。
    • React でいうと、Vue.js のようなコンポーネントベースのフレームワークとか。
• 社会
  • チーム、グループ、会社、社会。
    • React は、チームでなぜ選ばれたか。組織的な理由(採用など)も、含まれる。

-

シェアする

フォローする

関連する記事

タグ「フロントエンド」の記事

ヒューマンインターフェース ガイドライン という言葉を知りました。

最近、ヒューマンインターフェース ガイドライン（HIG）という言葉を知りました。 「ヒューマンインターフェイスガイドライン」には、どのAppleプラットフォームでも優れた体験を設計できるようにするためのガイドとベストプラクティスが含まれてい

2026-01-24

フロントエンド

AIの利用上限に達した時にすることを残しておく

主にWeb関連の個人開発をしている際に心がけていることを書きます。 月末に近づくにつれ、AIの利用上限に達してしまうことがあります。 その状況になった時、以下のいずれかの選択肢が私の中では残っています。 課金して利用上限を増やす 無料モデル

2026-01-22

フロントエンド

AI

CSSで頑張らなくても、SVGで楽にできるときもある

個人サイトをリニューアルをしています。 ノート風のデザインを目指して、スタイルを調整していました。 ノートの見た目は、現実にあるノートを再現しようとCSSを書いていました。 現在、以下の画像のようなノートになっています。 ノート風デザインの

2026-01-20

フロントエンド

← ブログ一覧へ