基礎から学ぶJavaScript入門 90日コース | 非同期処理とAPI － Day 59：fetch API

Day 59：fetch API

Day 59では、第5フェーズ「非同期処理とAPI」の中心的な実践として、fetch API を学びます。ここまでの流れを振り返ると、Day 56では同期処理と非同期処理の違いを学び、Day 57では Promise によって非同期処理の結果をあとで受け取る考え方を理解しました。さらにDay 58では async / await を使って、Promise をより読みやすく書く方法を学びました。Day 59では、それらを実際に活用して、外部のデータを取りに行くための基本技術である fetch() を扱います。

ここから学習は一段階進みます。これまでは主に、自分のプログラムの中で完結する処理や、ブラウザ内の localStorage に保存したデータを扱ってきました。しかし、実際のWebアプリでは、外部サーバーからデータを取得したり、サーバーへ情報を送ったりすることが非常に多いです。たとえば、天気情報を表示するアプリ、ニュース一覧を表示するアプリ、商品一覧を取得するアプリ、ユーザー情報を読み込むアプリなどは、どれも外部との通信が必要になります。その入口となるのが HTTPリクエスト であり、それを JavaScript から扱いやすくするのが fetch API です。

初心者の方にとって、ここは少し新しい世界に見えるかもしれません。fetch()、Response、JSON、HTTPリクエストと、聞き慣れない言葉が一気に出てきます。しかし、本質を順番に整理すれば大丈夫です。今回大切なのは、単に fetch() の書き方を暗記することではありません。「JavaScriptから外のデータを取りに行くとはどういうことか」「返ってきたデータをどう受け取るのか」「なぜ JSON がよく使われるのか」をつなげて理解することが大切です。今回も、初心者向けに、日常のたとえやコード例を交えながら、ステップバイステップで詳しく説明していきます。

まず最初に結論をつかむ

最初に今回の学習内容を一言でまとめると、fetch() は JavaScript から外部にリクエストを送り、その返事としてデータを受け取るための仕組みです。

その流れをさらにシンプルにすると、次のようになります。

• JavaScript がサーバーへ「データをください」とお願いする
• サーバーが返事を返す
• その返事を `Response` として受け取る
• 必要なら `JSON` として読み取る
• 読み取ったデータを画面に表示する

初心者の方は、まずこの流れ全体をざっくりイメージできるようになることが大切です。

HTTPリクエストとは何か

まず最初に理解したいのが HTTPリクエスト です。これは、ブラウザやJavaScriptがサーバーに何かをお願いするときの通信のことです。もっとやさしく言うと、「Web上の相手に対して送るお願いのメッセージ」です。

たとえば、Webページを見るときにも、実はブラウザはサーバーへ「このページを見せてください」とリクエストを送っています。そしてサーバーがHTMLを返してくれることで、ページが表示されます。JavaScript の fetch() もこれと同じで、「このデータをください」とリクエストを送るための仕組みです。

初心者の方は、HTTPリクエストを「サーバーへのお願い」と考えるとイメージしやすいです。

リクエストとレスポンスの関係

HTTPリクエストを理解するには、相手からの返事も一緒に考える必要があります。リクエストに対して返ってくる返事を レスポンス と呼びます。

流れを会話にたとえるとこうなります。

• クライアント側：「このデータをください」
• サーバー側：「わかりました。これがデータです」

このとき、JavaScript が送る側で、サーバーが返す側です。fetch() はこの「送る処理」を担当し、返ってきたものを Response として受け取ります。

初心者の方は、「リクエストがお願い、レスポンスが返事」と覚えると整理しやすいです。

なぜHTTPリクエストが必要なのか

ここはとても大切です。なぜHTTPリクエストが必要なのかというと、Webアプリの多くは、自分の中だけでは持っていない情報を外から取得する必要があるからです。

たとえば、次のような場面です。

• 最新の天気情報を表示したい
• ニュース記事一覧を取得したい
• ユーザー情報を読み込みたい
• 商品の一覧データを表示したい
• 掲示板の投稿一覧を取得したい

こうした情報は、JavaScriptのコードの中に最初から全部書いてあるわけではありません。必要なときにサーバーへ取りに行く必要があります。そのためにHTTPリクエストが必要です。

fetch() とは何か

fetch() は、JavaScript から HTTPリクエスト を送るための関数です。これがDay 59の中心です。fetch() を使うと、指定したURLへリクエストを送り、その結果を Promise として受け取れます。

基本形は次のようになります。

fetch("URL");

fetch("URL");

たとえば、あるデータのURLへアクセスするならこうです。

fetch("https://example.com/data");

fetch("https://example.com/data");

ただし、これだけでは結果を使っていません。fetch() は Promise を返すので、Day 57やDay 58で学んだように、.then() や async / await で結果を受け取る必要があります。

初心者の方は、fetch() を「URLへデータを取りに行く命令」と考えるとわかりやすいです。

fetch() は Promise を返す

ここはとても重要です。fetch() は Promise を返します。つまり、fetch() を呼んだ瞬間にデータ本体がそのまま返ってくるわけではありません。「あとでレスポンスが返ってくる約束」を受け取っている状態です。

たとえば .then() で受け取ると、次のようになります。

fetch("https://example.com/data")
  .then(function (response) {
    console.log(response);
  });

fetch("https://example.com/data")
  .then(function (response) {
    console.log(response);
  });

また、async / await を使うと次のようになります。

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

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

初心者の方は、「fetch() を使ったら Promise が返る。そのため非同期処理として受け取る必要がある」と理解しておくことが大切です。

Responseとは何か

fetch() で最初に受け取るのは、データそのものではなく Response オブジェクトです。ここは初心者の方が最初につまずきやすいポイントです。

たとえば、fetch() を使って response を表示すると、すぐに配列やオブジェクトが出てくるわけではありません。まず出てくるのは、「返事全体を表すオブジェクト」です。それが Response です。

この Response には、いろいろな情報が入っています。

• 通信が成功したかどうか
• ステータスコードは何か
• 返ってきたデータ本体は何か

初心者の方は、Response を「サーバーからの返事が入った封筒」と考えるとわかりやすいです。まず封筒を受け取り、その中身を開く必要があります。

Responseの中身をそのまま使えない理由

ここがとても重要です。fetch() の結果として得られる Response は、まだ「中身を読んでいない状態」です。そのため、そのままではJSONデータを直接使えません。まず、中身を「どんな形式で読むか」を指定して取り出す必要があります。

JSON形式で返ってきている場合は、response.json() を使います。

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

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

この流れでは、最初の .then() で Response を受け取り、response.json() で中身をJSONとして読み取っています。そして、その結果の data が、実際に使いたい配列やオブジェクトになります。

初心者の方は、「fetch() の結果はすぐデータではない。まず Response を受け取り、その中身を読み取る」と覚えると整理しやすいです。

JSONとは何か

次に大切なのが JSON です。JSON は、データをやり取りするときによく使われる形式です。正式には JavaScript Object Notation の略ですが、初心者の段階では「オブジェクトに似た、データ受け渡し用の書き方」と理解すれば十分です。

たとえば、次のような形です。

{
  "name": "Taro",
  "age": 20
}

あるいは配列を含むこともあります。

[
  {
    "title": "JavaScript入門",
    "completed": false
  },
  {
    "title": "API学習",
    "completed": true
  }
]

初心者の方は、「JSON はデータを送受信するときの共通ルールのようなもの」と考えるとわかりやすいです。

JSON と JavaScriptオブジェクトの違い

ここは少し深掘りしたいポイントです。JSON は見た目が JavaScript のオブジェクトにとても似ています。しかし、まったく同じではありません。大まかには、JSON は文字列として送られてくるデータ形式であり、それを JavaScript のオブジェクトとして使える形に変換しているのが response.json() です。

つまり流れとしてはこうです。

• サーバーは JSON 形式でデータを返す
• JavaScript は `response.json()` でそれを読み取る
• その結果、JavaScriptで扱えるオブジェクトや配列になる

初心者の方は、JSON を「データ配送用の箱」、JavaScriptオブジェクトを「プログラムの中で使う形」と考えると違いがつかみやすいです。

fetch() の基本的な流れ

ここまでをまとめると、fetch() の基本的な流れは次の5ステップです。

• URLを指定して `fetch()` を呼ぶ
• Promise として `Response` を受け取る
• `response.json()` で中身を読む
• 読み取ったデータを変数として扱う
• 画面に表示する

この流れがDay 59の土台です。初心者の方は、この順番を自分の言葉で説明できるようになると、理解がかなり安定します。

.then() で書く fetch の基本例

まずは Promise の .then() を使った基本例を見てみます。

fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then(function (response) {
    // Response を JSON として読み取る
    return response.json();
  })
  .then(function (data) {
    // 読み取ったデータを表示する
    console.log(data);
  })
  .catch(function (error) {
    // エラーが起きたときの処理
    console.log("エラーが発生しました。", error);
  });

fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then(function (response) {
    // Response を JSON として読み取る
    return response.json();
  })
  .then(function (data) {
    // 読み取ったデータを表示する
    console.log(data);
  })
  .catch(function (error) {
    // エラーが起きたときの処理
    console.log("エラーが発生しました。", error);
  });

このコードの流れは次の通りです。

• `fetch()` でURLへリクエストを送る
• 返ってきた `Response` を受け取る
• `response.json()` で中身を読み取る
• JSONデータを `data` として使う
• 失敗したら `.catch()` で受け取る

初心者の方は、ここで response と data は別物だという点を特に意識すると理解しやすいです。

async / await で書く fetch の基本例

次に、Day 58で学んだ async / await を使った書き方を見てみます。こちらのほうが上から下へ自然に読めるので、初心者にはかなりわかりやすいことが多いです。

async function getTodo() {
  try {
    // fetch() でリクエストを送る
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");

    // Response を JSON として読み取る
    const data = await response.json();

    // データを表示する
    console.log(data);
  } catch (error) {
    // エラーが起きたときの処理
    console.log("エラーが発生しました。", error);
  }
}

getTodo();

async function getTodo() {
  try {
    // fetch() でリクエストを送る
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");

    // Response を JSON として読み取る
    const data = await response.json();

    // データを表示する
    console.log(data);
  } catch (error) {
    // エラーが起きたときの処理
    console.log("エラーが発生しました。", error);
  }
}

getTodo();

この書き方では、「まずリクエストを送り、その返事を受け取り、その中身をJSONとして読み取り、最後に使う」という流れがそのまま見えます。初心者の方は、Day 58の内容がここでつながってくるのを感じられるはずです。

なぜ response.json() にも await が必要なのか

ここはかなり重要なので深掘りします。初心者の方はよく、「もう fetch() でレスポンスを受け取ったのに、なぜ response.json() にも await が必要なのか」と疑問に思います。

理由は、response.json() も Promise を返すからです。つまり、レスポンス本体を受け取るのも非同期、レスポンスの中身をJSONとして読み取るのも非同期です。だから、2回 await が必要になります。

• 1回目の `await`：サーバーから返事が届くまで待つ
• 2回目の `await`：返ってきた返事の中身をJSONとして読み取るまで待つ

この2段階構造は、Day 59でとても大切な理解ポイントです。

実際のデータを画面に表示する例

ここでは、取得したデータを console.log() するだけでなく、HTMLに表示する例を見てみます。

<p id="message">ここにデータが表示されます。</p>

async function getTodo() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await response.json();

    // HTML に取得した title を表示する
    document.getElementById("message").textContent = data.title;
  } catch (error) {
    document.getElementById("message").textContent = "データの取得に失敗しました。";
  }
}

getTodo();

async function getTodo() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await response.json();

    // HTML に取得した title を表示する
    document.getElementById("message").textContent = data.title;
  } catch (error) {
    document.getElementById("message").textContent = "データの取得に失敗しました。";
  }
}

getTodo();

このようにすると、APIから取ってきたデータを画面へ表示できます。初心者の方は、「fetch で取るだけではなく、そのあと画面へつなぐところまでが大切」と意識すると実践的です。

エラー処理の重要性

Day 59では、エラー処理が特に重要です。なぜなら、外部との通信は失敗する可能性があるからです。ネットワークが切れているかもしれませんし、URLが間違っているかもしれませんし、サーバーが一時的に使えないこともあります。

そのため、fetch() を使うときは成功だけでなく失敗も前提にする必要があります。async / await なら try...catch、.then() なら .catch() を必ず意識するとよいです。

初心者の方は、「外部との通信は失敗して当たり前の可能性がある」と考えるくらいでちょうどよいです。成功だけを前提にしないことが、堅実なプログラムにつながります。

そのまま使える学習テンプレート

ここでは、fetch API の基本を試せるテンプレートを紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Day 59 fetch API</title>
</head>
<body>
  <h2>fetch APIの確認</h2>

  <button id="loadButton">データを取得する</button>

  <p id="status">ボタンを押すとデータを取得します。</p>
  <ul id="todoList"></ul>

  <script>
    // 必要な要素を取得する
    const loadButton = document.getElementById("loadButton");
    const status = document.getElementById("status");
    const todoList = document.getElementById("todoList");

    // データを取得して表示する関数
    async function loadTodos() {
      try {
        // 読み込み中のメッセージを表示する
        status.textContent = "データを取得中です...";

        // API にリクエストを送る
        const response = await fetch("https://jsonplaceholder.typicode.com/todos?_limit=5");

        // Response を JSON として読み取る
        const data = await response.json();

        // 一覧表示をいったん空にする
        todoList.innerHTML = "";

        // 取得したデータを順番に表示する
        data.forEach(function (todo) {
          const li = document.createElement("li");

          // タイトルと完了状態を表示する
          li.textContent = `${todo.title} / 完了: ${todo.completed}`;

          todoList.appendChild(li);
        });

        // 読み込み完了メッセージ
        status.textContent = "データの取得に成功しました。";
      } catch (error) {
        // エラー時の表示
        status.textContent = "データの取得に失敗しました。";
        console.log(error);
      }
    }

    // ボタンが押されたらデータ取得を実行する
    loadButton.addEventListener("click", function () {
      loadTodos();
    });
  </script>
</body>
</html>

このテンプレートでは、外部APIからToDoデータを5件取得して一覧表示します。初心者の方は、ここで次の流れを確認すると理解しやすいです。

• ボタンを押す
• `fetch()` が動く
• `Response` を受け取る
• `json()` でデータを読み取る
• 配列を `forEach()` で画面に表示する

初心者が特に注意したいポイント

Day 59では、次の点を特に意識すると理解が深まりやすいです。

• HTTPリクエストは、サーバーへお願いを送る通信です。
• `fetch()` はそのお願いを JavaScript から送るための関数です。
• `fetch()` の結果はすぐデータではなく、まず `Response` です。
• `Response` の中身を使うには `response.json()` が必要です。
• `response.json()` も Promise を返すので、`await` や `.then()` が必要です。
• 外部通信は失敗する可能性があるため、エラー処理が重要です。

特に重要なのは、「fetch() のあとすぐに JSON データが手に入るわけではない」という点です。この段階の理解があいまいだと、その先で混乱しやすくなります。

情報セキュリティの観点での注意

fetch API は非常に便利ですが、外部との通信を扱うため、情報セキュリティの視点も大切です。まず、どのURLへリクエストを送るのかをよく確認する必要があります。信頼できない相手や不正なURLへデータを送ると問題につながります。また、取得したデータをそのまま画面に表示する場合も、内容を安易に信用しない姿勢が大切です。学習段階ではまず「信頼できる練習用APIを使う」「エラー処理を必ず入れる」という基本を守ることが重要です。

初心者の方は、fetch() は便利な一方で「自分のアプリの外とつながる処理」だと意識すると、安全な設計感覚が身につきやすいです。

Day 59のゴールを整理する

Day 59では、次のことができるようになっていれば十分です。

• HTTPリクエストとは何かを説明できる
• `fetch()` の役割を説明できる
• `Response` が返事全体を表すものだと理解している
• `response.json()` の役割を説明できる
• JSON がデータ受け渡しによく使われる形式だと理解している
• `fetch()` を使って取得したデータを画面に表示できる

ここまでできれば、Day 59としてはとても順調です。非同期処理の知識が、実際の外部データ取得へしっかりつながっています。

まとめ

Day 59では、第5フェーズ「非同期処理とAPI」の中心実践として、fetch API を学びました。HTTPリクエストは、JavaScript がサーバーへ「データをください」とお願いする通信であり、fetch() はそのための関数です。ただし、fetch() が返すのはすぐ使えるデータそのものではなく、まず Response という返事全体を表すオブジェクトです。その中身を使うには、response.json() で JSON として読み取る必要があります。さらに、この json() も Promise を返すため、await や .then() を使って結果を受け取る必要があります。

特に大切なのは、fetch() の流れを1本で理解することです。つまり、「リクエストを送る」「レスポンスを受け取る」「JSONとして読む」「データを使う」という順番です。この流れが理解できると、これから先のAPI活用や実践的なWebアプリ開発がかなり見通しやすくなります。

次に進む前に、今回のテンプレートを実際に動かし、response と data がどう違うのかを自分の言葉で説明できるようにしておくのがおすすめです。ここがはっきりすると、Day 59の理解はかなり深まっています。