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

この先は会員の登録が必要です。今なら有料会員(月額プラン)は12月末まで無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら