配列と連想配列について

こんにちは。前回はPHPのforeach文についての記事を書かせていただいたのですが、その中で特に何の説明もなく連想配列を使っていました。そういえば、私がプログラミングを始めた時は「連想配列」と言われても何のことかよくわからなくて混乱したなあ、と思出したので、今回はこの連想配列についての記事を書かせていただきます。

私が「連想配列」という言葉と出会ったのはPerlの勉強をしている時に「ハッシュ」というものが出てきてこれは何だろう、とGoogleで調べてみたら何かの解説で「Perlにおける連想配列のこと」と出てきて「そもそも連想配列がわかんない」となった時のことでしょうか。謎の省略記法だらけのPerlと相まって泣きそうになった記憶があります。

C言語を知っている方や少しプログラミングに触れたことのある方でも「配列」というデータ構造は馴染みがあるのではないかと思います。これは一まとまりで扱いたいデータを並べてまとめておく「箱」のようなイメージです。

そういえば、キーボードもJIS配列とかUS配列とか言いますね。キーがたくさん並んでいる、という意味ではこれもやはり配列です。

上の写真はよくあるキーボードですが、赤枠で囲んだ部分を一つの配列だと考えると、キー一つ一つが配列の要素、というと少しはイメージがしやすいでしょうか？

赤枠で囲んだ部分を「キーボード配列」というものだとするとこれは以下のように書くことができます。

    //キーボード配列
    var key_arr = ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"];

この配列の中のそれぞれの要素を使いたい時には、要素が配列の何番目かを表す0から始まる通し番号で指定して使うことができます。

    //キーボード配列の一番初めの要素にアクセスする
    var first_element = key_arr[0];
    console.log("first_elementは"+first_element);//「first_elementはQ」と表示される

            //"E"という文字を使いたい場合、"E"は配列の初めから3番目なので0から数えると2で指定できる
            var E_element = key_arr[2];
            console.log(E_element+"は配列の3番目");//「Eは配列の3番目」と表示される

また、配列はループを使ってその中のそれぞれの要素に対して同じ操作をしたりすることができる便利な構造です。

    //数字を要素とする配列
    var num_arr = [6, 2, 1];

    //num_arr内のそれぞれの要素に1をたす
    for(var i=0; i<num_arr.length; i++){
        num_arr[i] = num_arr[i]+1
    }

    //num_arrの中身は[7, 3, 2]になる

一方、連想配列は、ある「key」とそれに対応する「value」を組として記録するデータ構造です。わかりにくいですね。

これも先ほどと同様にキーボードを見てみましょう。今度は青枠で囲んだ部分を見てください。私は普段JIS配列のキーボードを使っているのですが、たまに写真のようなUS配列のキーボードを使うと「@」などの記号の位置が普段と違っていて戸惑うことがあります。

青枠内は数字の1〜0の所にそれぞれ「！」「@」「＃」などの記号が割り当てられています。「！を打つにはどの数字を押せばよいか」という考え方でまとめると以下のようになります

    //USキーボードの記号の覚え方
    「！」は「1」の場所
    「＠」は「2」の場所
    「＃」は「3」の場所
    「＄」は「4」の場所
    「％」は「5」の場所
    「＾」は「6」の場所
    「＆」は「7」の場所
    「＊」は「8」の場所
    「（」は「9」の場所
    「）」は「0」の場所

こうやって並べたところで覚えられる気はしませんが、メモとして残しておいて「＄はどこを押すんだっけ？」と思って参照すると「4を押せばよい」とわかるようにしておくとそれなりに便利かもしれません。

これと同じ意味を持ったデータ構造が連想配列です。記号がkey、対応する数字キー（を表す数字）がvalueです。以下がUSキーボードの記号連想配列になります。

    //USキーボードの記号連想配列
    var US_key_obj = {"！": 1, "＠": 2, "＃": 3, "＄": 4, "％": 5, "＾": 6, "＆": 7, "＊": 8, "（": 9, "）": 0};

この連想配列を使って「＊」を入力したい時に打つ数字キーを知るには以下のようにします。

    var asterisk_key = US_key_obj["＊"];
    alert("「＊」を入力するには"+asterisk_key+"を押します。");//『「＊」を入力するには8を押します。』と表示される

この要素へのアクセスのしかたは配列の場合にすごく似ています。配列と連想配列の違いは、要素にアクセスする際に「何番目の要素かの番号」を指定するか、「key」を指定するかの違いだけになります。

この連想配列もループを使って処理できるのですが、javascriptだとこの場合はfor_in文を使う必要があります。

    for(key num_key in US_key_obj){     console.log( "「" + num_key  + "」を入力するには「" + US_key_obj[num_key] + "」を押します。") ;
    }

    //以下の内容が出力される

    //「！」を入力するには「1」を押します。
    //「＠」を入力するには「2」を押します。
    //「＃」を入力するには「3」を押します。
    //「＄」を入力するには「4」を押します。
    //「％」を入力するには「5」を押します。
    //「＾」を入力するには「6」を押します。
    //「＆」を入力するには「7」を押します。
    //「＊」を入力するには「8」を押します。
    //「（」を入力するには「9」を押します。
    //「）」を入力するには「0」を押します。

ただし、javascriptのfor_in文は順序の概念がないので上で出力される順番はバラバラになりうるので（連想配列の先に書いたものが先に出力されることは保証されていない。参考 : PHPと異なり，JavaScriptの連想配列とfor in構文には順序の概念がないので注意すること）、連想配列をループさせて、先頭から順に何かの処理をする、ということには向かないので気をつけたほうがよさそうです。

ただ、そのあたりに気をつけてこのfor_in文を使うと、ある記号を打つための数字キーを教えてくれる非常に簡単なプログラムができます。

    //何らかの方法で記号の入力をさせる（セレクトボックスで記号を選択させる、など）

    var kigou;//この変数にユーザが入力したい記号が格納される

    var push_key;//記号を入力するためにユーザが押せば良い数字キー

    for(key num_key in US_key_obj){
        if(kigou === num_key){
            push_key = US_key_obj[num_key];
            break;
        }
    }

    alert( "「" + kigou  + "」を入力するには「" + push_key + "」を押します。") ;

上記のようにすると、ユーザが選択した記号を入力するために押せばいいボタンを表示することができます。

今回は配列と連想配列について基本的なことを書かせていただきました。どちらも非常に基本的で、便利なデータ構造なのでこれらを使うことに慣れておく方が良いでしょう。