ホーム自己紹介ブログ
NO.74
DATE2022. 03. 11

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 は、チームでなぜ選ばれたか。組織的な理由(採用など)も、含まれる。
フロントエンド

-

コメント

0

読み込み中...

シェアする

フォローする

購読する

次のページ

Ruby on Railsを業務で使って思ったこと

前のページ

Web Componentsの良さ

関連する記事

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

AIの書いたコードの手直しを減らすお作法

AI にコードを書かせた後、余計なコードを見つけて消す作業があります。 不毛なことなので、それらの作業を減らすためのお作法を紹介します。 未使用コードを消す 以下でも書きましたが、未使用コードの検査に knip を使うことが多いです。 ht

2026年02月25日

AI
フロントエンド
iframeの難しさ

最近、iframeを使っています。 クライアントサイドで埋め込む想定で、iframeを使おうとしています。 色々と苦労したことがあったので、書いて残しておこうと思います。 レスポンスヘッダー 前提として、ウェブアプリケーションをプロダクショ

2026年02月18日

フロントエンド
ブラウザ
SVGを書くと数学の知識が必要だった

紙を積んだイラストをSVGで書こうとしていました。 （当たり前ですが）図形を表現するためには数学の知識が必要で、学生の頃の記憶を思い出したので疲れました。 所感について、諸々書こうと思います。 成果物 実際に完成したのは、以下の画像ができま

2026年02月17日

フロントエンド
← ブログ一覧へ