Day 61：APIデータを画面表示
Day 61では、第5フェーズ「非同期処理とAPI」の実践として、取得したAPIデータをHTMLに表示する学習を行います。Day 60では、公開APIからデータを取得し、そのデータを console.log() で確認しました。そこでは、「まず取得できているかをコンソールで確認する」というとても大切な基本姿勢を学びました。Day 61では、その次の段階として、取得したデータを実際に画面へ表示していきます。ここから、ただデータを取って終わりではなく、「ユーザーに見せるアプリらしい形」へ進んでいきます。
このDay 61は、初心者の方にとってかなり手応えを感じやすい回です。なぜなら、APIから取ってきたデータが実際にブラウザ画面へ出ると、「自分のアプリが外の世界とつながっている」感覚が一気に強くなるからです。これまでは、主に自分で用意したデータや localStorage の中のデータを扱ってきました。しかし、APIデータを画面に表示できるようになると、ニュースアプリ、天気アプリ、商品一覧アプリ、ユーザー一覧アプリなど、現実のWebアプリにかなり近い構造が見えてきます。つまり、Day 61は「外部データを使うアプリ開発」の第一歩としてとても重要です。
ただし、初心者の方がここで急に難しく感じることもあります。理由は、今回の学習では「非同期処理」と「データ構造の理解」と「DOM操作」が一度に関わってくるからです。つまり、単に fetch() が書ければよいわけでもなく、単に appendChild() が書ければよいわけでもありません。「取得したデータがどんな形かを理解し、その値を取り出し、HTML要素を作って、画面に追加する」という一連の流れをまとめて考える必要があります。そこで今回は、いきなり大きな完成コードを見るのではなく、ステップバイステップで、「何を確認し」「どこで値を取り出し」「どう表示へつなぐのか」を順番に整理しながら進めます。
まず最初に結論をつかむ
最初に今回の学習内容を一言でまとめると、APIデータを画面表示するとは、「取得したJSONデータから必要な値を取り出し、JavaScriptでHTML要素を作って、ページに追加すること」です。
今回の基本的な流れは次の通りです。
- APIからデータを取得する
- `response.json()` で読み取る
- データ全体の形を確認する
- 必要な値を取り出す
- HTML要素を作る
- その要素を画面へ追加する
初心者の方は、まずこの流れを頭の中で一本の線として持っておくと、途中で迷いにくくなります。
なぜコンソール確認の次に画面表示なのか
Day 60からDay 61への流れには、非常に意味があります。Day 60でいきなり画面表示まで行かなかったのは、まず「データが取れているかどうか」と「その形がどうなっているか」を切り分けて確認するためでした。そして、Day 61ではその確認済みのデータを使って画面表示へ進みます。
この順番が大切な理由は次の通りです。
- 通信の問題と表示の問題を分けて考えられる
- 取得できているのに表示されない理由を見つけやすい
- データ構造を理解した上でDOM操作に進める
初心者の方は、API学習では「まずコンソール、次に画面」がとても良い順番だと覚えておくと、今後の学習でも役立ちます。
まずは取得したデータの形を思い出す
Day 61に入る前に、Day 60で取得したデータの形を思い出しておきます。たとえば、JSONPlaceholder の ToDo 1件なら、次のようなデータでした。
{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
}この場合、画面に表示したいのは、たとえば title や completed です。つまり、APIから取得したオブジェクトの中から必要なプロパティを選んで、HTMLへ反映することになります。
初心者の方は、画面表示の前に「どの値を見せたいのか」をはっきりさせることがとても大切です。全部をそのまま出すのではなく、必要な部分を選ぶ意識を持つと整理しやすくなります。
ステップ1：まずは1件のデータを表示する
最初は、配列の一覧表示ではなく、1件だけ表示する形から始めるのがおすすめです。これが一番わかりやすいからです。たとえば、HTMLに表示先を1つ用意します。
<h2>ToDoデータ表示</h2>
<p id="title">ここにタイトルが表示されます。</p>そして、JavaScriptで取得した title を入れます。
document.getElementById("title").textContent = data.title;このコードでは、APIから1件のToDoデータを取得し、その title を <p> 要素の中へ入れています。初心者の方は、まずこの「1つの値を1つのHTML要素に入れる」流れをしっかり理解するとよいです。
なぜ textContent を使うのか
ここは大事なポイントです。画面へ文字を表示するとき、今回は textContent を使っています。これは、要素の中に文字を入れるための基本的で安全な方法です。
document.getElementById("title").textContent = data.title;初心者の方は、APIから取ってきた文字列をまず textContent で表示するのがよい基本だと覚えておくと安心です。外部データを扱うときに、見た目のためだけに安易な方法を使うより、まずは安全で単純な方法を身につけることが大切です。
ステップ2：複数の値をまとめて表示する
次に、タイトルだけでなく、完了状態も一緒に表示してみます。HTML側に表示場所を増やします。
<h2>ToDoデータ表示</h2>
<p id="title">ここにタイトルが表示されます。</p>
<p id="status">ここに完了状態が表示されます。</p>JavaScriptは次のようになります。
async function getTodo() {
const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
const data = await response.json();
// タイトルを表示する
document.getElementById("title").textContent = "タイトル: " + data.title;
// 完了状態を表示する
document.getElementById("status").textContent = "完了状態: " + data.completed;
}
getTodo();このコードで、1件のデータの中から2つの値を取り出して表示できます。初心者の方は、ここで「データ1件の中にも複数の情報があり、それぞれ別の場所に表示できる」と理解すると、次の一覧表示にもつながりやすいです。
真偽値をそのまま表示するか、わかりやすく変換するか
ここは少し深掘りしたい部分です。data.completed は true または false です。しかし、画面にそのまま true や false を出すと、少しわかりにくいことがあります。ユーザー向けには、日本語に変換して表示したほうが親切です。
document.getElementById("status").textContent =
"完了状態: " + (data.completed ? "完了済み" : "未完了");このようにすると、true なら「完了済み」、false なら「未完了」と表示できます。初心者の方は、「データとして持つ形」と「ユーザーに見せる形」は同じとは限らない、と理解すると設計の感覚が育ちやすいです。
ステップ3：一覧データを表示する準備をする
次に、APIから複数件のデータを取得して一覧表示することを考えます。実際のアプリでは、1件だけより複数件を一覧表示する場面のほうが多いです。そのため、ここからがDay 61の本格的な実践になります。
まず、HTMLに一覧表示用の場所を用意します。
<h2>ToDo一覧</h2>
<ul id="todoList"></ul>この <ul> の中に、JavaScriptで <li> を追加していく形にします。初心者の方は、「HTMLにあらかじめ空の入れ物を用意しておき、JavaScriptで中身を入れる」と考えるとわかりやすいです。
ステップ4：配列データを1件ずつ取り出す
複数件のデータを取得するには、たとえば次のようなURLを使えます。
https://jsonplaceholder.typicode.com/todos?_limit=5これで5件分のToDoが配列として返ってきます。取得して確認するコードは次のようになります。
async function getTodos() {
const response = await fetch("https://jsonplaceholder.typicode.com/todos?_limit=5");
const data = await response.json();
console.log(data);
}
getTodos();この data は配列です。そのため、1件ずつ取り出すには forEach() が使えます。
data.forEach(function (todo) {
console.log(todo.title);
});初心者の方は、ここで「1件のときはオブジェクト、複数件のときは配列」と意識すると整理しやすいです。
ステップ5：li要素を作って画面に追加する
ここが画面表示の中心です。forEach() で1件ずつ取り出したデータから <li> を作り、それを <ul> に追加していきます。
async function getTodos() {
const response = await fetch("https://jsonplaceholder.typicode.com/todos?_limit=5");
const data = await response.json();
const todoList = document.getElementById("todoList");
data.forEach(function (todo) {
// li 要素を作る
const li = document.createElement("li");
// タイトルを入れる
li.textContent = todo.title;
// ul に追加する
todoList.appendChild(li);
});
}
getTodos();このコードで、APIから取得した5件のToDoタイトルが画面に一覧表示されます。初心者の方は、この一連の流れをとても大事にしたいです。
- 配列を1件ずつ見る
- HTML要素を作る
- 要素に値を入れる
- 画面に追加する
これはAPI表示だけでなく、一覧表示全般で非常によく使う基本形です。
なぜ innerHTML ではなく createElement を使うのか
ここも初心者の方にとって大切なポイントです。今回の説明では、createElement() と appendChild() を使っています。もちろん innerHTML を使って一気に文字列として入れる方法もありますが、学習初期では createElement() のほうが構造を理解しやすいです。
理由は次の通りです。
- どの要素を作っているかが明確です。
- 値をどこに入れているかが見えやすいです。
- 要素追加の流れを理解しやすいです。
初心者の方は、まずはDOMを1つずつ組み立てる感覚を createElement() で身につけるのがおすすめです。
ステップ6：完了状態も一覧に含める
タイトルだけでなく、完了状態も一緒に見せたい場合は、文字列を工夫して表示します。
async function getTodos() {
const response = await fetch("https://jsonplaceholder.typicode.com/todos?_limit=5");
const data = await response.json();
const todoList = document.getElementById("todoList");
data.forEach(function (todo) {
const li = document.createElement("li");
// タイトルと完了状態を表示する
li.textContent = `${todo.title} / 状態: ${todo.completed ? "完了済み" : "未完了"}`;
todoList.appendChild(li);
});
}
getTodos();このようにすると、取得したデータをより情報量のある形で見せられます。初心者の方は、「APIデータをそのまま出すだけでなく、少し加工して見せる」という感覚をここでつかむとよいです。
読み込み前・読み込み中・読み込み後を考える
ここはとても重要なので深掘りします。APIデータを画面表示するときは、ただ結果だけを考えるのではなく、「まだ何もない状態」「読み込み中の状態」「読み込み後の状態」を考えることが大切です。
たとえば、HTMLにメッセージ用の要素を置いておきます。
<p id="message">ボタンを押すとデータを表示します。</p>
<ul id="todoList"></ul>そして、JavaScriptで状態に応じて文言を変えます。
message.textContent = "データを取得中です...";取得後はこうです。
message.textContent = "データの取得に成功しました。";エラー時はこうです。
message.textContent = "データの取得に失敗しました。";初心者の方は、API表示では「画面に何が起きているかを伝える」ことが使いやすさに直結すると理解すると、UI設計の感覚も育ちます。
そのまま使える完成テンプレート
ここでは、Day 61の内容をまとめた完成テンプレートを紹介します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day 61 APIデータを画面表示</title>
</head>
<body>
<h2>APIデータを画面表示</h2>
<button id="loadButton">ToDoを取得する</button>
<p id="message">ボタンを押すとToDo一覧を表示します。</p>
<ul id="todoList"></ul>
<script>
// 必要な要素を取得する
const loadButton = document.getElementById("loadButton");
const message = document.getElementById("message");
const todoList = document.getElementById("todoList");
// APIデータを取得して画面に表示する関数
async function loadTodos() {
try {
// 読み込み中のメッセージを表示する
message.textContent = "データを取得中です...";
// 一覧をいったん空にする
todoList.innerHTML = "";
// APIへリクエストを送る
const response = await fetch("https://jsonplaceholder.typicode.com/todos?_limit=5");
// Response を JSON として読み取る
const data = await response.json();
// 取得したデータを1件ずつ画面に追加する
data.forEach(function (todo) {
// li 要素を作成する
const li = document.createElement("li");
// タイトルと完了状態を表示する
li.textContent = `${todo.title} / 状態: ${todo.completed ? "完了済み" : "未完了"}`;
// ul に追加する
todoList.appendChild(li);
});
// 読み込み完了メッセージ
message.textContent = "データの取得に成功しました。";
} catch (error) {
// エラー時のメッセージ
message.textContent = "データの取得に失敗しました。";
console.log(error);
}
}
// ボタンが押されたらデータ取得を実行する
loadButton.addEventListener("click", function () {
loadTodos();
});
</script>
</body>
</html>このテンプレートには、Day 61で学ぶべき基本要素がしっかり入っています。
- ボタン操作で取得を開始する
- `fetch()` で公開APIからデータを取る
- `response.json()` で中身を読む
- 配列を `forEach()` で回す
- `createElement()` で `
- ` を作る
- 画面へ追加する
- 読み込み中やエラー時のメッセージも表示する
よくあるつまずきポイント
Day 61で初心者の方がつまずきやすいポイントを整理しておきます。
- APIから返るデータが配列なのかオブジェクトなのか区別できていない
- `response.json()` を忘れている
- `await` をつけ忘れて Promise のまま扱ってしまう
- 表示先のHTML要素の `id` が間違っている
- ループの中で要素を作らず、同じ要素を使い回してしまう
特に大切なのは、「まずデータの形を把握すること」です。ここがあいまいなまま画面表示に進むと、どこで間違っているのかが見えにくくなります。
情報セキュリティの観点での注意
APIから取得したデータを画面に表示するときは、外部から来たデータを表示しているという意識が大切です。学習段階では信頼できる練習用APIを使うことが前提ですが、それでも「外のデータをそのまま使っている」という感覚を持つことは重要です。初心者の方は、まず textContent を使って安全に文字を表示する基本を身につけるとよいです。便利さだけでなく、安全性も意識できると、今後より実践的な開発へ進みやすくなります。
初心者が特に注意したいポイント
Day 61では、次の点を特に意識すると理解が深まりやすいです。
- コンソール確認の次に画面表示へ進む順番が大切です。
- 1件表示から始めて、次に一覧表示へ進むと理解しやすいです。
- 配列データは `forEach()` で1件ずつ処理します。
- `createElement()` と `appendChild()` は画面表示の基本です。
- 外部データはそのままではなく、わかりやすい表示用の形に整えると親切です。
- 読み込み中やエラー時の表示も、使いやすさの一部です。
特に重要なのは、「APIデータ取得」と「DOM操作」が別々の知識ではなく、今回ここでつながるという点です。この接続が見えると、Webアプリらしさが一気に増します。
Day 61のゴールを整理する
Day 61では、次のことができるようになっていれば十分です。
- 取得したAPIデータをHTMLに表示できる
- 1件のオブジェクトと複数件の配列の違いを理解している
- 配列データを `forEach()` で1件ずつ処理できる
- `createElement()` と `appendChild()` を使って一覧表示できる
- 読み込み中・成功・失敗の画面表示を切り替えられる
ここまでできれば、Day 61としてはとても順調です。API学習が「データ取得」から「ユーザーに見せる段階」へしっかり進んでいます。
まとめ
Day 61では、第5フェーズ「非同期処理とAPI」の実践として、取得したAPIデータをHTMLに表示する学習を行いました。Day 60で学んだ「まずコンソールで確認する」という段階の次に進み、今回は、取得したJSONデータの中から必要な値を取り出して、JavaScriptでHTML要素を作り、画面へ追加する流れを学びました。1件だけを表示する場合は、取得したオブジェクトのプロパティを textContent で要素へ入れる形が基本です。複数件を表示する場合は、配列を forEach() で1件ずつ処理し、createElement() と appendChild() で一覧表示していきます。
特に大切なのは、APIデータの形を理解してから表示処理に進むことです。オブジェクトなのか配列なのか、どこに必要な値が入っているのかを把握した上でDOM操作をすると、混乱しにくくなります。また、読み込み中やエラー時の表示も含めて考えることで、ただ動くだけでなく、使いやすいアプリへ近づいていきます。
次に進む前に、今回のテンプレートを実際に動かし、まず1件表示に書き換えてみたり、表示件数を変えてみたりするのがおすすめです。そして、「取得」「読み取り」「取り出し」「表示」という4段階を自分の言葉で説明できるようになると、Day 61の理解がかなり深まっています。