Web API とは

Web API とは

APIは、
Application Programming Interfaceの略語です。

クライアントサイドWeb APIは、
ブラウザやサイトが動作しているOSを操作したり、
他の Web サイトや、
サービスから取得したデータを操作するためのプログラムされた機能です。

ブラウザ APIとサードパーティ API

Web APIは、
ブラウザ API と
サードパーティ API に分けられます。

ブラウザ API には、
DOM (Document Object Model) API のブラウザの文書を操作するAPI。
XMLHttpRequest と Fetch API のサーバからデータ取得をする API。
Canvas と WebGL のグラフィックスを描画したり操作する API。
HTMLMediaElementや Web Audio API や WebRTC の動画と音声の API。
Notifications API やVibration API のデバイス API。
Web Storage API やIndexedDB API のクライアント側でのデータ保持するAPIがあります。

サードパーティ APIには、
Twitter API、Mapquest、 Google Maps API、
Facebook APIスイート、Telegram APIs 、
Telegram APIs、YouTube API、Pinterest API 、
Twilio API、Mastodon API などがあります。

Web APIを使うとき

Web APIを使うときは、
APIの入口を確認する必要があります。 

さらに、
ほとんどの WebAPI はイベントを持ちます。
イベントが発生したとき、
関数を実行する、
イベントハンドラーのプロパティを利用し、
WebAPI をコントロールします。

そして、
WebAPIはセキュリティ上の配慮が必要になります。


WebAPIの例

DOM APIの場合

document.createElement() メソッド
構文:
var element = document.createElement(tagName[, options]);
tagName:生成される要素の型を特定する文字列
options:省略可能な ElementCreationOptions オブジェクト
返値:新しい Element。

Canvas APIの場合
コンテキストオブジェクトにも依存しています。 

document.querySelector（）メソッド
構文:
element = document.querySelector(selectors);
selectors:1つまたは複数のセレクターを含む DOMString
返値:文書内で指定された CSS セレクターに最初に一致する要素を示す HTMLElement オブジェクト
例
var el = document.querySelector(".myclass");
クラス "myclass" を持つ文書内の要素の内、最初のものを返します。