【JS応用-2】名前も年齢もこれ一つ。データをセットで管理する「オブジェクト」の基礎

前回学んだ「配列」は、データを一列に並べるのに便利でした。
しかし、次のようなデータを管理したい時はどうでしょう？

「商品A」の情報
・商品名：高級腕時計
・価格：100,000円
・在庫：あり

これを配列で ["高級腕時計", 100000, true] と書くこともできますが、何番目が値段なのか分かりにくいですよね。

そこで登場するのが「オブジェクト」です。
データに「ラベル（名前）」をつけて管理できる、非常に便利な箱です。

1. オブジェクトの基本
1. 書き方
2. データの取り出し方（ドット記法）
3. 【最重要】配列とオブジェクトの合体
実践：商品リストを自動生成しよう
解説：コードの流れ
まとめ
1. 📝 今日のミニテスト

1. オブジェクトの基本

配列が []（カギカッコ）だったのに対し、オブジェクトは {}（波カッコ） を使います。
中身は キー: 値 のペアで書きます。

書き方

const item = {
    name: "高級腕時計", // キー: 値
    price: 100000,
    isSale: true
};

これなら、どれが名前でどれが価格か一目瞭然ですね！

2. データの取り出し方（ドット記法）

配列は list[0] のように番号で指定しましたが、オブジェクトは「ドット（.）」＋「キーの名前」で指定します。

console.log( item.name );  // "高級腕時計"
console.log( item.price ); // 100000

「item の name」という風に、英語として読めるので非常に直感的です。

3. 【最重要】配列とオブジェクトの合体

実務でのWeb開発では、「オブジェクトが入った配列」という形が99%使われます。
「商品リスト」や「ユーザー一覧」などは、すべてこの形です。

// 商品データのリスト
const products = [
    { name: "パソコン", price: 150000 }, // 0番目のデータ
    { name: "マウス", price: 3000 },     // 1番目のデータ
    { name: "キーボード", price: 5000 }  // 2番目のデータ
];

このデータ構造さえ理解できれば、Amazonのような商品一覧ページも作れます。

実践：商品リストを自動生成しよう

では、前回習った for...of ループを使って、複雑な商品データをHTMLに変換してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <style>
        .card {
            border: 1px solid #ddd;
            padding: 10px;
            margin: 10px;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        .price { color: red; font-weight: bold; }
    </style>
</head>
<body>

    <h1>おすすめ商品</h1>
    <div id="product-list"></div>

    <script>
        // 1. データの準備（オブジェクトの配列）
        const products = [
            { name: "高機能パソコン", price: 150000, desc: "仕事に最適です。" },
            { name: "ゲーミングマウス", price: 5000, desc: "光ります。" },
            { name: "メカニカルキーボード", price: 12000, desc: "打鍵感が最高です。" }
        ];

        // 2. 表示場所を取得
        const listArea = document.querySelector("#product-list");

        // 3. ループでHTML生成
        for (const product of products) {
            
            // テンプレートリテラルでHTMLを組み立てる
            // product.name や product.price で中身を取り出す！
            const html = `
                <div class="card">
                    <h2>${product.name}</h2>
                    <p>${product.desc}</p>
                    <p class="price">¥${product.price}</p>
                </div>
            `;

            // 画面に追加
            listArea.innerHTML += html;
        }
    </script>

</body>
</html>

解説：コードの流れ

for (const product of products) で、配列から一つずつ「商品オブジェクト」を取り出します。
1周目は「パソコンのオブジェクト」が変数 product に入ります。
product.name で「高機能パソコン」を取り出し、HTMLに埋め込みます。
これをデータの数だけ繰り返します。

データが増えても、HTMLの修正は一切不要。
products 配列にデータを足すだけで、自動的に画面に表示されます。

まとめ

データをセットで管理するなら オブジェクト { name: "A", price: 100 }。
値を取り出すときは ドット item.name。
「オブジェクトの配列」 がWeb開発の基本形！

これでデータの扱いはバッチリです。
次回は、少し視点を変えて「関数（Function）」のモダンな書き方について学びます。
function と書くのは実はもう古い！？最新の 「アロー関数 =>」 を使いこなしましょう！

📝 今日のミニテスト

クリックで答え合わせ！

Q1. オブジェクトを作るための記号は？

正解：{} （波カッコ / ブレース）
配列 [] と混同しないように注意しましょう。

Q2. const user = { name: "田中", age: 20 };
ここから「田中」を取り出すコードは？

正解：user.name
ドット（.）を使ってアクセスします。

Q3. 実践問題：配列 list の中にあるオブジェクトから、title を取り出して表示してください。

const list = [
    { title: "記事A", id: 1 },
    { title: "記事B", id: 2 }
];

for (const item of list) {
    console.log( item.① );
}

// 答え
// ① title
// item は「配列の中身（オブジェクト）」そのものです。