JavaScript入門 #20 - async/awaitとfetch

入門 | 12分 で読める | 2026.06.14

公式ドキュメント
実演JavaScript非同期処理fetch

このシリーズについて

「JavaScript入門」第20回です。最終回では、APIからデータを取得するための非同期処理を扱います。

非同期処理とは

非同期処理は、時間がかかる処理の完了を待ちながら、プログラム全体を止めないための仕組みです。通信、タイマー、ファイル読み込みなどで使います。

API通信では、async/await、fetch、try/catch、res.ok の確認をセットで覚えます。

今回作るもの

公開テストAPIから投稿データを1件取得し、タイトルを表示します。

Step 1: fetchでリクエストする

fetch は、HTTPリクエストを送るブラウザ標準APIです。

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => response.json())
  .then((data) => {
    console.log(data.title);
  });

この書き方でも動きますが、入門では async/await の方が順番に読みやすいです。

Step 2: async/awaitで書く

await は、Promiseの完了を待ちます。await を使う関数には async を付けます。

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

  console.log(data.title);
}

fetchPost();

上から順番に読めるため、通信処理の流れが追いやすくなります。

Step 3: res.okを確認する

HTTPステータスがエラーでも、fetch は必ず例外になるわけではありません。response.ok を確認します。

async function fetchPost() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");

  if (!response.ok) {
    throw new Error("データ取得に失敗しました");
  }

  const data = await response.json();
  console.log(data.title);
}

fetchPost();

注意: fetch は404や500でもレスポンスを返すことがあります。通信できたかだけでなく、HTTPとして成功したかを response.ok で確認します。

Step 4: try/catchを追加する

通信失敗やJSON解析失敗に備えます。

async function fetchPost() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");

    if (!response.ok) {
      throw new Error("データ取得に失敗しました");
    }

    const data = await response.json();
    console.log(data.title);
  } catch (error) {
    console.log(error.message);
  }
}

fetchPost();

Step 5: 画面に表示する

HTMLと組み合わせて、取得結果を画面に出します。

<p id="postTitle">読み込み中...</p>
<script src="async-fetch.js"></script>

const postTitle = document.querySelector("#postTitle");

async function fetchPost() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");

    if (!response.ok) {
      throw new Error("データ取得に失敗しました");
    }

    const data = await response.json();
    postTitle.textContent = data.title;
  } catch (error) {
    postTitle.textContent = "読み込みに失敗しました";
    console.log(error.message);
  }
}

fetchPost();

よくあるエラー

エラーよくある原因確認する場所
await is only validasync を付けていない関数宣言
CORSエラーAPIがブラウザからのアクセスを許可していないConsoleとNetwork
404なのにcatchされないresponse.ok を確認していないステータス判定
Unexpected tokenJSONではないレスポンスをparseしたレスポンス内容

このシリーズの次にやること

JavaScriptの基礎を一通り確認したら、次は小さなWebアプリを作ると理解が定着します。

  • Todoリスト
  • 電卓
  • 天気APIの表示
  • フォーム入力の保存
  • モーダルやタブUI

まとめ

非同期処理では、時間のかかる処理の完了を待ってから次に進みます。API通信では、async/await で読みやすく書き、response.ok と try/catch で失敗時の処理を入れます。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR