配列とオブジェクトでデータをまとめる：初心者のためのJavaScript入門（6）（2/2 ページ）

» 2010年11月29日 00時00分公開

[小島尚基，有限会社インテレクトキューブ]

オブジェクト

　JavaScriptの場合、オブジェクトというのは変数や配列と同じく、データの管理の方法です。簡単なデータを一時的に入れておくには変数が便利でした。データをまとめて扱うには配列が便利でしたね。

　オブジェクトも、簡単に言えば、その延長線上にある、データを扱うのに便利なものなのです。オブジェクトの特長は、「名前」でデータを管理できることです。

　さっそく、実際にオブジェクトを作ってみましょう。

<html>
  <body>
    <script type="text/javascript">
	var seito=new Object();
	seito.namae="山田太郎";
	seito.seiseki=95;
	document.write(seito.namae+"："+seito.seiseki+"点");
    </script>
  </body>
</html>

上記のコードの実行結果

　JavaScriptでオブジェクトを作るのはとても簡単です。サンプルの4行目のように、「var オブジェクトの名前=new Object();」とするだけで、オブジェクトを作ることができます。

　オブジェクトを作ったら、「.」（ドット）を使ってプロパティ（属性）を持たせることができます。プロパティというのは、オブジェクトの持っている変数のようなものと考えてください。サンプルでは、「seito」という生徒オブジェクトに、「namae」という名前プロパティと、「seiseki」という成績プロパティを持たせています。

　オブジェクトを使うときには、「オブジェクト名.プロパティ」とすることで、オブジェクトの持つプロパティを表すことができます。

　基本的には、変数の使い方と変わりませんね。

コンストラクタを使ってみよう

　先ほどのサンプルで、生徒オブジェクトを作って、名前と成績を入れてみましたが、サンプルの方法では、1人の生徒に1つずつオブジェクトを作らないといけないですね。例えば、3人の生徒がいた場合には、どのようにしたら良いでしょう？

<html>
  <body>
    <script type="text/javascript">
	var seito1=new Object();
	seito1.namae="山田太郎";
	seito1.seiseki=95;
	var seito2=new Object();
	seito2.namae="田中一郎";
	seito2.seiseki=73;
	var seito3=new Object();
	seito3.namae="鈴木花子";
	seito3.seiseki=86;
	document.write(seito1.namae+"："+seito1.seiseki+"点<br>");
	document.write(seito2.namae+"："+seito2.seiseki+"点<br>");
	document.write(seito3.namae+"："+seito3.seiseki+"点<br>");
    </script>
  </body>
</html>

上記のコードの実行結果

　生徒が3人ならこれでもいいのですが、あまりオブジェクトを上手に使っているとは言えない感じがします。生徒が増えた場合のことも考えて、効率よくオブジェクトを作るにはどうしたらよいでしょうか。

　よく見てみると、3人のオブジェクトは共通のプロパティで構成されていますね。共通したところをまとめることができれば、オブジェクトを量産するのが簡単になるのではないでしょうか。

　共通のプロパティをまとめるには関数を使います。それでは、関数を使ってオブジェクト作ってみましょう。

<html>
  <body>
    <script type="text/javascript">
      function Seito(_namae, _seiseki) {
          this.namae = _namae;
          this.seiseki = _seiseki;
      }
      var kumi=[];
      kumi[0]=new Seito("山田太郎",95);
      kumi[1]=new Seito("田中一郎",73);
      kumi[2]=new Seito("鈴木花子",86);
      for(i=0;i<kumi.length;i++){
          document.write(kumi[i].namae+"："+kumi[i].seiseki+"点<br>");
      }
    </script>
  </body>
</html>

上記のコードの実行結果

　Seito（生徒）関数を使って作った生徒オブジェクトを、kumi（組）という配列に入れて管理してみました。このようにしておけば、生徒が増えても「new Seito("名前",成績)」とするだけで、簡単に生徒を追加できますね。

　JavaScriptでは、このようにオブジェクトを作るのに使う関数を「コンストラクタ」と呼びます。

サンプルを理解してみる

　コンストラクタのサンプルを詳しく見てみましょう。

5行目：function Seito(_namae, _seiseki) {
ここが、生徒コンストラクタ（関数）です。「function コンストラクタ名()」でコンストラクタを作ることができます。functionなので、コンストラクタを使ってオブジェクトを作るときに引数を渡すことができます。生徒コンストラクタは、「名前（_namae）」と「成績（_seiseki）」の2つの引数を受け取るようにしてあります。引数に「_」（アンダーバー）をつけているのは、後で出てくるオブジェクトのプロパティ名とごっちゃにならないためです。

6行目：this.namae = _namae;
生徒コンストラクタの名前プロパティに、引数の_namaeを使います。「this」というのは、コンストラクタによって作られたオブジェクト自身を表しています。無理やり日本語にしてみると、「この（コンストラクタを使って作られたオブジェクト）のnamaeプロパティは、_namae」のようなイメージです。

7行目：this.seiseki = _seiseki;
6行目と同じく、生徒コンストラクタの成績プロパティに、引数の_seisekiを使います。

8行目：}
コンストラクタの終わりのカッコです。このように、生徒コンストラクタ（Seito）を使って作られるオブジェクトは、「namae（名前）」と「seiseki（成績）」のプロパティを持ったオブジェクトになるのが分かります。

10行目：var kumi=[];
生徒オブジェクトを入れておくための、kumi（組）配列を作っています。後から中身を入れていくので、とりあえず配列の中身は空にしてあります。

11行目：kumi[0]=new Seito("山田太郎",95);
先ほどの生徒コンストラクタを使って作った生徒オブジェクトを配列の1番目に入れます。
コンストラクタの使い方はとても簡単です。「new コンストラクタ名()」とするだけで、コンストラクタを使ってオブジェクトを作ることができます。生徒コンストラクタ（Seito）は、「_namae」と「_seiseki」の引数を受け取って、オブジェクトのプロパティにするので、オブジェクトを作るときに、名前と成績を入力します。

12行目：kumi[1]=new Seito("田中一郎",73);
11行目と同じく、生徒コンストラクタを使って作った生徒オブジェクトを配列の2番目に入れています。

13行目：kumi[2]=new Seito("鈴木花子",86);
11行目と同じく、生徒コンストラクタを使って作った生徒オブジェクトを配列の3番目に入れています。

15行目：for(i=0;i<kumi.length;i++){
for文を使って、kumi配列の中身を順番に表示します。「kumi.length」とすることで、kumi配列の長さが分かるのでしたね。

16行目：document.write(kumi[i].namae+"："+kumi[i].seiseki+"点");
kumi[0]のように配列を指定すれば、kumi配列の中身のオブジェクトを使うことができます。「kumi[0].namae」や「kumi[0].seiseki」と書けばプロパティを見ることができます。ここでは、for文で置き換えてkumi[i]とすることで、配列の中身の生徒オブジェクトを順番に表します。

17行目：}
for文の終わりのカッコです。

配列とオブジェクトの違い

　今回見てきたように、まとまったデータを扱うには、配列とオブジェクトを使うと、変数だけを使ってデータを管理するのに比べてとても便利ですね。

　では、配列とオブジェクトの違いは何でしょうか？

　その違いとは、配列が「添字を使って格納されたデータを参照する」のに対して、オブジェクトは「名前（プロパティ）を使って格納されたデータを参照する」という点です。

　データが整然と並んでいて、「何番目のデータ」や「何個目のデータ」のように扱うには配列が向いています。より具体的に、「この子の名前」や「この子の成績」というデータにはオブジェクトが向いていますね。

　今回は触れませんでしたが、配列には「多次元配列」と「連想配列」という配列の使い方もあります。

　多次元配列というのは「tana[3][5]」のように、添字を複数使うもので、例えば「右から4番目、上から6番目の棚」のように、より高度なデータの整理ができます。連想配列というのは「seito["山田太郎"]=93;」のように、添字に数字ではなく「文字」を使って配列を扱う方法です。

　特に連想配列は、オブジェクトに似た扱いができるので、もっと詳しく知りたい方は、自分で調べてみると、より面白いJavaScriptが書けるようになるかと思います。

　また、オブジェクトもここでは説明しきれないほど奥が深く、ほかにも色々な機能を持っています。今回学んだことをステップにして、是非自分でJavaScriptのオブジェクトについて調べてみてください。

課題

　コンストラクタで作ったサンプルを元に、あと2人生徒を追加して、生徒5人分の成績の平均点を求めるJavaScriptを書いてみてください。

<html>
  <body>
    <script type="text/javascript">
      function Seito(_namae, _seiseki) {
          this.namae = _namae;
          this.seiseki = _seiseki;
      }
      var kumi=[];
      kumi[0]=new Seito("山田太郎",95);
      kumi[1]=new Seito("田中一郎",73);
      kumi[2]=new Seito("鈴木花子",86);
      for(i=0;i<kumi.length;i++){
          document.write(kumi[i].namae+"："+kumi[i].seiseki+"点<br>");
      }
    </script>
  </body>
</html>

　平均点の求め方は配列のサンプルでやっていますので、今回はノーヒントです。

　次回はいよいよ最終回です。HTMLを自由自在に操る「DOM」にチャレンジしてみましょう。

「次回」へ

「初心者のためのJavaScript入門」バックナンバー