あーりーです。
趣味でJavaScriptの勉強をしています。
きょうのテーマは「連想配列」です。
連想配列のはなしを始める前に
「連想配列」のはなしを始める前に…
そもそも、ふつうの「配列」ってどんなものだったか、簡単に思い出しておきたいと思います。
配列とは
配列とは、変数の集まりです。
変数とは、情報を入れておく箱です。
箱には番号がふられている
配列のイメージはこうです。
たくさんの箱があって、その箱の中にいろいろな情報が入っている。
箱はナンバリングされていて、番号で区別できる。
たとえば、
1番の箱にはＡという情報が入っている…
50番の箱にはＢという情報が入っている…
みたいな感じです。
※配列について詳しくは「よくわかる配列の基本」をご覧ください。
そんな配列を、さらに便利にしたのが「連想配列」です。
配列の欠点
配列の欠点は、箱の中身が思い出せなくなることです。
1番の箱には何が入ってたっけ？
50番の箱には何が入ってたっけ？
というように、中身を忘れてしまうんです。
番号だとわかりづらい
なぜ箱の中身を忘れてしまうかというと…
箱にふられているのが単なる番号（数字）だからです。
番号（数字）と中身がとっさに結びつかないので、思い出せないんです。
箱の中身はなんだろな
たとえば、こういうことです。
ある人のプロフィール情報をあつかうとき…
1番の箱に「住所」の情報を入れるとします。
2番の箱に「メールアドレス」の情報を入れるとします。
3番の箱に「電話番号」の情報を入れるとします。
4番の箱に「氏名」の情報を入れるとします。
これらの情報をあとから使おうと思ったとき…
はて？
メールアドレスの情報を引き出したいけど、何番の箱に入ってたっけ？
電話番号って2番の箱だっけ？ 3番の箱だっけ？
という混乱が生まれます。
さぁ！連想配列の出番です
配列は、箱に番号（数字）をふっていくやり方です。
これはとてもシンプルで使いやすい反面、箱の中身がわからなくなることがあります。
この問題を解決してくれるのが、今回のテーマ「連想配列」です。
連想配列とは
「連想配列」とは、箱の中身を連想しやすい（思い出しやすい）配列です。
箱に名前をつける
「連想配列」では、箱に番号（数字）をふるのではなく、名前をつけます。
たとえば、こうです。
↓
箱に「address」という名前をつけて、そこに「住所」の情報を入れる。
箱に「mail」という名前をつけて、そこに「メールアドレス」の情報を入れる。
箱に「tel」という名前をつけて、そこに「電話番号」の情報を入れる。
箱に「name」という名前をつけて、そこに「氏名」の情報を入れる。
箱の中身がわかりやすい
こうすると、箱の名前に意味がありますから、箱の中身がわかりやすくなります。
これが「連想配列」です。
では、実際に「連想配列」を見てみましょ～。
サンプルスクリプト
これです。
<html> <head> </head> <body> <script> var info={ address:"ジャバ県スクリプト市", mail:"java@script", tel:"000-xxxx-0000", name:"ジャバ・スクリプト" }; document.write(info.address); </script> </body> </html>
緑色の部分がJavaScriptです。
それ以外の部分（HTML）は、究極にあっさりと書いています。
実行結果
上の内容をメモ帳などのエディタにコピペしてHTML形式で保存し、そのファイルを開くと…
ブラウザに「ジャバ県スクリプト市」と表示されます。
ちなみにこれは、サンプルのために適当に設定した住所です。実在しません。
解説
では、どんな仕組みなのか1行ずつ見ていきましょう～。
連想配列を作成
まずこの部分。ここがさっそく「連想配列」です。
var info={ address:"ジャバ県スクリプト市", mail:"java@script", tel:"000-xxxx-0000", name:"ジャバ・スクリプト" };
赤い部分が「連想配列」の名前です。ここでは「info」と名付けています。
var info={ address:"ジャバ県スクリプト市", mail:"java@script", tel:"000-xxxx-0000", name:"ジャバ・スクリプト" };
「info」と命名された「連想配列」の中に、情報を入れるための箱をいくつか作っています。
箱には、番号（数字）ではなく、意味のある名前が付けられています。
下の赤い部分が、箱の名前です。
var info={ address:"ジャバ県スクリプト市", mail:"java@script", tel:"000-xxxx-0000", name:"ジャバ・スクリプト" };
箱に情報を入れる
箱に情報を入れるときの形式は、こうです。
箱の名前:情報
↑
こんなふうに「:」（コロン）を使います。
「:」（コロン）の左側にある箱の中に、「:」（コロン）の右側の情報が入ります。
箱がたくさんあるときは、「,」（カンマ）で区切ります。
これをふまえて、ここでおこなわれていることを整理すると、以下のようになります。
address:"ジャバ県スクリプト市",
↑
この行では、「address」と名付けられた箱の中に、「ジャバ県スクリプト市」という住所が入れられています。
mail:"java@script",
↑
この行では、「mail」と名付けられた箱の中に、「java@script」というメールアドレスが入れられています。
tel:"000-xxxx-0000",
↑
この行では、「tel」と名付けられた箱の中に、「000-xxxx-0000」という電話番号が入れられています。
name:"ジャバ・スクリプト"
↑
この行では、「name」と名付けられた箱の中に、「ジャバ・スクリプト」という氏名が入れられています。
※住所、メールアドレス、電話番号、氏名はすべて適当です。実在しません。
箱の中身を呼び出す
あとは、箱に入れられた情報を呼び出すだけです。
それが、この部分です。
document.write(info.address);
まずこの赤い部分が、画面に文字を表示するための命令です。
document.write(info.address);
※詳しくは、「JavaScriptで文字を表示する方法」をご覧ください。
表示される文字として、「連想配列」の箱の中身が呼び出されています。
それが、この赤い部分です。
document.write(info.address);
これは…
「info」という連想配列の、「address」と名付けられた箱の中身
という意味です。
「address」という箱には、「ジャバ県スクリプト市」という住所が入っていました。
だから画面には、「ジャバ県スクリプト市」と表示されます。
連想配列の情報の呼び出し方
つまり…
連想配列の情報は、次のような形式で呼び出すことができます。
連想配列の名前.箱の名前
ドットを挟んで左側に連想配列の名前（今回の例ではinfo）を書き…
右側に箱の名前（今回の例ではaddress）を書けばOKです。
箱の中身が連想しやすい
もしも…
メールアドレスを表示したい場合は、どうしたらいいでしょう。
メールアドレスの情報は「mail」という箱に入っています。
だから、こうなります。
document.write(info.mail);
これが「連想配列」の便利なところです。
メールアドレスが入っている箱は何番だっけ？と悩まなくていいんです。
メールアドレスが入っている箱の名前は「mail」です。
番号（数字）ではなく、そのものズバリの名前が箱につけられています。
だから、箱の中身が連想しやすい（思い出しやすい）んです。
同じように、電話番号を表示したければ、こうします。
document.write(info.tel);
氏名を表示したければ、こうします。
document.write(info.name);
わかりやすいですね。
以上が「連想配列」のはなしでした。
今回はこれでおしまいです。
JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。
