レッスン5：配列とオブジェクト——データをまとめて扱う

このレッスンで学ぶこと

• 配列で複数の値をまとめて扱える
• 配列の要素を追加・削除・置き換えできる
• forEachとmapで配列を処理できる
• オブジェクトでプロパティと値の組をまとめて扱える
• 配列の中にオブジェクトを入れる構造を理解する

---

レッスン4では関数を学び、処理に名前を付けて使い回せるようにしました。このレッスンでは、データの方をまとめて扱うための「配列」と「オブジェクト」を学びます。これら2つは、Webアプリのデータ構造の中核です。レッスン3で先取りした配列の話も、ここで深めます。

配列——並び順のあるデータの集まり

配列は、複数の値を順序を持って並べて保持するデータ型です。角括弧 [ ] で囲み、要素をカンマで区切って書きます。

const fruits = ["りんご", "みかん", "ぶどう"];
const scores = [85, 62, 78, 44, 91];
const flags = [true, false, true];

要素は同じ型でなくても構いません（実務では揃えるのが普通ですが、文法上は問題ありません）。

const mixed = ["森田", 30, true];

要素へのアクセス——インデックス

配列の各要素には、番号（インデックス）でアクセスします。インデックスは0から始まる点に注意してください。

const fruits = ["りんご", "みかん", "ぶどう"];

console.log(fruits[0]);  // "りんご"
console.log(fruits[1]);  // "みかん"
console.log(fruits[2]);  // "ぶどう"
console.log(fruits[3]);  // undefined（存在しない要素）

console.log(fruits.length);  // 3（要素の数）

配列[インデックス] の形でアクセスし、配列.length で配列の長さがわかります。

要素の追加・削除

配列に対しては、要素の追加や削除のメソッドが使えます。本レッスンで主要な4つを紹介します。

メソッド	役割
push(値)	末尾に要素を追加
pop()	末尾の要素を取り除く
unshift(値)	先頭に要素を追加
shift()	先頭の要素を取り除く

const fruits = ["りんご", "みかん"];

fruits.push("ぶどう");
console.log(fruits);  // ["りんご", "みかん", "ぶどう"]

fruits.pop();
console.log(fruits);  // ["りんご", "みかん"]

fruits.unshift("いちご");
console.log(fruits);  // ["いちご", "りんご", "みかん"]

fruits.shift();
console.log(fruits);  // ["りんご", "みかん"]

💡 ポイント 配列の操作で最もよく使うのは push（末尾追加）です。ToDoリストの追加、検索結果の追加など、Webアプリで頻繁に登場します。レッスン8の実習でも使います。

要素の上書き

インデックスを指定して、要素を直接書き換えられます。

const fruits = ["りんご", "みかん", "ぶどう"];
fruits[1] = "もも";
console.log(fruits);  // ["りんご", "もも", "ぶどう"]

const で宣言した配列でも、要素の中身は書き換えられる点に注意してください。const は「変数の指す配列を別のものに差し替えられない」という意味であって、配列の中身を変更できないという意味ではありません。

forEach——配列の各要素に処理を適用する

配列の全要素に対して同じ処理をしたいとき、レッスン3で学んだ for...of のほかに、forEach メソッドがよく使われます。

const fruits = ["りんご", "みかん", "ぶどう"];

fruits.forEach(fruit => {
  console.log(`好きな果物：${fruit}`);
});

forEach の括弧の中に、関数（ここではアロー関数）を渡しています。配列の各要素が順番に fruit という引数で関数に渡され、内部の処理が実行されます。

for...of と forEach はどちらでも書けますが、Webアプリでイベント処理やDOM操作と組み合わせるときに forEach のほうが書きやすい場面が多いため、本コースでは積極的に使います。

📝 補足 forEach に渡す関数は、引数を2つ受け取れます。1つ目は要素、2つ目はインデックスです。

fruits.forEach((fruit, index) => {
  console.log(`${index + 1}: ${fruit}`);
});

map——配列を別の配列に変換する

map は、配列の各要素を変換して、新しい配列を作るメソッドです。

const prices = [100, 200, 300];
const taxedPrices = prices.map(price => price * 1.1);

console.log(taxedPrices);  // [110, 220, 330]
console.log(prices);       // [100, 200, 300]（元の配列はそのまま）

prices の各要素を1.1倍して、新しい配列 taxedPrices を作っています。元の配列 prices は変更されません。

forEach と map の違いは「新しい配列を返すかどうか」です。値を変換して新しい配列がほしいときは map、配列を順に処理したいだけなら forEach、と使い分けます。

💡 ポイント Webアプリでは「配列のデータをHTML向けに変換する」場面が頻繁にあります。例：商品の配列から、表示用の文字列の配列を作る。こういうときに map が活躍します。

オブジェクト——プロパティと値の組

配列が「並び順のある値のリスト」だったのに対し、オブジェクトは「名前と値の組のリスト」です。波括弧 { } で囲み、プロパティ名: 値 の形でカンマ区切りで書きます。

const user = {
  name: "森田 彩花",
  age: 30,
  isInstructor: true
};

user という1つの変数に、3つの情報がまとまっています。配列との違いは、各値に番号ではなく名前でアクセスする点です。

プロパティへのアクセス

オブジェクトの中の値には、ドット記法または角括弧記法でアクセスします。

const user = {
  name: "森田 彩花",
  age: 30,
  isInstructor: true
};

// ドット記法（よく使う）
console.log(user.name);          // "森田 彩花"
console.log(user.age);           // 30

// 角括弧記法（プロパティ名を変数で渡したいときなどに使う）
console.log(user["name"]);       // "森田 彩花"

通常はドット記法（オブジェクト.プロパティ名）を使います。

プロパティの追加・変更

プロパティの追加や変更も、ドット記法で書けます。

const user = {
  name: "森田 彩花",
  age: 30
};

// 追加
user.email = "morita@example.com";

// 変更
user.age = 31;

console.log(user);
// { name: "森田 彩花", age: 31, email: "morita@example.com" }

配列と同じく、const で宣言したオブジェクトでも、中身のプロパティは書き換えられます。

メソッド——オブジェクトの中の関数

オブジェクトのプロパティには、関数を入れることもできます。これを「メソッド」と呼びます。

const user = {
  name: "森田 彩花",
  greet: function() {
    console.log(`こんにちは、${this.name}です。`);
  }
};

user.greet();  // "こんにちは、森田 彩花です。"

メソッドの中で this を使うと、そのオブジェクト自身を指せます。this.name は「このオブジェクトの name プロパティ」という意味です。

最近では、メソッドをアロー関数で書くこともありますが、this の扱いが少し変わるため、入門段階では function 形式で書くことをおすすめします。

🔰 初学者の方へ this は本格的に使いこなすには深い理解が必要ですが、入門段階では「メソッドの中の this は、そのオブジェクトを指している」と覚えておけば困りません。レッスン6・7のDOM操作とイベント処理ではあまり使わないので、まずは仕組みを知っておく程度で大丈夫です。

配列の中にオブジェクトを入れる

実際のWebアプリでは、配列とオブジェクトを組み合わせた構造をよく使います。

const users = [
  { name: "森田 彩花", age: 30 },
  { name: "佐藤 健", age: 25 },
  { name: "田中 美咲", age: 28 }
];

console.log(users[0].name);  // "森田 彩花"
console.log(users[1].age);   // 25

users.forEach(user => {
  console.log(`${user.name}さん（${user.age}歳）`);
});

「ユーザー情報のオブジェクトを並べた配列」という構造は、ToDoリストの項目、商品の一覧、コメントの一覧など、Webアプリで頻出するデータ構造です。

💡 ポイント JSON（JavaScript Object Notation）と呼ばれるデータ形式は、まさにこの「配列とオブジェクトの入れ子構造」です。Webサービスとサーバーがやり取りするときに使われます。本コースでは触れませんが、JSONも同じルールで読み書きできるので、配列とオブジェクトに慣れておくとあとが楽です。

実習：プロフィールと趣味のデータを組み立てる

実習で全体を通しましょう。main.js を次のように書き換えてください。

// プロフィールはオブジェクトで
const profile = {
  name: "森田 彩花",
  age: 30,
  job: "Webコーダー",
  isInstructor: true
};

// 趣味は配列で
const hobbies = ["登山", "映画鑑賞", "パン作り"];

// プロフィール表示
console.log(`名前：${profile.name}`);
console.log(`年齢：${profile.age}歳`);
console.log(`職業：${profile.job}`);

// 趣味を1つずつ表示
console.log("--- 趣味 ---");
hobbies.forEach((hobby, index) => {
  console.log(`${index + 1}. ${hobby}`);
});

// 配列の中にオブジェクトを入れた例
const works = [
  { title: "和菓子店サイト", year: 2024 },
  { title: "登山ガイドブログ", year: 2025 },
  { title: "カフェメニューページ", year: 2025 }
];

console.log("--- 作品紹介 ---");
works.forEach(work => {
  console.log(`${work.year}年：${work.title}`);
});

// mapで作品名だけを取り出す
const titles = works.map(work => work.title);
console.log("作品タイトル一覧：", titles);

保存してブラウザを再読み込みすると、コンソールにプロフィール・趣味・作品の各リストが整理された形で表示されます。配列・オブジェクト・forEach・mapがすべて活躍する内容です。

まとめ

このレッスンでは、以下のことを学びました。

• 配列は順序のある値のリストで、[ ] で書く
• インデックスは0から始まる
• push・pop・unshift・shift で要素を追加・削除できる
• forEach は配列の各要素に処理を適用、map は新しい配列を作る
• オブジェクトはプロパティと値の組で、{ } で書く
• ドット記法でプロパティにアクセスし、メソッドはオブジェクトの中の関数
• 配列の中にオブジェクトを入れた構造はWebアプリで頻出する

次のレッスンからは、ついにJavaScriptとHTMLが出会います。「DOM操作」を学び、JavaScriptからHTMLの中身を読んだり書き換えたりできるようになりましょう。コンソールではなく、ブラウザの画面そのものが変化する体験が始まります。

---

確認クイズ

このレッスンの理解度をチェックしましょう。

回答する もう一度挑戦