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

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

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

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


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


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" };

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

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

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

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

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

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

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

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

// 要素の追加その2:大カッコにキー名を記述
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を使って配列内の要素をソートしたい配列内の要素を昇順/降順でソートしたい という方に向けた記事になっています。 ・レバテックフリーランス … 業界最大級の案件数・業[…]

ボックスイメージ

連想配列から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に設定されます。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

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

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

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

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

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