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

.NET開発者のためのブログメディア

SE: 「連想配列」というデータ構造について詳しく教えてください。

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

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

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

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

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

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

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

配列を宣言する

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

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

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

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

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

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

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 2	let item1 = {}

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

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

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

連想配列とは

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

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

連想配列のルール

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

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

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

1 2	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)

})

SE: 「オブジェクト」はデータの最小単位、「配列」はデータの集合なんですね。

PM: 非常に実践的な内容ですので、実際に書いて理解を深めていくことが重要です。

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

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

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

.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー（応募フォーム）