.net column

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

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

2020年08月21日
SE
「連想配列」というデータ構造について詳しく教えてください。
PM
まず「オブジェクト」と「配列」についての理解から始めましょう。

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

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

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

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

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

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

配列を宣言する

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

 

配列をインデックス(Index)で指定する

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

 

値段の配列を指定する

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

 

多次元配列とは

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

オブジェクトを宣言する

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

 

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

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

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

連想配列とは

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

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

連想配列のルール

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

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

 

連想配列を宣言する

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

連想配列の値を取得する

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

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

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

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

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

連想配列の一覧を考える

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SE
「オブジェクト」はデータの最小単位、「配列」はデータの集合なんですね。
PM
非常に実践的な内容ですので、実際に書いて理解を深めていくことが重要です。

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

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

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

 


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

求人一覧

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

エントリー(応募フォーム)