では「APIからデータを取ってきて整形し、UIに表示する」という実務っぽい流れを、ブラウザ上で動くサンプル形式で解説します。
初心者向けに 関数で複数値を返すテクニック も活用します。
サンプル概要
- モックAPI（模擬データ）を使用
- データ整形関数で、必要な情報だけを取り出す
- UIに表示（HTML + JavaScript）
1) HTML（簡易UI）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>API整形サンプル</title>
</head>
<body>
<h1>ユーザー情報表示</h1>
<button id="loadBtn">ユーザー情報を取得</button>
<ul id="userList"></ul>
<script src="app.js"></script>
</body>
</html>
2) JavaScript（app.js）
// 模擬APIデータ
const mockApiData = [
{ first_name: "Taro", last_name: "Yamada", age: 25, avatar: "https://i.pravatar.cc/50?img=1" },
{ first_name: "Hanako", last_name: "Suzuki", age: 30, avatar: "https://i.pravatar.cc/50?img=2" },
{ first_name: "Jiro", last_name: "Tanaka", age: 22, avatar: "https://i.pravatar.cc/50?img=3" }
];
// 🔹 データ整形関数
function formatUser(rawUser) {
// ユーザー名と年齢、画像URLをまとめて返す
return {
name: `${rawUser.first_name} ${rawUser.last_name}`,
age: rawUser.age,
avatar: rawUser.avatar
};
}
// 🔹 データ取得関数（模擬API呼び出し）
function fetchUsers() {
// 通常は fetch() を使いますが、ここでは模擬データを Promise で返す
return new Promise((resolve) => {
setTimeout(() => resolve(mockApiData), 500);
});
}
// 🔹 UI表示関数
function displayUsers(users) {
const ul = document.getElementById("userList");
ul.innerHTML = ""; // 既存リストをクリア
users.forEach(rawUser => {
const user = formatUser(rawUser); // 整形
const li = document.createElement("li");
li.innerHTML = `
<img src="${user.avatar}" alt="${user.name}" style="vertical-align:middle; width:50px; height:50px; border-radius:50%;">
<strong>${user.name}</strong>（${user.age}歳）
`;
ul.appendChild(li);
});
}
// 🔹 ボタンイベント
document.getElementById("loadBtn").addEventListener("click", async () => {
const rawUsers = await fetchUsers(); // API取得
displayUsers(rawUsers); // UI表示
});
✅ ポイント解説
- 関数で複数値を返す
return {
name: `${rawUser.first_name} ${rawUser.last_name}`,
age: rawUser.age,
avatar: rawUser.avatar
};
1つの関数で「名前・年齢・画像URL」をまとめて返す
呼び出し側で user.name, user.age, user.avatar として簡単にアクセスできる
- 模擬API
- 実務では
fetch("https://api.example.com/users")で取得します - Promise を使うと、非同期処理もそのまま扱える
- 実務では
- UI表示
- HTML要素
<ul>に<li>を生成して挿入 - 整形関数で加工したデータをそのまま表示
- HTML要素
💡 拡張アイデア（実務っぽく）
- 年齢が18歳未満のユーザーを除外して表示する
→formatUser内で条件分岐して返す - エラー処理を追加して、API失敗時に「取得できませんでした」と表示
- クリックしたユーザーだけ詳細をモーダル表示
これをブラウザで開くと：
- 「ユーザー情報を取得」ボタンをクリック
- 0.5秒後に模擬APIデータが整形されて表示
→ 関数で複数値をまとめて返すテクニックがそのまま実務に使える例です。