オブジェクトは、1つの対象に関係する値を名前付きでまとめる仕組みです。外部ファイルやAPIから受け取るJSONも、JavaScriptではオブジェクトや配列として扱います。
非同期通信は完了まで時間がかかるため、成功、読み込み中、失敗の3つの状態を考えます。
オブジェクトへ関連する値をまとめる
const profile = {
name: "山田太郎",
role: "Web制作者",
skills: ["HTML", "CSS", "JavaScript"],
};
console.log(profile.name);
console.log(profile.skills[0]);プロパティ名で値の意味が分かるため、順番だけで管理する配列とは用途が異なります。複数のプロフィールは、オブジェクトを配列へ入れて管理できます。
次の画像は、「オブジェクトへ関連する値をまとめる」で扱うコードや構成をブラウザで表示した結果です。
JSONファイルを用意する
JSONはデータを文字列として交換する形式です。キーと文字列を二重引用符で囲み、コメントや末尾の余分なカンマを書きません。
次の図では、「JSONファイルを用意する」の仕組みや関係を確認できます。
[
{
"title": "HTMLの基礎",
"url": "html-basics.html"
},
{
"title": "CSSの基礎",
"url": "css-basics.html"
}
]fetchでデータを取得する
const loadLessons = async () => {
const response = await fetch("data/lessons.json");
if (!response.ok) {
throw new Error(`HTTP error: ${response.status}`);
}
return response.json();
};fetch()はHTTPエラーでも必ず例外になるわけではないため、response.okを確認します。awaitを使う関数にはasyncを付けます。
次の図では、「fetchでデータを取得する」の仕組みや関係を確認できます。
成功と失敗を画面へ伝える
通信に成功した場合は、取得したデータと完了状態を画面へ表示します。
通信に失敗した場合も、空白のままにせず利用者が状況を判断できる文章を表示します。
const list = document.querySelector(".lesson-list");
const status = document.querySelector(".load-status");
try {
const lessons = await loadLessons();
lessons.forEach((lesson) => {
const item = document.createElement("li");
const link = document.createElement("a");
link.textContent = lesson.title;
link.href = lesson.url;
item.append(link);
list.append(item);
});
status.textContent = "読み込みが完了しました";
} catch (error) {
status.textContent = "教材を読み込めませんでした";
console.error(error);
}取得した文字列をそのままinnerHTMLへ入れず、textContentとDOMメソッドを使って要素を作ります。
Networkで通信を確認する
- ローカルサーバーからページを開く
- NetworkでJSONのURLとステータスを確認する
- JSONのパスを一時的に変えて失敗表示を確認する
- 読み込み中にも状況が分かる文章を用意する
- エラー確認後に正しいパスへ戻す
ローカルHTMLをfile://で開くとfetchが制限される場合があります。開発用サーバーから確認してください。