Day12.5 オブジェクト応用の練習問題
ネスト構造とデータ整形は、JavaScript の実務で最も重要なスキルのひとつです。
ここでは、初心者でも確実に理解できるように、段階的な練習問題と丁寧な解説をまとめます。
ネスト構造の練習問題
問題1：ネストしたオブジェクトから値を取り出す
次のオブジェクトから「Tokyo」と「Shinjuku」を console.log で表示してください。
const user = {
name: "Taro",
address: {
prefecture: "Tokyo",
city: "Shinjuku"
}
};
解答と解説
console.log(user.address.prefecture);
console.log(user.address.city);
ネスト構造では、
オブジェクト → その中のオブジェクト → その中の値
という順番でドットをつなげてアクセスします。
「階層をたどる」という感覚が大切です。
問題2：配列 × ネスト構造から値を取り出す
次の users 配列から、Hanako の注文金額（1500）を取り出して表示してください。
const users = [
{
name: "Taro",
orders: [
{ id: 1, total: 1000 },
{ id: 2, total: 2000 }
]
},
{
name: "Hanako",
orders: [
{ id: 3, total: 1500 }
]
}
];
解答と解説
console.log(users[1].orders[0].total);
配列は [ ]、オブジェクトは . でたどります。
users[1] → Hanako
orders[0] → 最初の注文
total → 金額
という順番でアクセスします。
データ整形の練習問題
問題3：必要な情報だけを抜き出して新しい配列を作る
次の users 配列から、
「name と age だけを持つ新しい配列 summary」を作ってください。
const users = [
{
name: "Taro",
profile: { age: 20, country: "Japan" }
},
{
name: "Hanako",
profile: { age: 25, country: "USA" }
}
];
解答と解説
const summary = users.map((user) => {
return {
name: user.name,
age: user.profile.age
};
});
console.log(summary);
map は「1件 → 1件」の変換に最適です。
ネストした値（user.profile.age）を取り出して、
新しい形のオブジェクトに組み替えています。
これがデータ整形の基本です。
問題4：特定の条件に合うデータだけを整形する
次の users 配列から、
country が “Japan” のユーザーだけを対象にして、
name と country の配列を作ってください。
const users = [
{
name: "Taro",
profile: { age: 20, country: "Japan" }
},
{
name: "Hanako",
profile: { age: 25, country: "USA" }
},
{
name: "Ken",
profile: { age: 19, country: "Japan" }
}
];
解答と解説
const japaneseUsers = users
.filter((user) => user.profile.country === "Japan")
.map((user) => {
return {
name: user.name,
country: user.profile.country
};
});
console.log(japaneseUsers);
filter で「対象ユーザーだけ」に絞り、
map で「必要な形」に整形しています。
この「絞る → 変換する」の流れは実務で非常に多いです。
ネスト構造 × 集計の練習問題
問題5：注文金額の合計を計算して整形する
次の users 配列から、
「name と totalAmount（注文合計）」を持つ配列 summary を作ってください。
const users = [
{
name: "Taro",
orders: [
{ id: 1, total: 1000 },
{ id: 2, total: 2000 }
]
},
{
name: "Hanako",
orders: [
{ id: 3, total: 1500 }
]
}
];
解答と解説
const summary = users.map((user) => {
let sum = 0;
for (let i = 0; i < user.orders.length; i = i + 1) {
sum = sum + user.orders[i].total;
}
return {
name: user.name,
totalAmount: sum
};
});
console.log(summary);
ネスト構造をたどりながら合計を計算し、
「名前＋合計金額」という新しい形に整形しています。
これは実務で非常に頻繁に出てくるパターンです。
セキュリティ視点の練習問題
問題6：外部に出してよい情報だけを整形する
次の user オブジェクトから、
外部公開用として name と country だけを持つオブジェクト publicUser を作ってください。
const user = {
id: 1,
name: "Taro",
email: "taro@example.com",
passwordHash: "xxxxxx",
token: "secret-token",
profile: { age: 20, country: "Japan" }
};
解答と解説
const publicUser = {
name: user.name,
country: user.profile.country
};
console.log(publicUser);
データ整形は「必要な情報を取り出す」だけでなく、
「出してはいけない情報を除外する」ためにも使います。
passwordHash や token を含めないのはセキュリティ上の基本です。
Day12.5 練習問題まとめ
ネスト構造は「階層をたどる」感覚が重要。
データ整形は「必要な形に組み替える」作業。
filter → map の流れは実務で最も使われる。
セキュリティ的には「出していい情報だけを残す」整形が必須。
この練習問題を通して、
あなたは「データをそのまま使う人」から
「データの形を設計して扱う人」へ確実にステップアップしています。