【JavaScript】fetch APIで、外部データを取得する最も簡単な方法

公開日: 2025年9月23日

僕がまだ駆け出しエンジニアだった頃、API通信といえば「jQueryのajax」を使うのが常識でした。 $.ajax({...}) という独特な書き方に慣れるのに苦労し、コールバック地獄（ネストが深くなる現象）に何度も泣かされました。

しかし、現代のブラウザには標準で 「fetch」 という神機能が搭載されています。

初めて fetch を使った時、「えっ、ライブラリ読み込まなくていいの？ こんなに短く書けるの？」と衝撃を受けました。 今日は、そんなモダンなAPI通信の方法を、僕が実務で毎日使っている「黄金パターン」のコードと共に紹介します。

fetch：注文を出すための、たった一つの関数

fetch は、ブラウザに標準で組み込まれている関数です。これを使うだけで、外部のサーバー（API）と簡単におしゃべりができます。

今回は、例として「JSONPlaceholder」という、ダミーの投稿データを返してくれるAPIを使ってみましょう。

ステップ1：ウェイター（API）を呼んで、注文する

基本の形は、信じられないほどシンプルです。fetch() の中に、APIのURLを入れるだけ。

// 1番の投稿データをください、という注文
fetch('https://jsonplaceholder.typicode.com/posts/1')

ただ、これだけだとデータは取れません。通信には時間がかかるからです。 そこで、以前紹介した「async/await」と組み合わせるのが、現代のスタンダードな書き方です。

実務で使う「黄金パターン」

ここからは、async/await を使った、現場レベルのAPI連携コードを見ていきましょう。 エラー処理（try...catch）も含めた、そのままコピペして使える形にしています。

// async：この関数は「待つ」ことができる特別な関数ですよ、という宣言
async function getPostData() {
  try {
    console.log("通信を開始します...");

    // ステップ1: 注文して、返事(response)が来るまで「待つ(await)」
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');

    // ★実務ポイント：通信は成功したけど、中身がエラー（404など）の場合をチェック
    if (!response.ok) {
        throw new Error(`HTTPエラー！ステータス: ${response.status}`);
    }

    // ステップ2: 返事の中から、料理(JSONデータ)を取り出すのを「待つ(await)」
    const data = await response.json();

    // ステップ3: 受け取ったデータを使って、好きなことをする
    console.log("取得したデータ:", data);
    console.log("投稿タイトル:", data.title);

  } catch (error) {
    // もし、途中で何か問題（ネットワークエラーなど）が起きたら
    console.error("エラーが発生しました:", error);
    alert("データの取得に失敗しました。");
  }
}

// 作った関数を実行
getPostData();

コードの解説（実体験を添えて）

• const response = await fetch(...)
  昔のajaxだと、ここからコールバック関数を書いて...と複雑でしたが、awaitのおかげで「普通の変数代入」のように書けるのが最高です。
• response.ok のチェック
  初心者の頃よくハマったのが、「fetchは404エラー（ページが見つからない）でも成功扱いになる」という仕様です。 だから、必ず if (!response.ok) でチェックを入れる癖をつけています。これで「データがない！」というバグを防げます。
• try...catch
  APIサーバーが落ちていることは、現実にはよくあります。 エラー処理をサボると、画面が真っ白になってユーザーを不安にさせてしまうので、必ず書くようにしています。

まとめ：API連携は怖くない

async/await と fetch を組み合わせた、この「黄金パターン」さえ覚えてしまえば、あなたはもう、世界中のあらゆるAPIと自由自在に対話することができます。

このサイト「SerchCode Pro」も、裏側では全く同じ仕組みを使って、AIサーバーと通信しています。 ぜひ、色々なAPIを叩いて、自分だけの面白いアプリを作ってみてください！