連想配列を使おう

きっかけ

JavaScript関係のエントリで気になるコードがありました。
それは、以下の二つ
半角カナのスタイル名を全角カナに変換する - 名もないテクノ手
JavaScriptで半角英数字を全角英数字に変換する関数｜本を買わずに解決するWeb制作の小技

問題点

どちらも、半角と全角の変換をするだけの簡単なコードなのですが、その変換用の辞書に使っているのが二つの配列というのがちょっと残念。
この程度の量であれば問題ないのですが、こういうコードメンテは大変面倒です。
辞書が増えて、配列の「順番」が変わった時にバグるという危険性も含まれています。
それでは、こういう時にはどうすれば良いのでしょうか。

連想配列を使いましょう

良く、ハッシュとかマップとかそういう言葉で表される概念です。
簡単に言うと、あるキーワードを与えると、それに対応する値を返す仕組みです。
僕も、この方法を覚えるまではかなり効率の悪いコードを書いていましたが、覚えてからは断然こちらの方法が良いことに気づきました。
メリットは二つあります。

高速
データの関連性が見やすい

前者はパフォーマンスのメリット。後者はメンテナス性のメリットです。
高速なのは、データを1:1で処理出来るからです。
また、メンテナンスがし易いのは、データが1:1で表現されているからです。
連想配列で参考になったのは、@amachangのエントリです。
(参考URL:JavaScript の配列と連想配列の違い - IT戦記.)
実際に、具体例で考えましょう。

連想配列はこうやって使う

半角英数の場合だと、1文字なので、こんな感じで対応出来ます。

function change(text){
    var dic = {"a":"ａ","b":"ｂ" };
    var ret = [];
    for( var i=0,len=text.length; i<len; i++ ){
        var key = text[i] 
        ret.push(dic[key]);
    }
    return ret.join("");
}
var str = change("ab");
alert(str);

半角カナだと濁点や半濁点が2文字扱いですで、こんな感じで工夫します。

function change(text){
    var dic = { "ｳﾞ":"ヴ","ｺﾞ":"ゴ","ﾊﾟ":"パ","ﾎ":"ホ","ﾙ":"ル" };
    var ret=[];
    for( var i=0,len=text.length; i<len; i++ ){
        var key = text[i];
        //次の文字が濁点or半濁点の場合の特別処理
        if( typeof text[i+1] !="undefined" && /ﾞ|ﾟ/.test(text[i+1]) ){
            key += text[i+1];
            i++;
        }
        ret.push(dic[key]);
    }
    return ret.join("");
}
var str = change("ｳﾞｺﾞﾙﾊﾟﾎ");
alert(str);

変数dicが連想配列です。
キーと値は"キー"："値"という書き方で結びつけます(これが上記で書いた1:1です)。
後はそれをカンマで繋ぎ、{}で囲うだけです。
細かいことを言えば、値の部分は別に文字列限定って訳では無いのですが、その辺はJavaScriptに詳しくなってから理解したほうが良いと思います。
(キーの所も、半角英数ならば「"」が省略できますが、それもある程度理解が進んでからで良いと思います)

JavaScriptの連想配列は非常に便利ですので、是非覚えて下さい。

蛇足

最も、半角／全角変換はこういう変則的なコードを書かずに、正規表現で変換するのが一番正しいやり方だと思います。

Loox Uと初音ミクで行こう！

このブログを検索