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ブラウザーで利用可能だ。
Indexed Database APIはオブジェクトストア方式でデータを蓄積する。1つのレコード内の特定の値にインデックスをセットして、検索のスピードを上げることが可能だ。Web Storageと比べるとかなり高度なストレージシステムである。
蓄積できるレコード数やサイズは、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が主流になりつつあるといってもよいだろう。
