JavaScript 📅 2026年5月10日 🔄 更新: 2026-05-10 ⏱ 10分で読めます

JavaScript fetchの使い方｜JSONの取得からasync/await・エラー処理まで

JavaScriptのfetchでAPIからJSONデータを取得する方法を初心者向けに解説。then()とasync/awaitの両方の書き方、コピペで試せる無料API実践例、res.okによるエラーハンドリングまで。

2026年5月10日

導入

JavaScriptで外部のデータを取得する方法を知っていますか？

たとえば、天気予報アプリは気象データをサーバーから取得して表示しています。ニュースアプリは最新記事のデータを取得しています。この「外部からデータを取ってくる」処理に使うのがfetch API（フェッチエーピーアイ）です。

fetchを使えば、こんなことができます。

  • 天気データを取得して表示する
  • ユーザー一覧をサーバーから読み込む
  • 画像やテキストを動的に表示する

この記事では、fetch APIの基本的な使い方を初心者向けに解説します。

JavaScript入門の基礎知識があれば、理解できる内容です。

fetchとは何か

fetch（フェッチ）とは、「取ってくる」という意味の英語です。JavaScriptのfetch()関数を使うと、指定したURLからデータを取得できます。

お店に注文して、商品が届くイメージです。注文（リクエスト）を送ると、商品（レスポンス）が返ってきます。

非同期処理とは

fetchは非同期処理（ひどうきしょり）です。データが届くまで待っている間も、他の処理が止まりません。ネット通販で注文した後、届くまで家で他のことをしているのと同じです。

基本構文：then()を使う方法

fetch("https://jsonplaceholder.typicode.com/users/1")
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(data);
  });

解説

  • fetch(URL) でデータを取りに行く
  • 1つ目の.then()：レスポンスを受け取り、response.json()でJSONに変換
  • 2つ目の.then()：変換されたデータを実際に使う

JSONの基本で、JSON形式について詳しく学べます。

async/awaitで書き直す

.then()の書き方は少し読みにくいですよね。async/await（アシンク/アウェイト）を使うと、もっとわかりやすく書けます。

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

getUser();

解説

  • async：この関数の中でawaitを使いますよ、という宣言
  • await：データが届くまで待つ。届いたら次の行に進む

初心者にはasync/awaitをおすすめします。コードが読みやすく、エラー処理も書きやすいからです。

実践：無料APIからデータを取得して表示する

実際に動くアプリを作りましょう。無料で使えるJSONPlaceholderというテスト用APIを使います。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ユーザー一覧</title>
  <style>
    body { font-family: sans-serif; max-width: 600px; margin: 40px auto; padding: 0 20px; }
    .user-card { border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin-bottom: 10px; }
    .user-card h3 { margin: 0 0 5px 0; }
    .user-card p { margin: 0; color: #666; font-size: 14px; }
    button { padding: 10px 20px; font-size: 16px; border: none; border-radius: 8px; background-color: #4ecdc4; color: #fff; cursor: pointer; margin-bottom: 20px; }
  </style>
</head>
<body>
  <h1>👥 ユーザー一覧</h1>
  <button id="load-btn">データを読み込む</button>
  <div id="user-list"></div>
  <script src="app.js"></script>
</body>
</html>

JavaScript（app.js）

const loadBtn = document.getElementById("load-btn");
const userList = document.getElementById("user-list");

loadBtn.addEventListener("click", async function() {
  userList.textContent = "読み込み中...";

  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const users = await response.json();

    userList.textContent = "";

    for (const user of users) {
      const card = document.createElement("div");
      card.className = "user-card";
      card.innerHTML = `
        
${user.name}

        
📧 ${user.email}

        
🏢 ${user.company.name}

      `;
      userList.appendChild(card);
    }
  } catch (error) {
    userList.textContent = "データの取得に失敗しました。";
    console.error(error);
  }
});

コード解説

  • ボタンクリックでfetch()を実行
  • JSONPlaceholderの/usersエンドポイントから10人分のユーザーデータを取得
  • for...ofループで各ユーザーのカードを作成
  • try...catchでエラーが起きたときの処理を記述

DOM操作の基本でcreateElementやappendChildの使い方を復習できます。イベント処理の基本でaddEventListenerを詳しく学べます。

エラーハンドリング

外部データの取得は、失敗することがあります。エラーに備えた処理を書きましょう。

async function getData() {
  try {
    const response = await fetch("https://example.com/api/data");

    if (!response.ok) {
      throw new Error(`HTTPエラー: ${response.status}`);
    }

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("エラーが発生しました:", error.message);
  }
}

エラーの種類

  • ネットワークエラー：インターネット未接続 → 接続を確認してリトライ
  • 404 Not Found：URLが間違っている → URLを確認する
  • 500 Server Error：サーバー側の問題 → 時間をおいてリトライ
  • JSONパースエラー：レスポンスがJSONでない → レスポンスの形式を確認

response.okとは

response.okは、HTTPステータスコードが200〜299（成功）のときにtrueになります。fetch()はネットワークエラー以外では例外を投げないので、response.okのチェックが必要です。

よくあるつまずきポイント

つまずき1：awaitを忘れる

// ❌ awaitを忘れると、Promiseオブジェクトが返る
const data = fetch("https://...");
console.log(data); // Promise { <pending> }

// ✅ awaitをつける
const response = await fetch("https://...");
const data2 = await response.json();

つまずき2：asyncをつけ忘れる

// ❌ エラーになる
function getData() {
  const response = await fetch("https://...");
}

// ✅ asyncをつける
async function getData() {
  const response = await fetch("https://...");
}

つまずき3：CORSエラー

CORS（コース）とは、セキュリティのための仕組みです。別のドメインへのリクエストが制限されることがあります。初心者のうちは、CORS対応済みの無料API（JSONPlaceholder等）を使いましょう。

プログラミング英語の読み方で、エラーメッセージの読み方を学べます。

使える無料API一覧

練習に使える無料APIを紹介します。

  • JSONPlaceholder — ユーザー、投稿、コメント（jsonplaceholder.typicode.com）
  • PokeAPI — ポケモンのデータ（pokeapi.co）
  • Open Meteo — 天気予報（open-meteo.com）
  • Dog API — 犬の画像（dog.ceo）

まずはJSONPlaceholderで練習して、慣れたら他のAPIにも挑戦してみましょう。

まとめ

  • ✅ fetch(URL)で外部データを取得する
  • ✅ response.json()でJSONをオブジェクトに変換
  • ✅ async/awaitで読みやすく書ける
  • ✅ response.okでステータスを確認する
  • ✅ try...catchでエラーに備える

fetchが使えると、外部データを活用したアプリが作れるようになります。天気アプリ、ニュースアプリ、ポケモン図鑑など、可能性が広がります。

🎯 次のステップ

fetchを使って、外部データを活用したアプリに挑戦しよう！

目次

コースで実際に手を動かして学ぼう

レッスンではコードを書きながら基礎が身につきます

HTMLコースを始める →

関連記事

JavaScript

JavaScriptとは？初心者向けにわかりやすく解説【中高生向け】

JavaScriptの基本をゼロから解説。ボタンクリックで動くページの作り方を説明します。

 JavaScript

JavaScriptのaddEventListener使い方一覧【イベント種類別】 | プログラミング入門

JavaScriptのaddEventListenerの使い方をイベント種類別に解説。マウス、キーボード、フォーム、ウィンドウイベントのコード例付き。中高生向け。無料。

 JavaScript

JavaScript の記事一覧

この記事に出てくる用語

𝕏 シェア LINE シェア

📣 この記事が役に立ったら

Xでシェア

💬 引用する場合はこちらをご利用ください:

JavaScriptのfetchでAPIからJSONデータを取得する方法を初心者向けに解説。then()とasync/awaitの両方の書き方、コピペで試せる無料API実践例、res.okによるエラーハンドリングまで。

出典: https://start-web-programming.com/blog/javascript-fetch-api-beginners/