はじめに
Reactを使い始めて1年6ヶ月が経過。Reactの読み書きはできるようになったが、パフォーマンスや保守性を考慮した設計/実装ができていない。ReactHooksやライフサイクル、仮想DOMは概念としてはなんとなくわかるのだが、点でしかイメージできていない。なので、なぜそもそも仮想DOMが必要なの？なぜ状態にそんなに注目してレンダリングが行われるの？みたいな所が腹落ちできていません。そこで、Reactの歴史的経緯やどんな設計思想で作られているのかを理解するため、記事にしていきます。
そもそもReactとは？
ReactはMeta社(旧FaceBook)を中心に開発されたライブラリ。2011年にFacebook社のジョーダン・ウォーク氏がFacebookにて使用し、2013年にオープンソース化されました。特徴としてUI/UXを意識した開発に向いていることで注目を集めた。
→文字面で読んでも理解は進まないので、歴史的経緯から理解していこうと思います。過去にフロントでどんな課題があり、Reactを利用する事でどんな課題を解決できるのか。
フロントの歴史
・1990年代初頭、World Wide Webが登場
・1995年、JavaScript登場
・1996年、CSS（Cascading Style Sheets）
・2005年 Google Maps がリリース
・2006年 jQuery がリリース
・2010年 Backbone.js, Knockout, AngularJS などのフレームワークがリリース
・2011年 Web Components が提唱
・2013年 React がリリース
・2016年 Web Components v1 の仕様が決定
2005年 Google Maps がリリース
GoogleMapsはAJAX通信によりリアルタイムの地図のスクロールが可能に。旧来の地図アプリはサーバサイドでHTMLを作成するため、ページ遷移の旅にリロードが必要となる。それが、Ajax通信によりページの読み込みなしにリアルタイムで更新が可能。AJAX通信の発展により、サーバサイドでHTMLを作るのではなく、フロント側でデータを受け取りHTMLを完成させる流れになってきた。
2006年 jQuery がリリース
従来のJavaScriptは、異なるブラウザ（Internet Explorer、Firefox、Chromeなど）によって異なる方法で一部の機能が実装されていました。これは、同じJavaScriptコードが異なるブラウザで異なる動作をする可能性があることを意味しました。ブラウザ間の差異に対処するため、jQueryのようなライブラリが非常に重要でした。jQueryはクロスブラウザの問題を吸収し、開発者に統一されたAPIを提供して、異なるブラウザで一貫性のある動作を実現しました。そのため、jQueryはウェブ開発におけるブラウザ互換性の向上に大いに貢献しました。
2010年 Backbone.js, Knockout, AngularJS などのフレームワークがリリース
クライアントサイドのウェブ開発を効率的に行うためのフレームワークが登場。フレームワーク登場によりフロントの開発がより一層加速。
2011年 Web Components が提唱
Web Componentsは、つまり、カプセル化された単一の責任を持つコードブロックです。あらゆるページで再利用することができます。
2013年 React がリリース
Reactは、2013年にFacebook内部で開発され、同社のプロジェクトで初めて導入されました。その後、2013年5月にFacebookによってオープンソースプロジェクトとして一般にリリースされました。
Reactの特徴と影響:
Reactは、JavaScriptライブラリであり、以下の特徴とアプローチにより注目され、広く受け入れられました。
コンポーネントベースのアーキテクチャ:
Reactは、コンポーネントベースのアーキテクチャを採用しています。これは、UIを再利用可能な小さなコンポーネントに分割し、それらを組み合わせて複雑なUIを構築するアプローチです。このコンポーネントベースの開発は、コードの再利用性と保守性を向上させました。
仮想DOM（Virtual DOM）:
Reactは仮想DOMと呼ばれるコンセプトを導入しました。仮想DOMは、実際のDOMと同じ構造を持つが、メモリ内で存在し、実際のDOMへの変更が最小限になるようにするために使用されます。このアプローチにより、高速なUIの更新とパフォーマンス向上が実現されました。
・単一方向のデータフロー:
Reactは、コンポーネント間のデータフローを単一方向に制御することを奨励します。これにより、データフローが予測可能でデバッグが容易になります。
・ライブラリである点:
Reactはライブラリであるため、他のライブラリやフレームワークと組み合わせて使用することができます。これにより、既存のプロジェクトにReactを導入しやすく、部分的なアプリケーションの開発にも適しています。
・サーバサイドレンダリングXHPが元の設計思想
Reactは一部のアイデアがXHPからインスパイアされたとされています。XHPは、Facebook内で使われているPHPのための拡張で、JavaScriptのコンポーネントベースのアプローチと似たようなコンセプトを導入しています。Reactの創始者であるジョーダン・ウォークは、XHPのアイデアを取り入れ、それをJavaScriptのコンポーネントライブラリとして実装したと言われています。
具体的には、XHPはHTML要素やコンポーネントをPHPのコード内で表現する方法を提供し、PHPでUIを構築しやすくしました。ReactはこれをJavaScriptのコードに適用し、UIコンポーネントを再利用可能な部品として表現し、仮想DOMといった新しいコンセプトを導入しました。
Reactのリリースは、ウェブ開発の方法を革新し、UIコンポーネントの再利用性、パフォーマンス、開発者エクスペリエンスを向上させました。Reactは現在でも非常に人気があり、多くの企業と開発者コミュニティによって広く採用されています。また、Reactのアイデアとコンセプトは、他のフロントエンドライブラリやフレームワークの設計にも影響を与えています。
まとめ
フロント開発要件の規模が大きくなるに伴い、部品の再利用性を考慮した設計が必要。部品の再利用はコンポーネント設計で作成。ReactはXHPというPHPのサーバサイドのPHPフレームワークであるため、リクエストする度にページ全体を際レンダリングする思想が残っている。