【JavaScript】連想配列とは？初心者向けにわかりやすく解説

プログラミング言語•
JavaScript

はじめに

皆さんがJavaScriptでデータを扱うとき、真っ先に思い浮かぶのは配列かもしれません。
しかし、キーと値をセットで扱う「連想配列」が必要な場面は意外に多いのではないでしょうか。
JavaScriptにはいわゆる「連想配列」と呼ばれる特別なデータ型は存在しませんが、オブジェクトやMapを使えばキーと値をまとめて管理できます。
このような仕組みを知っておくと、データの整理やコードの可読性が大きく向上するでしょう。
そこで本記事では、JavaScriptで連想配列を実現するための具体的な方法や、実務での活用シーン、実装上の注意点などを詳しく解説していきます。

この記事を読むとわかること

  • JavaScriptで連想配列を扱う方法の基礎
  • オブジェクトを使った連想配列の書き方
  • Mapを使った連想配列の書き方
  • 実務でよくある活用シーンと注意点
  • 配列との違いやオブジェクトとMapの使い分け

ここでは、初心者の方にも理解しやすい言葉を中心に使いながら、コード例を交えて解説します。
初心者の方がつまずきやすいポイントについても解説していきますので、ぜひ最後まで読んでみてください。

連想配列とは何か？

連想配列とは、キーと値をペアで格納できるようにしたデータ構造の一種です。
普通の配列はインデックス（0や1などの整数）を使って値にアクセスするのに対し、連想配列は文字列やシンボルなどをキーとして利用できます。
たとえば「ユーザーの名前」と「ユーザーの年齢」といった情報をまとめて管理するときに、文字列をキーとして使うと非常にわかりやすくなります。

JavaScriptには「連想配列」という名前のデータ型が直接あるわけではありません。
しかし、実際にはオブジェクトやMapを使うことで同様の動きを実現できます。
本記事では、この2つを軸にして連想配列の役割を果たす方法を紹介します。

連想配列を使う利点

連想配列を使うと、以下のようなメリットがあります。

  • キーを文字列（やシンボルなど）で指定するため、可読性が高い
  • データの整理がしやすく、管理が簡単になる
  • 値の取得・更新・削除が柔軟に行える

実務では、アプリケーションが扱う様々な設定情報や、ユーザーのプロフィール情報を保持したりするときに連想配列がよく登場します。
もし数が多くなってもキーを見れば内容が一目でわかるため、プログラムの保守や拡張が楽になります。

JavaScriptでの連想配列の実現方法

JavaScriptで連想配列を実現するとき、大きく分けて2つの代表的なアプローチがあります。
それはオブジェクトを使う方法と、Mapを使う方法です。
どちらでもキーと値のペアを扱えますが、できることや使い心地には少し違いがあります。
以下では、それぞれの特徴や具体的なコード例を詳しく紹介します。

オブジェクトを利用する方法

JavaScriptのオブジェクトは、{}（波括弧）で囲まれた構文を使って生成します。
基本的にはキーに文字列を指定でき、値をアサインしていくことで連想配列のように扱えます。
もっとも昔からよく使われている方法と言えるでしょう。

Mapを利用する方法

Mapは、キーにあらゆる型（オブジェクトや数値など）を設定できる柔軟性を持ちます。
オブジェクトでも似たことは可能ですが、オブジェクトのキーは文字列かシンボルに変換されるため、型の違いがやや曖昧になりがちです。
一方、Mapならmap.set(key, value)で明確にキーを管理でき、map.get(key)で値を取得できます。
大量のデータを扱う場合にパフォーマンス面で有利になることもあるため、規模が大きい開発ではMapが選ばれるケースがあります。

オブジェクトを利用する連想配列

ここでは、オブジェクトを使った連想配列の具体的な使い方を順番に見ていきます。
宣言方法やプロパティへのアクセス、プロパティの追加・削除、ループなど、一連の流れを学ぶことで理解が深まるでしょう。

宣言と初期化

JavaScriptのオブジェクトは次のように宣言できます。

const user = {
  name: "Alice",
  age: 25,
  country: "Japan"
};

このオブジェクトでは、name、age、countryがキー、そこに対応する文字列や数値が値として格納されています。
この書き方であれば、見やすい形で初期化ができるため便利です。

別の書き方として、あとからキーと値を追加する方法もあります。

const user = {}; // 空のオブジェクトを作成
user.name = "Alice";
user.age = 25;
user.country = "Japan";

初期値が必要ない場合は、このように空のオブジェクトを用意してからプロパティを追加していくこともよくあります。

プロパティへのアクセス方法

オブジェクトのプロパティには、主に2つのアクセス方法があります。

1. ドット記法

object.property のようにアクセスします。

2. ブラケット記法

object["property"] のようにアクセスします。

たとえば最初の例で作ったuserオブジェクトの場合は以下のようになります。

console.log(user.name);       // "Alice"
console.log(user["age"]);     // 25

文字列として指定したい場合や、動的にプロパティ名を取り扱う場合はブラケット記法が便利です。
逆に、プロパティ名があらかじめ決まっているならドット記法がスッキリ書けます。

プロパティの追加と削除

オブジェクトに新しいプロパティを追加したり、不要なプロパティを削除する方法は簡単です。
追加するときは単に user.newKey = newValue のように書くだけです。
削除するときはdeleteキーワードを使用します。

// プロパティの追加
user.email = "alice@example.com";

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

このように、オブジェクトは非常に柔軟にキーと値を追加・削除できます。

ループ処理

オブジェクトの中身を一括で処理したいケースもよくあります。
そんなときは for...in や Object.keys()、Object.entries() が便利です。

const user = {
  name: "Alice",
  age: 25,
  country: "Japan"
};

// for...in文
for (let key in user) {
  console.log(`キー: ${key}, 値: ${user[key]}`);
}

// Object.keys()
Object.keys(user).forEach(key => {
  console.log(`キー: ${key}, 値: ${user[key]}`);
});

// Object.entries()
Object.entries(user).forEach(([key, value]) => {
  console.log(`キー: ${key}, 値: ${value}`);
});

上記のいずれの方法でも、キーとそれに対応する値を取り出して繰り返し処理が行えます。
開発の現場では、キーごとに処理を振り分けるような場面で重宝します。

Mapを利用する連想配列

次に、Map を利用して連想配列のようなデータ構造を管理する方法を見ていきましょう。
Mapは、オブジェクトよりもキーに対して柔軟であることや、イテレーション（反復処理）がしやすいといった利点があります。

Mapの概要

Map はJavaScriptで利用できるビルトインクラスの一つです。
以下のようにして、まずは Map を生成してみましょう。

// Mapの生成
const userMap = new Map();

この時点では空のMapですが、ここにキーと値を紐付けていくと連想配列として機能します。
特徴としては、オブジェクトのようにキーが文字列でなければならないという制限がなく、例えば数値やオブジェクトそのものをキーにすることも可能です。

Mapの基本操作

Mapへのデータの追加は、set(key, value) を使います。
取り出すときは get(key)、削除するときは delete(key) を利用します。

const userMap = new Map();

// 値のセット
userMap.set("name", "Bob");
userMap.set("age", 30);

// 値の取得
console.log(userMap.get("name")); // "Bob"

// 値の削除
userMap.delete("age");

// 全て削除したい場合
userMap.clear();

これだけ見ると、オブジェクトのプロパティに代入しているのと似ているように感じるかもしれません。
しかし、Map はキーにオブジェクトを使うことも可能なうえ、キーの扱いが文字列化されることもありません。

const objKey = { id: 1 };
userMap.set(objKey, "オブジェクトをキーに設定");

// 取り出し
console.log(userMap.get(objKey)); // "オブジェクトをキーに設定"

こういった柔軟さがあるため、特に大規模開発では Map が選択されることも多いです。

ループ処理

Mapの繰り返し処理は for...of や forEach を活用します。
オブジェクトよりもイテレーションが標準的に用意されているので、記述がシンプルです。

const userMap = new Map();
userMap.set("name", "Charlie");
userMap.set("age", 28);
userMap.set("country", "USA");

// for...of でのループ
for (const [key, value] of userMap) {
  console.log(`キー: ${key}, 値: ${value}`);
}

// forEach でのループ
userMap.forEach((value, key) => {
  console.log(`キー: ${key}, 値: ${value}`);
});

このように [key, value] のタプルを簡単に取り出せる点は、オブジェクトに比べると非常に直感的です。

実務での活用シーン

オブジェクトやMapを連想配列として利用するのは、実務でもよくあります。
どのような場面で使われることが多いか、具体的にイメージしやすい例を挙げてみましょう。

1. ユーザー情報の管理

ユーザー名や年齢、メールアドレスなど、多数のプロパティを一括管理するときに便利です。
たとえばユーザーをオブジェクトとして保持し、必要に応じて値を更新したり、表示させたりします。

2. 設定項目の管理

フロントエンドアプリケーションで、各種設定（テーマカラーや文字サイズなど）をまとめて保持することもよくあります。
設定項目のキーを文字列とすれば、設定の参照が容易です。

3. アクセス権限の整理

ユーザーごとに許可された操作をキーとして持ち、状態を値にする場面など。
IDをキーとしたいときに、Mapが使われることもあります。

4. キャッシュ機構

サーバーやブラウザで一時的にデータをキャッシュするときに、MapでキーをURLやリクエストパラメータにする方法があります。
これによって高速なデータの再取得が可能になり、動作の快適さに寄与します。

このように、データの保管庫としてオブジェクトやMapは頻繁に活躍しています。
またキーに日本語を使うケースもありますが、プログラムの可読性や混乱を防ぐ観点から、英単語をキーとして使うのが一般的です。

連想配列を使う際の注意点

連想配列は大変便利な仕組みですが、いくつか注意すべきポイントもあります。
使い方を誤ると、バグにつながったり、思わぬ動作を引き起こす可能性があります。

スクリプト実行環境への影響

JavaScriptでは、開発環境によってコードの実行速度や対応している機能が異なることがありえます。
ただし、オブジェクトやMapといった基本機能であれば、多くのブラウザやNode.jsなどの実行環境でも問題なく動作します。
もし特殊な実行環境を使っている場合は、ドキュメントを確認するのがおすすめです。

パフォーマンス面の考慮

オブジェクトとMapでは、データの追加・削除・検索のパフォーマンス特性が微妙に異なります。
少量のデータなら体感できるほどの差はありませんが、非常に大量のデータを扱う場合はMapが有利なケースがあるかもしれません。
また、キーとしてオブジェクトを使う必要がある場合もMapの利用が適しています。

キーに複雑なデータ型（例えばオブジェクト）を使う予定があるなら、Mapを検討してみると管理がしやすくなる可能性があります。

連想配列以外のデータ構造との比較

連想配列に似た存在として、JavaScriptでは標準的な配列（Array）も頻繁に使われます。
ここでは、配列やその他のデータ構造と比較して、どこが違うのかを簡単に整理します。

配列（Array）との違い

配列はインデックス（0,1,2...）によって要素を管理するデータ構造です。
順番に並んでいるデータを扱うのが得意で、要素の順番を意識した操作が簡単です。
一方で、連想配列のようなキーを使った管理にはあまり向いていません。
キーと値がはっきりしているならオブジェクトやMap、順番が重要なら配列という使い分けが基本です。

オブジェクトとMapの使い分け

  • オブジェクト
    • 少量のデータを管理する場合に向く
    • キーに文字列しか使わないケースがほとんど
    • プロパティ操作がシンプルで、コードも短く書ける
  • Map
    • 大量データや複雑なキーを扱うときに向く
    • どんな型でもキーにできる（オブジェクトもOK）
    • イテレーションが標準で用意されていて扱いやすい

小規模なスクリプトや、フロントエンドのちょっとした処理ならオブジェクトで十分なことが多いでしょう。
しかし、プロジェクト規模が大きくなるほど柔軟性の高いMapが選ばれる場面も増えます。

オブジェクトリテラルとMapの活用例

ここでは少し応用的な例として、オブジェクトとMapを組み合わせて活用するシーンを紹介します。

たとえば、以下のような設定情報とユーザー情報を別々に管理して、後から結合して使いたい場合が考えられます。

// オブジェクトリテラルで設定項目を管理
const appConfig = {
  title: "My Awesome App",
  version: "1.0",
  language: "ja"
};

// Mapでユーザー情報を動的に管理
const userMap = new Map();
userMap.set("User1", { name: "Alice", role: "admin" });
userMap.set("User2", { name: "Bob", role: "editor" });

// 何らかの処理で全てを結合して表示
function displayInfo() {
  // オブジェクトのタイトルを使う
  console.log(`アプリ名: ${appConfig.title}`);

  // Mapに入っているユーザー情報を参照
  for (const [key, user] of userMap) {
    console.log(`キー: ${key} => ユーザー名: ${user.name}, ロール: ${user.role}`);
  }
}

displayInfo();

この例では、 固定的な情報 (アプリの設定) はオブジェクトで管理し、動的なデータ (ユーザー情報)はMapで管理しています。 こうすることで、設定は可読性の高いオブジェクトリテラルとして保持しつつ、多数のユーザー情報を柔軟に扱うことができます。

連想配列としてのオブジェクトやMapを、意図せず上書きしてしまわないように注意しましょう。
特に同じ名前のキーを何度も使うと、前の値が失われる可能性があります。

まとめ

JavaScriptにおける「連想配列」は、オブジェクトとMapの活用によって実現できます。
オブジェクトはシンプルな構文と扱いやすさが魅力で、少量のデータを管理する場合に特に便利です。
一方で、Mapはどんな型でもキーにできることやイテレーション機能が標準搭載されていることから、大規模な開発やより複雑なデータの取り扱いに向いています。

皆さんがどのような目的でキーと値を管理したいかによって、最適な方法を選ぶとよいでしょう。
この記事を通じて、連想配列のイメージや具体的な書き方がつかめたのではないでしょうか。
少しずつコードを書きながら試してみると、理解がさらに深まるかもしれません。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

JavaScriptの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、HTML/CSS + JavaScript」
プログラミング言語の新着記事をチェック

【PHP】implodeとは？配列を文字列に結合する方法を初心者向けにわかりやすく解説