あーりーです。
趣味でのんびりとJavaScriptの勉強をしています。
JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。
前回につづいて、今回も「連想配列」のはなしです。
今回のテーマは「変数を使って連想配列の情報を呼び出す！」です。
とってもカンタン
おぉ…
なんだかややこしそう…
と思うかも知れませんが、じつはとってもカンタンです。
メリット
これができるようになると、プログラムを変更するときに便利です。
あっちこっち複数の箇所を変えなくても、1か所変えるだけで全体を変えたりできます。
ところで…
「連想配列」って一体なに？
聞いてないんですけどー！
という方は、まず過去記事の「よくわかる連想配列の基本」や「連想配列の情報を呼び出す2つの方法」をご覧ください。
サラッとおさらい
過去記事の内容をちょっとだけ振り返っておきますね。
連想配列の情報を呼び出す方法についてです。
連想配列の情報を呼び出すには、2つの方法がありました。
パターン1
呼び出し方のパターン1がこちらです。
連想配列の名前.箱の名前
「連想配列の名前」と「箱の名前」をドットで区切る形式です。
たとえば、こうです。
info.address
これは、まず「info」という連想配列を指定しています。
そして、その連想配列の中にある「address」という箱を指定しています。
こうすることで、「address」という箱に収納されている情報が呼び出されます。
パターン2
呼び出し方のパターン2がこちらです。
連想配列の名前["箱の名前"]
たとえば、こうなります。
info["name"]
まず「info」という連想配列を指定しています。
そして、その連想配列の中にある「name」という箱を指定しています。
こうすることで、「name」という箱に収納されている情報が呼び出されます。
パターン2に注目
今回注目したいのが、パターン2です。
パターン2を実際のスクリプトに組み込んでみますね。
サンプル
組み込むと、こうなります。
<html>
<head>
</head>
<body>
<script>
var info={
address:"ジャバ県スクリプト市",
mail:"java@script",
tel:"000-xxxx-0000",
name:"ジャバ・スクリプト"
};
document.write(info["name"]);
</script>
</body>
</html>
赤い部分がパターン2の呼び出し方です。
つまり、これです。
↓
連想配列の名前["箱の名前"]
箱の名前
上のサンプルでは、「箱の名前」の部分が「name」となっています。
だから、「name」という箱に入った情報が呼び出されることになります。
サンプルの実行結果
「name」という箱に入った情報は、「ジャバ・スクリプト」です。
だから、上のサンプルをメモ帳などのエディタにコピペしてHTML形式で保存し、そのファイルを開くと、画面に「ジャバ・スクリプト」と表示されます。
ここまでが、おさらいです。
いよいよ今日の本題です。
いよいよ本題
パターン2の場合は、変数を使って情報を呼び出すことができます。
これが、今日の本題です。
どういうことか、詳しく見ていきますね。
変数を使って情報を呼び出す
上の例では、この部分で直接「name」という箱を呼び出していますよね。
document.write(info["name"]);
この「name」の部分を変数にすることができるんです。
こんな感じです。
document.write(info[変数]);
「name」を直接プログラムにはめ込むのではなく、「name」をいったん変数に入れて、その変数をプログラムにはめ込むんです。
と、急に言われても、なかなかイメージがつかめないですよね。
では、実際にやってみましょ～。
やってみよう
こちらをご覧ください。
<html>
<head>
</head>
<body>
<script>
var info={
address:"ジャバ県スクリプト市",
mail:"java@script",
tel:"000-xxxx-0000",
name:"ジャバ・スクリプト"
};
var box="name";
document.write(info[box]);
</script>
</body>
</html>
注目していただきたいのが、緑色の部分です。
1行ずつ、詳しく見ていきますね。
変数
まず、この行です。
var box="name";
ここでは「box」という変数を用意して、そこに「“name”」を代入しています。
この「“name”」が「箱の名前」です。
情報を呼び出す
つぎに、この行です。
document.write(info[box]);
赤い部分で、さっき用意した「box」という変数が使われています。
「box」には、「“name”」が収納されています。
だから、実質的にこの行は、こんな形になります。
document.write(info["name"]);
こうして…
「info」という連想配列の中にある、「name」という箱が指定されます。
「name」という箱に入っている情報は「ジャバ・スクリプト」です。
だから、ブラウザには「ジャバ・スクリプト」という文字が表示されます。
なにが便利なの？
「箱の名前」をいったん変数に収納すると、なにが便利なのか。
呼び出したい情報をあとから変更するときに便利です。
変更がらくちん
たとえば…
プログラムのあっちこっちで、「name」という箱に入った情報を呼び出しているとします。10カ所くらいとか。
もし事情が変わって…
やっぱり「name」じゃなくて「tel」という箱に入った情報を呼び出すように変更したい！
となったとき、どうするか。
変数を使わずに直接「箱の名前」をプログラムにはめ込んでいると、10カ所変更したければ、10カ所すべてを修正しなくちゃいけません。
手間がかかるし、間違いのもとです。
それが、変数を使っていると楽です。
この行を…
var box="name";
こう変えればOKです。
var box="tel";
この1行を変更するだけで、10カ所ぜんぶを変更したことになります。
これが変数の便利なところですね。
変数を使うとプログラムに柔軟性が出てきます。
たとえば人間の体も、柔軟性があればいろんな運動に対応できますよね。
それと同じで、プログラムにも柔軟性があればいろんな事態に対応できます。
変数は、プログラムに柔軟性を与えてくれます。
便利ですね～。
ぼくはバリバリの文系で、最近になってJavaScriptを趣味で勉強しはじめたので、今さらながら変数の便利さに感動しております。
変数が使えるのはパターン2だけ
こんなふうに変数を使って情報を呼び出せるのは、パターン2のときだけです。
そのへん、気を付けたいですね。
ではでは。
今回はこれでおしまい。
最後までお付き合いありがとうございました。
JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。
