第 7 章 React をめぐるフロントエンドの歴史 メモ

React 登場前夜

すべては Google マップショックから始まった

従来のインターネットの地図サービスはすべてサーバサイドアプリケーションで、移動したり拡 大したりしようとすると、静的なリンクをクリックしてページ遷移をする必要があり、そのたびに 読み込みを待たされるストレスフルなものだった

Google マップのようにインタラクティブな ことをさせるには Flash などのプラグインを使うしかなかったんだけど、それを HTML と JavaScript だけであんなに快適な UX を実現してしまったのが衝撃的だった

JavaScript はホームページを無意味にキラキラと飾り付けるための言語くらいにしか思われてなか ったのが、こんなに本質的で高度なことができるのかと再評価のきっかけになった

その中核とな ったのが、非同期通信をしながら動的にページを書き換える Ajax(Asynchronous JavaScript + XML) と呼ばれる技術

フロントエンド第 2 世代技術の興隆

MVC デザインパターンをクライアントサイド向けに アレンジして適用したフレームワークが出現することになる。この第 2 世代における三大フレーム ワークが Backbone.js106 と Knockout107、それに AngularJS108

Angular はターゲットを明確に SPA(Single Page Application)、 つまり HTML のページを 1 枚しか持たず、初回ロードで必要なリソースをまとめて読み込んで、 ユーザーの操作に応じて動的に UI を書き換えるアプリケーションに設定している技術だった

フロントエンドの技術は React 登場以前と以降 で大きく 2 つに分けられるといっていい

Web Components が夢見たもの

内容は HTML をプログラマブルに拡張し、開発者が自 ら作成したカスタムタグを読み込んで使えるようにする Web Components という技術を Web 標準 の仕様として広くブラウザに実装しようと提唱するもの

・Custom Elements
...... HTML にユーザーが独自の DOM 要素を定義することを可能にする

・Shadow DOM
...... DOM 要素をカプセル化してメインのツリーからアクセスできなくすることで、HTML や CSS に隔離されたスコープを形成する

・HTML Templates
...... Custom Elements の内容を記述する HTML のマークアップテンプレートを定義する

・HTML Imports 110
...... HTML ドキュメントが、他のファイルに記載された HTML コンテンツを取り込めるように する

ひとつの長大な HTML と全体に適用されるこれまた長大な CSS を、 これらの技術を用いることでカプセル化された再利用可能なコンポーネントに分割し、それらの組 み合わせで Web コンテンツを表現するしくみを作ろうという Google からの夢の提案だった

現行バージョンの v1 では HTMLElement クラスを継承 してコンポーネントを作って Custom Elements として登録し、それを HTML ドキュメントで他の要 素と同じように囲みタグで記述する。なお Custom Elements には命名規則があって、必ず 2 語以上 からなるケバブケースにする必要がある

React の誕生

React を読み解く 6 つのキーワード

・Declarative(宣言的)
・Component-Based(コンポーネントベース)
・Just The UI(UI にしか関知しない)
・Virtual DOM(仮想 DOM)
・One-Way Dataflow(単方向データフロー)
・Learn Once, Write Anywhere(ひとたび習得すれば、あらゆるプラットフォームで開発できる)

Declarative(宣言的)

そこに『どんなデータが表示されるべきか』を記述しておくだけで React がそこにそのデータを 表示し、適切なタイミングで適切な表示に更新してくれる。これが UI を宣言的に表現するということ

Component-Based(コンポーネントベース)、Just The UI(UI に

しか関知しない)
コンポーネントベースのアーキテクチャというのは、見た目と機能がカプセル化されたコンポー ネントというアプリケーションの部品を作成し、それらを組み合わせることで複雑な UI を構築す るという設計思想

modelの縛りがないからこそ、ReactではAtomicDesign126 のように純粋なUIデザイン手法にってコンポーネントを分割することも簡単にできる

フルスタックのフレームワークでないことが逆に React の強みになってる

Virtual DOM(仮想 DOM)

リアル DOM の更新というのは、当時の ブラウザではたとえそれが部分的な追加や削除であっても、何度かツリーをルートからたどって上 ったり下りたりしながらさまざまな処理を行わねばならず、非常にオーバーヘッドの大きなものだ ったので、この DOM 更新を最小限に抑える仮想 DOM はまさに画期的だった

ただ React は仮想 DOM を採用しているからこそ、コンポーネントを純粋な関数で実装できたり、 再レンダリングのタイミングもユーザーにストレスを感じさせないようにうまく調整したりできる

React Developer Tools

One-Way Dataflow(単方向データフロー)

双方向データバインディングはシンプルなアプリケーションでは直感的であっても、多くの 状態を持つ大規模のアプリケーションでは簡単にスパゲッティになってしまうというのは多くの 開発者が実感するところで、次第にこれこそがアンチパターンだったんだという認識が広まってい った

React における単方向データフローとは、データがコンポーネントツリーを親コ ンポーネントから子コンポーネントに対して一方向に、props という形をとって流れ落ちることをいう
子コンポーネントから親コンポーネントに向かってデータが逆流することはない。

フォームを実装する際は、その各パーツを子コンポーネントとして持つ単一の親コンポーネント をまず作成する。そしてその親コンポーネントでフォームデータを自身の state(状態)として持つ。 さらにその state を変更する関数を作り、それを子コンポーネントに props として渡す。子コンポー ネントは渡された関数をフォームパーツに仕込んでおいて、操作の際にそれが任意の引数でもって 実行されるようにする
state のリフトアップという方法

Learn Once, Write Anywhere(ひとたび習得すれば、あらゆるプ

ラットフォームで開発できる)
コンポーネントベースな React の書き方を学べば、 レンダラーを変更することでいろんなプラットフォームの開発できる

Expoという開発支援ツールを使えば、ブラウザ上でホットリローディングを用いた Web アプリ開発の延長で両プラットフォームのモバイルアプリ開発ができるようになってる。

他のフレームワークとの比較

第 3 世代のフレームワーク情勢

純粋に使われてる数でいけば React、Angular、Vue.js の 3 つになる