Web API の基本

Volardev 編集部 April 19, 2026

Web APIは、デベロッパーにとっての「理想」と言える存在です。

ブラウザの機能を拡張できる
複雑な機能を大幅に簡素化できる
複雑なコードに対して明快な構文（Syntax）を提供できる

1. Web API とは何か？

APIとは Application Programming Interface の略称です。

Web APIとは、ウェブのためのアプリケーション・プログラミング・インターフェースを指します。
ブラウザ API (Browser API) はウェブブラウザの機能を拡張し、サーバー API (Server API) はウェブサーバーの機能を拡張します。

2. ブラウザ API (Browser APIs)

すべてのブラウザには、複雑な操作をサポートし、データへのアクセスを容易にするための「組み込みWeb API」のセットが用意されています。

例えば、Geolocation API を使用すると、ブラウザが位置している場所の座標を取得することが可能です。

2.1 実装コードの例

ユーザーの現在地の緯度（Latitude）と経度（Longitude）を取得する処理：

const myElement = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    // 位置情報の取得をリクエスト
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    // ブラウザがサポートしていない場合の処理
    myElement.innerHTML = "このブラウザはジオロケーション（位置情報）をサポートしていません。";
  }
}

function showPosition(position) {
  // 取得した座標を要素に書き出す
  myElement.innerHTML = "緯度: " + position.coords.latitude +
  "<br>経度: " + position.coords.longitude;
}

3. 最も重要な API (Most Important APIs)

HTMLおよびJavaScript開発において、以下のAPIは特に重要です。

DOM API: HTMLおよびXMLドキュメントのためのAPI
Fetch API: ネットワーキング（HTTPリクエスト等）のためのAPI
Web Storage API: クライアントサイドでのデータ保存のためのAPI

これらのAPIは、ほぼすべてのモダンなウェブ開発において基盤となる非常に重要な要素です。

4. DOM API

DOM (Document Object Model) は、HTMLおよびXMLドキュメントのための中核となるAPIです。ウェブページの構造化された表現を提供し、JavaScriptから要素、属性、コンテンツに動的にアクセス・操作することを可能にします。これにより、インタラクティブなユーザーインターフェース（UI）の構築が実現します。

5. Fetch API

サーバーに対してネットワークリクエストを行い、リソース（データベースのデータやサードパーティサービスなど）を取得するためのモダンな標準規格です。従来の XMLHttpRequest に代わる、より堅牢で柔軟な手段を提供します。

6. Web Storage API

ブラウザ内にキー/値（key/value）のペアでデータを保存するためのメカニズム（localStorage および sessionStorage）を提供します。クッキー（Cookies）よりも直感的に操作でき、セッションを跨いだデータの永続化やページリロード時のデータ保持が可能です。

7. History API

ブラウザのセッション履歴の操作を可能にします。これにより、シングルページアプリケーション (SPA) において、ページ全体のフルリロードを発生させることなくURLを変更し、シームレスなナビゲーション体験を提供することができます。

8. サードパーティ API (Third Party APIs)

サードパーティ APIは、ブラウザに組み込まれているものではありません。
これらのAPIを使用するには、ウェブ上からコードをダウンロードしたり、外部のライブラリを読み込んだりする必要があります。

代表的な例：

YouTube API: ウェブサイト上に動画を表示することを可能にします。
Twitter (X) API: ウェブサイト上にツイートを表示することを可能にします。
Facebook API: ウェブサイト上にFacebookの情報を表示することを可能にします。