はじめに

NTTデータ先端技術株式会社にてアジャイル開発ならびに技術調査業務に従事している志田です。業務の中では顧客を交えてアーキテクチャ検討などを実施することがあります。ここでどういったアーキテクチャ、どういった技術要素を採用するかといった判断の際に顧客からよく「一般的にはどうやって実現するんですか?」と言った質問を受けることがあります。これに回答するためには採用する技術要素とそのトレンドについて把握していることはもちろんのこと、その技術がどう言った経緯で今このかたちになっているか、今後どのように変化していくかをおさえておく必要があります。今回は少々範囲を広げ、フロントエンド技術について変遷を追いつつ技術の変遷の根底にあるものを考えていきたいと思います。

Web黎明期のフロントエンド(1990年代)

WWW(World Wide Web)の登場と同時に、Webでのフロントエンドの歴史が始まります。WWWの登場時は、ネットワーク上に配置されたテキストを閲覧するだけのもので、主に学術系で利用されていました。これまでのパソコン通信などとの違いは、テキストから他のテキストを辿ることができるハイパーリンクの概念で、テキスト同士がリンクしていく様が蜘蛛の巣のようにイメージされるところからWebという名前が付けられました。その後、テキストだけでなくさまざまなメディアを表示できるようにHTMLの仕様が整備されていきます。世間ではWindows95などを含むパーソナルコンピューターの爆発的な普及によって、誰でも簡単に、手軽にインターネットを使ってページを閲覧できるようになりました。

そんな中、条件によって配置されているHTMLの中身を動的に生成する技術が出現します。これがCGI(Common Gateway Interface)という技術で、CGIプログラムに対する参照要求をトリガーにプログラムがHTMLデータを自動的に生成するものです。当時はC言語やテキスト操作がやりやすいPerl言語で実装されることが主でした。これにより、ホームページに掲示板機能やチャット機能を持たせることができるようになり、インターネット上でのユーザ同士の交流が可能になりました。

  • Web黎明期のシステム構成

Webアプリケーションの登場とAjaxの普及(2000年代)

CGIと同じように動的にHTMLを生成する方法としてJava ServletやASP、PHPといった技術が生まれてきます。これらは色々な言語や環境を利用してより簡単に、高速に動的HTMLを生成する手法にで、Webアプリケーションと呼ばれるようになりました。CGIがHTMLを閲覧するという要求に応じOS上で実行プログラムを動作させるという仕組みに対し、Webアプリケーションはプログラム言語のランタイム上であったり、Webサーバプログラム上で動作したりとOSまで影響を与えないように工夫されていました。また、Webアプリケーションはテンプレートの機能を持ち、静的なHTML内の一部のみを動的に差し替えるといった方法を簡単に実現できるようになりました。

このWebアプリケーションは爆発的に普及してくと同時に、色々と統制が取れなくなります。当時テンプレートエンジンであるJSPを利用した独自のテンプレートエンジンといったプロダクトもいくつか見かけた記憶があります。Webアプリケーションの開発において、色々なエンジニアが開発を行なっても一定のコードになるように、また、Webアプリケーションの汎用的な処理を実装しなくても動作するようにとさまざまなWebアプリケーションフレームワークが生まれました。初期はApache Strutsが多く利用されましたが、最終的にはJavaのSpring、ASP.NET、RubyでのRuby On Rails、PHPでのSymphonyといったフレームワークに落ち着きました。

  • Webアプリケーションのシステム構成

サーバサイドをどうやって実装していくかの議論と並行して、UIの表現力を向上しようとする流れも進んでいきます。ブラウザではHTMLを表示するほかにJavaScriptを使った簡単な変化を実装できましたが、当時はその表現力が弱く、ブラウザ上で別アプリケーションを動かす技術が黎明期より出現しています。古くはJavaのGUIプログラムをブラウザ上で動作させるJavaAppletやMicrosoft Internet Explorer前提になりますが、WindowsのGUIプログラム(COMコンポーネント)をブラウザに組み込むActiveXやFlashなどです。ブラウザだけでは難しかったユーザインタラクションを簡単に実現する手段として多く利用されましたが、動作するブラウザが固定される、ロード時間が長くなるといった問題から徐々に利用が減少していきました。この時、プログラムの配布にWebを利用し、画面の実現はブラウザでなくデスクトップアプリケーションを利用するリッチクライアントの考えも出てきています。MicrosoftのSilverlightやJavaFXなどが代表的なリッチクライアント技術です。これらが普及するまでに、今現在多くのフロントエンド技術のベースとなっているAjaxが登場し、Webのフロントエンド界隈はAjaxにシフトしていきました。

Ajaxの実現のために重要なファクターとなるのは2000年頃からJavaScriptで実装されていたXMLHttpRequestの機能です。この機能自体は古くからあり、画面遷移をせずにXMLデータをサーバから取得できるという機能でしたが、これをフル活用したWebアプリケーションとしてGoogle MapやGMailなどが現れ、Ajaxという考え方は一気に普及します。これまではブラウザに拡張を入れて表現力を高めていくという方向でしたが、JavaScriptというどのブラウザでも動作する標準的な技術で拡張を入れた場合と同等以上の表現が可能ということで、様々なアプリケーションがAjaxで実装されました。中には、OSのウィンドウシステムをブラウザ上で再現するWebOSといった考え方や実装も出てきました。また、Ajaxの普及に一役買ったのはPrototype.jsやJQueryなどのAjaxを簡単に実装できるようにするライブラリ、フレームワークです。直接XMLHttpRequestを使うことは少なくなり、JavaScriptのライブラリを使って簡単にUIを改善できるようになりました。こうしてWebでの開発はフレームワークを用いたサーバサイド実装の簡略化が進み、UIはJavaScriptを使って表現力を高めるという図式が出来上がったのです。

Node.jsの登場とフロントエンド・バックエンドの分離(2010年代)

Ajaxの普及が進むと、Webアプリケーションの普及時と同様にいくつかの問題・課題が発生します。AjaxによってインタラクティブなUIを実現できるようになりましたが、コードの分量も非常に大きくなり、統制を取るのが難しくなりました。また、一つのシステムを実装するのにサーバサイド側のエンジニアと、UI側のエンジニアで別々のプログラム言語を利用しているため、いざサーバサイドとUIを統合するとうまく動かないといったケースも多く発生しました。ここでブラウザ上でなくOSの上で動作するJavaScript実行エンジンとJavaScriptによるサーバサイドフレームワークであるNode.jsが登場します。

Node.jsの登場によってUIからサーバサイドまで全ての処理をJavaScriptで実装できるようになりました。Node.js自体も登場当初から様々なツールが提供されるようになり、ただの実行環境、フレームワークからJavaScriptエコシステムへと進化します。パッケージ管理から、型安全なTypeScriptまでNode.jsとその周りで提供されている機能を利用してさまざまなアプリケーションをJavaScriptで実現できるようになりました。その結果、従来サーバサイドで実施してきた計算処理なども徐々にクライアントサイドであるJavaScriptに移動していきました。こうなるとクライアントサイドでもNode.js登場以前のWebアプリケーション界隈と同様にコードの統制が取れなくなり、さまざまなフレームワークが出現します。現在多くの場面で利用されるReactやVue.js、Angularなども、このフレームワーク乱立の際に出現し、広く普及しています。

  • フロントエンド・バックエンドのシステム構成

クライアントサイドでできることが増えたことにより、これまでのWeb3層/4層のモデルからUI/UXを担当し、ロジックと画面の制御を担当するフロントエンド、データの管理のためのAPIの集合となるバックエンドという形でシステムが切り分けられるようになりました。その結果、画面遷移を行わずに高速に動作するSPA(Single Page Application)の考え方も広まっていきました。

まとめ

フロントエンド技術に着目した場合でも、ある程度歴史は繰り返すというのが見て取れると思います。当初、表現力の不足しているブラウザで、どうにか表現力を向上させようと試行錯誤し、ブラウザの拡張であったりJavaScriptの活用であったりが進められ、結果JavaScriptによる実装が普及しました。しかし、現代になってまたWebAssemblyといった考え方が導入され、サーバサイドでもフロントエンドでも開発の敷居が下がると統制が取れなくなり、フレームワークに沿った開発統制が求められるや、サーバ集中のモデルからクライアントの分散、そしてまたSSR(Server Side Rendering)やSSG(Static Site Generator)などを利用したサーバへの集中といったことが多くの部分で繰り返されています。もちろん、全く同じことの繰り返しではなく、より洗練された形で過去の技術や考え方が取り入れられています。

[PR]提供：エヌ・ティ・ティ・データ先端技術