Day12.5 後半のゴール
後半では、前半で触った
ネスト構造 と データ整形 を、
「for 文でなんとか触れる」レベルから
「map / filter も絡めて“設計して扱える”」レベルに引き上げます。
特にここを深く押さえます。
Day12.5 後半で意識したいポイント
ネスト構造 × map / filter で「欲しい形」に変換する
「画面用」「API用」「ログ用」など、目的別にデータを整形する感覚を持つ
セキュリティ的に“出していい情報だけ”に削る整形を意識する
ネスト構造 × map で「一覧を作る」
元データ：ネストしたオブジェクト配列
まず、こんなデータを考えます。
const users = [
{
id: 1,
name: "Taro",
profile: {
age: 20,
country: "Japan"
}
},
{
id: 2,
name: "Hanako",
profile: {
age: 25,
country: "USA"
}
}
];
name と country だけの一覧を作りたいとします。
欲しい形はこうです。
[
{ name: "Taro", country: "Japan" },
{ name: "Hanako", country: "USA" }
]
map を使ったデータ整形
const summary = users.map((user) => {
return {
name: user.name,
country: user.profile.country
};
});
console.log(summary);
ここでやっていることは、
user という「1人分のネストしたオブジェクト」
→ name と profile.country だけを取り出した「別の形のオブジェクト」
に変換している、ということです。
map は「1件 → 1件」の変換なので、
ネスト構造から「必要な情報だけを抜き出した一覧」を作るのにとても向いています。
深掘り：元データを“汚さない”という大事な性質
重要なのは、元の users は一切変更していないことです。
元データはそのまま保持
画面用・ログ用など、用途に応じて別の配列を整形して作る
というスタイルは、
バグを減らし、セキュリティ的にも安全な設計につながります。
ネスト構造 × filter で「条件付きの整形」をする
条件：特定の国のユーザーだけを対象にする
さきほどの users から、
country が “Japan” のユーザーだけを対象にしたいとします。
やりたいことは、
Japan のユーザーだけに絞る → filter
name と age だけの一覧にする → map
という流れです。
filter と map の組み合わせ
const japaneseUsers = users
.filter((user) => user.profile.country === "Japan")
.map((user) => {
return {
name: user.name,
age: user.profile.age
};
});
console.log(japaneseUsers);
// [{ name: "Taro", age: 20 }]
ここでは、
ネストした値（user.profile.country）を条件に使い
ネストした値（user.profile.age）を整形に使っている
という点がポイントです。
深掘り：filter を「安全ゲート」として使う
filter を先に通すことで、
対象外のユーザーを確実に除外
その後の処理は「対象ユーザーだけ」を前提に書ける
という状態になります。
これは、権限チェック・有効フラグ・ステータスなどを
filter に集約することで、
「この先の処理は安全なデータだけ」という前提を作るテクニックです。
ネスト構造 × reduce で「集計」する（軽く触れておく）
合計値を出したいケース
Day12 で配列の応用をやりましたが、
ネスト構造でも「合計」「カウント」はよく出てきます。
例えば、ユーザーごとの「合計注文金額」を出したい。
const users = [
{
name: "Taro",
orders: [
{ id: 1, total: 1000 },
{ id: 2, total: 2000 }
]
},
{
name: "Hanako",
orders: [
{ id: 3, total: 1500 }
]
}
];
for 文での集計（復習）
const summary = [];
for (let i = 0; i < users.length; i = i + 1) {
const user = users[i];
let sum = 0;
for (let j = 0; j < user.orders.length; j = j + 1) {
sum = sum + user.orders[j].total;
}
summary.push({
name: user.name,
totalAmount: sum
});
}
console.log(summary);
これは前半でやった形です。
後半では、「こういう処理を map / reduce に分解していく」感覚を持ってほしいので、
軽く reduce 版も見ておきます。
reduce を使った集計（イメージだけ）
const summary = users.map((user) => {
const sum = user.orders.reduce((acc, order) => {
return acc + order.total;
}, 0);
return {
name: user.name,
totalAmount: sum
};
});
console.log(summary);
ここでは、
1人分の orders を reduce で合計
その結果を使って「名前＋合計金額」のオブジェクトを返す
という流れになっています。
今は「こういう書き方もあるんだな」くらいでOKです。
大事なのは、「ネスト構造を理解して、そこから集計用の形に整形している」という感覚です。
目的別のデータ整形：画面用・API用・ログ用
画面用：表示に必要なものだけにする
例えば、ユーザー情報に
パスワードハッシュや内部IDなどが含まれているとします。
const user = {
id: 1,
name: "Taro",
email: "taro@example.com",
passwordHash: "xxxxxx",
token: "secret-token"
};
画面に渡すのは、
name と email だけで十分かもしれません。
const viewUser = {
name: user.name,
email: user.email
};
console.log(viewUser);
これは「画面用に整形したデータ」です。
API用：外部サービスに渡す形に整える
別のサービスに送るとき、
そのサービスが期待する形に整形する必要があります。
例えば、こういう形を要求されているとします。
// 期待される形
{
user_name: "Taro",
user_email: "taro@example.com"
}
それに合わせて整形します。
const payload = {
user_name: user.name,
user_email: user.email
};
console.log(payload);
「キーの名前を変える」のも立派なデータ整形です。
ログ用：監査・調査に必要な情報だけを残す
ログに出すときは、
「後から見返したい情報だけ」を残すのがポイントです。
const log = {
id: user.id,
name: user.name,
email: user.email,
action: "login",
time: "2026-05-15 10:00"
};
console.log(log);
ここでも、passwordHash や token は含めていません。
「ログに何を残すか」も、データ整形の一種です。
セキュリティの視点から見る「削るための整形」
「何を足すか」より「何を出さないか」を先に考える
データ整形というと、
「情報を組み合わせて新しい形を作る」イメージが強いですが、
セキュリティ的にはむしろ、
何を削るか
何を外に出さないか
を決める作業でもあります。
内部用のネスト構造には、
認証情報・内部ID・フラグなど、
外に出すべきでない情報が含まれていることが多いです。
整形の段階で、
必要なフィールドだけを選ぶ
不要・危険なフィールドはそもそも含めない
という設計をしておくと、
「うっかり漏らす」リスクを大きく減らせます。
例：公開用ユーザー情報の整形
const rawUser = {
id: 1,
name: "Taro",
email: "taro@example.com",
passwordHash: "xxxxxx",
token: "secret-token",
profile: {
age: 20,
country: "Japan"
}
};
const publicUser = {
name: rawUser.name,
country: rawUser.profile.country
};
console.log(publicUser);
publicUser には、
name と country しか含めていません。
「誰に渡すデータか？」
「その人は何を知る権利があるか？」
を意識して整形することが、
セキュリティ的にとても重要です。
Day12.5 後半のサンプルコード
ネスト構造を map / filter で整形してから表示する例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day12.5 オブジェクト応用 後半</title>
</head>
<body>
<h1>Day12.5: オブジェクト応用（後半）</h1>
<script>
const users = [
{
id: 1,
name: "Taro",
profile: { age: 20, country: "Japan" }
},
{
id: 2,
name: "Hanako",
profile: { age: 25, country: "USA" }
},
{
id: 3,
name: "Ken",
profile: { age: 19, country: "Japan" }
}
];
const japaneseSummary = users
.filter((user) => user.profile.country === "Japan")
.map((user) => {
return {
name: user.name,
age: user.profile.age
};
});
japaneseSummary.forEach((u) => {
console.log(`${u.name} さん（${u.age} 歳）は日本のユーザーです`);
});
</script>
</body>
</html>
ネスト構造 → filter で絞る → map で整形 → forEach で表示
という流れが一度に入っています。
Day12.5 後半のまとめ
ネスト構造は「現実世界に近い形のデータ」。
データ整形は「目的に合わせて扱いやすい形に組み替える作業」。
後半では、
ネスト構造 × map / filter で一覧や集計を作る
用途別（画面・API・ログ）にデータを整形する
セキュリティ的に「出していい情報だけ」に削る
というところまで踏み込みました。
ここまで来ているあなたは、
もう「データを受け取ってそのまま使う人」ではなく、
「データの形を設計して扱う人」に確実に近づいています。