【JavaScript入門】連想配列(Dictionary)の取得/追加/ソートまとめ

こんにちは！Webコーダー・プログラマーの貝原（@touhicomu）です。

今日はJavaScriptでよく使用される連想配列について学習します。

この記事では、

という基本的な内容から、

などの応用的な使い方に関しても学習していきます。このページで、連想配列をよく把握して自分のスキルとしていきましょう！

連想配列(Dictionary)とは？

それでは、まず最初に「連想配列」についての基本的な知識から学習を進めていきましょう！

「連想配列」は、「キー」と「値」のペアによるデータ構造のことで一般的なオブジェクト構造と同じです。「連想配列」はDictionary(ディクショナリ)とも呼ばれます。分かりやすいように「配列」と比較してみましょう！

// ①配列のサンプル
var array1 = [ 'apple', 'banana', 'melon', 'grape' ];

// ②連想配列のサンプル
var array2 = { apple:10, banana:20, melon:30, grape:40}

①の配列と②の連想配列を比べてみると、格納されている値はそれぞれ違うのがよく分かりますね。また、「配列」は[ ]を使って作成するのに対して、「連想配列」では{ }を使うという点にも注意しましょう。

次の章からは、さまざまな連想配列の活用法をご紹介していきますのでぜひ参考にしてみてください！

「連想配列」の使い方

連想配列の構造と作成方法

ここからは、実際に「連想配列」をプログラミングしながら勉強していきましょう！　まずは、連想配列の書き方として以下の構文をおさらいしておきます。

var array = { キー名称 : 値 , キー名称 : 値 , キー名称 : 値 , キー名称 : 値 , ・・・ }

このように、「キー」と「値」がペアになった構造をしているのが特徴です。ちなみに、「値」に関しては文字列・数値・関数・オブジェクト…など、基本的に配列と同じくさまざまな値を格納できます。

この構文を元に、例えば簡単なユーザー情報を保持する連想配列を作るには次のように記述します。

var user = { name:'太郎', age:32, tel:'080-1234-5678' };

この例では、「キー」となる箇所に「name」と記述して「値」には名前の「太郎」を設定しているのが分かります。これによりユーザーの名前が連想配列として格納されたことになるのです。同じように「age」や「tel」という情報も設定することで、ユーザー情報をどんどん格納していくことができるわけです。

連想配列の要素(キー/値)を追加する方法

今度は、連想配列に値やキーを追加する方法について見ていきましょう！　先ほどは、「name」「age」「tel」という3つのキーからなる連想配列を作成しました。これに、「country」というキーでユーザーの国情報を追加してみましょう。記述方法としては、次の2通りがあります！

// ①チェーンで追加する方法
user.country = '日本';

// ②添字で追加する方法
user['country'] = 'アメリカ';

①のチェーンで追加する方法は「.（ドット）」で設定したキーの名称を繋げて値を追加する方法です。

②の添字を使う方法は配列のように[ ]を使ってキーの名称を指定して値を追加します。

どちらの方法でも同じことが実現できますが、例えばキーの名称が日本語などの場合は②の方法が最適でしょう。実際に「country」というキーと値を追加するには次のように記述します。

var user = { name:'太郎', age:32, tel:'080-1234-5678' };

user.country = '日本';

console.log( user );

実行結果

{name:"太郎", age:32, tel:"080-1234-5678", country:"日本"}

実行結果を見ると、しっかりと「country」というキーと値が追加されているのがわかりますね。

要素を削除する方法

連想配列から要素を削除するには、delete文を使用します。delete文の疑似コードは以下の通りです。

delete arr[キー文字列];

次に、実際のコードで確認していきましょう。

// 連想配列リテラルを変数に代入
var arr = { apple: "400yen", banana: "300yen", cake: "600yen" };

// 連想配列からキーがbananaの要素を削除
delete arr['banana'];

// キーbananaの要素が削除されていることを確認
console.log(arr);

まず、変数arrに連想配列リテラルを代入しています。次にキー’banana’の要素をdelete文で削除しています。

最後に要素を削除した後の連想配列arrをコンソールに出力しています。実行結果は以下のようになります。

Object {apple: "400yen", cake: "600yen"}

以上のように、キー’banana’の要素が削除されています。

連想配列の取得

連想配列の値を取得する方法

まずは、一般的な連想配列の「値」を取得する方法から見ていきましょう！　方法は簡単で、連想配列の場合はキーとなる名称があらかじめ付けられているのでこれを利用します。

var user = { name:'太郎', age:32, tel:'080-1234-5678' };

console.log( user['name'] );
console.log( user.name );

実行結果

太郎
太郎

この例では、キーとなる名称「name」を使ってユーザーの名前を取得して出力しています。「user[‘name’]」のように添字にキーを指定するか、「user.name」とすることで目的の値を取得することができます。

キー（Key）を取得する方法

次に、連想配列の「キー」を取得する方法について見ていきます。「キー」を取得するには、最も簡単な方法として「Object.keys()」メソッドを使う方法があります。一般的な記述方法としては、【 Object.keys( 連想配列 ) 】のように引数へ連想配列を指定すればOKです。

実際のコードで確認してみましょう！

var user = { name:'太郎', age:32, tel:'080-1234-5678' };

var key = Object.keys(user);

console.log( key );

実行結果

name, age, tel

この例では、「Object.keys」メソッドを使って連想配列の「キー」を取得しているのがわかりますね。実行結果を見ると、すべての「キー」が取得できています。また、配列のように「key[1]」と記述すれば、連想配列の1番目の要素にある「キー」を取得することも可能です。

連想配列のforループについて

「for-in」でループ処理をする方法

まずは、連想配列を「for-in文」で操作する方法から見ていきましょう！　「for-in文」を利用すると、少ない記述で効率よく「キー」や「値」を取得・設定することが可能です。

一般的な記述方法は、【 for( var 変数 in 連想配列 ) { } 】のように連想配列からデータを取得する変数とペアで記述します。実際のコードを見ていきましょう!

var user = { name:'太郎', age:32, tel:'080-1234-5678' };

for(var key in user) {

    console.log( key );

}

実行結果

name
age
tel

この例では、for-in文のin演算子を使用してループ毎に連想配列から「キー」を取得しています。変数「key」には、ループ毎に「キー」が代入されるので実行結果のようにキーだけを取得することが可能なのです。

ちなみに「for-in文」についてさらに知識を深めたい方は、次の記事で基本から応用までまとめているので参考にしてみてください。

「forEach」でループ処理をする方法

もう1つ、よく使われるループ処理の方法として「forEach文」を活用したやり方があります。ただし、forEach文は「配列」に対して実行できるメソッドなので、連想配列のままではエラーになってしまいます。

そこで、「Object.keys()」を使って連想配列の「キー名称」だけを一時的に配列へ格納するわけです。処理の記述としては以下の通りです！

Object.keys( 連想配列 ).forEach( ループ処理, 連想配列 )

まず、「Object.keys()」で連想配列のキー名称を配列化したのちに、「forEach()」でループ処理を行います。「forEach()」の第2引数に連想配列を指定することで、ループ処理内の「this」が連想配列を指すことになります。

これを実際のプログラムで記述すると、以下の通りになります！

var arr = { apple: "400yen", banana: "300yen", cake: "600yen" };

Object.keys(arr).forEach( function(value) {

    console.log( value + '：' + this[value] );

}, arr)

実行結果

apple：400yen
banana：300yen
cake：600yen

まず最初に、連想配列「arr」のキー名称を「Object.keys()」で配列化します。そして、「forEach()」でループ処理を行うことで「value」にキー名称が格納されるわけです。

さらに、第2引数へ連想配列を指定していることから、ループ処理内の「this」が連想配列「arr」と同じになります。そのため、「this[value]」と記述することで連想配列の「値」を取得できるというわけですね。

ちなみに、「forEach文」について基本的な使い方やさまざまな活用事例などを次の記事で解説しているので、ぜひ参考にしてみてください！

連想配列のソート（順番）

連想配列のキー（key）を使ったソートの方法

まずは、一般的な連想配列のソート（並び替え）について見ていきましょう！JavaScriptの配列は「sort()メソッド」があるので簡単なのですが、連想配列でソートを行うには工夫が必要です。

ここでは、連想配列の「キー」を使ってソートする方法を解説します。そこで、まずは「キー」を取得することから始めましょう！

var user = { name:'太郎', age:32, tel:'080-1234-5678' };
 
var result = {};
var key = Object.keys(user);

key.sort();

この例では、ユーザー情報を格納した連想配列を作成して「Object.keys()」でキーだけを取得しています。のちほどソートした連想配列を格納するための変数「result」も用意しておきましょう。

そして、取得したキーは配列データとして格納されているので、「sort()メソッド」でソートを実行しておきます。これで取得したキーはソートされたことになるので、あとはこの順番で変数「result」に連想配列を格納すれば良いわけです。次のサンプル例を見てください！

for( var i = 0; i < key.length; i++ ) {
    
    result[ key[i] ] = user[ key[i] ];
}
 
console.log( result );

実行結果

{age:32, name:"太郎", tel:"080-1234-5678"}

この例では、for文を使ってソートされたキーの順番で変数「result」に連想配列を代入していますね。元になる「user」と新規に作る連想配列「result」のそれぞれの添字を、ソート後の変数「key」に統一しているのがポイントです。

実行結果を見ると、しっかりとキーが並び替えられているのが確認できますね！

複数の連想配列をソートする

連想配列が1つだけの場合は「sort()」で順番を入れ替えることができました。それでは、連想配列が2つ3つと複数ある場合に、まとめて順番を入れ替えたい場合にはどうすれば良いでしょうか？ 次のように配列内に複数の連想配列がある場合を想定してみましょう！

var fruits = [
    { store: 'first-shop', apple: '400yen', banana: '300yen', cake: '400yen' },
    { store: 'second-shop', apple: '200yen', banana: '400yen', cake: '600yen' },
    { store: 'third-shop', apple: '600yen', banana: '500yen', cake: '200yen' },
    { store: 'fourth-shop', apple: '520yen', banana: '450yen', cake: '540yen' },
];

この例では、各店舗ごとの果物の価格を連想配列にしています。例えば、「apple」の価格を安い店舗順に並び替えたいとしましょう。この場合の考え方としては、各店舗のappleの価格を比較して安い価格順に並び替えていけば良いですよね？

例えば、「fruits[0].apple」と「fruits[1].apple」を比較すると「400yen > 200yen」となるので「fruits[1]」の方が安いわけです。これを手っ取り早く比較していく手順として、「sort()」メソッド内で比較関数を利用する方法があります。次のサンプル例を見てください！

fruits.sort( function(a, b) {

    return a.apple < b.apple ? -1 : 1;

});

console.log( fruits );

実行結果

0:{store: "second-shop", apple: "200yen", banana: "400yen", cake: "600yen"}
1:{store: "first-shop", apple: "400yen", banana: "300yen", cake: "400yen"}
2:{store: "fourth-shop", apple: "520yen", banana: "450yen", cake: "540yen"}
3:{store: "third-shop", apple: "600yen", banana: "500yen", cake: "200yen"}

「sort()」で関数を利用して、それぞれの連想配列にある「apple」の価格を比較しているのが分かりますね。この時、関数の引数である「a」「b」にはそれぞれ順番に連想配列が格納されています。

そのため、「a.apple」は0番目の連想配列にあるappleの値になり、「b.apple」は1番目の値になります。そして、それぞれの値を比較し「0」よりも小さいか大きいかを比較し、小さければ「-1」大きければ「1」を返しています。

なぜなら「sort()」には「0」よりも大きいか小さいかで配列に格納する順番を入れ替える機能があるためです。実行結果を見ると、見事に「apple」の価格が安い順番に並び替えられているのが分かりますね！

連想配列でpushは使えない

JavaScriptの配列には要素を追加するpushメソッドがありました。しかし、連想配列にはpushメソッドはありません。以下、実際のコードで確認してみましょう。

// pushを使った追加方法

// 連想配列リテラルを変数に代入
var arr = { apple: "400yen", banana: "300yen", cake: "600yen" };

// pushを使った追加方法 -> エラーとなる
arr.push({ daikon: '100yen'});

// ここまでは到達しない
console.log(arr);

まず、変数arrを連想配列リテラルで初期化しています。次に、変数arrにpushメソッドを使って要素の追加を試みています。

しかし、ここで連想配列のインスタンスメソッドにpushメソッドがないため、エラーとなります。上記コードを実行すると、下記の実行結果となります。

add_element_by_push.js:7 Uncaught TypeError: arr.push is not a function
at add_element_by_push.js:7

7行目で、連想配列arrにはpushメソッドがないとのエラーが出ています。連想配列に値を追加するには、前節で述べたように以下のコードのようにする必要があります。

arr[キー文字列] = 値 //新規キーと値をセット

まとめ

今回は、キー文字列で値を取得できる「連想配列」を学習しました！ 学習のポイントを振り返ってみましょう！

以上の内容を再確認し、ぜひ自分のプログラムに生かし学習を進めてください！