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

 ひと口に「Webフロントエンド」と言っても、その技術要素は多岐にわたる。聞き慣れない技術用語がいくつもあるので、知識習得の手がかりがつかみにくいかもしれない。ただ、その全体感や各技術の役割、進化の方向性を知ると、Webフロントエンドが何なのかをすっきり理解できるだろう。以下では、一見分かりにくいWebフロントエンドの技術について整理してみたい。

 「最新のWebフロントエンド技術の要はJavaScriptだ」――。Web技術に詳しいアシアルの田中正裕社長はこう話す。Webフロントエンドエンドを理解する上でまず押さえたいのは、JavaScriptの存在だ。現在のWebフロントエンド技術は、プログラミング言語のJavaScriptで実装されている場合が多いためだ。

 「今さらJavaScript?」。エンタープライズ系のITエンジニアの中には、こう思う人がいるかもしれない。20年以上前に登場したJavaScriptは長い間、特に業務システム分野で“厄介者”として扱われてきたからだ。何しろJavaScriptで開発したプログラムは、Webブラウザーの種類やバージョンに強く依存していたため、多くのユーザーに公開するWebアプリケーションには利用しにくかった。

 ところが2014年10月に勧告された「HTML5」によって状況が一変した。JavaScriptに関するブラウザーの挙動やAPIなどが標準化され、ブラウザーごとに処理結果が異なることがほぼなくなったのだ。大半のブラウザー上でプラグインなしに動く唯一のプログラミング言語というメリットも受け入れられ、Webフロントエンドの中核技術に躍り出た。

3つの役割に分けると理解しやすい

 JavaScriptベースの最新Webフロントエンド技術は、大きく3つの役割に分けると理解しやすい。1つめはWebブラウザーから様々な機能を利用できるようにする「機能拡張」、2つめは操作性や見栄えを高める「ユーザビリティ向上」、そして3つめはパフォーマンスやレスポンスを良くする「高速化」だ。多くのWebフロントエンド技術はこの3つの方向性で進化しており、その組み合わせによって従来実現できなかったWebアプリを開発できる。

Webフロントエンドの技術群
[画像のクリックで拡大表示]
Webフロントエンドを支える技術
手法や技術概要
AMP(Accelerated Mobile Pages)モバイル環境でWebページの表示を高速化する手法
HTML5 APIWebブラウザー上で動くJavaScriptプログラムから様々な機能を実現するために用意されたインタフェース仕様
PWA(Progressive Web Apps)キャッシュを使って、Webアプリをオフラインで動作させたり、表示速度を向上させたりする手法
SPA(Single Page Application)Webコンテンツをページ遷移で切り替えるのではなく、必要な部分のみを切り替えてユーザーに表示する手法
SSR(Server Side Renddering)Webブラウザーの処理をあらかじめサーバーサイドで実施する手法
レスポンシブルWebデザイン端末の画面サイズや解像度に応じて、Webページのレイアウトやデザインを変える手法

 順番に見ていこう。1つめの機能拡張をつかさどるのは「API」だ。ここでいうAPIとは、Webブラウザー上で動くJavaScriptプログラムから様々な機能を実行するためのインタフェース仕様である。APIと聞くと難しく感じてしまうが「機能を使うための関数が用意され、専用のプログラムを作らなくてよくなった」と理解すればよい。米グーグル(Google)や米モジラ(Mozilla)、米マイクロソフト(Microsoft)といった主要ベンダーは、ブラウザーに実装する様々なAPIを開発している。

 APIには多くの種類がある。例えば最新のChromeには、Bluetooth機器のセンサー情報をやり取りできる「Web Bluetooth API」が実装された。これを使えば、手軽にWebアプリとBluetooth機器を連携できる。これまでスマホなどでBluetooth機器を扱うには、ネイティブアプリで実装しなければならなかった。それが新たなAPIの登場で、Webアプリから簡単に操作できるようになった。

 メガネ販売大手のジンズは、Web Bluetooth APIを使ってメガネ型ウエアラブル端末「JINS MEME(ジンズ ミーム)」と連動するアプリを開発中だ。開発担当の菰田泰生氏(MEME事業部)は「APIがあらかじめ提供されているので、Bluetooth機器との接続処理をゼロから開発する必要がないのは大きなメリット。実現できることが増えるだけでなく、開発スピードは劇的に向上した」と説明する。

この先は有料会員の登録が必要です。有料会員(月額プラン)は初月無料!

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