JavaScript

JavaScriptの fetch() でサーバーやAPIと通信し、取得・送信したデータを安全に扱う基本を説明します。

この記事でわかること

fetch() でデータを取得・送信する基本
response.ok、JSON、Promise、async/await の役割
CORSや通信エラーを初心者が確認するときのポイント

A simple way to get data from servers or APIs and use it in your website — like asking the internet for information.

fetch()

fetch とは？

fetch() は「Web上のデータを取りに行くための方法」です。

たとえば、「サーバーからニュース記事のJSONをもらう」や「APIから天気情報を取得する」といったときに使います。

イメージとしては「URLを指定して、データをお願いして持ってきてもらう郵便屋さん」です。

基本の使い方

こう書けばOKです：

JavaScript

fetch('https://example.com/data.json')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('エラー:', error);
    });

やっていることをかみ砕くと：

fetch() がURLにアクセスする
サーバーから返ってきたデータを response として受け取る
その中身を .json() などで読み取る
実際のデータを data として使う

async/awaitで書くと読みやすい

最近の書き方では、async/await を使うのが一般的です。

JavaScript

async function getData() {
    try {
        const response = await fetch('https://example.com/data.json');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('エラー:', error);
    }
}

getData();

await を使うことで、流れが「上から下へ」順番に進むように書けるので読みやすくなります。

fetchでできること

GET: データをもらう（デフォルト）
POST: データを送る
PUT / DELETE: データを更新・削除

たとえば、フォームの内容をサーバーに送る場合：

JavaScript

fetch('https://example.com/send', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: 'Taro', message: 'こんにちは！' })
});

よくある注意点

fetch() は失敗しても「HTTPエラー（例: 404）」では例外を出さない
→ response.ok で確認するのが安全です。
デフォルトでは、同じドメイン以外のアクセス（CORS）は制限されることがあります。
取得したデータの形式（JSON / テキスト / 画像など）に応じて response.json() や response.text() を使い分けます。

応用メモ（中級者向け）

fetch() は Promise を返す関数。
非同期処理を直感的に書けるのが最大の強みです。
Node.js でも最近は fetch が標準で使えるようになっています（v18以降）。
タイムアウト処理をしたい場合は AbortController を使います。