🗡️

fetch()

2024/12/19に公開

JavaScript

tech

fetchとは？

fetch() は、インターネットを通じてデータを取得したり送信したりするためのJavaScriptの関数です。たとえば、ウェブサイトから情報をもらったり、サーバーにデータを送信する際に使います。

fetchの仕組み

リクエストを送る
どこにアクセスするか（URL）を指定します。
レスポンスを受け取る
サーバーが返したデータを処理します。
エラーを処理する
通信が失敗した場合の処理を追加します。

例1: データを取得する

基本形

fetch('https://api.example.com/data') // データがある場所
  .then(response => response.json()) // 結果をJSON形式に変換
  .then(data => {
    console.log(data); // データをコンソールに表示
  })
  .catch(error => {
    console.error('エラーが発生しました:', error); // エラー処理
  });

解説

fetch('URL')
指定したURLにリクエストを送ります。
.then(response => response.json())
サーバーのレスポンスをJSON形式に変換します。
.then(data => {...})
データを取得して処理します。
.catch(error => {...})
リクエストが失敗した場合のエラー処理。

例2: サーバーにデータを送信する

fetch('https://api.example.com/send', {
  method: 'POST', // データを送信する方法
  headers: {
    'Content-Type': 'application/json', // 送るデータの種類を指定
  },
  body: JSON.stringify({ message: 'こんにちは！' }) // データを送信
})
  .then(response => response.json()) // レスポンスを処理
  .then(data => {
    console.log('サーバーの返事:', data); // 結果を表示
  })
  .catch(error => {
    console.error('エラーが発生しました:', error); // エラー処理
  });

非同期処理とasync/awaitを使った書き方

より読みやすく、エラー処理がわかりやすいコードを書くには、async/await を使う方法が便利です。以下は、async/await を使った例です。

例1: データを取得する

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTPエラー: ${response.status}`);
    }
    const data = await response.json();
    console.log(data); // データを表示
  } catch (error) {
    console.error('エラーが発生しました:', error);
  }
}

fetchData();

例2: サーバーにデータを送信する

async function sendData() {
  try {
    const response = await fetch('https://api.example.com/send', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ message: 'こんにちは！' }),
    });
    if (!response.ok) {
      throw new Error(`HTTPエラー: ${response.status}`);
    }
    const data = await response.json();
    console.log('サーバーの返事:', data);
  } catch (error) {
    console.error('エラーが発生しました:', error);
  }
}

sendData();

fetchのポイント

シンプル：インターネット通信の基本機能を簡単に利用できます。
柔軟性：HTTPメソッド（GET, POST, PUT, DELETE など）やヘッダーをカスタマイズ可能。
非同期：async/await で直感的なコードが書けます。
エラーハンドリング：通信失敗やレスポンスエラーを簡単に処理できます。

問題

問題 1: fetch() 関数の主な目的は何ですか？

答え

APIやリソースと通信すること。

問題 2: fetch() を使用してデータを取得する際、レスポンスを JSON 形式に変換するために使用されるメソッドは何ですか？

答え

response.json()

問題 3: fetch() を使用してサーバーにデータを送信する場合、HTTP メソッドとして一般的に使用されるのは何ですか？

答え

GET, POST, PUT, DELETE

問題 4: fetch() の操作中にエラーが発生した場合、それを処理するために使用されるメソッドは何ですか？

答え

.catch()

問題 5: fetch() 関数の第2引数に含めることができるオプションのプロパティを3つ挙げてください。

答え

method（例: "GET"、"POST" など）
headers（リクエストヘッダーの設定）
body（リクエストの本文）

問題 6: fetch() を使用してデータを送信する際、リクエストの本文を JSON 文字列に変換するために使用される JavaScript のメソッドは何ですか？

答え

JSON.stringify()

問題 7: fetch() を使用してデータを取得する基本的な手順を、以下のキーワードを用いて説明してください。

fetch()
.then()
.catch()

答え

fetch() でリクエストを送信。
.then() でレスポンスを受け取り、response.json() でデータを取得。
必要に応じて .catch() でエラーを処理する。

問題 8: fetch() を使用してサーバーにデータを送信する際、リクエストヘッダーで指定する必要があるコンテンツタイプは何ですか？

答え

Content-Type: application/json

問題 9: fetch() 関数が返すオブジェクトの型は何ですか？

答え

Promise オブジェクト

問題 10: fetch() を使用してデータを取得する際、レスポンスが成功したかどうかを確認するためにチェックすべきプロパティは何ですか？

答え

response.ok プロパティ

問題 11: APIエンドポイント（https://jsonplaceholder.typicode.com/posts/1）からデータを取得して、画面に表示してください。(基本リクエスト)

答え

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基本リクエストの演習</title>
</head>
<body>
  <h1>APIからデータを取得する</h1>
  <button id="fetch-button">データを取得する</button>
  <pre id="result"></pre>

  <script>
    document.getElementById('fetch-button').addEventListener('click', async () => {
      const resultElement = document.getElementById('result');
      resultElement.textContent = 'ロード中...';

      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        if (!response.ok) {
          throw new Error(`エラー: ${response.status}`);
        }
        const data = await response.json();
        resultElement.textContent = JSON.stringify(data, null, 2); // データを画面に表示
      } catch (error) {
        resultElement.textContent = `エラーが発生しました: ${error.message}`;
        console.error(error);
      }
    });
  </script>
</body>
</html>

問題 12: 存在しないURL（https://api.invalid.com）にアクセスして、エラー時のメッセージをコンソールに出力してください。(エラー処理)

答え

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>エラー処理の演習</title>
</head>
<body>
  <h1>エラー処理を試す</h1>
  <button id="fetch-button">存在しないURLにアクセス</button>
  <pre id="result"></pre>

  <script>
    document.getElementById('fetch-button').addEventListener('click', async () => {
      const resultElement = document.getElementById('result');
      resultElement.textContent = 'ロード中...';

      try {
        const response = await fetch('https://api.invalid.com'); // 存在しないURL
        if (!response.ok) {
          throw new Error(`HTTPエラー: ${response.status}`);
        }
        const data = await response.json();
        resultElement.textContent = JSON.stringify(data, null, 2);
      } catch (error) {
        resultElement.textContent = `エラー: ${error.message}`;
        console.error('エラー詳細:', error); // コンソールにエラー詳細を表示
      }
    });
  </script>
</body>
</html>

問題 13: サーバーに名前（name）とメールアドレス（email）を送信する。(データ送信)

答え

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>データ送信の演習</title>
</head>
<body>
  <h1>データを送信する</h1>
  <form id="data-form">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name" required><br><br>
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email" required><br><br>
    <button type="submit">送信</button>
  </form>
  <pre id="result"></pre>

  <script>
    document.getElementById('data-form').addEventListener('submit', async (event) => {
      event.preventDefault();
      const resultElement = document.getElementById('result');
      resultElement.textContent = '送信中...';

      const name = document.getElementById('name').value;
      const email = document.getElementById('email').value;

      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts', { // テスト用API
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ name, email }),
        });
        if (!response.ok) {
          throw new Error(`HTTPエラー: ${response.status}`);
        }
        const data = await response.json();
        resultElement.textContent = `送信成功:\n${JSON.stringify(data, null, 2)}`;
      } catch (error) {
        resultElement.textContent = `エラー: ${error.message}`;
        console.error('エラー詳細:', error);
      }
    });
  </script>
</body>
</html>