Analyze ⏱ 30 min

Fetch API Introduction – Beginners Guide to JavaScript Fetch API

What You Will Learn

Fetch APIの基本的な使い方を学習します
非同期通信でテキストファイルやJSONファイルを取得する方法を習得します
外部APIにリクエストを送信してデータを取得する方法を理解します

Key Concepts

Fetch API: Webページからサーバーにリクエストを送信するための新しいAPI
Promise: 非同期通信の結果を扱うためのオブジェクト
then()メソッド: Promiseの結果を処理するためのメソッド
catch()メソッド: Promiseのエラーを処理するためのメソッド
JSONPlaceholder: テスト用のAPIサーバー

Code Examples

fetch('sample.txt')
  .then(res => res.text())
  .then(data => console.log(data));
// テキストファイルを取得してコンソールに表示する

fetch('users.json')
  .then(res => res.json())
  .then(data => {
    let output = '';
    data.forEach(user => {
      output += `<li>${user.id} ${user.name} ${user.email}</li>`;
    });
    document.getElementById('output').innerHTML = `<ul>${output}</ul>`;
  });
// JSONファイルを取得してユーザーリストを表示する

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'test',
    body: 'test body'
  })
})
.then(res => res.json())
.then(data => console.log(data));
// 外部APIにPOSTリクエストを送信してデータを取得する

Lesson Summary

このレッスンでは、Fetch APIの基本的な使い方を学習しました。Fetch APIは、Webページからサーバーにリクエストを送信するための新しいAPIです。Promiseとthen()メソッドを使用して、非同期通信の結果を処理します。さらに、JSONPlaceholderを使用して、テスト用のAPIサーバーにリクエストを送信してデータを取得する方法を習得しました。最後に、Bootstrapを使用して、Webページのデザインを改善する方法を学習しました。

Practice Exercise

次のコードを完成させてください。

fetch('https://jsonplaceholder.typicode.com/comments', {
  method: 'GET'
})
.then(res => res.json())
.then(data => {
  // コメントを表示するためのコードをここに書いてください
});

コメントを表示するためのコードを書いて、Fetch APIの使い方を確認してください。

What Is Next

次のレッスンでは、Async/Awaitの使い方を学習します。Async/Awaitは、非同期通信をより簡単に扱うための新しい構文です。Fetch APIと組み合わせて使用することで、より効率的なコードを書くことができます。

Choose Language