【JavaScript】連想配列とは？仕組みと利用方法を徹底解説

連想配列が何なのかについて、理解できていますか？

連想配列は、JavaScriptでプログラミングする際によく登場します。しかし、配列とどのように違うのか、どのように連想配列を取り扱えばよいのか、いまいち理解できていない人もいることでしょう。

今回は、JavaScriptにおける連想配列の意味と連想配列の取り扱い方について、サンプルコード付きで詳しく解説していきます。連想配列が使いこなせれば、より複雑なデータをプログラム上で取り扱えるようになるので、プログラミングスキルの向上のための参考にしてください。

フリーランス案件を探すならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社Hajimari
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約28,000件	約3,300件	約4,200件
平均単価	68.2万円	72.2万円	–
最高月収	145万円	200万円	176万円
特徴	・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心	・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20%	・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例	・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース	・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など	・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

転職を考えているならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社リブセンス
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約13,000件	約800件 ※非公開求人が多い	– ※ドラフト制のため、対象外
年齢層	20代：◎ 30代：〇 40代：〇	20代：〇 30代：〇 40代：△	20代：〇 30代：〇 40代：〇
特徴	・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績	・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現	・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる
紹介企業例	・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など	・DMM.com ・Money Forward ・SmartHR など	・メルカリ ・ZOZOテクノロジーズ ・freee など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

Javascriptの連想配列とは？

連想配列とは、JavaScriptに限らず多くのプログラミング言語で備えられているデータ構造の一種です。

JavaScriptにおいては、オブジェクトとも呼ばれています。早速ですが、以下のサンプルコードをご覧ください。

let user_account = {
  name: "Suzuki Taro",
  age: 52,
  birth: new Date("1980/01/10"),
  password: "sample1234!"
};

上記サンプルコードは、JavaScriptにおける連想配列で定義されたデータの一種です。JavaScriptの連想配列は、波カッコ（{}）の中に要素を複数記述することで定義されます。

要素の定義では、添字（キー）と対応する値をコロン（:）でつなげ、要素が複数あるときは要素をカンマ（,）でつなぎ合わせます。これが連想配列の基本的な構造です。

連想配列は、属性情報を複数含んでいるデータを取り扱うのに向いています。

上記サンプルコードで定義したユーザーアカウントであれば、名前・年齢・生年月日などの属性情報が、オンラインショッピングサイトで掲載される商品であれば、商品名・価格・メーカーなどの属性情報が考えられます。

配列との違いは？

連想配列と似たものに配列が存在します。配列も連想配列と同様に、変数が複数並んでいるものと捉えることができますが、配列はインデックス（0を含む自然数）によって要素を指定します。この点が連想配列と異なる点です。配列は、以下のサンプルコードのように定義します。

let sales = [12301, 23023, 20200, 20003, 32333];

上記サンプルコードは、JavaScriptにおける配列を利用したデータの一種です。配列は、連想配列とは異なり大カッコ（[]）を使って要素を定義します。連想配列では必要なキーの指定も配列では必要ありません。

連想配列の使い方【基礎編】

ここからは、JavaScriptでどのように連想配列を取り扱えばよいのかについて、解説していきます。まずは、連想配列の宣言と要素の追加・削除といった基礎となる知識について説明しましょう。

連想配列を宣言してみよう

まずは、連想配列の宣言から解説していきます。以下のサンプルコードをご覧ください。

// 典型的な連想配列の定義
let sample_associate_1 = { key1: 123, key2: "abc" };

// 空の連想配列の定義その１
let sample_associate_2 = {};

// 空の連想配列の定義その２
let sample_associate_3 = new Object();

連想配列の定義を3つ示しました。「1 Javascriptでの連想配列とは？」で掲示したサンプルコードのように、連想配列はキー名と値をコロンで結んだものをカンマでつなぎあわせ、最終的に波カッコで囲むことで宣言します。

要素が1つも存在しない空の連想配列を宣言することも可能です。5行目のように波カッコのみ記述する宣言の仕方と、8行目のようにnewキーワードを使って記述する宣言の仕方の2種類が存在します。

連想配列へ要素を追加してみよう

次は、連想配列に対して要素を追加する方法について解説していきましょう。要素の追加についても複数の方法が存在します。以下のサンプルコードをご覧ください。

let address = {}; // 空の連想配列を定義

// 要素の追加その１：ドットの後にキー名を記述
address.pref = "東京都";

// 要素の追加その２：大カッコにキー名を記述
address["cities"] = "三鷹市";

// 要素へのアクセスは2通り
console.log(address["pref"] + address.cities); // 結果：東京都三鷹市

住所情報を格納するための連想配列addressに対し、都道府県名と市区町村名の要素を追加する処理です。

要素の追加方法は、連想配列名にドットを続けてキー名を指定する方法と、連想配列名に大カッコを続けてキー名を指定する方法の2種類に分けられます。連想配列の各要素を参照する際も、要素追加時の記述方法で実現可能です。

注意点として、大カッコでキー名を指定する際はダブルクォート（またはシングルクォート）でキー名を囲んでください。ダブルクォートが存在しない場合、キー名は変数名と認識されてしまい、意図しない動作が発生するからです。

連想配列から要素を削除してみよう

次に、連想配列から特定の要素を削除する方法についてです。要素を削除する際はdeleteキーワードを利用します。「2.2 連想配列へ要素を追加してみよう」で示したサンプルコードの末尾に、以下のコードを追加してください。

// 要素の削除
delete address.cities;

console.log(address.pref); // 結果：東京都三鷹市
console.log(address.cities); // 結果：undefined

deleteキーワードは、JavaScriptにおいて連想配列の特定要素を削除するために使います。

実際に実行してみるとdeleteで削除した要素にアクセスしたときに「undefined」、つまり未定義であることがコンソール上に出力されることが分かります。

連想配列の使い方【応用編】

ここからは、JavaScriptで連想配列を取り扱う際の応用的な事柄について解説していきます。

連想配列でループ処理を実装してみよう

連想配列の各要素に対して同一の処理を行いたい場合は、ループ処理を実装する必要があります。

連想配列のループ処理では、for文から派生したfor…in構文を用います。for…in構文では「let (キー名を格納する変数名) in (対象の連想配列変数名)」のように式を記述します。

例として、書籍に関する情報をコンソール出力する処理を実装したサンプルコードを、以下に示します。

let books = {
  name: "JSプログラミング入門",
  publishing: "サンプル出版",
  release: new Date("2021/06/10"),
  price: 35000,
  isbn: "9784001234568"
};

for (let info in books) {
  // info:キー名
  // books[info]:キーに対応する値
  console.log(info + "::" + books[info]);
}

for…in構文と似たものでfor…of構文が存在しますが、こちらは配列専用のものであり、連想配列で利用することはできません。また、Array.map()メソッドなどループ処理用メソッドについても、連想配列に直接適用できないことに注意してください。

JavaScriptの連想配列に対し、for…of構文や各種ループ処理用メソッドを適用するには、連想配列から配列を生成する処理を実装しなければなりません。やり方については、「3.3 連想配列からKey一覧を取得してみよう」にて詳しく解説しているので、参考にしてください。

連想配列でソート処理を実装してみよう

連想配列の要素を昇順・降順に並べ替えるには、entries()メソッドとsort()メソッドを使います。

entries()メソッドは、連想配列を引数にとってキー名と値の組を1要素とした配列を戻り値とします。sort()メソッドはその名の通り、連想配列に格納されている要素をお互いに比較・交換することで、意味のある順序に置き換える機能を持ちます。

以下のサンプルコードを使って説明しましょう。

let medical_check_data = {
  height: 172,
  weight: 70,
  sight_right: 1.0,
  sight_left: 0.8,
  hearing_right: 30,
  hearing_left: 20,
  blood_pressure_max: 129,
  blood_pressure_min: 82,
};

// 連想配列から二次元配列を生成
let data_array = Object.entries(medical_check_data);

// ソート処理
data_array.sort( function(item1, item2) {
  // itemの0番目にはキー名、1番目には値が格納されている

  // 不等号の向きによって降順・昇順を切替
  if (item1[0] < item2[0]) return -1;
  if (item1[0] > item2[0]) return 1;
  return 0;
});

// 二次元配列から連想配列に戻す
medical_check_data = Object.fromEntries(data_array);

console.log(medical_check_data);

最初に、13行目で連想配列から、[キー名, キーに対する値]の組を要素にした二次元配列を生成します。sort()メソッドは配列処理用のメソッドであるため、entries()メソッドによる配列化は必須処理です。

次に16行目から23行目において、ソート処理を実装しています。sort()メソッドの引数はコールバック関数です。コールバック関数は、要素を比較するために2つの引数を用意します。もし昇順・降順を切り替えたいなら、if文条件式内の不等号をすべて逆にしましょう。また、キー名ではなく値でソートしたいなら、添字は1にしましょう。

最後に26行目で、再び連想配列に置き換えることで連想配列のソート処理は完了です。

なお、通常の配列のソート方法については以下の記事にて詳しく解説していますので、こちらもぜひご確認くださいね。

おすすめ記事

【Javascript】配列をソート（並び替え）する方法

今回の記事は、 Javascriptを使って配列内の要素をソートしたい配列内の要素を昇順/降順でソートしたい という方に向けた記事になっています。 Javascriptを使って配列をソートする方法 […]

連想配列からKey一覧を取得してみよう

連想配列からキー名のみを一覧で取得したい場合は、Object.keys()メソッドを使いましょう。Object.keys()メソッドは、連想配列を引数にすることでキー名のみを集約して配列化したものを返す機能を持ちます。使い方について、以下のサンプルコードをもとに説明します。

let number_of_people = {
  baseball: 9,
  handball: 7,
  football: 11,
  basketball: 5,
  volleyball: 6,
  rugby: 13
}

// キーのみを集約して配列化
let sports_list = Object.keys(number_of_people);

// for...of構文で配列をループ処理
for (let sports_name of sports_list) {
  console.log(sports_name + " is fun!");
}

// map()メソッドによる配列のループ処理
let sports_list2 = sports_list.map(
  name => name.replace('ball', '')
);

console.log(sports_list2);

11行目でObject.keys()メソッドを呼び出しています。引数は連想配列のnumber_of_peopleで、キー名を取り出してスポーツ名の配列を生成しています。

連想配列から配列を生成すれば、配列のループ処理で利用できる構文やメソッドが利用可能です。

14行目のfor…of構文は、for…in構文と似たように「let (配列の各要素を格納する変数名) of (対象の配列名)」を反復の条件として記述します。また、19行目のmap()メソッドは引数のコールバック関数で実装した処理を、配列の要素ごとに実行します。

連想配列からValue一覧を取得してみよう

連想配列からキー名のみを集約できる一方で、値のみを集約することも可能です。利用するのはObject.values()メソッドです。サンプルコードは以下の通りです。

let height_check_data = {
  sato_taro: 149,
  yamada_hanako: 142,
  suzuki_jiro: 151,
  watanabe_daiki: 153,
  yamamoto_aya: 147,
  ito_ryu: 154
}

// 値のみを集約して配列化
let height_array = Object.values(height_check_data);

console.log(height_array);

使い方はObject.keys()メソッドと同様、連想配列を引数に設定します。戻り値は値を集約した配列であるので、サンプルコードの場合は身長データがheight_arrayに設定されます。

最後に

さて、ここまでJavascriptの連想配列の扱い方について解説してきましたがいかがでしたか？

こうして体系的に整理してみると、それほど難しいものでもないことがお分かりいただけたかと思います。

今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。

このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。