fetch で JSON を取得する

fetch API を使うと、サーバーから JSON データを簡単に取得できます。現代の Web 開発では、API との通信に fetch を使用するのが一般的です。

基本的な GET リクエスト

fetch() は Promise を返すため、async/await または .then() で結果を受け取ります。

async function getUser() {
  const response = await fetch("https://api.example.com/users/1");
  const data = await response.json();
  console.log(data);
}

getUser();

response.json() メソッドで、レスポンスボディを JSON としてパースします。これも Promise を返すため、await が必要です。

.then() を使った書き方

async/await を使わない場合は、.then() チェーンで書きます。

fetch("https://api.example.com/users/1")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

async/await

読みやすく、try-catch でエラー処理しやすい

.then() チェーン

古いブラウザでも動作する、コールバック形式

エラーハンドリング

fetch は通信エラー時に reject されますが、404 などの HTTP エラーでは reject されません。response.ok でステータスを確認する必要があります。

async function getUser(id) {
  try {
    const response = await fetch(`https://api.example.com/users/${id}`);
    
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("データの取得に失敗しました:", error);
    return null;
  }
}

POST リクエストで JSON を送信

JSON データをサーバーに送信する場合は、オプションを指定します。

async function createUser(userData) {
  const response = await fetch("https://api.example.com/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(userData)
  });
  
  const result = await response.json();
  return result;
}

// 使用例
createUser({ name: "田中", email: "tanaka@example.com" });

Content-Type ヘッダー

JSON を送信する場合は application/json を指定します。

body の JSON 変換

オブジェクトは JSON.stringify() で文字列に変換してから送信します。

クエリパラメータ付きのリクエスト

GET リクエストでパラメータを送る場合は、URLSearchParams を使うと便利です。

async function searchUsers(query, page = 1) {
  const params = new URLSearchParams({
    q: query,
    page: page.toString(),
    limit: "20"
  });
  
  const response = await fetch(`https://api.example.com/users?${params}`);
  const data = await response.json();
  return data;
}

// 使用例
searchUsers("田中", 2);
// URL: https://api.example.com/users?q=田中&page=2&limit=20

レスポンスの型チェック

TypeScript を使わない場合でも、受け取ったデータの構造を確認することが重要です。

async function getUser(id) {
  const response = await fetch(`/api/users/${id}`);
  const data = await response.json();
  
  // 期待するプロパティの存在確認
  if (!data || typeof data.name !== "string") {
    throw new Error("Invalid response format");
  }
  
  return data;
}

複数のリクエストを並列実行

Promise.all() を使うと、複数の API を同時にリクエストできます。

async function getDashboardData() {
  const [users, posts, comments] = await Promise.all([
    fetch("/api/users").then(r => r.json()),
    fetch("/api/posts").then(r => r.json()),
    fetch("/api/comments").then(r => r.json())
  ]);
  
  return { users, posts, comments };
}

fetch API と JSON を組み合わせることで、モダンな Web アプリケーションで必要な API 通信のほとんどをカバーできます。