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

今回は複数のデータをまとめるのに便利な配列とオブジェクトについて学びます。

» 2010年11月29日 00時00分 公開
[小島尚基，有限会社インテレクトキューブ]

前回の課題

　第5回では、繰り返し（ループ）処理について覚えましたね。自分でやると大変な繰り返しの動作も、JavaScriptを使えば簡単で正確に繰り返すことができます。

　10回、20回という回数なら、あまりありがたみを感じないかもしれませんが、プログラムを書いていると、1000回、1万回の繰り返しを行わないといけないということがあります。ループがなかったらと思うと、ぞっとしますね。

　まずは前回の課題の答え合わせをしてみましょう。

　「break」と「continue」で使ったサンプルを、それぞれ条件は変えずに、「break」と「continue」を使わないで書いてみるという課題でした。

<html>
  <body>
    <script type="text/javascript">
      var i=0;
      while(i<100){
        if(i==8){
          break;
        }
        document.write("繰り返し"+(i+1)+"回目<br>");
        i=i+1;
      }
    </script>
  </body>
</html>

　「break」のサンプルでは、6行目のif文で「i==8」だったら「break」を実行するようになっていました。「break」を使わないで、whileのループを止めるにはどうすればよいでしょう？

　whileは条件が「満たされている間」動作を繰り返すので、whileの条件を満たさなくさせればループは止まります。

　サンプルでは「iが100より小さい場合」にループが繰り返されるので、例えば「iを100」にしてしまえばループが止まります。6行目の「break」を、「i=100;」のように書き換えれば良いですね。

　実行すると……。

上記のリストの6行目をi=100;と書き換えて実行した結果 上記のリストの6行目をi=100;と書き換えて実行した結果

※注意！ Internet Explorerでは、PC上のJavaScriptを動かそうとするとセキュリティ警告が出ます。情報バーをクリックして、「ブロックされているコンテンツを許可」を選ぶとJavaScriptが実行されます。


　「繰り返し101回目」という表示が出てしまいました。「break」を使うと、whileループ内の処理が一気に中断されるので、ループ内に書かれた7行目と8行目の処理も実行されません。

　if文を使って「i=100」にしたときは、whileループは継続しているため、7行目と8行目の処理が実行されて、「繰り返し101回目」という表示が出てしまうのです。これをなくすには、elseを使って「i==8」以外の時だけ、7行目と8行目を実行するようにすれば良いですね。

　whileの中身を、elseを使って次のように書き換えてみてください。

if(i==8){
    i=100;
} else {
    document.write("繰り返し"+(i+1)+"回目<br>");
    i=i+1;
}

　これで、「break」を使わずに同じ結果になりました。次に「continue」のサンプルを見てみましょう。

<html>
  <body>
    <script type="text/javascript">
      for(var i=0;i<10;i++){
        if(i<5){
          continue;
        }
        document.write("繰り返し"+(i+1)+"回目<br>");
      }
    </script>
  </body>
</html>

　ループの条件は「i<10」になっていますが、「i<5」のときに「continue」を使ってforループをスキップしています。「iが5より小さい場合」はスキップするのであれば、iを5から始めても同じことですね。iを5から始めるには、次のように書きます。

for(var i=5;i<10;i++){
  document.write("繰り返し"+(i+1)+"回目<br>");
}

　iが5より小さくなることはないので、if文も不要になります。実行してみると、「continue」を使って書いたときと同じ動作になっています。

　「条件を変えずに」という練習課題なので、無理やりな感じもしますが、このように結果的に同じ動きをするJavaScriptでも、いろいろな書き方ができるということを覚えてください。

　自分の意図した結果が出せれば、書き方によってどれが正解というものでもないですが、プログラムを学んでいく上では、常に「もっとこうしたら良くなるんじゃないかな？」という意識が一番大切です。

　さて、前回の課題はこれぐらいにして、今回のテーマに移りましょう。今回は、データを扱うのにとても便利な「配列」と「オブジェクト」についてやってみます。

配列はどんなときに便利だろう？

　この連載の第3回で、「変数」について覚えましたね。

　通常は、1つの変数には1つの値しか入れることができません。同じような内容のデータをまとめておきたいときに、変数だけで管理しようとすると、変数をたくさん用意しなければならず、プログラムも面倒なことになってしまいます。

　ここで、あるクラスに生徒が5人いるとします。

生徒番号 名前 成績
1 山田太郎 95点
2 田中一郎 73点
3 鈴木花子 86点
4 佐藤昭一 47点
5 斉藤早苗 90点

　例えば、生徒の成績を管理したいと思ったとき、変数だけやろうとすると次のような方法があります。

var yamada_tarou=95;
var tanaka_ichirou=73;
var suzuki_hanako=86;
var satou_syouichi=47;
var saitou_sanae=90;

　変数だけを使って、生徒の平均点を表示するJavaScriptを考えてみましょう。

　単純に、生徒の成績を計算するだけなので、次のように書くことができます。

<html>
  <body>
    <script type="text/javascript">
      var yamada_tarou=95;
      var tanaka_ichirou=73;
      var suzuki_hanako=86;
      var satou_syouichi=47;
      var saitou_sanae=90;
      var total = yamada_tarou + tanaka_ichirou + suzuki_hanako + satou_syouichi + saitou_sanae;
      var heikin = total/5;
      document.write("成績の平均 = "+heikin);
    </script>
  </body>
</html>
上記のコードの実行結果 上記のコードの実行結果

　コピー＆ペーストで実行していると分からないかもしれませんが、生徒の名前の入力だけでも結構面倒です。入力の手間を省くために、変数名を生徒の「s」にして、生徒番号を付けた「s1、s2、s3」などにする方法もありますが、変数を大量に用意しなければならないという根本的な問題の解決にはならないし、見た目も悪いですね。

　こうした場合、配列を使うことで複数のデータをきれいにまとめることができます。

配列の基本

　それでは配列の基本をやってみましょう。

　配列も変数と同じように名前が必要です。名前の付け方も変数とよく似ています。

var a=[];

と書くことで、「a」という名前の配列ができます。

　ほかにも、

var a=new Array();

という書き方もあります。結果は同じなので、好きなほうの書き方で構いません。

　「Array（アレイ）」はもともと、「配列する、整列させる」という意味の英語で、同種のものがきれいに並んでいる様子を表します。名前を付けた配列には、次のような方法で中身を入れることができます。

a[0]="山田太郎";
a[1]="田中一郎";
a[2]="鈴木花子";

　試しに下記のサンプルを実行してみてください。

<html>
  <body>
    <script type="text/javascript">
      var seito=[];
      seito[0]="山田太郎";
      seito[1]="田中一郎";
      seito[2]="鈴木花子";
      document.write(seito[0]);
    </script>
  </body>
</html>
上記のコードを実行した結果 上記のコードを実行した結果

　8行目の「document.write(seito[0]);」の「seito[0]」を「seito[1]」や「seito[2]」に書き換えるとどうなるでしょうか？

自分で書き換えてみてください。

　後から配列に加えるのではなく、配列に名前を付けるのと同時に中身も入れる方法もあります。

<html>
  <body>
    <script type="text/javascript">
      var seito=["山田太郎","田中一郎","鈴木花子"];
      document.write(seito[0]);
    </script>
  </body>
</html>

　最初から中身が決まっている場合は、こちらの書き方のほうが楽ですね。

　先ほど説明したように、4行目は

var seito=new Array("山田太郎","田中一郎","鈴木花子");

という書き方もできます。サンプルでは、「seito」という生徒配列を作って、名前を登録してみました。

　「document.write(seito[0]);」とすると、生徒配列の最初に登録されている「山田太郎」を表示します。この、「seito[数字]」の数字部分を「添字（そえじ）」と呼びます。

　添字は、生徒が並んだ列で「前から何番目」というのを指定するのによく似ています。このときに気を付けなくてはいけないのは、配列の添字は「0」から始まるという点です。

　例えば、前から1番目のつもりで「seito[1]」と書いてしまうと、2番目の生徒を指すことになってしまいます。1番目のデータを使うには、正しくは「seito[0]」と書かなくてはいけません。慣れないうちは間違いやすい点なので気をつけてください。

　添字には変数を使うこともできます。

<html>
  <body>
    <script type="text/javascript">
      var seito=["山田太郎","田中一郎","鈴木花子"];
      var num=1;
      document.write(seito[num]);
    </script>
  </body>
</html>
添字に変数を使った例。正しく配列の内容を表示できている 添字に変数を使った例。正しく配列の内容を表示できている

　「var num=1;」を「var num=0;」や「var num=2;」に書き換えるとどうなるでしょうか？ 自分で書き換えてみてください。

　配列の基本をひと通りやったところで、最初の、生徒の平均点を計算するJavaScriptを配列を使って書いてみましょう。

<html>
  <body>
    <script type="text/javascript">
      var seiseki=[95,73,86,47,90];
      var total=0;
      for (var i=0;i<seiseki.length;i++) {
        total+=seiseki[i];
      }
      var heikin = total/seiseki.length;
      document.write("成績の平均 = "+heikin);
    </script>
  </body>
</html>
配列を使って生徒の成績の平均点を計算した例 配列を使って生徒の成績の平均点を計算した例

　変数だけを使って、生徒の平均点を表示するJavaScriptより、だいぶプログラムらしくなりました。見た目もすっきりしたと思いませんか？

サンプルを理解してみる

　それでは、サンプルを詳しく見てみましょう。

4行目：var seiseki=[95,73,86,47,90];
seiseki（成績）という名前の配列を作って生徒の成績を配列に入れています。
※「var seito=new Array(95,73,86,47,90);」という書き方もあります。

5行目：var total=0;
成績の合計を入れるためのtotalという変数を作って、0を入れています。

6行目：for (var i=0;i<seiseki.length;i++) {
for文を使って配列の長さ分だけ、繰り返すようにしてあります。for文で使っている「length」というのは、配列の持っている便利な機能の1つで、配列全体の長さが分かります。ここでは5人分の成績が配列に登録されているので、「seiseki.length」は5になります。このように、for文と「length」を使えば、配列の長さを気にせずにJavaScriptが書けるので、定番の書き方の1つになっています。この書き方はぜひ覚えてください。

7行目：total+=seiseki[i];
変数totalに、成績の配列の中身を足しています。「seiseki[i]」というのは何を表しているかわかるでしょうか？ for文ではカウント用変数「i」が、ループのたびに変化します。6行目で書いたように、ループの回数は「配列の長さ」なので、カウント用変数は「0〜4」まで1ずつ変化します。添字にカウント用変数を書くことで、ループのたびに、totalに配列の中身が順番に足されていく仕組みになっています。これも定番の書き方なので、lengthと合せてマスターしておきましょう！

8行目：}
6行目のfor文の終わりです。

9行目：var heikin = total/seiseki.length;
平均の求め方は、「合計÷人数」なので、人数を求めるのにも「length」を使っています。このように書いておくと、配列以外は変更を加える必要がないので、後から生徒の数が増えたり減ったりしても簡単に対応ができます。

　自分でサンプルをいじってみて、理解を深めてください。

　　　　　　 1|2 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

＠IT

@ITについて

RSSについて

アイティメディアIDについて

メールマガジン登録

＠ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。