フロントエンドのWeb技術が、アプリケーション基盤としての地位を確立するようになった。Webブラウザーを使って表示するWebコンテンツは、単独で立派なアプリケーションとして動作するものも多い。

 ハイブリッドアプリの開発環境が整い、Android、iOS、そしてデスクトップアプリですら、Web技術を使って開発できる時代だ。この特集では、こうした状況を踏まえ、ITエンジニアが押さえておきたいフロントエンドの技術やツールを解説する。

 まずはアーキテクチャーについて見ていこう。技術の発展とともに、フロントエンドWebのアーキテクチャーも変貌している。「Single Page Application(SPA)」や「MVC」といった用語を、フロントエンドWeb技術の文脈で聞くことが多くなってきたのではないだろうか。

フロントエンドWebの主役は「SPA」

 SPAとは、Webコンテンツをページ遷移で切り替えるのではなく、必要な部分のみを切り替えて利用者に見せる手法を指す。スマートフォンアプリを想像すると分かりやすいだろう。

 SPAではWebページの遷移がないため、Webブラウザーの「戻る」ボタンなどが利用できないことになってしまう。そこで、表示するコンテンツに合わせてURLを意図的に変え、Webブラウザーの「戻る」ボタンや、特定のコンテンツに対するブックマークが使える仕組みを用意する。これはSession History APIを使って実現する。

 SPAの裏側では様々な技術を駆使しているが、必要なコンテンツをAjax(XMLHttpRequest)やWebSocketで取得する点が大きな特徴の一つだ。Ajaxを使ってJSON形式のデータを取得する場合、見せ方を決めるのはJavaScriptの役割になる。

 SPAを採用したWebシステムでは、こうした動作を裏側で行うため、サーバーはHTMLを生成することが極端に減る。場合によってはHTMLと無縁になるケースもあるだろう。サーバーは、リクエストに応じて必要な処理を行い、JSONなどのデータを返すといった処理に徹することになる。