基礎から学ぶJavaScript入門 90日コース | JavaScriptでデータを扱う － Day 21：オブジェクトと配列

Day 21：オブジェクトと配列（前半）

「現実のデータ構造」に一気に近づく日です

Day 21では、これまで学んできた 配列 と オブジェクト を組み合わせて、

• オブジェクトの配列
• 実務でのデータ構造

を扱っていきます。

実践テーマは、

• 商品一覧
• ユーザー一覧
• ToDo一覧

です。 ここを理解すると、「現実のWebサービス## Day 21：オブジェクトと配列（前半） 「“一覧データ”を扱うための最重要パターンを身につける」

Day 21前半では、これまで学んできた 配列 と オブジェクト を組み合わせて、

• オブジェクトの配列
• 実務でのデータ構造

を理解し、実践として

• 商品一覧
• ユーザー一覧
• ToDo一覧

を扱えるようになることを目標にします。

ここで身につける「オブジェクトの配列」は、 Webアプリ・スマホアプリ・バックエンドなど、ほぼすべての現場で使われる超重要パターンです。

オブジェクトの配列とは何か

配列 × オブジェクト = 「一覧データ」

• 1件のデータ → オブジェクト
• 複数件のデータ → オブジェクトの配列

という形が、実務での基本パターンです。

例えば「商品一覧」を考えてみます。

• 1つの商品：オブジェクト
• 商品一覧：商品オブジェクトの配列

という構造になります。

商品一覧：オブジェクトの配列の基本形

商品オブジェクトを1件だけ書いてみる

const product = {
  id: 1,
  name: 'ノート',
  price: 100,
  stock: 10,
};

const product = {
  id: 1,
  name: 'ノート',
  price: 100,
  stock: 10,
};

• これは「1つの商品」を表すオブジェクトです。

商品一覧（複数の商品）をオブジェクトの配列で表現する

const products = [
  { id: 1, name: 'ノート',      price: 100, stock: 10 },
  { id: 2, name: 'ペン',        price: 150, stock: 20 },
  { id: 3, name: '消しゴム',    price: 80,  stock: 15 },
  { id: 4, name: '定規',        price: 120, stock: 5  },
];

const products = [
  { id: 1, name: 'ノート',      price: 100, stock: 10 },
  { id: 2, name: 'ペン',        price: 150, stock: 20 },
  { id: 3, name: '消しゴム',    price: 80,  stock: 15 },
  { id: 4, name: '定規',        price: 120, stock: 5  },
];

• products は「商品オブジェクトの配列」です。
• 1つ1つの要素が「商品オブジェクト」になっています。

重要なポイント：

• 「一覧」＝配列
• 「1件」＝オブジェクト
• この組み合わせが、実務でのデータ構造の基本形です。

商品一覧を表示する：for…of で1件ずつ取り出す

コンソールに商品一覧を表示する

for (const product of products) {
  console.log(`商品名：${product.name}／価格：${product.price}円／在庫：${product.stock}`);
}

for (const product of products) {
  console.log(`商品名：${product.name}／価格：${product.price}円／在庫：${product.stock}`);
}

• for...of で配列 products から1件ずつ取り出しています。
• product は「1つの商品オブジェクト」です。
• product.name や product.price でプロパティにアクセスしています。

ユーザー一覧：オブジェクトの配列で「ユーザー管理」をイメージする

ユーザーオブジェクトを1件だけ書いてみる

const user = {
  id: 101,
  name: '佐藤花子',
  email: 'hanako@example.com',
  isPremium: false,
};

const user = {
  id: 101,
  name: '佐藤花子',
  email: 'hanako@example.com',
  isPremium: false,
};

ユーザー一覧をオブジェクトの配列で表現する

const users = [
  { id: 101, name: '佐藤花子', email: 'hanako@example.com', isPremium: false },
  { id: 102, name: '山田太郎', email: 'taro@example.com',   isPremium: true  },
  { id: 103, name: '鈴木一郎', email: 'ichiro@example.com', isPremium: false },
];

const users = [
  { id: 101, name: '佐藤花子', email: 'hanako@example.com', isPremium: false },
  { id: 102, name: '山田太郎', email: 'taro@example.com',   isPremium: true  },
  { id: 103, name: '鈴木一郎', email: 'ichiro@example.com', isPremium: false },
];

• users は「ユーザーオブジェクトの配列」です。
• 1つ1つが「ユーザー1人分の情報」を持っています。

ユーザー一覧を表示する

for (const user of users) {
  console.log(`ID：${user.id}／名前：${user.name}／メール：${user.email}／プレミアム：${user.isPremium}`);
}

for (const user of users) {
  console.log(`ID：${user.id}／名前：${user.name}／メール：${user.email}／プレミアム：${user.isPremium}`);
}

ToDo一覧：タスク管理の基本構造

ToDoオブジェクトを1件だけ書いてみる

const todo = {
  id: 1,
  title: 'JavaScriptの勉強',
  done: false,
};

const todo = {
  id: 1,
  title: 'JavaScriptの勉強',
  done: false,
};

ToDo一覧をオブジェクトの配列で表現する

const todos = [
  { id: 1, title: 'JavaScriptの勉強', done: false },
  { id: 2, title: '買い物に行く',     done: true  },
  { id: 3, title: 'メールの返信',     done: false },
];

const todos = [
  { id: 1, title: 'JavaScriptの勉強', done: false },
  { id: 2, title: '買い物に行く',     done: true  },
  { id: 3, title: 'メールの返信',     done: false },
];

• todos は「ToDoオブジェクトの配列」です。
• 1つ1つが「タスク1件」を表しています。

ToDo一覧を表示する

for (const todo of todos) {
  const status = todo.done ? '完了' : '未完了';
  console.log(`ID：${todo.id}／タイトル：${todo.title}／状態：${status}`);
}

for (const todo of todos) {
  const status = todo.done ? '完了' : '未完了';
  console.log(`ID：${todo.id}／タイトル：${todo.title}／状態：${status}`);
}

実務でのデータ構造のイメージ

よくあるパターン

• 商品一覧 → products（オブジェクトの配列）
• ユーザー一覧 → users（オブジェクトの配列）
• 注文一覧 → orders（オブジェクトの配列）
• ToDo一覧 → todos（オブジェクトの配列）

共通していること：

• 「一覧」＝配列
• 「1件」＝オブジェクト

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

Day 21 前半 練習テンプレート（ブラウザで実行可能）

以下のテンプレートをブラウザで開き、 コンソールを見ながら「商品一覧」「ユーザー一覧」「ToDo一覧」を確認してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 21 前半：オブジェクトと配列 練習テンプレート</title>
</head>
<body>
  <h1>Day 21 前半：オブジェクトと配列（商品一覧・ユーザー一覧・ToDo一覧）</h1>
  <p>ブラウザのコンソールを開いて、一覧表示のログを確認してください。</p>

  <script>
    console.log('--- 商品一覧（オブジェクトの配列） ---');

    const products = [
      { id: 1, name: 'ノート',      price: 100, stock: 10 },
      { id: 2, name: 'ペン',        price: 150, stock: 20 },
      { id: 3, name: '消しゴム',    price: 80,  stock: 15 },
      { id: 4, name: '定規',        price: 120, stock: 5  },
    ];

    for (const product of products) {
      console.log(`商品名：${product.name}／価格：${product.price}円／在庫：${product.stock}`);
    }

    console.log('--- ユーザー一覧（オブジェクトの配列） ---');

    const users = [
      { id: 101, name: '佐藤花子', email: 'hanako@example.com', isPremium: false },
      { id: 102, name: '山田太郎', email: 'taro@example.com',   isPremium: true  },
      { id: 103, name: '鈴木一郎', email: 'ichiro@example.com', isPremium: false },
    ];

    for (const user of users) {
      console.log(`ID：${user.id}／名前：${user.name}／メール：${user.email}／プレミアム：${user.isPremium}`);
    }

    console.log('--- ToDo一覧（オブジェクトの配列） ---');

    const todos = [
      { id: 1, title: 'JavaScriptの勉強', done: false },
      { id: 2, title: '買い物に行く',     done: true  },
      { id: 3, title: 'メールの返信',     done: false },
    ];

    for (const todo of todos) {
      const status = todo.done ? '完了' : '未完了';
      console.log(`ID：${todo.id}／タイトル：${todo.title}／状態：${status}`);
    }

    console.log('--- Day 21 前半：オブジェクトと配列の練習が完了しました ---');
  </script>
</body>
</html>

Day 21 前半のまとめ

Day 21前半では、

• オブジェクトの配列が「一覧データ」の基本構造であること
• 商品一覧・ユーザー一覧・ToDo一覧を、オブジェクトの配列で表現できること
• for...of で1件ずつ取り出し、プロパティを使って表示できること

を確認しました。

ここで意識してほしいのは、

「1件＝オブジェクト」「一覧＝オブジェクトの配列」

という感覚です。

この感覚が身につくと、 現実のアプリで扱うほとんどのデータ構造を、 自然にイメージしながらコードに落とし込めるようになっていきます。

Day 21：オブジェクトと配列（後半）

「一覧データを“操作する”力をつける」

Day 21後半では、前半で作った

• 商品一覧
• ユーザー一覧
• ToDo一覧

という 「オブジェクトの配列」 を、実際に操作していくことに焦点を当てて解説していきます。 ここからは、単に「一覧を持っている」だけでなく、

• 条件で絞り込む
• 特定の1件を探す
• 表示用の形に変換する

といった、実務でよく使う処理をステップバイステップで見ていきます。

商品一覧：条件で絞り込み・検索・表示用変換をしてみる

商品一覧データ（オブジェクトの配列）

まず、前半で扱ったような商品一覧を用意します。

const products = [
  { id: 1, name: 'ノート',      price: 100, stock: 10, category: '文房具' },
  { id: 2, name: 'ペン',        price: 150, stock: 20, category: '文房具' },
  { id: 3, name: '消しゴム',    price: 80,  stock: 15, category: '文房具' },
  { id: 4, name: '定規',        price: 120, stock: 5,  category: '文房具' },
  { id: 5, name: 'ノートPC',    price: 80000, stock: 3, category: '電子機器' },
];

const products = [
  { id: 1, name: 'ノート',      price: 100, stock: 10, category: '文房具' },
  { id: 2, name: 'ペン',        price: 150, stock: 20, category: '文房具' },
  { id: 3, name: '消しゴム',    price: 80,  stock: 15, category: '文房具' },
  { id: 4, name: '定規',        price: 120, stock: 5,  category: '文房具' },
  { id: 5, name: 'ノートPC',    price: 80000, stock: 3, category: '電子機器' },
];

• 1件1件が「商品オブジェクト」です。
• 全体として「商品一覧」というオブジェクトの配列になっています。

ステップ1：文房具だけを絞り込む（filter）

const stationeryProducts = products.filter((product) => {
  // カテゴリが「文房具」の商品だけ残します
  return product.category === '文房具';
});

console.log('文房具カテゴリの商品一覧：', stationeryProducts);

const stationeryProducts = products.filter((product) => {
  // カテゴリが「文房具」の商品だけ残します
  return product.category === '文房具';
});

console.log('文房具カテゴリの商品一覧：', stationeryProducts);

• filter() は「条件に合うものだけを残す」メソッドです。
• オブジェクトの配列に対しても、同じように使えます。

ステップ2：高価格商品だけを絞り込む（filter）

const expensiveProducts = products.filter((product) => {
  // 価格が1000円以上の商品だけ残します
  return product.price >= 1000;
});

console.log('高価格商品一覧：', expensiveProducts);

const expensiveProducts = products.filter((product) => {
  // 価格が1000円以上の商品だけ残します
  return product.price >= 1000;
});

console.log('高価格商品一覧：', expensiveProducts);

• 「高価格帯の商品だけ一覧にしたい」といった場面に直結します。

ステップ3：特定の商品を探す（find）

const targetId = 3;

const productById = products.find((product) => {
  // idが3の商品を探します
  return product.id === targetId;
});

console.log('idが3の商品：', productById);

const targetId = 3;

const productById = products.find((product) => {
  // idが3の商品を探します
  return product.id === targetId;
});

console.log('idが3の商品：', productById);

• find() は「条件に合う最初の1件だけ」を返します。
• 詳細画面を開くときなど、「1件だけ欲しい」場面でよく使われます。

ステップ4：表示用の文字列に変換する（map）

const productLabels = products.map((product) => {
  // 画面に表示しやすい形の文字列に変換します
  return `${product.name}（${product.price}円／在庫：${product.stock}／カテゴリ：${product.category}）`;
});

console.log('表示用の商品ラベル一覧：', productLabels);

const productLabels = products.map((product) => {
  // 画面に表示しやすい形の文字列に変換します
  return `${product.name}（${product.price}円／在庫：${product.stock}／カテゴリ：${product.category}）`;
});

console.log('表示用の商品ラベル一覧：', productLabels);

• map() は「1件1件を別の形に変換する」メソッドです。
• オブジェクトの配列から「表示用の文字列の配列」を作る、といった使い方がよくあります。

ユーザー一覧：プレミアムユーザーの抽出・検索をしてみる

ユーザー一覧データ（オブジェクトの配列）

const users = [
  { id: 101, name: '佐藤花子', email: 'hanako@example.com', isPremium: false },
  { id: 102, name: '山田太郎', email: 'taro@example.com',   isPremium: true  },
  { id: 103, name: '鈴木一郎', email: 'ichiro@example.com', isPremium: false },
];

const users = [
  { id: 101, name: '佐藤花子', email: 'hanako@example.com', isPremium: false },
  { id: 102, name: '山田太郎', email: 'taro@example.com',   isPremium: true  },
  { id: 103, name: '鈴木一郎', email: 'ichiro@example.com', isPremium: false },
];

ステップ1：プレミアムユーザーだけを抽出する（filter）

const premiumUsers = users.filter((user) => {
  // isPremiumがtrueのユーザーだけ残します
  return user.isPremium === true;
});

console.log('プレミアムユーザー一覧：', premiumUsers);

const premiumUsers = users.filter((user) => {
  // isPremiumがtrueのユーザーだけ残します
  return user.isPremium === true;
});

console.log('プレミアムユーザー一覧：', premiumUsers);

• 会員ランク別の一覧表示などに直結する処理です。

ステップ2：メールアドレスでユーザーを検索する（find）

const targetEmail = 'taro@example.com';

const userByEmail = users.find((user) => {
  return user.email === targetEmail;
});

console.log('メールアドレスで検索したユーザー：', userByEmail);

const targetEmail = 'taro@example.com';

const userByEmail = users.find((user) => {
  return user.email === targetEmail;
});

console.log('メールアドレスで検索したユーザー：', userByEmail);

• ログイン処理やユーザー情報の取得などでよく使うパターンです。

ステップ3：表示用のユーザーラベルを作る（map）

const userLabels = users.map((user) => {
  const premiumLabel = user.isPremium ? 'プレミアム' : '通常';
  return `${user.name}（${user.email}／${premiumLabel}会員）`;
});

console.log('表示用ユーザーラベル一覧：', userLabels);

const userLabels = users.map((user) => {
  const premiumLabel = user.isPremium ? 'プレミアム' : '通常';
  return `${user.name}（${user.email}／${premiumLabel}会員）`;
});

console.log('表示用ユーザーラベル一覧：', userLabels);

• 画面にそのまま出せる形に変換することで、表示処理がシンプルになります。

ToDo一覧：完了・未完了の切り替えと表示

ToDo一覧データ（オブジェクトの配列）

const todos = [
  { id: 1, title: 'JavaScriptの勉強', done: false },
  { id: 2, title: '買い物に行く',     done: true  },
  { id: 3, title: 'メールの返信',     done: false },
];

const todos = [
  { id: 1, title: 'JavaScriptの勉強', done: false },
  { id: 2, title: '買い物に行く',     done: true  },
  { id: 3, title: 'メールの返信',     done: false },
];

ステップ1：未完了のToDoだけを抽出する（filter）

const incompleteTodos = todos.filter((todo) => {
  return todo.done === false;
});

console.log('未完了のToDo一覧：', incompleteTodos);

const incompleteTodos = todos.filter((todo) => {
  return todo.done === false;
});

console.log('未完了のToDo一覧：', incompleteTodos);

• 「まだ終わっていないタスクだけ表示する」といった機能に直結します。

ステップ2：特定のToDoを完了にする（find＋プロパティ変更）

const targetTodoId = 1;

const targetTodo = todos.find((todo) => {
  return todo.id === targetTodoId;
});

if (targetTodo) {
  // 該当するToDoが見つかったら、doneをtrueに変更します
  targetTodo.done = true;
}

console.log('更新後のToDo一覧：', todos);

const targetTodoId = 1;

const targetTodo = todos.find((todo) => {
  return todo.id === targetTodoId;
});

if (targetTodo) {
  // 該当するToDoが見つかったら、doneをtrueに変更します
  targetTodo.done = true;
}

console.log('更新後のToDo一覧：', todos);

• find() で1件を取り出し、そのオブジェクトのプロパティを変更しています。
• 「状態を変える」処理の基本パターンです。

ステップ3：表示用のラベルに変換する（map）

const todoLabels = todos.map((todo) => {
  const status = todo.done ? '完了' : '未完了';
  return `ID：${todo.id}／タイトル：${todo.title}／状態：${status}`;
});

console.log('表示用ToDoラベル一覧：', todoLabels);

const todoLabels = todos.map((todo) => {
  const status = todo.done ? '完了' : '未完了';
  return `ID：${todo.id}／タイトル：${todo.title}／状態：${status}`;
});

console.log('表示用ToDoラベル一覧：', todoLabels);

• 状態（完了・未完了）をわかりやすく文字列にして表示しています。

実務でのデータ構造としての「オブジェクトの配列」

よくある実務パターン

• 商品一覧 → 絞り込み（カテゴリ・価格帯）／検索（名前・ID）／表示用変換
• ユーザー一覧 → 絞り込み（権限・会員ランク）／検索（メール・ID）／表示用変換
• ToDo一覧 → 絞り込み（完了・未完了）／検索（ID）／状態変更

どれも、

• 一覧＝オブジェクトの配列
• 1件＝オブジェクト

という構造をベースに、

• filter()：条件で絞り込む
• find()：1件だけ探す
• map()：表示用に変換する

というメソッドを組み合わせて処理しています。

Day 21 後半 練習テンプレート（ブラウザで実行可能）

以下のテンプレートをブラウザで開き、 コンソールで「商品一覧」「ユーザー一覧」「ToDo一覧」の操作を確認してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 21 後半：オブジェクトと配列 実践テンプレート</title>
</head>
<body>
  <h1>Day 21 後半：オブジェクトと配列（商品一覧・ユーザー一覧・ToDo一覧の操作）</h1>
  <p>ブラウザのコンソールを開いて、ログを確認してください。</p>

  <script>
    console.log('--- 商品一覧 ---');

    const products = [
      { id: 1, name: 'ノート',      price: 100, stock: 10, category: '文房具' },
      { id: 2, name: 'ペン',        price: 150, stock: 20, category: '文房具' },
      { id: 3, name: '消しゴム',    price: 80,  stock: 15, category: '文房具' },
      { id: 4, name: '定規',        price: 120, stock: 5,  category: '文房具' },
      { id: 5, name: 'ノートPC',    price: 80000, stock: 3, category: '電子機器' },
    ];

    console.log('元の商品一覧：', products);

    console.log('--- 文房具カテゴリの商品を抽出（filter） ---');
    const stationeryProducts = products.filter((product) => {
      return product.category === '文房具';
    });
    console.log(stationeryProducts);

    console.log('--- 高価格商品を抽出（filter） ---');
    const expensiveProducts = products.filter((product) => {
      return product.price >= 1000;
    });
    console.log(expensiveProducts);

    console.log('--- idが3の商品を検索（find） ---');
    const productById = products.find((product) => {
      return product.id === 3;
    });
    console.log(productById);

    console.log('--- 表示用の商品ラベルを作成（map） ---');
    const productLabels = products.map((product) => {
      return `${product.name}（${product.price}円／在庫：${product.stock}／カテゴリ：${product.category}）`;
    });
    console.log(productLabels);

    console.log('--- ユーザー一覧 ---');

    const users = [
      { id: 101, name: '佐藤花子', email: 'hanako@example.com', isPremium: false },
      { id: 102, name: '山田太郎', email: 'taro@example.com',   isPremium: true  },
      { id: 103, name: '鈴木一郎', email: 'ichiro@example.com', isPremium: false },
    ];

    console.log('元のユーザー一覧：', users);

    console.log('--- プレミアムユーザーを抽出（filter） ---');
    const premiumUsers = users.filter((user) => {
      return user.isPremium === true;
    });
    console.log(premiumUsers);

    console.log('--- メールアドレスでユーザーを検索（find） ---');
    const targetEmail = 'taro@example.com';
    const userByEmail = users.find((user) => {
      return user.email === targetEmail;
    });
    console.log(userByEmail);

    console.log('--- 表示用ユーザーラベルを作成（map） ---');
    const userLabels = users.map((user) => {
      const premiumLabel = user.isPremium ? 'プレミアム' : '通常';
      return `${user.name}（${user.email}／${premiumLabel}会員）`;
    });
    console.log(userLabels);

    console.log('--- ToDo一覧 ---');

    const todos = [
      { id: 1, title: 'JavaScriptの勉強', done: false },
      { id: 2, title: '買い物に行く',     done: true  },
      { id: 3, title: 'メールの返信',     done: false },
    ];

    console.log('元のToDo一覧：', todos);

    console.log('--- 未完了のToDoを抽出（filter） ---');
    const incompleteTodos = todos.filter((todo) => {
      return todo.done === false;
    });
    console.log(incompleteTodos);

    console.log('--- 特定のToDoを完了にする（find＋プロパティ変更） ---');
    const targetTodoId = 1;
    const targetTodo = todos.find((todo) => {
      return todo.id === targetTodoId;
    });
    if (targetTodo) {
      targetTodo.done = true;
    }
    console.log('更新後のToDo一覧：', todos);

    console.log('--- 表示用ToDoラベルを作成（map） ---');
    const todoLabels = todos.map((todo) => {
      const status = todo.done ? '完了' : '未完了';
      return `ID：${todo.id}／タイトル：${todo.title}／状態：${status}`;
    });
    console.log(todoLabels);

    console.log('--- Day 21 後半：オブジェクトと配列の実践が完了しました ---');
  </script>
</body>
</html>

Day 21 後半のまとめ

Day 21後半では、

• オブジェクトの配列に対して filter()・find()・map() を使うことで、 商品一覧・ユーザー一覧・ToDo一覧を「絞り込み・検索・表示用変換」できること
• 「1件＝オブジェクト」「一覧＝オブジェクトの配列」という構造が、 実務でのデータ構造の基本であること

を確認しました。

ここまで来ると、 現実のWebアプリで扱う多くのデータを、 自分の頭の中で「オブジェクトの配列」としてイメージしながら、 自然にコードに落とし込めるようになっていきます。