Node.js、Vue.js、React… ビルドが必要な理由に隠された壮大な歴史
参考URL
ReactやVueで開発する際にNode.jsをインストールする理由が分かりません。npmやbabel, webpackを使うためという認識でいいのでしょうか？もう少し、本質的な理由を知りたいです。
現代のウェブ開発では、Node.js、Vue.js、Reactなど、さまざまな技術が使われています。しかし、これらのプロジェクトを引き継ぐ際にドキュメントが不足していると、「なぜビルドが必要なのか？」と疑問に思うことがあります。その背景には、実は壮大な歴史が存在しているのです。
大前提: 動的ページの生成
動的なウェブページを作成するには、HTML（DOM=Document Object Model）をJavaScriptで操作する必要があります。このシンプルな前提から、数々の技術が誕生しました。
- Google V8 JavaScript Engineの誕生
ChromeのJavaScriptエンジンは高速で知られていますが、これがGoogle V8 JavaScript Engineとしてオープンソース化されたことが大きな転機となりました。 - Node.jsの誕生
V8エンジンを基に、C++と組み合わせることでブラウザに依存しない環境で動作するNode.js（サーバーサイドJavaScript）が開発されました。 - npm（Node Package Manager）の登場
元々JavaScript言語仕様にはなかった「パッケージ」概念が、Node.jsによって大量に生産されました。これを管理するためにnpmが作られました。 - バンドラ（Browserify, Webpack）の誕生
フロントエンドのJavaScriptでも、Node.jsで利用可能な有用なパッケージを使いたいという需要がありました。しかし、フロントエンドにはパッケージ概念がなかったため、使用する全パッケージを一つのJavaScriptファイルにまとめる「バンドラ」が開発されました。これがビルドが必要になった理由です。
フロントエンドJavaScriptの進化
- jQueryの登場とその限界
HTML（DOM）をJavaScriptで操作することは、ブラウザ間でのAPIの違いや使いにくさが問題でした。jQueryライブラリによって多くの問題が抽象化され、操作が容易になりました。しかし、プロジェクトが肥大化するにつれて、それでも不便を感じるようになりました。 - JSXとReactの誕生
この問題を解決するために、Facebookの技術者はJSX（JavaScript XML）を考案しました。JSXでは、DOM（HTML）をJavaScriptの変数内に格納して操作します。これにより、仮想DOMという概念が生まれ、Reactというライブラリで実装されました。つまり、従来はHTML（DOM）が先にあり、それをJavaScriptで操作していましたが、React（およびJSX）では、JavaScriptコードが先にあり、HTML（DOM）はただの変数として扱われるようになったのです。
これらの技術の進化を見ていくと、必要が発明の母であることがよくわかります。ウェブ開発の世界では、新たな問題が新たな技術の誕生を促し、それがまた次の革新へと繋がっていくのです。