WebシステムやWebアプリケーションのクライアント側要素の総称であるWebフロントエンド。その進化は目覚ましく、これまで実現しにくかったWeb閲覧の高速化やオフラインでの利用などを可能とした。先進のWebフロントエンド技術を導入する事例も増えており、今最も注目すべき技術の1つと言っていい。本特集では、そんなWebフロントエンド技術の基本から、様々な構成要素やツールの解説、システム構築のポイントまで、ITリーダーやITエンジニア必須のAtoZを取り上げる。

 スマホのネイティブアプリがWebアプリに置き換わる――。数年前なら一笑に付すこんな話が現実味を帯びてきた。最新のWebフロントエンド技術の進化によって、WebシステムやWebアプリの既成概念が次々と覆されているからだ。ITリーダーやITエンジニアにとって、Webフロントエンドの技術は必修科目であり、今最も注目すべきテーマといえる。

 ネイティブアプリとは、PCやスマホなどのデバイス上にインストールして、直接実行できるアプリケーションだ。多くの場合、Google PlayやApp Store、Microsoft Storeといった専門のアプリストアからダウンロードする。スマホユーザーなら、既に数多くのネイティブアプリを使っているだろう。

 一方のWebアプリは、Webブラウザーを通じて利用するアプリケーションだ。ブラウザーさえ動作すれば、どんな端末でも利用できる。ただし以前のWebアプリは、ネイティブアプリに比べて処理速度が遅いうえに、オフラインでは利用できない弱点があった。さらにいえば端末に搭載されたBluetooth機器やカメラモジュールなども使えない。Webアプリは様々な面でネイティブアプリよりも見劣りしていた。

ネイティブアプリと従来のWebアプリの比較
項目ネイティブアプリ従来のWebアプリ
動作速度ハードウエアの性能をフルに活用できるので高速ブラウザーを介するので遅い
デバイスの機能端末に搭載される全ての機能を使えるブラウザーから利用できる機能に限られる
オフライン対応オフラインでも利用可能インターネットに接続していなければ利用できない
配布アプリストアを経由してダウンロードが必要ブラウザーで特定のURLにアクセスするだけで使える
開発スキル対応OSごとに専門知識が必要Web関連の共通知識で開発可能

米グーグルが提唱するPWAのインパクト

 ところが、Webフロントエンド技術の進化によって、Webアプリの様々な問題が解決に向かっている。代表例が「PWA(Progressive Web Apps)」だ。WebブラウザーとJavaScriptの進化によって実現した。

 PWAは、米グーグル(Google)が2015年10月に開催した開発者向けイベント「Chrome Dev Summit」で提唱した新しいWebアプリのコンセプトだ。Webブラウザーの対応は必要だが、JavaScriptやHTTPSといったWeb標準技術を使って、従来のWebアプリで実現できなかったユーザー体験を提供する。「これまでの常識を覆す機能をいくつも備えており、IT分野へのインパクトはとても大きい」(Webフロントエンド技術に詳しいアシアルの田中正裕社長)という見方が広がっている。

 PWAを使うと何が変わるのか。まず、スマホごとにアプリを用意する必要がなくなる点が挙げられる。「AndroidとiOSごとにアプリを開発する手間は大きかった。Androidについては端末やバージョンごとのテストの負担も重かった」と、田中社長はネイティブアプリから解放される意義を訴える。

 PWAに対応したWebブラウザーとWebアプリを使えば、スマホのホーム画面にアイコンを配置できる。このアイコンをタップすれば、Webブラウザーとは別のウインドウが開き、Webアプリが起動する。Webアプリをあたかもスマホのネイティブアプリのように使えるわけだ。

リクルート住まいカンパニーのWebアプリ「SUUMO」。PWAに対応し、見た目や使い勝手はネイティブアプリとほぼ同じだ
リクルート住まいカンパニーのWebアプリ「SUUMO」。PWAに対応し、見た目や使い勝手はネイティブアプリとほぼ同じだ
(出所:リクルート住まいカンパニー)
[画像のクリックで拡大表示]

 PWAはこのほかにも、ブラウザー内にキャッシュを保持し、オフラインでの利用も可能とする。キャッシュを利用するので処理の高速化も期待できる。アプリストアを経由せずに配布できるのでネイティブアプリのような手間もない。ユーザーにとっても開発者にとっても、PWAの恩恵はいくつもある。