プログラミング言語でとても便利に使うことができる「連想配列」。JavaScriptでも、連想配列のオブジェクト（以下、連想配列）を簡単につくることができます。JavaScriptの連想配列とはどんなものでしょうか。

この記事では、連想配列をつくったり使ったりする基本的な方法も含めて、詳しく解説します。

JavaScriptの連想配列（オブジェクト）とは？

一般的な配列とは？

配列とは、リスト化された変数で、キーと値を持つ要素の集合です。リストに含める変数の数は不定であることが多く、それぞれを変数として持つのは実用的ではありません。そこで関連する情報を同じ変数のなかに配列として持っておけばプログラムとしても見やすいです。

さらに、情報を配列として持つようにすると、リスト内の変数の数が変わっても、追加したり削除したりする操作が簡単におこなえます。連想配列ではない単純な配列なら、それぞれの要素のキーは0からはじまる自然数が自動的に割り当てられます。

連想配列とは？

連想配列とは、自動的に割り当てられる数字をキーとして持つかわりに、自由に任意の文字列を割り振ることができる配列です。キーを任意に指定できることによって、そこに格納されている値が何のことであるかということがより簡単に連想できるようになっています。

また、配列の要素からある値を探し出して使いたいという場合でも、キーを指定しやすくなります。

JavaScriptでも配列を使うことができ、連想配列のオブジェクトもあります。変数のリストをキーと値の配列よりも便利に使えるようになっています。

JavaScriptの連想配列を使う

連想配列をつくる

では、はじめに、JavaScriptの連想配列を作ってみましょう。配列のオブジェクトを宣言します。

var player = new Object();

「Object」と記述して、空のオブジェクトを作ります。またこの例文では、「player」という変数名のオブジェクトも作っています。まだ配列の要素はない状態です。

または、もっと簡単な連想配列専用の記述方法として、

var player = {};

と書く方法もあります。「new」と記述する必要もない特殊な書き方ですが、連想配列をつくるための特別な記述法のひとつです。ちなみに、連想ではない配列は、「{}」ではなく、「[]」と記述して作成します。

この書き方は、下記のように、一行のプログラムで配列の要素も加えることができる、とても便利なものです。

var player =｛name: "Ronaldo", team: "Juventus"};

この例文では、「player」という連想配列の変数を宣言しながら、同時に変数内の要素も加えていくことができます。
ここでは、サッカー選手のプロフィールを配列に収めると仮定した例をご紹介します。「Ronaldo」という名前（name）の選手が、「Juventus」というチーム（team）に所属していることを登録したものです。配列の要素はいくつ用意しても構いません。

連想配列を追加する

連想配列の要素を追加する方法もいろいろあります。まず、オブジェクトの要素のように追加するなら、連想配列にする変数をドット表記で書きます。例文で登録された「Ronaldo」の選手の背番号（uniNumber）を追加してみましょう。

player.uniNumber = 7;

普通に、変数に代入するかのように、「player」というオブジェクトの「uniNumber」という要素を追加できるわけです。

または、ブラケットを記述して追加する方法もあります。ブラケット内に、文字列を記述するとその文字列をキーとする要素が追加可能です。ここでは例として、「Ronaldo」選手の国籍（nation）を登録します。

player["nation"] = "Portugal";

PHPなどの、他のオブジェクト指向の言語と同じような記述なので、配列の要素を追加していることが分かりやすいです。

ただし、ブラケット内に変数で文字列を代入できますが、キーには文字列しか使えないということを覚えておくようにしましょう。

var note = "mvp";
var cnt = 5;
player[note] = cnt;

このように記述すると、「mvp」というキーに「5」という数字が収められます。

また、連想配列の要素として、さらに連想配列を持たせることも可能です。

var hist = [ "Sporting", "Man United", "Real Madrid" ];
player.history = hist;
console.log(player.history[0]);

連想配列をループさせる

次に、作成された連想配列を実際にプログラムで使用する場面について考えましょう。

不特定の数の要素が、連想配列の変数に格納されている状態を例にとります。この中に入っているいろいろな要素をすべて取り出すには、for inを使って連想配列のすべての要素をループさせます。

連想配列の各要素のキーと値をダイアログで表示する方法を見てみましょう。

for (var k in player) {
  console.log("項目： ” + k);
  console.log("内容： ” + player[k]);
}

for文のループの中で、連想配列のキーに指定した文字列は、この例文の場合は、「k」で取り出すことができます。また、連想配列の該当の要素の値は、この例文の場合「player[k]」と記述してアクセスできるようになっています。配列の順番は、必ずしも意図したとおりになっているわけではないので、注意が必要です。

また、配列に余計なものが含まれてしまうこともありえます。オブジェクトを拡張したりして、プロパティを増やしたなら、それが、連想配列にも追加されて、ループのなかに入ってしまうのです。

別の方法として、連想配列オブジェクトの関数でキーをすべて取り出すこともできます。

var data = [ 'ronaldo', 'messi', 'Neymar'];

Array.prototype.mesoddo = function(){}
for (var key in data){
  console.log(data[key]);
}

連想配列「player」のキーの一覧リストとして「propaty」を配列に収め、for文で要素の数だけループさせます。ループの中で、配列「propaty」の要素が連想配列「player」のキーになっているので、そのままキーとして使用します。

値は、「player」の「propaty[i]」としてアクセスできます。

var propaty = Object.keys(player);
for (var i=0; i < propaty.length; i++) {
  console.log("項目： ” + propaty[i]);
  console.log("内容： ” + player[propaty[i]]);
}

まとめ

Javascriptを使った動的なページをつくっていくために、連想配列はとても重要な要素です。

連想配列の基本をマスターして、プログラミングを確実に覚えていきましょう。

この記事のキーワードに関する勉強会・イベントを探す

TECH PLAYでは、ITエンジニア向けの勉強会・イベント情報を提供しています。

興味のある方はぜひご参加ください。

• 「JavaScript」に関する勉強会・イベントを探す
• 「プログラミング」に関する勉強会・イベントを探す
• 「初心者」に関する勉強会・イベントを探す