Chapter 3: API連携とデータフェッチング

現代のWebアプリケーションは、単体で完結することはほとんどありません。多くの場合、外部のサービスやデータベースから情報を取得して表示します。この情報のやり取りを可能にするのが、API（Application Programming Interface） です。この章では、Webアプリケーションに不可欠なAPI連携の概念と、JavaScriptを使ったデータの取得方法を学びます。

3.1 RESTful APIの概念

APIには様々な種類がありますが、Web開発で最も広く使われているのがRESTful APIです。REST（Representational State Transfer）は、Webの技術やプロトコル（HTTP）を利用してデータをやり取りするための設計原則の集合体です。

簡単に言えば、RESTful APIは、HTTPメソッド（GET、POST、PUT、DELETEなど）とURLを使って、サーバー上の「リソース」にアクセスします。

• GET: データを取得する

• POST: データを作成する

• PUT: データを更新する

• DELETE: データを削除する

たとえば、ユーザー情報を取得したい場合は、GETメソッドでhttps://api.example.com/usersというURLにリクエストを送ります。

3.2 fetch APIとasync/awaitを使ったデータ取得

JavaScriptには、サーバーにリクエストを送信するための組み込み関数として**fetch API**が用意されています。これはPromiseを返すため、第1章で学んだasync/awaitと組み合わせることで、非常に分かりやすく非同期処理を記述できます。

以下は、fetchを使ってAPIからデータを取得する基本的な例です。

JavaScript

async function fetchUserData() {
  const url = 'https://jsonplaceholder.typicode.com/users/1';
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTPエラー！ステータス: ${response.status}`);
    }
    const data = await response.json();
    console.log(data); // 取得したユーザーデータをコンソールに出力
  } catch (error) {
    console.error('データの取得中にエラーが発生しました:', error);
  }
}

fetchUserData();

このコードでは、以下のステップでデータが取得されます。

1. await fetch(url): 指定したURLにリクエストを送信し、レスポンスが返ってくるまで処理を待ちます。

2. if (!response.ok): レスポンスのステータスコードが200番台（成功）でなかった場合、エラーを投げます。

3. await response.json(): レスポンスのボディをJSON形式で解析し、JavaScriptのオブジェクトに変換します。

4. try...catch: ネットワークエラーやサーバーからのエラーなど、予期せぬ問題が発生した場合に備え、エラーを捕捉して適切に処理します。

3.3 認証とエラーハンドリング

実際のアプリケーションでは、単にデータを取得するだけでなく、認証が必要な場合や、様々なエラーハンドリングを考慮する必要があります。

• 認証: 多くのAPIは、リクエストに認証情報（APIキー、トークンなど）を含めることを要求します。fetchのオプションでヘッダーに認証情報を追加して送信します。

• エラーハンドリング: ネットワークの切断、サーバー側のエラー、認証情報の不備など、エラーの発生原因は様々です。try...catch構文を適切に使うことで、ユーザーに分かりやすいエラーメッセージを表示するなど、より堅牢なアプリケーションを構築できます。

API連携は、フロントエンドアプリケーションに「動的な情報」という大きな価値をもたらします。次の章では、開発効率をさらに向上させるためのビルドツールと開発環境の最適化について学びます。