【JavaScript 初心者講座】配列を利用する

[JavaScript 初心者講座]配列を利用する

配列とは
配列を作成した後、値を取り出す
配列の要素を別の値で上書きする
配列のpush()関数とlengthプロパティ
for文を使って配列の要素を全て取り出す
まとめ

本講座では、配列について学習する。配列はJavaScriptで頻繁に利用されるプログラムである。最初に「配列とは何か？」について学習して、その後サンプルプログラムを見る。

配列とは

配列について解説する。いままでの学習の中で、「数値」や「文字列」を学習した。数値は数字の値であった。文字列は、文字が連なったものであった。数値や文字列は、「データ（値）の種類」と言える。

var a = 6
var b = "6"

変数aに数値「6」が入っている。「変数aに入っているデータの種類は数値である」と言える。変数bに文字列「"6"」が入っている。「変数bに入っているデータの種類は文字列である」と言える。

数値も文字列も、JavaScriptが事前に用意しているデータである。データの種類は「数値」と「文字列」以外にも沢山ある。今回学習する配列も、データの一種である。では、どのようなデータなのだろうか？

配列は、複数のデータ（値）を持つ事ができるデータである。

数値や文字列を「まとめて」保持したい場合がある。複数の値をまとめて持ちたい場合、配列を利用する。

数値や文字列をまとめて管理できたら便利である。そこで配列の登場である。

複数の値をまとめて管理するものが配列である。

では、配列を利用したサンプルで学習する。

配列を作成した後、値を取り出す

001<script>
002
003//配列の作成と代入
004var a = [ "晴れ" , "曇り" , "雨" ];
005
006//値を取り出す[結果：晴れ]
007alert ( a [ 0 ] ) ;
008
009//値を取り出す[結果：曇り]
010alert ( a [ 1 ] ) ;
011
012//値を取り出す[結果：雨]
013alert ( a [ 2 ] ) ;
014
015</script>

プログラムを実行すると「晴れ」「曇り」「雨」の順番に表示する。

配列を利用するサンプルプログラムである。解説する。 4行目で、配列を作成して変数aへ代入する。

配列の宣言と値の代入 var 変数 = [ 値1 , 値2 , 値3 , ... ];

配列を作成して、値を代入するプログラムである。イコール記号の右側が配列である。

[ 値1 , 値2 , 値3 , ... ];

この部分が配列である。具体的にいうと、
[ ]
この部分が配列である。

配列は値をまとめて管理する箱である。配列を利用する時、配列という箱の中に値を代入していく。配列に値を代入する場合、カンマ区切りで値を記述する。値をカンマ区切りで記述すると、値が配列に入る。

[ "A" , "B" , "C" ];

[　]　この部分が配列である。こんかい、文字列「A」「B」「C」をカンマ区切りで配列の中に記述した。この場合、「A」「B」「C」の値が配列の値になる。

インデックス	値
0	"A"
1	"B"
2	"C"

配列の値「A」「B」「C」はリスト状態で配列に保存される。表に記載されている「インデックス」は、後ほど解説する。サンプルへ戻る。

003//配列の作成と代入
004var a = [ "晴れ" , "曇り" , "雨" ];
005
006//値を取り出す[結果：晴れ]
007alert ( a [ 0 ] ) ;
008
009//値を取り出す[結果：曇り]
010alert ( a [ 1 ] ) ;
011
012//値を取り出す[結果：雨]
013alert ( a [ 2 ] ) ;

プログラムの4行目で配列を作成する。

インデックス	値
0	"晴れ"
1	"曇り"
2	"雨"

配列はリストの状態で値を保持する。 4行目で配列を作成すると、このように「晴れ」「曇り」「雨」という順番で値が配列に入る。この配列を変数aに代入する。ここまでが4行目の処理である。さて、配列を作成したのだから、今度は配列から値を取り出したい。配列から値を取り出す場合、インデックスを利用する。

配列の要素へアクセスする配列 [ インデックス ];

配列から値を取り出す場合、このようにインデックスを利用する。「配列の中の値のうち、何番目の値を取り出すのか」という事をインデックスで指定する。インデックスの番号は「0」から始まる。配列の最初の値がほしい場合、

配列 [ 0 ];

このように、「0」を指定する。配列の2番目の値がほしい場合、

配列 [ 1 ];

このように、「1」を指定する。プログラムへ戻る。

7行目でインデックス「0」を指定して配列から値を取り出す。

インデックス	値
0	"晴れ"
1	"曇り"
2	"雨"

配列の「0番目」の値は「晴れ」である。

003//配列の作成と代入
004var a = [ "晴れ" , "曇り" , "雨" ];
005
006//値を取り出す[結果：晴れ]
007alert ( "晴れ" ) ;
008
009//値を取り出す[結果：曇り]
010alert ( a [ 1 ] ) ;
011
012//値を取り出す[結果：雨]
013alert ( a [ 2 ] ) ;

7行目のalert()の括弧の中が「晴れ」になる。同様に10行目も13行目も、インデックスで指定した値が配列から取り出される。

003//配列の作成と代入
004var a = [ "晴れ" , "曇り" , "雨" ];
005
006//値を取り出す[結果：晴れ]
007alert ( "晴れ" ) ;
008
009//値を取り出す[結果：曇り]
010alert ( "曇り" ) ;
011
012//値を取り出す[結果：雨]
013alert ( "雨" ) ;

このように、置き換える事ができる。

配列の要素を別の値で上書きする

配列の値を変更するサンプルを掲載する。

001<script>
002
003//配列の作成と代入
004var a = [ "晴れ" , "曇り" , "雨" ];
005
006//値を取り出す[結果：曇り]
007alert ( a [ 1 ] ) ;
008
009//値を更新
010a [ 1 ] = "雪" ;
011
012//値を取り出す[結果：雪]
013alert ( a [ 1 ] ) ;
014
015</script>

プログラムを実行すると、「曇り」「雪」と表示する。

4行目で「晴れ」「曇り」「雨」の順番に文字列を配列に代入して、配列を作成する。

インデックス	値
0	"晴れ"
1	"曇り"
2	"雨"

配列はこのような状態になる。 7行目で、インデックス「1」を指定して配列から値を取り出し、ダイアログに表示する。配列のインデックス「1」は「曇り」なので、 7行目が実行すると、「曇り」と表示する。

003//配列の作成と代入
004var a = [ "晴れ" , "曇り" , "雨" ];
005
006//値を取り出す[結果：曇り]
007alert ( a [ 1 ] ) ;
008
009//値を更新
010a [ 1 ] = "雪" ;
011
012//値を取り出す[結果：雪]
013alert ( a [ 1 ] ) ;

10行目で、配列のインデックス「1」に文字列「雪」を代入する。

新しい値を代入配列 [ インデックス ] = [ 新しい値 ] ;

配列の特定の位置の値を変更する場合、インデックスを指定して、新しい値を配列へ代入する。

インデックス	変更前の値	変更後の値
0	"晴れ"	"晴れ"
1	"曇り"	"雪"
2	"雨"	"雨"

10行目を実行すると、配列のインデックス「1」の値が、「曇り」から「雪」へ変更される。文字列「曇り」は、上書きされて消える。

さて、13行目で、配列のインデックス「1」の値を表示する。さきほどインデックス「1」に「雪」を代入した。プログラムを実行すると、「雪」と表示する。

配列のpush()関数とlengthプロパティ

こんかい、2つのプログラムを学習する。

配列の最後に、新しい値を追加する
配列に入っている値の個数を調べる

001<script>
002
003//配列の作成と代入
004var a = [ "晴れ" , "曇り" , "雨" ];
005
006//値の数[結果：3]
007alert ( a.length ) ;
008
009//値を追加
010a.push ( "雪" ) ;
011
012//値の数[結果：4]
013alert ( a.length ) ;
014
015//値を表示[結果：雪]
016alert ( a [ 3 ] ) ;
017
018</script>

プログラムを実行すると、「3」「4」「雪」と表示する。

解説する。 4行目で配列を作成して、変数aへ代入する。

インデックス	値
0	"晴れ"
1	"曇り"
2	"雨"

変数aの配列の状態は、このようになる。

003//配列の作成と代入
004var a = [ "晴れ" , "曇り" , "雨" ];
005
006//値の数[結果：3]
007alert ( a.length ) ;

7行目で、配列に入っている値の数を求める。

配列の要素数を求める配列.length

配列に対して、length という命令文を利用すると、配列の値の数を戻してくれる。
「length : 配列の値の数を頂戴」というイメージである。さて、配列の値の数は、「晴れ」「曇り」「雨」の3つである。

003//配列の作成と代入
004var a = [ "晴れ" , "曇り" , "雨" ];
005
006//値の数[結果：3]
007alert ( 3 ) ;
008
009//値を追加
010a.push ( "雪" ) ;

7行目が実行すると「3」と表示する。つぎに、10行目を解説する。

配列の末尾に新しい要素を追加する配列.push ( [値] );

配列に対して、push()という命令をすると、括弧に記述した値を配列の最後に追加する。プログラムの10行目で、push()を利用している。

009//値を追加
010a.push ( "雪" ) ;

このプログラムは、配列の最後に文字列「雪」を追加するプログラムである。

インデックス	変更前の値	変更後の値
0	"晴れ"	"晴れ"
1	"曇り"	"曇り"
2	"雨"	"雨"
3		"雪"

10行目を実行すると、文字列「雪」が配列の最後に追加される。「雪」を追加する前、配列の値の数は「3」であった。 10行目で文字列「雪」を追加すると、配列の値の数が「3」から「4」へ増える。

010a.push ( "雪" ) ;
011
012//値の数[結果：4]
013alert ( a.length ) ;
014
015//値を表示[結果：雪]
016alert ( a [ 3 ] ) ;

13行目で、変数aの配列の値の数を求める。現在、配列の値の数は「4」なので、「4」が表示する。 16行目で、配列のインデックス「3」の値を表示する。これは「本当に値が追加されたのか？」という事を確認するプログラムである。

インデックス	変更前の値	変更後の値
0	"晴れ"	"晴れ"
1	"曇り"	"曇り"
2	"雨"	"雨"
3	-	"雪"

現在、配列のインデックス「3」に「雪」が入っているので、 16行目を実行すると、「雪」と表示する。

for文を使って配列の要素を全て取り出す

for文と配列を組み合わせたプログラムを見る。 for文と配列は相性が良く、（相性はどうであれ）頻繁に組み合わせて利用する。

001<script>
002
003//配列の作成と代入
004var a = [ "晴れ" , "曇り" , "雨" ];
005
006//繰り返し文
007for ( var i = 0 ; i < a.length ; i ++ ) {
008
009 alert ( a [ i ] ) ;
010}
011
012</script>

プログラムを実行すると、「晴れ」「曇り」「雨」と表示する。

for文と配列の組み合わせたプログラムである。

4行目で配列を作成して変数aへ代入する。 7行目からfor文が開始する。 for文が繰り返す回数は、

a.length

こうある。a.length は配列aの値の数である。値の数は3つなので、

a.length は「3」

となる。つまり、for文は3回実行する。

003//配列の作成と代入
004var a = [ "晴れ" , "曇り" , "雨" ];
005
006//繰り返し文
007for ( var i = 0 ; i < 3 ; i ++ ) {
008
009 alert ( a [ i ] ) ;
010}

このようになる。 9行目で、配列aのインデックスに変数iを利用する。 forブロックが初めて実行する時、変数iの値は「0」である。

003//配列の作成と代入
004var a = [ "晴れ" , "曇り" , "雨" ];
005
006//繰り返し文
007for ( var i = 0 ; i < 3 ; i ++ ) {
008
009 alert ( a [ 0 ] ) ;
010}

9行目で、a [ 0 ] の値が表示する。a [ 0 ] の値は「晴れ」なので、「晴れ」が表示する。これがforブロックの処理である。再びfor文が実行すると、変数iの値は「1」になる。

forブロック繰り返し回数	変数iの値	a [ i ]	値
1回目	0	a [ 0 ]	晴れ
2回目	1	a [ 1 ]	曇り
3回目	2	a [ 2 ]	雨

for文が繰り返すたびに変数iの値が加算される。その変数iをインデックスに利用して、配列から値を取り出す。解説は以上である。

まとめ