1. fetchとは？

解説： fetch は、JavaScriptから外部のデータを取得したり、サーバーへデータを送信したりするための機能です。
たとえば「ユーザー一覧を取得する」「検索結果を表示する」「フォーム内容を送信する」といった処理でよく使われます。

● 非同期通信とは？

通信処理には少し時間がかかることがあります。そこで、通信が終わるまで画面全体を止めるのではなく、ほかの処理を進めながら結果を待つ仕組みが必要になります。
これが 非同期処理 です。

console.log('通信開始');
// fetchで通信する処理
console.log('この行は通信完了を待たずに先に実行されることがある');

このように、非同期処理では「上から順に見えても、完了の順番が少し違う」という点が重要です。

● fetchで何ができる？

• ✅ APIからJSONデータを取得する
• ✅ フォームの内容をサーバーへ送信する
• ✅ 通信成功・失敗に応じて画面表示を切り替える

最近のJavaScriptでは、Ajax通信の基本として fetch を使うのが一般的です。まずは「データを取りに行くための基本機能」と覚えておくとわかりやすいです。

2. fetchの基本的な使い方

解説： fetchの基本形はとてもシンプルで、URLを渡すだけで通信を開始できます。
ただし、fetchの返り値はすぐにデータ本体ではなく、Promise と呼ばれる「あとで結果が届く箱」のようなものです。

● 基本構文と使い方

fetch('https://jsonplaceholder.typicode.com/users/1');

これだけで通信自体は始まりますが、取得した結果をそのまま使うには、続けて処理を書く必要があります。

● fetchでデータを取得する流れ

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

流れとしては、次のようになります。

• 1. fetchで通信を開始する
• 2. response を受け取る
• 3. response.json() でJSONをJavaScriptの値に変換する
• 4. 最後に取得したデータを使う

response.json() も非同期処理なので、ここも「少し待つ必要がある処理」だと意識しておきましょう。

3. Promiseとthenの基本

解説： fetchを理解するうえで避けて通れないのが、Promise です。
Promiseは、「今はまだ結果が出ていないけれど、あとで成功か失敗の結果を返す値」を表します。

● Promiseとは？

Promiseは、通信やタイマーなど、時間のかかる処理と相性がよい仕組みです。
fetchがすぐにレスポンス本体を返さないのは、通信完了まで待つ必要があるからです。

const promise = fetch('https://jsonplaceholder.typicode.com/users/1');
console.log(promise); // Promiseオブジェクトが表示される

● thenで結果を受け取る

Promiseの結果を受け取る代表的な書き方が then です。

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log('ユーザー名：', data.name);
  });

then をつなげて書くことで、「通信完了後に何をするか」を順番に定義できます。
ただし、処理が多くなると ネストが深く見えたり、流れを追いにくくなったり することがあります。そこで登場するのが async/await です。

4. async/awaitで書き換える

解説： async/await は、Promiseをより読みやすく書くための構文です。
非同期処理なのに、同期処理のように上から順に読めるのが大きなメリットです。

● asyncとは？

関数の前に async をつけると、その関数の中で await が使えるようになります。

async function getUser() {
  // この中では await が使える
}

● awaitとは？

await は、Promiseの結果が返ってくるまで待つためのキーワードです。
fetchと組み合わせると、次のように書けます。

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

getUser();

responseを受け取る → JSONに変換する → dataを使う という流れが、かなり素直に読めるようになります。

● thenとの違い

実務では async/await のほうが読みやすいと感じる場面が多いため、今ではこちらがよく使われます。

5. エラー処理（try / catch）

解説： 通信処理では、常に成功するとは限りません。
ネットワークが切れていたり、URLが間違っていたり、サーバー側で問題が起きていたりすることもあります。そんなときに必要なのが try / catch です。

● 基本の書き方

async function getUser() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('通信に失敗しました', error);
  }
}

try の中に正常系の処理を書き、catch の中で失敗時の処理を書きます。
これにより、エラーが起きても処理全体がわかりやすくなります。

● response.ok の確認

ここで大事な注意点があります。fetchはHTTPエラー（404や500）だけでは自動的にcatchに入らないことがあります。
そのため、response.ok を自分で確認するのが基本です。

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

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

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('取得に失敗しました', error);
  }
}

このように、通信失敗とHTTPステータス異常を分けて考えることが、fetchではとても重要です。

6. JSONデータの取得と表示

解説： fetchは、特に JSON形式のデータ取得でよく使われます。
実際のWebアプリでは、取得したデータをただconsoleに出すだけでなく、画面に表示するところまで行うことが多いです。

● response.json() の使い方

サーバーから返ってきたJSONをJavaScriptで扱うには、response.json() を使います。

const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
const data = await response.json();

console.log(data.name);
console.log(data.email);

こうすると、JSONの内容がオブジェクトとして扱えるようになります。

● 取得したデータを画面に表示する

<div id="result">読み込み前</div>

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

  document.getElementById('result').textContent =
    `名前: ${data.name} / メール: ${data.email}`;
}

showUser();

このように、取得した値を textContent に入れれば、画面へ反映できます。
DOM操作の基本と組み合わせることで、fetchの活用幅が一気に広がります。

7. 読み込み中・失敗時の表示を加える

解説： 実務では、データを取得できたかどうかだけでなく、読み込み中か、失敗したか、成功したかをユーザーに伝えることが大切です。
ここでは、最小構成の表示切り替え例を見てみましょう。

● 基本構造（HTML + JavaScript）

<button id="loadBtn">データ取得</button>
<p id="status">未取得</p>

<script>
  const btn = document.getElementById('loadBtn');
  const status = document.getElementById('status');

  btn.addEventListener('click', async () => {
    status.textContent = '読み込み中...';

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

      if (!response.ok) {
        throw new Error('取得失敗');
      }

      const data = await response.json();
      status.textContent = '取得成功: ' + data.name;
    } catch (error) {
      status.textContent = '取得に失敗しました';
    }
  });
</script>

● 実行例（デモ）

● まとめ

• ✅ 読み込み開始時に「読み込み中...」を表示する
• ✅ 成功時は取得結果を画面に反映する
• ✅ 失敗時はユーザーにわかるメッセージを出す

この3つを意識するだけでも、ユーザーにとってかなり親切な画面になります。

8. fetchとasync/awaitを使うときの注意点

解説： fetchとasync/awaitは便利ですが、初学者の方がつまずきやすいポイントもいくつかあります。
最後に、よくある注意点を整理しておきましょう。

● awaitの付け忘れ

const response = fetch('https://jsonplaceholder.typicode.com/users/1');
console.log(response); // これはまだPromise

await を付け忘れると、欲しいデータではなくPromiseそのものを扱うことになってしまいます。

● fetchはHTTPエラーで自動的にrejectしない

先ほども触れた通り、404や500でも catchにそのまま入るとは限りません。
そのため、response.ok や response.status を確認する習慣が大切です。

● ローカル環境と通信先の注意

通信先によっては、CORS の制約で取得できないことがあります。
また、file:// でHTMLを直接開くより、ローカルサーバー上で動かしたほうが検証しやすい場面も多いです。

● 注意点まとめ

• ✅ await の付け忘れに注意する
• ✅ response.ok を確認する
• ✅ 通信失敗とHTTPエラーを分けて考える
• ✅ CORSや実行環境の違いも意識する

9. まとめ

fetchとasync/awaitは、JavaScript / TypeScriptで非同期通信を扱うための基本セットです。
まずは fetchで通信を始める、response.json()でデータを取り出す、async/awaitで読みやすく書く、try/catchで失敗に備える、という流れを押さえておけば十分です。

● 本記事のポイント

• fetch はデータ取得や送信に使う基本機能
• Promise と then は非同期処理の土台となる仕組み
• async/await を使うと、処理の流れが読みやすくなる
• try/catch と response.ok で安全な実装に近づく
• 読み込み中・成功・失敗の表示を分けると、実践的なUIになる

● 次への導線

fetchとasync/awaitの基本がわかったら、次は次のようなテーマにも進みやすくなります。

• POST通信 を使ったデータ送信
• フォーム送信との連携 とバリデーション
• 複数APIの取得 や並列処理

非同期処理は最初は少しとっつきにくいですが、慣れてくると「データを扱えること」が一気に増えて、JavaScriptの楽しさがぐっと広がります。ぜひ少しずつ触ってみてください！