情報を「整理整頓」して効率よく扱おう！

前回の記事で、アロー関数というモダンな関数の書き方を学びましたね。その関数が扱うデータ型の中で、最も重要で、Web開発において必須となるのが**オブジェクト（Object）と配列（Array）**です。

これらは、単なる数字や文字ではなく、複数の関連する情報をひとまとまりにして扱うための「情報の整理箱」のようなものです。この2つをマスターすれば、ユーザー情報や商品リストなど、複雑なデータを効率よく管理できるようになります。

今回は、このオブジェクトと配列の基本的な構造と使い方を、実際のコーディング例と合わせて見ていきましょう。

1. オブジェクト：名前付きの「引き出し」
1. オブジェクトの定義とアクセス
2. データの追加・変更
2. 配列：順番に並んだ「リスト」
1. 配列の定義とアクセス
2. 配列の基本的な操作
3. オブジェクトと配列の「組み合わせ」
まとめ：データ管理は「整理整頓」から！

1. オブジェクト：名前付きの「引き出し」

オブジェクトは、複数のデータを**キー（key）と値（value）**のペアで格納するデータ構造です。まるで、引き出しに「名前」を付けて、その中に情報を整理して入れるようなイメージです。

オブジェクトの定義とアクセス

オブジェクトは、波括弧 {} を使って定義します。

JavaScript

// userという名前のオブジェクト（ユーザー情報）を定義
const user = {
  // キー : 値
  name: "山田太郎",
  age: 28,
  isLoggedIn: true,
  email: "taro@example.com"
};

オブジェクトからデータを取り出す方法（アクセス）は主に2種類あります。

ドット記法（.）：最も一般的に使われます。JavaScriptconsole.log(user.name); // 結果: 山田太郎
ブラケット記法（[]）：キーが変数である場合や、キーにスペースなどの特殊文字が含まれる場合に便利です。JavaScriptconsole.log(user["age"]); // 結果: 28

データの追加・変更

オブジェクトに新しい情報を追加したり、既存の情報を変更したりするのも簡単です。

JavaScript

user.age = 29;         // ageを29に変更
user.city = "Tokyo";   // 新しいプロパティcityを追加
console.log(user);
// 結果: { name: "山田太郎", age: 29, isLoggedIn: true, email: "...", city: "Tokyo" }

2. 配列：順番に並んだ「リスト」

配列は、複数のデータを順序立てて格納するデータ構造です。まるで、買い物リストのように、データに順番（インデックス）がついています。

配列の定義とアクセス

配列は、角括弧 [] を使って定義します。

重要: 配列の順番を示す番号（インデックス）は、必ず 0 から始まります。

JavaScript

// colorsという名前の配列（色のリスト）を定義
const colors = ["red", "green", "blue", "yellow"];

配列からデータを取り出すには、ブラケット記法に**インデックス（番号）**を指定します。

JavaScript

console.log(colors[0]); // 結果: red (一番目)
console.log(colors[3]); // 結果: yellow (四番目)

配列の基本的な操作

配列は、データを追加したり削除したりするための便利な機能（メソッド）を多数持っています。

push()：配列の最後に要素を追加します。JavaScriptcolors.push("purple"); // colors は ["red", "green", "blue", "yellow", "purple"] になる
pop()：配列の最後の要素を削除します。
.length：配列に入っている要素の数（長さ）を取得できます。

3. オブジェクトと配列の「組み合わせ」

Webサイトで扱う複雑なデータは、ほとんどの場合、オブジェクトと配列の組み合わせでできています。

例えば、「複数のユーザー情報」を管理する場合、以下のようになります。

JavaScript

// 複数のユーザー情報（オブジェクト）を配列に格納
const userList = [
  { name: "太郎", age: 28 }, // 1番目のオブジェクト
  { name: "花子", age: 30 }, // 2番目のオブジェクト
  { name: "次郎", age: 25 }
];

// 2番目のユーザー（花子）の名前を取り出す
console.log(userList[1].name); // 結果: 花子

このように、配列[インデックス].プロパティという形で、複雑なデータも簡単に取り扱うことができるようになります。