ここからは「配列の中にオブジェクトを入れる」という、実践的なデータ管理方法を初心者向けに、イラスト的なイメージ＋実用的なコード例で丁寧に解説します！
配列の中にオブジェクトを入れるとは？
まず、オブジェクト（object）は「名前と値のペアをまとめた箱」でしたね。
let user = {
name: "Alice",
age: 25,
city: "Tokyo"
};
ここで「ユーザーがたくさんいる」場合、それぞれを別々の変数で持つのは不便です。
そんなときに便利なのが――
配列の中に複数のオブジェクトを入れる
という形です👇
1. 基本構造イメージ
users = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 },
{ name: "Charlie", age: 22 }
]
イメージで言うと：
┌───────┐
│ users[0] → {name:"Alice", age:25}
│ users[1] → {name:"Bob", age:30}
│ users[2] → {name:"Charlie", age:22}
└───────┘
2. 実際にアクセス・操作してみよう
▶ 作成
let users = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 },
{ name: "Charlie", age: 22 }
];
▶ 1人のデータを取得
console.log(users[0].name); // "Alice"
console.log(users[1].age); // 30
▶ データの更新
users[1].city = "Osaka"; // Bobにcityを追加
users[0].age = 26; // Aliceの年齢を変更
▶ 新しいユーザーを追加（push）
users.push({ name: "David", age: 28 });
▶ 特定の条件で検索（find）
let result = users.find(u => u.name === "Charlie");
console.log(result); // { name: "Charlie", age: 22 }
▶ 条件でフィルタ（filter）
let adults = users.filter(u => u.age >= 25);
console.log(adults);
// [ { name: "Alice", age: 26 }, { name: "Bob", age: 30 }, { name: "David", age: 28 } ]
3. 配列×オブジェクトはこう使うと便利！
例1：ユーザー一覧をまとめて出力
users.forEach(user => {
console.log(`${user.name} (${user.age}歳)`);
});
出力：
Alice (26歳)
Bob (30歳)
Charlie (22歳)
David (28歳)
例2：特定条件の人を探す
let found = users.find(user => user.name === "Bob");
console.log(found); // { name: "Bob", age: 30, city: "Osaka" }
例3：年齢だけを抜き出して平均を出す
let ages = users.map(u => u.age);
let avg = ages.reduce((a,b) => a + b, 0) / ages.length;
console.log("平均年齢:", avg);
例4：ソート（並べ替え）
// 年齢の昇順
users.sort((a, b) => a.age - b.age);
console.log(users);
出力：
[
{ name: "Charlie", age: 22 },
{ name: "Alice", age: 26 },
{ name: "David", age: 28 },
{ name: "Bob", age: 30, city: "Osaka" }
]
例5：名前リストだけ取り出す
let names = users.map(u => u.name);
console.log(names); // ["Charlie", "Alice", "David", "Bob"]
4. 実用ミニアプリ例：ユーザーリスト表示
（ブラウザのコンソールで動かせます）
let users = [
{ id: 1, name: "Alice", age: 25, city: "Tokyo" },
{ id: 2, name: "Bob", age: 30, city: "Osaka" },
{ id: 3, name: "Charlie", age: 22, city: "Nagoya" }
];
// 全員のプロフィールを整形して表示
users.forEach(u => {
console.log(`#${u.id}: ${u.name}（${u.age}歳, ${u.city}）`);
});
出力：
#1: Alice（25歳, Tokyo）
#2: Bob（30歳, Osaka）
#3: Charlie（22歳, Nagoya）
5. 練習問題（解答付き）
【問題1】
ユーザー配列 users の中から、年齢が25歳以上の人だけを取り出して表示してください。
解答
let adults = users.filter(u => u.age >= 25);
console.log(adults);
【問題2】
ユーザーの平均年齢を求めてください。
解答
let avgAge = users.reduce((sum, u) => sum + u.age, 0) / users.length;
console.log("平均年齢:", avgAge);
【問題3】
名前が "Bob" のユーザーの年齢を 1 増やしてください。
解答
let bob = users.find(u => u.name === "Bob");
if (bob) bob.age += 1;
6. まとめ
| やりたいこと | 使うメソッド | 例 |
|---|---|---|
| 全員表示 | forEach | users.forEach(…) |
| 条件で探す | find | users.find(u => …) |
| 条件で抽出 | filter | users.filter(u => …) |
| 並べ替える | sort | users.sort(…) |
| まとめて変換 | map | users.map(u => …) |
| 合計・平均など | reduce | users.reduce(…) |
