JavaScriptでの連想配列の使い方！多次元配列と連想配列の違い

Javascript
プログラミング言語

公開日時: 2020-08-21 　更新日時: 2022-06-09

この記事でわかること

システム エンジニア: 「連想配列」というデータ構造について詳しく教えてください。

プロジェクト マネージャー: まず「オブジェクト」と「配列」についての理解から始めましょう。

JavaScriptではじめる「連想配列」

「連想配列」はJavaScriptに限らず、プログラムでデータをあつかうための重要かつ便利なデータ構造です。連想配列を利用することでプログラミングの世界観が変わり、コーディングの効率化だけでなくデータベース設計や連携も意識するようになります。

JavaScriptでも「連想配列」をあつかえるので、その基本的な内容について解説します。

オブジェクトと配列とは？

「連想配列」を説明する前に、まず「オブジェクト」と「配列」について理解しておく必要があります。オブジェクトはプログラムであつかうデータの最小単位です。配列もオブジェクトの1つですが数字の「インデックス（Index）」と「値」から構成されるデータの集合です。

では、まずJavaScriptで配列を宣言して操作してみましょう。

配列を宣言する

JavaScriptの配列は「[]」ブラケットで宣言ができ、値を設定する場合は、[value1, value2, …]と記述します。例えば「どうのつるぎ」「かわのたて」「かわのぼうし」といった3つのアイテム名を配列で宣言すると以下のようになります。

let name_array = ['どうのつるぎ', 'かわのたて', 'かわのぼうし']

1	let name_array = ['どうのつるぎ', 'かわのたて', 'かわのぼうし']

配列をインデックス（Index）で指定する

配列には「0」からはじまる整数の「インデックス（Index）」をもちます。配列のインデックスをキーと呼ぶこともありますが、ここではインデックスとします。例えば配列「name_array」から「かわのたて」を取得するには、2番目のインデックスである「1」でアクセスします。

let name = name_array[1]
 console.log(name) //かわのたて

1 2	let name = name_array[1] console.log(name) //かわのたて

値段の配列を指定する

同じ要領で3つのアイテムの値段を「150」「80」「100」の配列で宣言し、インデックス「1」でアクセスします。

let price_array = [150, 80, 100]
 let price = price_array[1]
 console.log(price)

let price_array = [150, 80, 100]

let price = price_array[1]

console.log(price)

多次元配列とは

多次元配列は、配列の中に配列を入れるデータ構造をいいます。例えば3×3の行列をJavaScriptの配列で宣言するコードは以下のようになります。

let multi_array = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
 ]

let multi_array = [

[1, 2, 3],

[4, 5, 6],

[7, 8, 9],

]

オブジェクトを宣言する

つぎにJavaScriptのオブジェクトを作成します。空のオブジェクトを作成するには以下のように「{}」ブラケットで宣言します。

let item1 = {}

1	let item1 = {}

オブジェクトをまとめて宣言する

さて、ここでアイテム名「どうのつるぎ」「かわのたて」「かわのぼうし」と、値段「150」「80」「100」をまとめて宣言するにはどのようにすればいいでしょうか。

多次元配列でも処理できますが、さらにわかりやすくするには今回の本題「連想配列」を利用すると便利です。

連想配列とは

それでは連想配列を利用してみましょう。連想配列は通常の配列のような数字の「インデックス（Index）」ではなく「キー（key）」を利用して変数を宣言し、キーは数字でなくても構いません。

また連想配列は「key（キー）」と「value（値）」で宣言するため「key-valueオブジェクト」や「Dictionary」とも呼ばれます。

連想配列のルール

連想配列の宣言はいくつかのルールがあります。連想配列の宣言は、配列の「[]」ブラケットでなく、オブジェクトの「{}」ブラケットで表記します。JavaScriptの連想配列と配列のアクセス方法を混同しないようにしましょう。

つぎに、キー（key）と値（value）は「:」（コロン）で区切った「key : value」のペアで記述します。そしてペアが増えるごとに「,」（カンマ）で区切って複数指定します。キーは「””」「”」で囲んでも構いません。まとめると以下のようになります。

let dictionary = { key1: value1, key2: value2, ...}

1	let dictionary = { key1: value1, key2: value2, ...}

連想配列を宣言する

まずはアイテム名「どうのつるぎ」について考えてみます。連想配列の作成は「キー（key）」「値（value）」を「:」で区切るため、キーを「name」と定義し、値を「どうのつるぎ」とすると以下の連想配列で表せます。

let item = { name: 'どうのつるぎ' }

1 2	let item = { name: 'どうのつるぎ' }

連想配列の値を取得する

JavaScriptのプロパティのアクセス方法は「オブジェクト.プロパティ名」で指定します。連想配列も同様に「連想配列.キー」で指定します。「.」はJavaScriptのオブジェクトにアクセスする重要な記述です。

例えば、itemから「どうのつるぎ」を取得するにはキーを「name」と定義したため「item.name」でアクセスします。ただし例外的に変数でキーを指定する場合、item[変数]と「[]」ブラケットでアクセスしなければいけません。

let item = { name: 'どうのつるぎ' }
 console.log(item.name) //どうのつるぎ
 

 //キーを変数にした場合
 const name_key = 'name'
 let item_name = item[name_key]
 console.log(item_name) //どうのつるぎ

let item = { name: 'どうのつるぎ' }

console.log(item.name) //どうのつるぎ

//キーを変数にした場合

const name_key = 'name'

let item_name = item[name_key]

console.log(item_name) //どうのつるぎ

連想配列にキーと値を追加する

連想配列に新たなキーと値を追加するには「連想配列.キー = 値」となります。連想配列に既にキーが存在する場合は値を更新します。

例えば値段（price）が150の場合は、以下のように設定します。

let item = { name: 'どうのつるぎ' }
 item.price = 150
 console.log(item) //{name: "どうのつるぎ", price: 150}

let item = { name: 'どうのつるぎ' }

item.price = 150

console.log(item) //{name: "どうのつるぎ", price: 150}

連想配列の一覧を考える

連想配列の基本が理解できたら、3つの連想配列のアイテム一覧を配列で考えてみましょう。表にまとめると以下のようになります。

index	name	price
0	どうのつるぎ	150
1	かわのたて	80
2	かわのぼうし	100

連想配列を変数に定義する

「どうのつるぎ」「かわのたて」「かわのぼうし」をアイテム名、値段でそれぞれ連想配列にすると以下のようになります。ただ連想配列を1つずつ変数で宣言しているため冗長的です。

let item1 = { name: 'どうのつるぎ', price: 150 }
 let item2 = { name: 'かわのたて', price: 80 }
 let item3 = { name: 'かわのぼうし', price: 100 }

let item1 = { name: 'どうのつるぎ', price: 150 }

let item2 = { name: 'かわのたて', price: 80 }

let item3 = { name: 'かわのぼうし', price: 100 }

連想配列の一覧を配列にまとめる

つぎに各連想配列を配列にまとめてみましょう。アイテム一覧の配列「items」を作成し、連想配列をそれぞれ格納すると以下のように宣言できます。

let items = [
  { name: 'どうのつるぎ', price: 150 },
  { name: 'かわのたて', price: 80 },
  { name: 'かわのぼうし', price: 100 },
 ]

let items = [

{ name: 'どうのつるぎ', price: 150 },

{ name: 'かわのたて', price: 80 },

{ name: 'かわのぼうし', price: 100 },

]

連想配列の一覧にアクセスする

連想配列の一覧（配列）の中は複数のデータが入っていますが、配列のインデックスと連想配列のキーで指定できます。例えば「items」からアイテム名、値段を取得するには以下のようになります。

items[0].price //150
 items[2].name //かわのぼうし

items[0].price //150

items[2].name //かわのぼうし

多次元配列をループ処理する

もう少し実践的に配列をループ処理してみましょう。JavaScriptのループはさまざまな種類がありますが、今回はforEach()を利用して多次元配列と連想配列の配列を比較してみます。

多次元配列をループ処理する場合、配列のインデックスを意識する必要があります。計算上都合がよい場合もありますが、何のデータを操作しているか視覚的にわかりにくい傾向にあります。

let name_array = ['どうのつるぎ', 'かわのたて', 'かわのぼうし'];
 let price_array = [150, 80, 100];
 

 let item_array = [
  name_array,
  price_array,
 ]
 name_array.forEach(function(name, index) {
  //console.log(name)
  console.log(name_array[index])
  console.log(price_array[index])
 })
 //または
 item_array.forEach(function(item) {
  item.forEach(function(item, index) {
  console.log(item)
  })
 })

let name_array = ['どうのつるぎ', 'かわのたて', 'かわのぼうし'];

let price_array = [150, 80, 100];

let item_array = [

name_array,

price_array,

]

name_array.forEach(function(name, index) {

//console.log(name)

console.log(name_array[index])

console.log(price_array[index])

})

//または

item_array.forEach(function(item) {

item.forEach(function(item, index) {

console.log(item)

})

連想配列の配列をループ処理する

つぎに連想配列と配列を利用したデータ構造の場合はどうでしょうか。連想配列の一覧を配列にまとめたデータをループ処理してみます。

ループの中が連想配列のため「name」や「price」でアクセスすることで視覚的にもわかりやすくなります。これはオブジェクト指向を意識したコードといえます。

let items = [
  { name: 'どうのつるぎ', price: 150 },
  { name: 'かわのたて', price: 80 },
  { name: 'かわのぼうし', price: 100 },
 ]
 items.forEach(function(item, index) {
  console.log(index)
  console.log(item.name)
  console.log(item.price)
 })

let items = [

{ name: 'どうのつるぎ', price: 150 },

{ name: 'かわのたて', price: 80 },

{ name: 'かわのぼうし', price: 100 },

]

items.forEach(function(item, index) {

console.log(index)

console.log(item.name)

console.log(item.price)

})

システム エンジニア: 「オブジェクト」はデータの最小単位、「配列」はデータの集合なんですね。

プロジェクト マネージャー: 非常に実践的な内容ですので、実際に書いて理解を深めていくことが重要です。

JavaScriptの連想配列への理解を深めよう

「連想配列」はJavaScriptに限らず、どのプログラミング言語においても重要かつ実践的なデータ構造です。

配列、オブジェクト、連想配列といったさまざまなデータ構造は、実際に手を動かすことで理解がより深まるので、いろいろなプログラミングに挑戦してみましょう。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

JavaScriptでの連想配列の使い方！多次元配列と連想配列の違い

JavaScriptではじめる「連想配列」

オブジェクトと配列とは？

配列を宣言する

配列をインデックス（Index）で指定する

値段の配列を指定する

多次元配列とは

オブジェクトを宣言する

オブジェクトをまとめて宣言する

連想配列とは

連想配列のルール

連想配列を宣言する

連想配列の値を取得する

連想配列にキーと値を追加する

連想配列の一覧を考える

連想配列を変数に定義する

連想配列の一覧を配列にまとめる

連想配列の一覧にアクセスする

多次元配列をループ処理する

連想配列の配列をループ処理する

JavaScriptの連想配列への理解を深めよう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

JavaScriptでの連想配列の使い方！多次元配列と連想配列の違い

JavaScriptではじめる「連想配列」

オブジェクトと配列とは？

配列を宣言する

配列をインデックス（Index）で指定する

値段の配列を指定する

多次元配列とは

オブジェクトを宣言する

オブジェクトをまとめて宣言する

連想配列とは

連想配列のルール

連想配列を宣言する

連想配列の値を取得する

連想配列にキーと値を追加する

連想配列の一覧を考える

連想配列を変数に定義する

連想配列の一覧を配列にまとめる

連想配列の一覧にアクセスする

多次元配列をループ処理する

連想配列の配列をループ処理する

JavaScriptの連想配列への理解を深めよう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

JavaScriptでデータベースを操作する方法を紹介｜データベースの操作方法を整理しましょう

JavaScriptでのalertの基本的な使い方6つ｜類似のメソッドとは？

jQueryのscrollTopとは？scrollTopを正しく使いこなそう！

jQueryでの複数要素をselectorでor指定する方法とは？正しくselectorでor指定をしよう！

jQueryでの「id」セレクタの取得方法｜指定方法やDOM操作も解説