Fetch API

フェッチエーピーアイ（API & Web機能）

意味モダンなHTTP通信手段

Fetch APIとは？

Fetch APIは、ネットワークのリクエストとレスポンスを扱うためのモダンなインターフェイスです。

Fetch APIの具体的な使い方

Fetch APIを使用したデータ取得と表示

<!DOCTYPE html>
<html>
<head>
  <title>Fetch APIの使用例</title>
</head>
<body>
  <h1>ユーザー情報</h1>
  <div id="userInfo"></div>

  <script>
    const userInfoElement = document.getElementById('userInfo');

    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then(response => {
        if (!response.ok) {
          throw new Error('HTTPエラー: ' + response.status);
        }
        return response.json();
      })
      .then(data => {
        userInfoElement.innerHTML = `
          <h2>${data.name}</h2>
          <p>Email: ${data.email}</p>
          <p>電話番号: ${data.phone}</p>
          <p>ウェブサイト: ${data.website}</p>
        `;
      })
      .catch(error => {
        console.error('Fetchエラー:', error);
        userInfoElement.innerHTML = '<p>ユーザー情報の取得に失敗しました。</p>';
      });
  </script>
</body>
</html>

この例では、Fetch APIを使用して外部APIからユーザー情報を取得し、ウェブページに表示しています。fetch()関数はPromiseを返すため、then()メソッドを使ってレスポンスを処理します。エラーハンドリングも実装されており、リクエストが失敗した場合にはエラーメッセージを表示します。

Fetch APIに関するよくある質問

Q. Fetch APIとは何ですか？

A. Fetch APIは、ブラウザとサーバー間でHTTPリクエストを行うための現代的なJavaScript APIです。XMLHttpRequest（XHR）の代替として設計されており、Promiseベースで使いやすくなっています。

Q. Fetch APIの利点は？

A. Fetch APIの主な利点は、シンプルで直感的なインターフェース、Promiseベースの非同期処理、柔軟なリクエスト/レスポンス操作、およびService Workerとの統合のしやすさです。

Q. Fetch APIでエラー処理するには？

A. Fetch APIでのエラー処理は、Promiseのcatchメソッドを使用します。ただし、HTTPエラー（404や500など）は拒否されないため、response.okをチェックする必要があります。例： fetch(url) .then(response => { if (!response.ok) throw new Error('HTTP error ' + response.status); return response.json(); }) .then(data => /* データ処理 */) .catch(error => console.error('Fetch error:', error));

Fetch APIが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのFetch APIやWeb Storage、History API、Push API、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。