JavaScriptでの連想配列の使い方！多次元配列と連想配列の違い
- SE
- 「連想配列」というデータ構造について詳しく教えてください。
- PM
- まず「オブジェクト」と「配列」についての理解から始めましょう。
この記事でわかること
- 1 JavaScriptではじめる「連想配列」
- 2 オブジェクトと配列とは？
- 3 配列を宣言する
- 4 配列をインデックス（Index）で指定する
- 5 値段の配列を指定する
- 6 多次元配列とは
- 7 オブジェクトを宣言する
- 8 オブジェクトをまとめて宣言する
- 9 連想配列とは
- 10 連想配列のルール
- 11 連想配列を宣言する
- 12 連想配列の値を取得する
- 13 連想配列にキーと値を追加する
- 14 連想配列の一覧を考える
- 15 連想配列を変数に定義する
- 16 連想配列の一覧を配列にまとめる
- 17 連想配列の一覧にアクセスする
- 18 多次元配列をループ処理する
- 19 連想配列の配列をループ処理する
- 20 JavaScriptの連想配列への理解を深めよう
JavaScriptではじめる「連想配列」
「連想配列」はJavaScriptに限らず、プログラムでデータをあつかうための重要かつ便利なデータ構造です。連想配列を利用することでプログラミングの世界観が変わり、コーディングの効率化だけでなくデータベース設計や連携も意識するようになります。
JavaScriptでも「連想配列」をあつかえるので、その基本的な内容について解説します。
オブジェクトと配列とは？
「連想配列」を説明する前に、まず「オブジェクト」と「配列」について理解しておく必要があります。オブジェクトはプログラムであつかうデータの最小単位です。配列もオブジェクトの1つですが数字の「インデックス（Index）」と「値」から構成されるデータの集合です。
では、まずJavaScriptで配列を宣言して操作してみましょう。
配列を宣言する
JavaScriptの配列は「[]」ブラケットで宣言ができ、値を設定する場合は、[value1, value2, …]と記述します。例えば「どうのつるぎ」「かわのたて」「かわのぼうし」といった3つのアイテム名を配列で宣言すると以下のようになります。
|
1 |
let name_array = ['どうのつるぎ', 'かわのたて', 'かわのぼうし'] |
配列をインデックス（Index）で指定する
配列には「0」からはじまる整数の「インデックス（Index）」をもちます。配列のインデックスをキーと呼ぶこともありますが、ここではインデックスとします。例えば配列「name_array」から「かわのたて」を取得するには、2番目のインデックスである「1」でアクセスします。
|
1 2 |
let name = name_array[1] console.log(name) //かわのたて |
値段の配列を指定する
同じ要領で3つのアイテムの値段を「150」「80」「100」の配列で宣言し、インデックス「1」でアクセスします。
|
1 2 3 |
let price_array = [150, 80, 100] let price = price_array[1] console.log(price) |
多次元配列とは
多次元配列は、配列の中に配列を入れるデータ構造をいいます。例えば3×3の行列をJavaScriptの配列で宣言するコードは以下のようになります。
|
1 2 3 4 5 6 |
let multi_array = [ [1, 2, 3], [4, 5, 6], [7, 8, 9], ] |
オブジェクトを宣言する
つぎにJavaScriptのオブジェクトを作成します。空のオブジェクトを作成するには以下のように「{}」ブラケットで宣言します。
|
1 |
let item1 = {} |
オブジェクトをまとめて宣言する
さて、ここでアイテム名「どうのつるぎ」「かわのたて」「かわのぼうし」と、値段「150」「80」「100」をまとめて宣言するにはどのようにすればいいでしょうか。
多次元配列でも処理できますが、さらにわかりやすくするには今回の本題「連想配列」を利用すると便利です。
連想配列とは
それでは連想配列を利用してみましょう。連想配列は通常の配列のような数字の「インデックス（Index）」ではなく「キー（key）」を利用して変数を宣言し、キーは数字でなくても構いません。
また連想配列は「key（キー）」と「value（値）」で宣言するため「key-valueオブジェクト」や「Dictionary」とも呼ばれます。
連想配列のルール
連想配列の宣言はいくつかのルールがあります。連想配列の宣言は、配列の「[]」ブラケットでなく、オブジェクトの「{}」ブラケットで表記します。JavaScriptの連想配列と配列のアクセス方法を混同しないようにしましょう。
つぎに、キー（key）と値（value）は「:」（コロン）で区切った「key : value」のペアで記述します。そしてペアが増えるごとに「,」（カンマ）で区切って複数指定します。キーは「””」「”」で囲んでも構いません。まとめると以下のようになります。
|
1 |
let dictionary = { key1: value1, key2: value2, ...} |
連想配列を宣言する
まずはアイテム名「どうのつるぎ」について考えてみます。連想配列の作成は「キー（key）」「値（value）」を「:」で区切るため、キーを「name」と定義し、値を「どうのつるぎ」とすると以下の連想配列で表せます。
|
1 2 |
let item = { name: 'どうのつるぎ' } |
連想配列の値を取得する
JavaScriptのプロパティのアクセス方法は「オブジェクト.プロパティ名」で指定します。連想配列も同様に「連想配列.キー」で指定します。「.」はJavaScriptのオブジェクトにアクセスする重要な記述です。
例えば、itemから「どうのつるぎ」を取得するにはキーを「name」と定義したため「item.name」でアクセスします。ただし例外的に変数でキーを指定する場合、item[変数]と「[]」ブラケットでアクセスしなければいけません。
|
1 2 3 4 5 6 7 8 9 |
let item = { name: 'どうのつるぎ' } console.log(item.name) //どうのつるぎ //キーを変数にした場合 const name_key = 'name' let item_name = item[name_key] console.log(item_name) //どうのつるぎ |
連想配列にキーと値を追加する
連想配列に新たなキーと値を追加するには「連想配列.キー = 値」となります。連想配列に既にキーが存在する場合は値を更新します。
例えば値段（price）が150の場合は、以下のように設定します。
|
1 2 3 4 |
let item = { name: 'どうのつるぎ' } item.price = 150 console.log(item) //{name: "どうのつるぎ", price: 150} |
連想配列の一覧を考える
連想配列の基本が理解できたら、3つの連想配列のアイテム一覧を配列で考えてみましょう。表にまとめると以下のようになります。
| index | name | price |
|---|---|---|
| 0 | どうのつるぎ | 150 |
| 1 | かわのたて | 80 |
| 2 | かわのぼうし | 100 |
連想配列を変数に定義する
「どうのつるぎ」「かわのたて」「かわのぼうし」をアイテム名、値段でそれぞれ連想配列にすると以下のようになります。ただ連想配列を1つずつ変数で宣言しているため冗長的です。
|
1 2 3 4 |
let item1 = { name: 'どうのつるぎ', price: 150 } let item2 = { name: 'かわのたて', price: 80 } let item3 = { name: 'かわのぼうし', price: 100 } |
連想配列の一覧を配列にまとめる
つぎに各連想配列を配列にまとめてみましょう。アイテム一覧の配列「items」を作成し、連想配列をそれぞれ格納すると以下のように宣言できます。
|
1 2 3 4 5 6 |
let items = [ { name: 'どうのつるぎ', price: 150 }, { name: 'かわのたて', price: 80 }, { name: 'かわのぼうし', price: 100 }, ] |
連想配列の一覧にアクセスする
連想配列の一覧（配列）の中は複数のデータが入っていますが、配列のインデックスと連想配列のキーで指定できます。例えば「items」からアイテム名、値段を取得するには以下のようになります。
|
1 2 3 |
items[0].price //150 items[2].name //かわのぼうし |
多次元配列をループ処理する
もう少し実践的に配列をループ処理してみましょう。JavaScriptのループはさまざまな種類がありますが、今回はforEach()を利用して多次元配列と連想配列の配列を比較してみます。
多次元配列をループ処理する場合、配列のインデックスを意識する必要があります。計算上都合がよい場合もありますが、何のデータを操作しているか視覚的にわかりにくい傾向にあります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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」でアクセスすることで視覚的にもわかりやすくなります。これはオブジェクト指向を意識したコードといえます。
|
1 2 3 4 5 6 7 8 9 10 11 |
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に限らず、どのプログラミング言語においても重要かつ実践的なデータ構造です。
配列、オブジェクト、連想配列といったさまざまなデータ構造は、実際に手を動かすことで理解がより深まるので、いろいろなプログラミングに挑戦してみましょう。
