JavaScript 変数を使って連想配列の情報を呼び出す

JavaScript

あーりーです。

趣味でのんびりと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入門」にまとめてあります。よろしければご覧ください。

タイトルとURLをコピーしました