JavaScriptの連想配列とは？オブジェクトとの違いや値の取得方法まで徹底解説

JavaScriptの連想配列とは？

まずは、JavaScriptにおいての「配列」「連想配列」とは何なのかを知りましょう。また、オブジェクトとの違いも説明していきます。

JavaScriptの配列とは

配列とは、複数の変数がくっついたものです。変数と聞いてもピンとこない人は、変数は「要素（値）を入れる箱」と考えてください。この箱が複数くっついているデータのまとまりが配列です。

変数には値を1つしか入れられないのですが、配列によって複数の値を入れることができ、関連するデータを1つにまとめて管理できます。また、箱の中の変数の数が変わったとしても、削除したり、追加したりの操作が簡単にできます。

この配列の箱には、左から順に0からはじまる数字が自動的に割り振られます。1からではなく、0からというのがポイントです。この割り振られた数字は「配列の添字」といいます。

JavaScriptの連想配列（Dictionary）とは

連想配列は、配列の添字に好きな名前をつけることができる配列です。この連想配列で使われる好きな名前をつけた添字のことを「キー」といいます。普通の配列の「添字」と連想配列の「キー」は、呼び方は異なりますが使い方は同じです。

普通の配列は、添字が0から始まる数字が割り振られていましたが、連想配列では好きなように名前がつけられるので、どんな要素が箱の中に入っているのかがわかりやすくなります。また、配列の要素からある値を取り出して使いたいときにも、指定しやすくなるのがメリットです。

オブジェクトとの違い

これまでJavaScriptの連想配列を説明してきましたが、実はJavaScriptには「連想配列」という言葉は存在しません。他のプログラミング言語で「連想配列」というのですが、JavaScriptでは「オブジェクト」または「オブジェクトリテラル」といいます。

なぜ、JavaScriptでは連想配列といわないのか。それは、連想配列は値が入っているのに対し、JavaScriptのオブジェクトは、値としてデータだけではなく、関数（処理）も入れることができるためです。値だけしか入っていないのであれば、連想配列と言ってもよいでしょう。しかし、JavaScriptでは関数（処理）も入れることができるため、広い意味でオブジェクトと呼ぶわけです。

ですので、JavaScriptにおいてはオブジェクトが連想配列であると考えて問題ありません。

JavaScriptの連想配列を使ってみよう

それでは、JavaScriptの連想配列を使う方法を解説していきましょう。基本的には、変数と同じような方法ですので、案外簡単にできます。

連想配列の値を取得

まずは、連想配列の値を取得しましょう。値を取得するには、キーを指定します。構文としては、「配列名.キー」または「配列名[‘キー’]」という書き方をすると、値を取得できます。具体的な例は以下のとおりです。

例：
var weather = {sunny:晴れ, rain:雨, cloudy:曇り, snow:雪, thunder:雷 };

console.log( weather.sunny );
console.log( weather['cloudy'] );

実行した結果は、以下のように出力されます。

晴れ
曇り

●キーを取得したい場合
なお、値の取得ではなくキーを取得したい場合は、

Object.keys()

の構文を使います。

具体的な例は以下のとおりです。

例：
var weather = {sunny:晴れ, rain:雨, cloudy:曇り, snow:雪, thunder:雷 };
var key = Object.keys(weather);
console.log(key);

実行した結果、以下のように出力されます。

sunny, rain, cloudy, snow, thunder

キーだけ取得できました。

●連想配列を追加する場合
連想配列を追加する場合は、以下のように記述します。

例：
var weather = {sunny:晴れ, rain:雨, cloudy:曇り, snow:雪, thunder:雷 };
weather.thunderstorm = '雷嵐';

これで、キーにthunderstorm、値に雷嵐が追加されました。追加の記述の仕方は、

weather['thunderstorm'] = '雷嵐';

としても問題ありません。

連想配列を「for」でループ処理する

連想配列の「キー」や「値」を連続して取得する場合には、「for…in文」を使い、ループ処理を行います。一般的な記述方法は、

for( var 変数 in 連想配列 ) { }

です。連想配列からデータを取得する変数とペアで記述するようにします。サンプルコードを見てみましょう。

例：
var weather = { placename:'横浜', forecast:晴れ ,temperature:32 };

for(var key in weather) {

console.log( key );

}

実行結果は以下のようになります。

placename
forecast
temperature

この例では、「for…in文」のin演算子を使用しています。ループするたびに連想配列から「キー」を取得し、その結果、キーだけを取得することができるのです。

●要素の順番通りに出力したい場合
「for - in文」はJavaScriptの実行環境やブラウザのバージョンによって、必ず要素の順番通りに出力されるわけではありません。順番通りに出力したい場合は、「for文」を使います。

var array = ['伊藤', '加藤', '佐藤'];

for( var i=0; i
console.log( array[i] );

}

実行結果は以下のとおりです。

伊藤
加藤
佐藤

要素の順番通りに出力されました。

連想配列のソート

JavaScriptには、連想配列のソート機能がないため、ソート機能を自分で作っていかなければなりません。キーでソートするやり方と、値でソートするやり方を紹介します。

●キーでソートするやり方
キーでソートするには、
【1】「Object.keys()」でキーだけを取得
【2】取得したキーを「sort()」でソートする
【3】コンソールにソート順に表示する
の流れです。

例：
var weather = [
{ "placename" : "東京", "temperature" : 30},
{ "placename" : "神奈川", "temperature" : 27},
{ "placename" : "千葉", "temperature" : 32}
];

// キーのソート：
keys = Object.keys(weather[0]);
keys.sort();
for (key of keys){
console.log(`${key} : ${weather[0][key]}`);
}

●値でソートするやり方
値でソートするには、比較関数を用いて2つの値を比較するやり方があります。流れとしては、
【1】2つの値をa、bとし、aがbより前に来る場合は正、後ろに来る場合は負の値を返す
【2】【1】の結果を使ってfor...in文でキー[配列番号]を指定し、値を取り出す。コンソールに表示
【3】上記の処理を計算結果が負になるまで繰り返す。
【4】値のソートを行う
です。

例：
var weather = [
{ "placename" : "東京", "temperature" : 30},
{ "placename" : "神奈川", "temperature" : 27},
{ "placename" : "千葉", "temperature" : 32}
];

weather.sort(function(a,b){
return (a.temperature - b.temperature);
});

for(var i = 0; i < weather.length; i++){
console.log(weather[i].placename + "は" + weather[i]["temperature"]);
}

JavaScriptの連想配列を覚えよう

JavaScriptの連想配列は、記述の基本である上、使えるようになると変数、オブジェクトの理解が深まります。また、連想配列によってデータ操作が簡単になるのもよい点です。JavaScriptの連想配列をしっかりマスターしましょう。

エンジニアのためのIT派遣ならブレーンゲート

「ブレーンゲート」は、株式会社ブレーンネットが運営しているIT・移動体通信・エンジニアの派遣求人情報サイトです。システムエンジニアやプログラマー、ネットワークエンジニア、サーバエンジニア、ヘルプデスク、携帯電話基地局の施工管理や卓業務、電波測定、置局折衝、安全管理など、IT・移動体通信業界での様々な派遣の求人情報を掲載しているので、あなたのご希望やご経験に合ったお仕事を見つけることができます。また、ブレーンゲートヘ会員登録をいただくと、サイト上でメッセージのやり取りもできますので、求職活動中のお悩みや今後のご希望などについて、お気軽にご相談くださいね。ブレーンゲートには求人情報以外にも、IT・エンジニア・派遣・転職に関するコラムなどを掲載していますので、何かキニナルことがあった時に指南書のようにご利用ください。