HTMLのAPI

▶

本稿は HTML5 が提供する API に関する記事です。API は Application Programming Interface の略で、アプリケーションを実装する際に必要な機能をまとめて呼び出せるよう用意されたインタフェースのことです。HTML5 では、ブラウザネイティブで高度な機能を扱えるよう、多数の Web API が追加されました。

HTML5 で導入された主な API

API	用途
Canvas API	`<canvas>` に 2D 図形を描画 (ゲーム・グラフ等)
WebGL	GPU を使う 3D グラフィック (OpenGL ES 互換)
Audio / Video	`<audio>` `<video>` 要素とその JS API
Geolocation API	位置情報の取得 (GPS / Wi-Fi 推定)
Web Storage	`localStorage` / `sessionStorage`
IndexedDB	クライアント側の構造化 DB
File API / FileReader	ローカルファイルの読込
Drag & Drop API	ドラッグ&ドロップ操作
Fetch API	HTTP 通信 (XMLHttpRequest の後継)
WebSocket	双方向リアルタイム通信
Server-Sent Events	サーバ → クライアントの一方向プッシュ
Web Workers	バックグラウンドスレッド処理
Service Worker / PWA	オフライン対応・プッシュ通知
WebRTC	ブラウザ間のリアルタイム通信 (P2P 音声/映像)
WebAuthn	パスキー (生体認証・FIDO2)
Notifications API	OS 通知の表示
Page Visibility API	タブが見えているか判定
History API	SPA のページ遷移 (`pushState`)
Intersection Observer	要素が画面に入ったか検知 (遅延読込)
MediaDevices	カメラ・マイク・スクリーンキャプチャ
Permissions API	位置・通知等の権限状態の問い合わせ

API の呼び出し基本例

// Fetch API でJSON取得
const res = await fetch("/api/users");
const json = await res.json();

// Geolocation で現在地
navigator.geolocation.getCurrentPosition(
pos => console.log(pos.coords.latitude, pos.coords.longitude),
err => console.error(err)
);

// LocalStorage で保存
localStorage.setItem("theme", "dark");
const t = localStorage.getItem("theme");

// Notification
Notification.requestPermission().then(p => {
if (p === "granted") new Notification("Hello");
});

HTML5 以降に追加された注目 API

Clipboard API — 安全なコピー&ペースト操作
Web Share API — OS 共有メニューの呼び出し (モバイル)
Web Bluetooth / Web USB / Web Serial / Web HID — 周辺機器制御
Web Speech API — 音声認識・合成
Payment Request API — ブラウザ統合の決済 UI
Background Sync / Periodic Sync — オフライン同期
Web Animations API — JS でアニメーション
ResizeObserver / MutationObserver — DOM 変化を効率検知

「Web API」と類似する用語

用語	意味
Web API (ブラウザ API)	ブラウザが JS から提供する機能のインタフェース (本稿の主題)
REST API / HTTP API	サーバが HTTP 経由で提供する機能のインタフェース
外部 API / 公開 API	SNS や決済サービスなど、第三者が提供する API
OS API / システム API	OS が提供する機能 (Windows API、POSIX 等)

使うときの注意点

ブラウザ・OS によって対応状況が異なる。MDN や Can I use で確認
位置情報・カメラ等はHTTPS が必須のものが多い
ユーザの明示的な許可が必要な API は、初回呼び出しタイミングを工夫する
古いブラウザ向けにはpolyfillや代替実装を用意
非同期 API は async / await または Promise で扱う
iframe や Cross-Origin ではセキュリティ制約 (CORS) を意識

ページ一覧

その他