JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day12.5：オブジェクト応用

Day12.5 前半のゴール

Day12.5 は「オブジェクトを“ただの箱”として見る段階」から
「構造を設計して、欲しい形に整える段階」に進む日です。

前半のゴールはこの2つです。

Day12.5 前半でつかみたい感覚

ネスト構造＝「オブジェクトの中にオブジェクト・配列が入っている」イメージを持つ

データ整形＝「元データを、使いやすい形に“組み替える”」感覚を持つ

ネスト構造とは何か

オブジェクトの中に、さらにオブジェクトが入る

まずはシンプルなオブジェクトから。

const user = {
  name: "Taro",
  age: 20
};

const user = {
  name: "Taro",
  age: 20
};

ここに「住所」情報を追加したくなったとします。
住所は「都道府県」「市区町村」「番地」など、
複数の情報で1セットですよね。

これを1つのオブジェクトとしてまとめて、
user の中に入れるのが「ネスト構造」です。

const user = {
  name: "Taro",
  age: 20,
  address: {
    prefecture: "Tokyo",
    city: "Shinjuku",
    detail: "1-2-3"
  }
};

const user = {
  name: "Taro",
  age: 20,
  address: {
    prefecture: "Tokyo",
    city: "Shinjuku",
    detail: "1-2-3"
  }
};

address 自体がオブジェクトで、
それが user の中に入っています。

ネストした値の取り出し方

ネストした値は、ドットをつなげてアクセスします。

console.log(user.address.prefecture);  // "Tokyo"
console.log(user.address.city);        // "Shinjuku"

console.log(user.address.prefecture);  // "Tokyo"
console.log(user.address.city);        // "Shinjuku"

「user の中の address の中の prefecture」
という順番でたどっているイメージです。

深掘り：ネスト構造は「意味のあるかたまり」を作る

address をバラバラに user に置くこともできます。

const user = {
  name: "Taro",
  age: 20,
  prefecture: "Tokyo",
  city: "Shinjuku",
  detail: "1-2-3"
};

const user = {
  name: "Taro",
  age: 20,
  prefecture: "Tokyo",
  city: "Shinjuku",
  detail: "1-2-3"
};

でも、これだと「どこまでが住所なのか」がわかりにくい。
address という1つのオブジェクトにまとめることで、

ここからここまでが住所の情報
address ごと別の関数に渡す

といったことがやりやすくなります。

ネスト構造は「意味のあるかたまりを作るための箱」と考えると、
設計しやすくなります。

ネスト構造 × 配列：よくある実務の形

ユーザー一覧の中に、複数の注文が入っている

実務でよく出てくるのが、
「配列の中にオブジェクト、その中にさらに配列やオブジェクト」という形です。

const users = [
  {
    name: "Taro",
    orders: [
      { id: 1, total: 1000 },
      { id: 2, total: 2000 }
    ]
  },
  {
    name: "Hanako",
    orders: [
      { id: 3, total: 1500 }
    ]
  }
];

const users = [
  {
    name: "Taro",
    orders: [
      { id: 1, total: 1000 },
      { id: 2, total: 2000 }
    ]
  },
  {
    name: "Hanako",
    orders: [
      { id: 3, total: 1500 }
    ]
  }
];

ここでは、

users は「ユーザーの配列」
各 user は「名前」と「注文の配列」を持つ
各 order は「id」と「合計金額」を持つ

というネスト構造になっています。

ネストした配列・オブジェクトをたどる

例えば、Taro の2件目の注文の金額を取り出したい場合。

console.log(users[0].orders[1].total);  // 2000

console.log(users[0].orders[1].total);  // 2000

順番にたどっています。

0番目のユーザー → users[0]
その人の orders → users[0].orders
その中の1番目 → users[0].orders[1]
その total → users[0].orders[1].total

最初は少しややこしく感じますが、
「配列なら [ ]、オブジェクトなら .」
と覚えておけば大丈夫です。

データ整形とは何か

「元データを、使いやすい形に組み替える」こと

データ整形（データの整形・変形）とは、
「元のデータ構造を、そのまま使うのではなく、
目的に合わせて“扱いやすい形”に組み替えること」です。

例えば、さきほどの users から
「ユーザー名と、注文の合計金額だけ」の一覧を作りたいとします。

元データ：

const users = [
  {
    name: "Taro",
    orders: [
      { id: 1, total: 1000 },
      { id: 2, total: 2000 }
    ]
  },
  {
    name: "Hanako",
    orders: [
      { id: 3, total: 1500 }
    ]
  }
];

const users = [
  {
    name: "Taro",
    orders: [
      { id: 1, total: 1000 },
      { id: 2, total: 2000 }
    ]
  },
  {
    name: "Hanako",
    orders: [
      { id: 3, total: 1500 }
    ]
  }
];

欲しい形：

[
  { name: "Taro", totalAmount: 3000 },
  { name: "Hanako", totalAmount: 1500 }
]

[
  { name: "Taro", totalAmount: 3000 },
  { name: "Hanako", totalAmount: 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);
// [
//   { name: "Taro", totalAmount: 3000 },
//   { name: "Hanako", totalAmount: 1500 }
// ]

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);
// [
//   { name: "Taro", totalAmount: 3000 },
//   { name: "Hanako", totalAmount: 1500 }
// ]

ここでやっていることは、

ユーザーごとにループ
そのユーザーの orders をさらにループ
total を足し合わせる
name と totalAmount だけのオブジェクトを新しい配列に入れる

という流れです。

これがまさに「ネスト構造を理解して、データを整形している」状態です。

深掘り：なぜ整形するのか

理由はシンプルで、「使いやすくするため」です。

画面に表示するとき
グラフに渡すとき
別の API に送るとき

元の複雑な構造のままだと、
毎回「どこに何が入っているか」を意識しないといけません。

一度「表示用」「集計用」などの形に整形しておくと、
その後の処理がシンプルになります。

ネスト構造とデータ整形の関係

ネスト構造は「現実世界に近い形」、整形は「目的に近い形」

元データ（API から来る JSON など）は、
現実世界の構造に近い形になっていることが多いです。

ユーザー → 注文 → 注文の中の明細
プロジェクト → タスク → コメント

一方で、画面やレポートが欲しいのは、

ユーザーごとの合計
日付ごとの件数
ステータスごとの一覧

のような「目的に近い形」です。

ネスト構造を理解して、
そこから必要な情報だけを抜き出して整形する、
という流れが、実務では本当に頻繁に出てきます。

セキュリティ・安全性の視点から見るネスト構造と整形

「外に出していい情報だけ」に整形する

例えば、ユーザー情報にパスワードハッシュや秘密のトークンが含まれているとします。

const user = {
  id: 1,
  name: "Taro",
  email: "taro@example.com",
  passwordHash: "xxxxxx",
  token: "secret-token"
};

const user = {
  id: 1,
  name: "Taro",
  email: "taro@example.com",
  passwordHash: "xxxxxx",
  token: "secret-token"
};

このままフロントエンドに渡したり、ログに出したりすると危険です。

そこで、「外に出していい情報だけ」に整形します。

const publicUser = {
  id: user.id,
  name: user.name,
  email: user.email
};

console.log(publicUser);

const publicUser = {
  id: user.id,
  name: user.name,
  email: user.email
};

console.log(publicUser);

これはまさに「データ整形」を
セキュリティのために使っている例です。

ネスト構造を理解していないと、
「どこに何の情報が入っているか」がわからず、
うっかり秘密情報を外に出してしまうリスクが高まります。

Day12.5 前半のサンプルコード

ネスト構造をたどって、整形して、表示する小さな例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Day12.5 オブジェクト応用 前半</title>
  </head>
  <body>
    <h1>Day12.5: オブジェクト応用（前半）</h1>

    <script>
      const users = [
        {
          name: "Taro",
          orders: [
            { id: 1, total: 1000 },
            { id: 2, total: 2000 }
          ]
        },
        {
          name: "Hanako",
          orders: [
            { id: 3, total: 1500 }
          ]
        }
      ];

      const summary = [];

      for (let i = 0; i < users.length; i = 1 + i) {
        const user = users[i];

        let sum = 0;
        for (let j = 0; j < user.orders.length; j = 1 + j) {
          sum = sum + user.orders[j].total;
        }

        summary.push({
          name: user.name,
          totalAmount: sum
        });
      }

      console.log(summary);
    </script>
  </body>
</html>

コンソールに出てくる配列の形を見て、
「元のネスト構造から、どう整形されているか」を意識してみてください。

Day12.5 前半のまとめ

ネスト構造は「オブジェクトの中にオブジェクト・配列が入る」構造。
データ整形は「元データを、目的に合わせて扱いやすい形に組み替える」こと。

前半では、

ネスト構造をたどって値を取り出す
ネストした配列・オブジェクトから集計用の配列を作る
外に出していい情報だけに整形する

という感覚をつかむところまで来ました。

後半では、
map / filter などと組み合わせて、
より実務に近い「ネストデータの整形パターン」に踏み込んでいきます。