導入: なぜAPIリクエストが重要なのか
現代のWebアプリケーションにおいて、サーバーとデータをやり取りする「APIリクエスト」は不可欠です。画面をリロードすることなく最新情報を取得したり、ユーザーの入力をサーバーへ送信したりすることで、Webサイトは「動的なアプリケーション」へと進化します。しかし、通信には時間がかかるため、適切に処理しないと画面が固まったり、エラーハンドリングが不十分でユーザー体験を損ねたりする課題があります。今回は、現代のフロントエンド開発の標準である「Fetch API」の扱い方を解説します。
基礎知識: APIと非同期通信の仕組み
API（Application Programming Interface）リクエストとは、ブラウザからサーバーに対して「データをください」や「このデータを保存してください」とお願いをすることです。
ここで重要なのが「非同期通信」という概念です。リクエストを送った後、サーバーからの返事を待っている間にブラウザがフリーズしないよう、JavaScriptは別の処理を並行して進めます。この非同期処理を扱うために、現代ではPromiseやasync/awaitという構文を使用するのが一般的です。
実装/解決策: Fetch APIの使い方
Fetch APIは、標準でブラウザに組み込まれている関数です。基本的な流れは以下の通りです。
1. fetch関数でURLを指定してリクエストを送る。
2. サーバーからのレスポンスを受け取る（Promiseが返る）。
3. レスポンスをJSON形式に変換する。
4. 取得したデータを使用する。
サンプルプログラム: JSONデータを取得する実践コード
以下のコードは、公開されているダミーAPIからデータを取得し、コンソールに表示する実用的な例です。
// 非同期処理を扱うため、asyncキーワードを使用します
async function fetchData() {
try {
// 1. 指定したエンドポイントへリクエストを送る
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
// 2. 通信が成功したかチェック（サーバーエラー等の判別）
if (!response.ok) {
throw new Error('ネットワークエラーが発生しました');
}
// 3. レスポンスをJSON形式に変換
const data = await response.json();
// 4. 取得したデータをコンソールに出力
console.log('取得成功:', data);
} catch (error) {
// 5. 通信失敗時の例外処理
console.error('エラー内容:', error.message);
}
}
// 関数の実行
fetchData();
応用・注意点: 現場で役立つ補足
現場の開発で陥りやすい注意点を3つ挙げます。
1. レスポンスチェックの重要性: fetchは404エラーや500エラーでも「失敗」とはみなされず、Promiseは解決（resolve）されます。必ず`response.ok`を確認して、成功したかどうかを判定しましょう。
2. CORSエラー: 異なるドメインへリクエストを送る際、サーバー側が許可していないと「CORSエラー」が発生します。これはブラウザのセキュリティ機能であり、サーバー側の設定が必要となります。
3. タイムアウト管理: Fetch API単体にはタイムアウトの機能がありません。長時間応答がない場合に備えて、AbortControllerを使用してリクエストをキャンセルする仕組みを実装するのが、プロフェッショナルなフロントエンド開発の作法です。
これらの基本を抑えることで、より堅牢で安定したフロントエンドアプリケーションを構築できるようになります。ぜひ日々の開発に取り入れてみてください。