Webフロントエンド開発に新機軸ともいえる技術が登場している。代表例がページを遷移せずに表示するコンテンツを切り替えるSPA(Single Page Application)や、オフラインでもWebアプリを動かせるPWA(Progressive Web Apps)の2つだ。

 SPAは、ユーザーの操作性を大きく改善でき、ムダな通信を省くことでパフォーマンスの向上も期待できる。一方のPWAは、Webアプリをオフラインで動作させたり、描画速度を向上させたりできる。

 これら2つの技術は、高度なJavaScriptプログラムで実現される。つまり、これからのWebフロントエンド開発では、JavaScript、SPA、PWAの3つを押さえておくことが重要になる。

ネイティブアプリとの差が縮まる

 なぜ今、フロントエンド開発に次々と新しいWeb技術が取り込まれているのだろうか。その背景には、(1)ネイティブアプリと変わらない表現力、(2)扱える機能の増加、(3)対応プラットフォームの多様化、といったWeb技術の進歩と用途の拡大が挙げられる(図1)。

図1●Webフロントエンド開発が様変わりした3つの背景
[画像のクリックで拡大表示]

 (1)から説明する。これまでのWeb標準技術は、リッチなコンテンツを扱うのは苦手だった。例えば、ビデオチャットなどの動画や音声、アニメーションを駆使したUIなどの作成には、機能や処理速度が足りなかった。このようなコンテンツを実現するには、Flashなどのプラグインに頼らなくてはならなかった。

 しかし、ここ数年でHTMLやJavaScriptといったWeb標準技術だけでリッチなコンテンツを作成できるようになった。ブラウザーに搭載されているJavaScriptの処理エンジンは高速化され、さらにGPUを用いてアニメーションも表現できる。ネイティブアプリが中心だったAR/VR(拡張現実/仮想現実)アプリですらWeb標準技術で実現できる。このように、Webフロントエンドだけで完結できることが多くなっているのである。

 (2)の扱える機能が増えてきた点も見逃せない。これまでは、Webフロントエンドで利用されるWebアプリからはGPSや加速度センサーなどの各種センサー類、カメラモジュールやBluetoothなど外部機能にはアクセスできなかった。

 しかし、Web APIの進化によって、ブラウザーからこれらの機器を利用できるようになった。しかも生体認証や決済処理モジュールといった機能のサポートも進んでおり、機能面でネイティブアプリとの差は縮まってきている。

 (3)の対応プラットフォームが多様化している点も重要だ。現在の業務アプリは、デスクトップやモバイル端末など様々なプラットフォームで稼働することが求められている。これまでは各プラットフォーム向けにプログラミングしなければならず、相当の作業量を必要としていた。Webアプリは、ブラウザーさえ動けば、どんなプラットフォーム上でも稼働する。各プラットフォーム用に作り直す必要はない。

 これらの理由から、新技術を取り入れ、よりリッチなWebフロントエンドを作成しようとする試みが盛り上がっている。

フロントエンドが複雑化

 もう1つ、最近のWebフロントエンド開発に欠かせない要素がある。それは、処理の中心がクライアントサイドに移りつつあることだ。

 従来は、クライアント側のリクエストに基づき、サーバー側でHTMLを生成して、レスポンスを返していた(図2)。これは、サーバーサイドレンダリングと呼ばれる。

図2●クライアント側でHTMLの一部を変更するSPAが主流に
[画像のクリックで拡大表示]

 この手法は、ページ遷移の際にWebページのデータをその都度Webサーバーから取得しなければならず、応答速度が遅くなる。処理が遅ければ、ネイティブアプリ並みの表現力を実現することは難しい。

 現在は、クライアントサイドレンダリングが主流だ。サーバーサイドのプログラムでAPIを実装し、クライアント側と必要なデータをやり取りする。クライアント側が主体となって画面を更新していくのだ。

 以降は最新Webフロントエンド開発に欠かせないJavaScript、SPA、PWAを紹介する。

この先は有料会員の登録が必要です。「日経SYSTEMS」定期購読者もログインしてお読みいただけます。有料会員(月額プラン)は申し込み初月無料!

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