Zenn
🙌

【図解】リスト（配列）と辞書（オブジェクト）の違いを解説

に公開1件
JavaScript
データ構造
アルゴリズム
プログラミング初心者
コード
tech

プログラミングでデータを扱う際、最も基本的なデータ構造が「リスト（配列）」と「辞書（オブジェクト）」です。この記事では、これらの違いと使い方について、図解を交えてわかりやすく解説します。

リスト（配列）とは？

リストは、複数のデータを順序付けて格納するデータ構造です。本棚に本を順番に並べるようなイメージです。

リストの特徴

  1. 順序がある

    • 各要素に位置（インデックス）がある
    • 0から始まる番号で要素にアクセスできる

  2. 同じ値を複数格納できる

    • 重複した値を持つことができる

  3. 要素の追加・削除が可能

    • リストの末尾や途中に要素を追加できる
    • 既存の要素を削除できる

JavaScriptでのリストの例

// リスト（配列）の作成
let fruits = ["りんご", "バナナ", "オレンジ"];

// インデックスを使って要素にアクセス
console.log(fruits[0]);  // "りんご"
console.log(fruits[1]);  // "バナナ"
console.log(fruits[2]);  // "オレンジ"

// 要素の追加
fruits.push("ぶどう");
console.log(fruits);  // ["りんご", "バナナ", "オレンジ", "ぶどう"]

// 要素の削除
fruits.pop();  // 末尾の要素を削除
console.log(fruits);  // ["りんご", "バナナ", "オレンジ"]

リストの一般的な操作

let numbers = [1, 2, 3, 4, 5];

// 要素の追加（末尾）
numbers.push(6);        // [1, 2, 3, 4, 5, 6]

// 要素の追加（先頭）
numbers.unshift(0);     // [0, 1, 2, 3, 4, 5, 6]

// 要素の削除（末尾）
numbers.pop();          // [0, 1, 2, 3, 4, 5]

// 要素の削除（先頭）
numbers.shift();        // [1, 2, 3, 4, 5]

// 特定の位置に要素を追加/削除
numbers.splice(2, 0, 2.5);  // [1, 2, 2.5, 3, 4, 5]

// 要素の検索
let index = numbers.indexOf(3);  // 3の位置（3）を取得

辞書（オブジェクト）とは？

辞書は、キーと値のペアでデータを格納するデータ構造です。実際の辞書のように、単語（キー）とその意味（値）が対応しているイメージです。

辞書の特徴

  1. キーと値のペア

    • 各データにキー（名前）が付いている
    • キーを使って値にアクセスする

  2. キーは一意

    • 同じキーを複数持つことはできない
    • 値は重複可能

  3. 順序は保証されない

    • データの格納順序は重要ではない

JavaScriptでの辞書の例

// 辞書（オブジェクト）の作成
let person = {
  name: "山田太郎",
  age: 25,
  city: "東京"
};

// キーを使って値にアクセス
console.log(person.name);   // "山田太郎"
console.log(person["age"]); // 25

// 値の更新
person.age = 26;
person["city"] = "大阪";

// 新しいキーと値の追加
person.email = "yamada@example.com";

console.log(person);
// {
//   name: "山田太郎",
//   age: 26,
//   city: "大阪",
//   email: "yamada@example.com"
// }

辞書の一般的な操作

let user = {
  id: 1,
  name: "鈴木一郎",
  isAdmin: false
};

// プロパティの存在確認
console.log("name" in user);              // true
console.log(user.hasOwnProperty("age"));  // false

// キーの一覧を取得
console.log(Object.keys(user));    // ["id", "name", "isAdmin"]

// 値の一覧を取得
console.log(Object.values(user));  // [1, "鈴木一郎", false]

// キーと値のペアを取得
console.log(Object.entries(user)); 
// [["id", 1], ["name", "鈴木一郎"], ["isAdmin", false]]

// プロパティの削除
delete user.isAdmin;

リストと辞書の使い分け

リストを使うべき場合

  1. 順序が重要な場合

    // 順位表
let rankings = ["金メダル", "銀メダル", "銅メダル"];

// 手順
let steps = ["材料を用意", "混ぜる", "焼く", "盛り付け"];

  2. 同じ型のデータをまとめて処理する場合

    // 数値の配列を処理
let scores = [85, 90, 75, 88];
let total = scores.reduce((sum, score) => sum + score, 0);
let average = total / scores.length;

  3. データを順番に処理する場合

    // 配列の各要素を処理
let names = ["田中", "鈴木", "佐藤"];
names.forEach((name, index) => {
  console.log(`${index + 1}番目: ${name}`);
});

辞書を使うべき場合

  1. データに名前（キー）を付けたい場合

    // ユーザー情報
let user = {
  id: "user123",
  name: "山本花子",
  email: "yamamoto@example.com",
  age: 28
};

  2. 複数の関連データをまとめたい場合

    // 商品情報
let product = {
  name: "スマートフォン",
  price: 50000,
  stock: 100,
  manufacturer: "TechCo",
  specifications: {
    color: "ブラック",
    weight: "180g",
    size: "6.1インチ"
  }
};

  3. キーと値の対応関係が重要な場合

    // 都道府県コード
let prefectureCodes = {
  "東京": "13",
  "大阪": "27",
  "京都": "26",
  "神奈川": "14"
};

実践的な例

1. 学生管理システム

// リストとオブジェクトの組み合わせ
let students = [
  {
    id: "001",
    name: "山田太郎",
    scores: {
      math: 85,
      english: 90,
      science: 78
    }
  },
  {
    id: "002",
    name: "鈴木花子",
    scores: {
      math: 92,
      english: 85,
      science: 90
    }
  }
];

// 成績の平均値を計算する関数
function calculateAverage(student) {
  const scores = Object.values(student.scores);
  const total = scores.reduce((sum, score) => sum + score, 0);
  return total / scores.length;
}

// 各学生の平均点を表示
students.forEach(student => {
  const average = calculateAverage(student);
  console.log(`${student.name}の平均点: ${average}`);
});

2. 買い物カートシステム

// 商品マスタ（辞書）
const products = {
  "A001": { name: "コーヒー", price: 300 },
  "A002": { name: "紅茶", price: 250 },
  "A003": { name: "緑茶", price: 200 }
};

// カートの内容（リスト）
let cart = [
  { productId: "A001", quantity: 2 },
  { productId: "A003", quantity: 1 }
];

// 合計金額を計算する関数
function calculateTotal(cart) {
  return cart.reduce((total, item) => {
    const product = products[item.productId];
    return total + (product.price * item.quantity);
  }, 0);
}

// カートの内容を表示する関数
function displayCart(cart) {
  console.log("=== カートの内容 ===");
  cart.forEach(item => {
    const product = products[item.productId];
    console.log(`${product.name}: ${item.quantity}個 (${product.price * item.quantity}円)`);
  });
  console.log(`合計: ${calculateTotal(cart)}円`);
}

displayCart(cart);

3. タスク管理システム

// タスクの状態を管理する辞書
const taskStatus = {
  "TODO": "未着手",
  "IN_PROGRESS": "進行中",
  "DONE": "完了"
};

// タスクのリスト
let tasks = [
  {
    id: 1,
    title: "企画書作成",
    status: "IN_PROGRESS",
    assignee: "田中",
    dueDate: "2024-08-01"
  },
  {
    id: 2,
    title: "ミーティング",
    status: "TODO",
    assignee: "鈴木",
    dueDate: "2024-08-02"
  },
  {
    id: 3,
    title: "報告書提出",
    status: "DONE",
    assignee: "佐藤",
    dueDate: "2024-07-31"
  }
];

// タスクの状態でフィルタリングする関数
function filterTasksByStatus(tasks, status) {
  return tasks.filter(task => task.status === status);
}

// 担当者ごとのタスク数を集計する関数
function countTasksByAssignee(tasks) {
  return tasks.reduce((counts, task) => {
    counts[task.assignee] = (counts[task.assignee] || 0) + 1;
    return counts;
  }, {});
}

// 結果を表示
console.log("進行中のタスク:", filterTasksByStatus(tasks, "IN_PROGRESS"));
console.log("担当者別タスク数:", countTasksByAssignee(tasks));

まとめ

リスト（配列）と辞書（オブジェクト）の主な違いは：

  1. データの格納方法

    • リスト：順序付けられた要素の集まり
    • 辞書：キーと値のペアの集まり

  2. アクセス方法

    • リスト：インデックス（数値）でアクセス
    • 辞書：キー（文字列など）でアクセス

  3. 使用シーン

    • リスト：順序が重要な場合、同じ型のデータをまとめる場合
    • 辞書：データに名前を付けたい場合、関連データをまとめたい場合

適切なデータ構造を選択することで、より効率的で読みやすいコードを書くことができます。

次のステップ

データ構造の基本を理解したら、以下の記事も参考にしてください：

Discussion

junerjuner

同じ値を複数格納できる

同じキーを複数持つことはできない

これは 配列もオブジェクトも同じでは？