フロントエンドの歴史から React を知りたい

2023.6.9

学びの共有

こんにちは、上條（mk-0A0）です。
早いものでこの web 業界に入って3年目に突入しました。新卒時にはすでに React が普及していたため、私はそれ以前の React を使わない開発の経験がありません。

ちょうど読んでいた『りあクト！ TypeScriptで始めるつらくないReact開発第4版【② React基礎編】』でフロントエンドの歴史について解説されていたので、React が誕生するまでの経緯を自分なりにまとめてみます。

React が生まれるまでのフロントエンドの歴史

「8-1. React の登場に至る物語」 P.119 の内容をもとに年表を作成してみました。書籍では約8ページに渡って React が登場するまでの大きな出来事がまとめられています。私のように、すでに React が普及してから働きはじめた人にとっては過去のことが分かる内容なのでぜひ書籍を読んでみてください。

2005年 Google Maps がリリース★
2006年 jQuery がリリース★
2008年 HTML5 のドラフトが発表 / Google が JavaScript エンジン V8 をオープンソース化
2009年 Node.js がリリース / ECMAScript が10年越しにアップデートされ、ES5 がリリース
2010年 Backbone.js, Knockout, AngularJS などのフレームワークがリリース★
2011年 Web Components が提唱★
2013年 React がリリース★
2016年 Web Components v1 の仕様が決定

★を付けた部分についてフォーカスしてみます。

Google Maps がリリース(2005年)

Google Maps の登場により、それまでイメージが悪かった JavaScript が注目を集めました。
当時の地図アプリはサーバーサイドで実装されていたため、頻繁にローディングが走ったりとなかなかストレスな使い心地だったそうです。
それを解消したのが Ajax という非同期通信の技術で、Ajax を用いて Web アプリを作ろう！という流れができました。

今では当たり前となっているコンテンツの追加読み込みが、地図アプリの技術から広まったのは意外でした。

（当時私は5歳で、Google Maps どころか地図の存在を知っていたかどうかすら怪しいところです。今のように遅延なく操作できる Google Maps しか知らないため、サーバーサイドで実装された地図アプリは想像がつきません。）

jQuery がリリース(2006年)

jQuery がリリースされ、当時課題となっていたブラウザ間の JavaScript の実装の差異を埋めるのに重宝されました。
固有のアーキテクチャを持たないため、当時の Web アプリは HTML の一部を jQuery で動的に書き換えるという方法で開発されていたそうです。

この業界に入ったときから jQuery は使うなと言われて来ましたが、当時は重要な技術だったということが分かります。

（この頃私は小学1年生で、キッズケータイを所持していました。（何度水没させたことか）家族とメールのやりとりはしていましたが、インターネットに触れるのはもう少し先です。）

Backbone.js, Knockout, AngularJS などのフレームワークがリリース(2010年)

jQuery を使用した大規模開発は、コードが膨れ上がってしまいメンテナンスが難しくなるという課題がありました。
そこで、サーバーサイドで主流だった MVC モデルをクライアントサイドで使えるようアレンジしたフレームワーク（Backbone.js, Knockout, AngularJS）が登場しました。
なかでも AngularJS が特に人気を博していましたが、コアアーキテクチャに問題があり大規模なアプリケーションになるとパフォーマンスが悪くなってしまうという課題がありました。
そのため、AngularJS は v2.0 でそれまでとまったく別物にアップデートされ、v1.0 までを AngularJS、v2.0 以降は Angular と区別されているそうです。

どれも触ったことがなく必要性が分からないので、歴史を知るという点で触ってみたいです。

（当時小学校の授業で「一太郎」というワープロソフトを使っていたのを覚えています。パソコンやインターネットに触れ始めたのもこの頃で、親に隠れてニンテンドー DSi や Wii を駆使してブラウザを閲覧していた記憶があります。）

Web Components の登場(2011年)

Google のエンジニアが、開発者が再利用可能な独自の HTML タグを定義できる技術（Web Components）を Web の標準の仕様としてブラウザに実装しようと提唱しました。

実際のセッション動画：https://fronteers.nl/congres/2011/sessions/web-components-and-model-driven-views-alex-russell

Web Components は3つの技術から成っています。

Custom Elements：独自の HTML タグを定義し、JavaScript でカスタマイズできる
Shadow DOM：DOM 要素をカプセル化（コンポーネント化）することで独立した DOM ツリーを生成し、HTML や CSS を隔離する
HTML Templates：再利用可能な HTML コードを定義する

Web Components の名前は知っていたのですが、詳しい概念などは知りませんでした。React の基盤となる技術なので知っておく必要があると感じます。

（この時私は小学5年生で、ひたすら自宅のパソコンでタイピングゲームをしていました。）

React がリリース(2013年)

2011年に Web Components が提唱されましたが、各ブラウザベンダーとの調整が難航した結果実際に仕様が定まったのは5年後の2016年でした。
その間に React は Web Components の概念を元に、既存の JavaScript の技術を用いてライブラリという形でリリースされました。

React のリリースが10年前ということで、思った以上に前で驚きました。いつか新しい React に代わる技術が登場したとして、10年という長い年月の中で進化し続けている React から乗り換える未来が想像できません。

（当時はニコニコ動画が好きでした。ある機能にユーザーが触れる HTML があったことから初めて HTML の存在を知り、web サイトがどのように作られているのか興味を持ったのを覚えています。）

まとめ

自分のキャリア以前の歴史を知ったことで、React が選択肢のひとつであり、場合によって様々な選択肢があり得ることを知れました。
こうしてまとめてみると、あらゆる課題を解決するためにたくさんの試行錯誤が繰り返されて今があるのだなと実感します。
特にフロントエンドの流れは早いので、新しい技術がどんな課題を解決したものなのかという視点を持つと恩恵に気づきやすくなりそうです。
今回は歴史を知ることで今を深く理解できるようになるのではと思い、身近な React に焦点を当ててまとめてみましたが、Next.js などのフレームワークも React を知ることでさらに理解が深まると思っています。
これからも「なんとなく使える」ではなく、歴史を知った上で使いこなせるよう精進していきます！