この記事で解決すること

「fetchって何？APIからデータを取るってどういうこと？」

fetch APIの基本から、実際にデータを取得して画面に表示するまでを解説します。

fetchとは

fetch は、JavaScriptからWebサーバーにリクエストを送って、データを受け取るための機能です。

イメージ：
あなた（ブラウザ） → 「天気のデータください」 → サーバー
あなた（ブラウザ） ← 「東京は晴れ、25度です」 ← サーバー

この「データください」→「はいどうぞ」のやり取りを、JavaScriptのコード1行で実行できるのが fetch です。APIの基本的な仕組みについてはAPIとは何か？で解説しています。

最小限のコード

// サーバーからデータを取得する
const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
const data = await response.json();
console.log(data);

これだけで、サーバーからユーザー情報を取得できます。

何が起きているか

  1. fetch(URL) → サーバーにリクエストを送る
  2. await → レスポンスが返ってくるまで待つ
  3. response.json() → 返ってきたデータをJavaScriptのオブジェクトに変換
  4. console.log(data) → データを表示

ステップ1: GETリクエスト（データを取得する）

最も基本的な使い方です。サーバーからデータを「もらう」操作です。

async function getUser() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');

    // レスポンスが正常か確認
    if (!response.ok) {
      throw new Error(`HTTPエラー: ${response.status}`);
    }

    const user = await response.json();
    console.log(user.name);  // "Leanne Graham"
    console.log(user.email); // "Sincere@april.biz"
  } catch (error) {
    console.error('データの取得に失敗:', error.message);
  }
}

getUser();

ポイント

ステップ2: 取得したデータを画面に表示する

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>fetch APIの練習</title>
</head>
<body>
    <h1>ユーザー一覧</h1>
    <ul id="user-list"></ul>

    <script>
    async function displayUsers() {
        try {
            const response = await fetch('https://jsonplaceholder.typicode.com/users');
            const users = await response.json();

            const list = document.getElementById('user-list');

            users.forEach(user => {
                const li = document.createElement('li');
                li.textContent = `${user.name} (${user.email})`;
                list.appendChild(li);
            });
        } catch (error) {
            console.error('取得失敗:', error.message);
        }
    }

    displayUsers();
    </script>
</body>
</html>

このHTMLファイルをブラウザで開くと、10人のユーザー名とメールアドレスが一覧表示されます。取得したデータを map や filter で加工する方法はJavaScriptの配列メソッド入門 ― map・filter・reduceの使い方で詳しく解説しています。

ステップ3: POSTリクエスト（データを送信する）

サーバーにデータを「送る」操作です。

async function createPost() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        title: '初めての投稿',
        body: 'fetch APIで送信しました',
        userId: 1,
      }),
    });

    const result = await response.json();
    console.log('作成成功:', result);
  } catch (error) {
    console.error('送信失敗:', error.message);
  }
}

createPost();

GETとPOSTの違い

GETPOST
目的データを取得するデータを送信する
fetchの書き方fetch(URL)fetch(URL, { method: 'POST', ... })
bodyの有無なしあり（送信するデータ）
例ユーザー一覧を取得新しい投稿を作成

ステップ4: クエリパラメータを使う

URLの末尾に ?key=value を付けて、条件を指定できます。

async function searchPosts(userId) {
  // URLにクエリパラメータを追加
  const url = `https://jsonplaceholder.typicode.com/posts?userId=${userId}`;
  const response = await fetch(url);
  const posts = await response.json();

  console.log(`ユーザー${userId}の投稿数: ${posts.length}`);
  posts.forEach(post => {
    console.log(`- ${post.title}`);
  });
}

searchPosts(1); // ユーザー1の投稿だけ取得

よくあるエラーと対処法

エラー1: CORSエラー

Access to fetch at '...' has been blocked by CORS policy

ブラウザのセキュリティ機能です。別のドメインのAPIにアクセスしようとすると発生します。

対処法：

APIとは何か、どういう仕組みで動いているかについてはAPIとは何か？で基本から解説しています。

エラー2: response.json() でエラー

SyntaxError: Unexpected token < in JSON at position 0

サーバーがJSONではなくHTMLを返している場合に起きます。URLが正しいか確認してください。JSONの基本についてはJSONとは何か？で解説しています。

エラー3: await が使えない

SyntaxError: await is only valid in async functions

await は async 関数の中でしか使えません。関数に async を付けてください。

よくある質問（FAQ）

Q: fetchとaxiosの違いは何ですか？

A: fetch はブラウザに標準で組み込まれている機能で、追加のインストールは不要です。axios は外部ライブラリで、レスポンスの自動JSON変換やリクエストのキャンセルなど、便利な機能が追加されています。小規模なプロジェクトなら fetch で十分です。

Q: fetchでタイムアウトを設定できますか？

A: fetch 自体にはタイムアウト機能がありませんが、AbortController を使って実現できます。const controller = new AbortController() を作成し、fetch(url, { signal: controller.signal }) と指定します。setTimeout で controller.abort() を呼べばタイムアウトになります。

Q: response.ok と response.status の違いは何ですか？

A: response.ok はステータスコードが200〜299の場合に true になるプロパティです。response.status は具体的なステータスコード（200、404、500など）を数値で返します。まず response.ok で成功/失敗を判定し、詳細が必要なときに response.status を確認するのが一般的です。

Q: fetchでファイルをアップロードできますか？

A: はい、FormData オブジェクトを使えばファイルをアップロードできます。body に FormData を指定し、Content-Type ヘッダーは自動設定されるので指定しないでください。

Q: fetchはNode.jsでも使えますか？

A: Node.js 18以降では標準で fetch が使えます。それ以前のバージョンでは node-fetch パッケージをインストールする必要があります。パッケージ管理についてはnpm/yarnの使い方入門を参考にしてください。

まとめ

  • fetch はサーバーとデータをやり取りするための機能
  • GET でデータ取得、POST でデータ送信
  • response.ok でエラーチェック、try/catch で例外処理
  • response.json() でJSONデータをオブジェクトに変換

あわせて読みたい

関連リソース

JavaScriptをもっと学びたい方へ：