JavaScript

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);
    });

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

  1. fetch() がURLにアクセスする
  2. サーバーから返ってきたデータを response として受け取る
  3. その中身を .json() などで読み取る
  4. 実際のデータを 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: 'こんにちは！' })
});

よくある注意点

応用メモ（中級者向け）