12.3 Fetch APIによるデータ取得の実装
それでは、fetchBookData 関数の中身を書き換えて、実際に外部からデータを取得してみましょう。fetchBookData 関数を以下のように更新します。
ソースフォルダ：public/ch12
ファイル名：book-search.js
async function fetchBookData() {
try {
// 1. fetchを使って外部サーバーへデータのリクエストを送信します
const response = await fetch("https://jsonplaceholder.typicode.com/posts");
// 2. 通信が成功したか（ステータスコードが200系か）をチェックします
if (!response.ok) {
throw new Error(`HTTPエラーが発生しました。ステータス: ${response.status}`);
}
// 3. 届いたデータをJavaScriptで扱えるオブジェクト形式（JSON）に変換します
const books = await response.json();
// 通信が成功したことを確認するためのメッセージ
console.log(`通信成功！${books.length}件のデータを取得しました。`);
return books;
} catch (error) {
// 通信に失敗した場合のエラーメッセージ
console.log(`データの取得に失敗しました: ${error.message}`);
return [];
}
}
実行結果
解説
fetchBookData 関数の役割と設計
この関数は「データ取得専用」の関数として独立させています。なぜ独立させるのでしょうか？
【理由 1】単一責任の原則
この関数は「外部 API からデータを取得する」という 1 つの役割だけを持ちます。
表示処理や加工処理は別の関数に任せることで、それぞれの責任が明確になります。
【理由 2】再利用性の向上
データ取得処理を独立させることで、他の場面でも同じ関数を使い回せます。
例えば、「更新ボタン」を追加する場合も、この関数を呼び出すだけです。
【理由 3】テストのしやすさ
データ取得だけを単独でテストできるため、問題の切り分けが容易になります。
try-catch ブロックの復習と実践
4 行目から 20 行目の try-catch ブロックを見てみましょう。
【try ブロック】
正常にデータが取得できた場合の処理を記述します。
4 行目: fetch()でリクエストを送信
4: const response = await fetch("https://jsonplaceholder.typicode.com/posts");
7-9 行目: レスポンスの成功判定
7: if (!response.ok) {
8: throw new Error(`HTTP エラーが発生しました。ステータス: ${response.status}`);
9: }
12 行目: JSON への変換
12: const books = await response.json();
17 行目: 取得したデータを返す
17: return books;
【catch ブロック】
エラーが発生した場合の処理を記述します。
20 行目: エラーメッセージを console.log で出力
21 行目: 空配列[]を返す
21: console.log(`データの取得に失敗しました: ${error.message}`);
22: return [];
なぜ空配列を返すのか？
この関数の戻り値を受け取る側（後で作成するコード）が、「配列」を期待しているためです。
エラー時も undefined ではなく空の配列を返すことで、後続の処理でエラーが発生するのを防ぎます。
await の動作詳細
4 行目と 12 行目で await を使っています。
4: const response = await fetch("https://jsonplaceholder.typicode.com/posts");
→ サーバーからの「返事」が届くまで待ちます
12: const books = await response.json();
→ 受け取ったデータを JavaScript で使える形式に変換し終わるまで待ちます
この「待つ」処理があることで、データが確実に取得できてから次の処理に進むことができます。
response.ok のチェック
7 行目の if (!response.ok)は重要なチェックポイントです。fetch()は、サーバーから何らかの返事が返ってくれば「成功」と判定します。 しかし、その返事が「404 Not Found」や「500 Internal Server Error」といったエラーの場合もあります。
response.ok プロパティは、HTTP ステータスコードが 200 番台 （成功を表す）かどうかを判定します。
【よくある HTTP ステータスコード】
- 200 OK: 成功
- 404 Not Found: ページが見つからない
- 500 Internal Server Error: サーバー内部エラー
response.ok が false の場合、8 行目でエラーを投げ(throw)、catch ブロックに処理が移ります。
7: if (!response.ok) {
8: throw new Error(`HTTP エラーが発生しました。ステータス: ${response.status}`);
9: }
18: } catch (error) {
19: // 通信に失敗した場合のエラーメッセージ
20: console.log(`データの取得に失敗しました: ${error.message}`);
21: return [];
22: }