Webフロント開発では欠かせないJavaScriptには、多くの便利なAPIが提供されている。IE11でも利用可能なものを中心に、定番となるAPIを見ていこう。

 本特集ではこれまで、JavaScriptのベースとなるプログラミング言語「ECMAScript」について説明してきた。そこで今回からは、ECMAScriptで利用できるAPIを紹介していく。

 まずはかつてHTML5とともに話題になったAPIも含めて、新旧織り交ぜた定番のAPIを見ていこう。特に企業向けシステム開発を手がけるITエンジニアにとって、無視できない「Internet Explorer 11(IE11)」で動作するAPIを優先的に取り上げる。いずれも、Web業界では当たり前のように使われているものだ。

データの蓄積を支援する2つのAPI

 ストレージ機能を提供する定番のAPIが、「Web Storage」と「Indexed Database API」である。

 Web Storageはキーバリュー型データを蓄積する。読み取り、書き込みともに非同期ではなく、初心者でも簡単に扱える方式だ。1つのWebサイトに5~10メガバイト程度のデータを蓄積できる。このAPIはIE11も含めて、すべての主要なWebブラウザーで利用可能だ。

Web Storageの考え方
[画像のクリックで拡大表示]

 Indexed Database APIはオブジェクトストア方式でデータを蓄積する。1つのレコード内の特定の値にインデックスをセットして、検索のスピードを上げることが可能だ。Web Storageと比べるとかなり高度なストレージシステムである。

Indexed Database APIの考え方
[画像のクリックで拡大表示]

 蓄積できるレコード数やサイズは、Webブラウザーの種類やホストコンピューターの空き容量にも依存するが、Web Storageと比べて大きな容量のデータを扱える。このAPIも、IE11を含め、すべての主要なWebブラウザーで利用できる。

2Dだけでなく3Dも扱える描画API

 グラフィックスを扱うAPIも、Webアプリ開発には欠かせない。ここでは、2Dのグラフィックスを扱う「Canvas」と「SVG」、そして3Dのグラフィックスを扱う「WebGL」を紹介しよう。

 Canvasは2DのビットマップグラフィクスをJavaScriptから描画するためのAPIだ。パフォーマンスに優れ、ゲームなどでも応用されている。グラフィックスを描画するだけでなく、ビデオ映像を張り付けたり、いったん描画した画像から1ピクセルずつ色を取り出したりすることもできる。ビデオの1コマから何らかの映像解析をすることも不可能ではない。

 SVGは2Dのベクターグラフィックスを描画するためのXMLマークアップ言語だ。XMLとはいえ、現在はHTML内にインラインでも記述できる。JavaScriptからも操作可能なため、グラフ描画ライブラリーなどにも使われている。ベクターグラフィクスは拡大してもきれいに描画できるため、最近はロゴなどに広く使われている。

 WebGLは3Dのグラフィックスを扱うAPIだ。3Dグラフィックスを描画するためのAPI「OpenGL」のWeb版だ。WebGLを扱うのは非常に難しいが、現在は「three.js」や「Babylon.js」といったWebGLを手軽に扱えるようにするためのJavaScriptライブラリーがある。こうしたライブラリーを利用すると便利だ。

 Canvas、SVGそしてWebGLはすべて、IE11も含めすべての主要なWebブラウザーで利用可能だ。

XMLHttpRequestの次世代プロトコルが登場

 通信分野の定番APIは、「Web Socket」と「fetch」だ。

 WebSocketは全二重(双方向)のリアルタイム通信用の通信プロトコルだ。いったんサーバーとコネクションを確立した後で、小さいデータを効率的に非同期で送受信する。頻度の高いデータ送受信にも対応している。

 fetchはHTTP通信を行うためのAPIだ。XMLHttpRequestの次世代に当たるが、XMLHttpRequestを拡張したものではなく、ゼロから設計したAPIである。fetchは非同期APIだが、非同期処理にXMLHttpRequestが採用しているコールバック方式ではなくPromiseという仕様を採用していることに注意が必要だ。

 WebSocketは、IE11も含めすべての主要なWebブラウザーで利用できるが、fetchはIE11では利用できない。IE11を除外できるプロジェクトでは、XMLHttpRequestに代わってfetchが主流になりつつあるといってもよいだろう。

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

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