Skip to content

14. ブラウザ API の活用

ブラウザ API (Application Programming Interface) は、JavaScript を使ってウェブブラウザ内でさまざまな操作を行うためのインターフェースを提供しています。この章では、代表的なブラウザ API とその活用方法について学びます。

14.1 DOM 操作

DOM (Document Object Model) は、HTML や XML ドキュメントの構造を表現するデータモデルです。JavaScript を使って DOM を操作することで、ウェブページの内容を動的に変更することができます。

14.1.1 要素の取得

DOM の要素を取得するための基本的な方法を紹介します。

// IDで要素を取得
const elementById = document.getElementById("myElement");

// クラス名で要素を取得
const elementsByClassName = document.getElementsByClassName("myClass");

// タグ名で要素を取得
const elementsByTagName = document.getElementsByTagName("div");

// CSSセレクタで要素を取得
const elementBySelector = document.querySelector(".myClass");

// CSSセレクタですべての一致する要素を取得
const elementsBySelectorAll = document.querySelectorAll(".myClass");

14.1.2 要素の操作

要素の内容や属性を変更する方法を紹介します。

// テキスト内容を変更
document.getElementById("myElement").textContent = "新しいテキスト";

// HTML内容を変更
document.getElementById("myElement").innerHTML = "<p>新しいHTML</p>";

// 属性を変更
document.getElementById("myElement").setAttribute("class", "newClass");

// スタイルを変更
document.getElementById("myElement").style.color = "blue";

14.1.3 要素の追加と削除

新しい要素の追加と既存の要素の削除を紹介します。

// 新しい要素の作成
const newElement = document.createElement("div");
newElement.textContent = "新しい要素";

// 要素の追加
document.body.appendChild(newElement);

// 要素の削除
const elementToDelete = document.getElementById("myElement");
elementToDelete.parentNode.removeChild(elementToDelete);

14.2 イベントハンドリング

ユーザーの操作（クリック、スクロール、入力など）に応じて動作を実行するイベントハンドリングについて学びます。

14.2.1 イベントリスナーの登録

イベントリスナーを登録して、特定のイベントに応じた動作を実行する方法を紹介します。

// クリックイベントリスナーを登録
const button = document.getElementById("myButton");
button.addEventListener("click", function () {
  alert("ボタンがクリックされました");
});

14.3 Fetch API

Fetch API は、ネットワークリクエストを行うための新しい標準的な方法を提供します。

14.3.1 基本的な使用方法

以下は Fetch API を使った基本的な GET リクエストの例です。

fetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("エラー:", error));

14.3.2 POST リクエスト

POST リクエストを送る方法を紹介します。

fetch("https://api.example.com/data", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ key: "value" }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("エラー:", error));

14.4 ローカルストレージとセッションストレージ

ブラウザにはデータをクライアントサイドに保存するための API として、ローカルストレージとセッションストレージがあります。

14.4.1 ローカルストレージ

ローカルストレージは、ブラウザのローカルにデータを永続的に保存するための簡易的な方法を提供します。

// データのセット
localStorage.setItem("key", "value");

// データの取得
const value = localStorage.getItem("key");

// データの削除
localStorage.removeItem("key");

14.4.2 セッションストレージ

セッションストレージは、ブラウザのセッション（タブやウィンドウ）が終了するまでの間のみデータを保持します。

// データのセット
sessionStorage.setItem("key", "value");

// データの取得
const value = sessionStorage.getItem("key");

// データの削除
sessionStorage.removeItem("key");

14.5 Geolocation API

Geolocation API を使って、ユーザーの位置情報を取得する方法を紹介します。

14.5.1 現在の位置情報の取得

Geolocation API は、現在の位置情報を取得するための簡単な方法を提供します。

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    function (position) {
      console.log("緯度:", position.coords.latitude);
      console.log("経度:", position.coords.longitude);
    },
    function (error) {
      console.error("エラー:", error);
    }
  );
} else {
  console.error("Geolocationはこのブラウザでサポートされていません");
}

この章では、ブラウザ API を活用したウェブアプリケーション開発の基本を学びました。実践的なコード例を試しながら、実際に手を動かして理解を深めてください。