オブジェクトの使い方

広告

まずオブジェクトの使い方について簡単に確認します。

例としWebサイト毎にURLを保存するようなスクリプトを記述してみます。 

var site_yahoo_japan = 'http://www.yahoo.co.jp/';
var site_google = 'http://www.google.co.jp/';
var site_microsoft = 'http://www.microsoft.com/japan/';
var site_amazon = 'http://www.amazon.co.jp/';

1つの変数には1つの値しか保管できませんので、4つのサイトの情報を保管するには4つの別々の変数が必要となります。

では例えば指定したサイト名のURLを表示させるには次のようなスクリプトを作成する必要があります。 

var site = 'Amazon';

if (site == 'Yahoo Japan!'){
  alert(site_yahoo_japan);
}else if (site == 'Google'){
  alert(site_google);
}else if (site == 'Microsoft'){
  alert(site_microsoft);
}else if (site == 'Amazon'){
  alert(site_amazon);
}

もう少し効率良くすることも可能かもしれませんが、別々の変数を使った場合にはこのような形式となってしまいます。

オブジェクトを使う

同じような目的の値をまとめて管理する場合にはオブジェクトを使うと便利です。例えば先ほどのサンプルはオブジェクトを使って書き直すと次のように記述することができます。 

var siteurl = {
  'Yahoo Japan!':'http://www.yahoo.co.jp/',
  'Google':'http://www.google.co.jp/',
  'Microsoft':'http://www.microsoft.com/japan/',
  'Amazon':'http://www.amazon.co.jp/'
};

オブジェクトは任意の数の値を管理することができます。これは配列の場合と同じですが配列では値が順番にならべられて管理されており番号が割り当てられていますがオブジェクトでは値に順番はありません。その代わりそれぞれの値には名前が付けられています。

オブジェクトを使って値を管理すると、関連する複数の値を1つの変数でまとめて管理することができます。また値に割り当てられた名前を使った処理が行えます。詳しいことは次のページ以降で解説しますが先ほどif文を使って記述したスクリプトはオブジェクトを使うと次のように記述することができます。 

var siteurl = {
  'Yahoo Japan!':'http://www.yahoo.co.jp/',
  'Google':'http://www.google.co.jp/',
  'Microsoft':'http://www.microsoft.com/japan/',
  'Amazon':'http://www.amazon.co.jp/'
};

var site = 'Amazon';
alert(siteurl[site]);

では次のページ以降でオブジェクトの詳しい使い方を確認していきます。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script1_1.js">
</script>

</body>
</html>

var siteurl = {
  'Yahoo Japan!':'http://www.yahoo.co.jp/',
  'Google':'http://www.google.co.jp/',
  'Microsoft':'http://www.microsoft.com/japan/',
  'Amazon':'http://www.amazon.co.jp/'
};

document.write("<p>");

var site;

site = 'Amazon';
document.write(site + "のURLは" + siteurl[site] + "です<br />");

site = 'Yahoo Japan!';
document.write(site + "のURLは" + siteurl[site] + "です<br />");

document.write("</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p1-1

( Written by Tatsuo Ikura )