JavaScriptの基本、Fetch APIを理解しよう

はじめに

Web開発では、外部のデータを取得して画面に表示する場面がよくあります。たとえば、ユーザーの情報やニュース記事など、サーバーから最新のデータを取得して表示することは、現代のWebアプリケーションでは欠かせません。そこで登場するのが Fetch API です。

Fetch APIを使うと、JavaScriptで簡単にサーバーとの通信を行い、データを取得したり、送信したりすることができます。 難しそうに感じるかもしれませんが、Fetch APIを使えば、データのやり取りが驚くほどシンプルになります。

この記事では、初めてFetch APIを使う方でも、使いこなせるようにわかりやすく解説していきます。この記事を通して、APIからデータを取得し、画面に表示する方法を学びます。基本を学び、JavaScriptの理解を深めていきましょう！

この記事について

目的

• JavaScriptでAPIを呼び出す方法を知る
• JavaScriptでAPIの操作をできるようにする

対象者

• 初学者の方
• JavaScriptの勉強を最近始めた方

JavaScriptの基本について

この記事ではJavaScriptの基本的な説明には触れていません。JavaScriptの基礎や実践ハンズオンを以下の記事で紹介していますので、理解を深めたい方はぜひご覧ください。

https://envader.plus/article/331

APIの基本情報について

はじめに、Fetch APIの概念を学ぶために、まずはAPIや通信に関する基礎を理解しておきましょう。これらを理解することで、Fetch APIの仕組みをより深く理解できるようになります。

APIとは

APIとはApplication Programming Interfaceの略で、ソフトウェア同士が情報のやり取りをするためのインターフェースです。インターフェースは境界や接点という意味を持つ言葉で、ITでは異なる機器や装置を繋ぐ部分を表します。APIは異なるソフトウェア同士を繋ぎ、情報交換の仕組みを提供します。情報交換にはルール（プロトコルや仕様）が定められており、ソフトウェアはそのルールに従って情報のやり取りを行います。

Web APIとは

Web APIとは、HTTPプロトコルを使ってデータをやり取りするAPIのことです。API利用者からリクエストを送信し、API提供者からレスポンスとして情報が返されます。この一連のやり取りは、HTTP通信で行われます。

JavaScriptで使用するAPI

JavaScriptで扱えるAPIにはブラウザAPIなどいくつかの種類がありますが、現在ではサードパーティーAPIが主流です。サードパーティーAPIとは、第三者が作成して公開しているAPIのことで、GoogleやXなど、多くの提供者がAPIを公開しています。APIを使う側から見て、提供者がサードパーティーです。

一般的に、インターネット上に公開されているAPI提供者からコードやデータを取得する必要があります。例えばGoogle Maps APIを使うと、自身のWebサイトに地図を表示できます。Googleにリクエストを送信してデータを取得し、地図をWebサイトに表示するというこの流れは、HTTPプロトコルを使ったAPIの仕組みです。

HTTP通信のリクエストメソッドについて

Web APIを利用するためには、HTTP通信を使用します。HTTPではリソースに対して何を実行するかを示すために、リクエストメソッドが用意されています。APIを利用するためにはHTTPメソッドの知識が必要になるため、ここで簡単に紹介します。

• GET

  クライアントがサーバーから欲しい情報を取得する際に使用するメソッドです。

• POST

  クライアントがサーバーへデータを送信する際に使用します。例えば、フォームに入力したデータをサーバーに送信して新規登録を行う場合に使います。

• PUT

  指定したサーバー上の既存情報を、新しい情報に置き換えるメソッドです。データの更新時に使用され、例えばユーザー情報の名前を変更する際に、変更部分とその他の情報を一緒に送信して、全体を新しい情報に置き換えます。

• PATCH

  PUTと似ていますが、部分的に変更がある部分だけを送信して更新します。PUTは全体の情報を送信するのに対し、PATCHは必要な部分だけを更新します。

• DELETE

  指定したサーバーの情報を削除するためのメソッドです。

HTTPメソッドには他にもさまざまな種類がありますが、今回はよく利用されるメソッドを紹介しました。普段、私たちがWebページを閲覧している時にも、さまざまなHTTPメソッドが使われているのです。

Web APIから取得するデータ形式について

Web APIとの情報のやり取りでは、JSONがよく使用されます。JSON（JavaScript Object Notation）は、JavaScriptのオブジェクト構文に基づいた軽量なデータ形式です。キーと値のペアでデータを表現し、人間にも読みやすく、プログラムでも簡単に扱えます。JSONはJavaScriptだけでなく、他の多くの言語でも使用されており、各言語環境にはJSONを扱うための機能が用意されています。

JSONデータは次のように記述され、キーと値で1つのデータを表現します。以下のコードでは、"name"はキー、"Alice"は値となり、この2つを1つのデータとして扱います。

{
  "id": 1,
  "name": "Alice",
  "mail": "alice@sample--sample.com",
  "isMember": true,
  "status": null
}

JavaScriptのオブジェクトやJSONについては、以下の記事で詳しく解説しています。理解を深めたい方はぜひご覧ください。

https://envader.plus/article/464

Fetch APIについて

はじめにお伝えしたとおり、Fetch APIとは、サーバーとの通信でデータの送受信をシンプルに行える仕組みです。Fetch APIを使用し、JavaScriptからサーバーに対してHTTPリクエストを送ることで、データの送受信が可能となります。実際にどのようにAPIとのデータ通信を行うか、このセクションでは基本的なGET、POSTメソッドをコード例とともに確認していきましょう。

データを取得するGETメソッド

はじめにGETメソッドのコード例を紹介します。GETメソッドはAPIデータを取得する際に使用します。

// GETコード

fetch([APIのURL]) // リクエストを送信
	.then((response) => response.json())
	.then((data) => {
	// APIレスポンスを用いた処理
	console.log(data);
});

fetch([APIのURL])でAPI提供者へリクエストを送信します。

Fetchリクエストが成功すると、responseオブジェクトが返ってきます。このresponseオブジェクトには、APIから返されたデータの他に、その通信に関するメタデータ（たとえばステータスコードやヘッダー情報）も含まれています。response.json()を使うことで、返ってきたレスポンスの中から、JSON形式のデータを抽出し、JavaScriptのオブジェクトとして扱えるように変換します。

受け取ったデータは.then((data)のdataに格納され、JavaScriptでその格納されたデータを使用することができるようになります。

データを送信するPOSTメソッド

次に、データをAPIへ送信するPOSTメソッドのコード例を紹介します。POSTメソッドは、サーバーにデータを送信するリクエストを送ることができます。その際、送信するデータはJSON形式を使用し、リクエストのヘッダーに送信するデータの形式を指定します。

// POSTコード

fetch([APIのURL], {
	// リクエストのタイプをPOSTに指定（データを送信する）
  method: 'POST',
  // リクエストのヘッダーに送信するデータがJSON形式であることを指定
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    key1: "value1",
    key2: "value2"
  })
})

まず、fetch([APIのURL])でAPI提供者へリクエストを送信します。ここでPOSTメソッドmethod: 'POST'を指定し、データをサーバーに送信するリクエストを行います。また、headersでリクエストのヘッダーにContent-Type: 'application/json'を指定し、送信するデータがJSON形式であることをサーバーに伝えます。送信するデータはbodyで指定し、JSON.stringify()を使ってJavaScriptのオブジェクトをJSON形式に変換して、リクエストボディに含めて送信します。

このセクションでは、基本的なメソッドの記述方法を学びました。GETとPOSTメソッドは使用頻度が高いメソッドのため、次のセクションで実際にコードを書いて試しながら、理解を深めていきましょう。

Fetch APIを使いデータを取得してみよう

このセクションでは、実際にFetch APIを使用してJSONデータを取得するハンズオンを紹介します。コードを書いてデータを取得することで、Fetch APIの理解をさらに深めていきます。

今回のハンズオンでは、JSONPlaceholderというAPIサービスを利用し、Fetch APIでユーザー情報を取得します。JSONPlaceholderは、開発者がAPIを使ってデータのやり取りを練習できる、無料のオンラインモックAPIサービスです。

• JSONPlaceholder

  https://jsonplaceholder.typicode.com/

ハンズオンを手軽に試したい方には、以下のサイトがおすすめです。フロントエンド技術の環境構築が不要で、ブラウザ上でコードをすぐに試すことができます。

• StackBlitz

  https://stackblitz.com/

• StackBlitzについては、以下のサイトで詳しく解説しています。

  https://envader.plus/article/434

Fetch APIを使用したデータ取得機能の作成

このハンズオンでは、以下の「ユーザーを表示」ボタンをクリックすると、ユーザー情報をAPIから取得する機能を作成します。

index.htmlファイルを以下のように編集します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ユーザー情報取得</title>
    <style>
      body {
        background-color: #f4f4f4;
        padding: 20px;
      }
      #user-list {
        display: flex;
        flex-direction: column;
        width: 300px;
        gap: 20px;
        padding: 0;
        list-style: none;
      }
      .card {
        background-color: white;
        border-radius: 5px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h1>ユーザー一覧</h1>
    <button id="load-users">ユーザーを表示</button>
    <ul id="user-list"></ul>

    <script>
      document.getElementById('load-users').addEventListener('click', () => {
        fetch('https://jsonplaceholder.typicode.com/users')
          .then((response) => response.json())
          .then((users) => {
            const userList = document.getElementById('user-list');
            userList.innerHTML = ''; // リストをクリア
            users.forEach((user) => {
              const listItem = document.createElement('li');
              listItem.className = 'card';
              listItem.innerHTML = `
            <h2>${user.name}</h2>
            <p>メール: ${user.email}</p>
            `;
              userList.appendChild(listItem);
            });
          })
          .catch((error) => {
            console.error('エラーが発生しました:', error);
          });
      });
    </script>
  </body>
</html>

コードを編集すると、以下のようなUIが表示されます。「ユーザーを表示」ボタンをクリックすると、APIからユーザー情報が取得されることを確認できます。

コードの解説

ここで、今回作成したコードのFetch APIに関する部分を1つずつ確認していきましょう。

• ボタンのクリックでユーザー情報を取得

  document.getElementById('load-users').addEventListener('click', () => {

  この部分では、「ユーザーを表示」ボタンをクリックしたときに、APIリクエストを実行する処理を設定しています。ボタンがクリックされると、fetch関数が実行されます。

• サーバーへのリクエスト

  fetch('https://jsonplaceholder.typicode.com/users')

  fetch関数にJSONPlaceholderのURLを指定して、GETリクエストを送信しています。この処理は非同期で行われ、完了するまで少し時間がかかることがあります。

  このリクエストで取得できるデータは、以下のリンクで確認できます。

  https://jsonplaceholder.typicode.com/users

• サーバーからのレスポンスをJSON形式で処理

  .then((response) => response.json())

  サーバーからのレスポンスが返ってくると、この.then()の部分が実行されます。response.json()を使うことで、サーバーから返ってきたJSONデータをJavaScriptのオブジェクトに変換します。

• ユーザー情報のリストを作成

  .then((users) => {
    const userList = document.getElementById('user-list');
    userList.innerHTML = ''; // リストをクリア
    users.forEach((user) => {
      const listItem = document.createElement('li');
      listItem.className = 'card';
      listItem.innerHTML = `
        <h2>${user.name}</h2>
        <p>メール: ${user.email}</p>
      `;
      userList.appendChild(listItem);
    });
  })

  usersには、APIから取得した複数のユーザー情報が配列で返されます。forEachを使って、各ユーザーの名前とメールアドレスを取り出し、それぞれリストアイテム（li要素）として作成します。

  • user.name：ユーザーの名前を表示
  • user.email：ユーザーのメールアドレスを表示

  これを、userList（ul要素）に追加して、カード形式で画面に表示します。

• エラーハンドリング

  .catch((error) => {
    console.error('エラーが発生しました:', error);
  });

  もしデータの取得に失敗した場合、catch()でエラーを受け取り、その内容をコンソールに表示します。ここでエラーメッセージを表示して、APIリクエストの問題を確認できます。

このハンズオンでは、サーバーからGETメソッドを使用して情報を取得し、画面に表示する方法を学びました。JSONPlaceholderではユーザー情報以外のJSONデータも取得でき、他のHTTPメソッドを使ったAPI操作も試すことができます。今回紹介したハンズオンを応用して、ぜひ挑戦してみてください！

この記事で学んだこと

Fetch APIとは、サーバーとの通信でデータの送受信をシンプルに行える仕組みです。Fetch APIを使用して、JavaScriptからWeb APIに対してHTTPリクエストを送ることで、データのやり取りが可能になります。現在、JavaScriptで使用されるWeb APIは、GoogleやXなどが提供するサードパーティーAPIが主流です。

Web APIとの通信では、JSON形式がよく使われます。API提供者からはJSON形式でデータを受け取り、API利用者がデータを送信する際も同様にJSON形式が利用されます。

Fetch APIを使うことで、効率的なサーバーとの通信が可能になり、モダンなWebアプリケーション開発には欠かせないツールとなっています。今後のプロジェクトで役立つスキルなので、繰り返し学習してFetch APIの理解を深めていきましょう。

参考資料

以下のリンクは、この記事で説明した手順や概念に関連する参考資料です。より詳しく学びたい方は、ぜひご参照ください。

• MDN - フェッチ API

  https://developer.mozilla.org/ja/docs/Web/API/Fetch_API

• MDN - Response

  https://developer.mozilla.org/ja/docs/Web/API/Response

• MDN - Response.json()

  https://developer.mozilla.org/ja/docs/Web/API/Response/json