フロントエンドの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などのデータを返すといった処理に徹することになる。