広告
【プログラミング入門】【JavaScript】12日目 配列の使い方
ホームページにアニメーションなどの動きをつける時に使われるJavaScript(ジャバスクリプト)というプログラミング言語を使って初心者・入門者向けにプログラミングのキホンを解説していきます！
難しい設定などはほとんどなく手軽に本格的なプログラミングを学ぶ事ができます。
簡単なホームページの作り方も解説しますのでホームページ作りに興味がある方もぜひご覧ください。
配列(はいれつ)
(1)上から順番に
(2)条件で分かれ道
(3)繰り返し
３つの基本的なプログラムの仕組みは学びました。次にそれを使いこなす上で便利な機能「配列(はいれつ)」を紹介します。
たくさんの変数
今までは簡単なプログラムばかりだったので、変数も１つか２つぐらいしか使いませんでした。
でも変数が100個や200個に増えた時に全て別々に名前を付けたり、管理をするのはけっこう大変ですよね！
そんな時に使うのが「配列」です！
今までは
今まで学んだ事だとたくさんの変数を使いたい時は
<script> var suji1,suji2,suji3,suji4,suji5; </script>
のように変数をひとつひとつ用意するだけでした。
しかしこの方法だと人間の目からは「suji」グループの変数が５個あるように見えていてもコンピューターからは別々の名前の変数が５個あるとしか見えていないので一気に変数を処理したりする事ができません。
そこで配列というワザを使ってコンピューターにもわかるように同じグループの変数ですよと教えてあげます。
使ってみよう！
■12日目 プログラム１■
<script>
/*jspgm12_1*/
/*12日目 プログラム１*/
var suji = [2,4,1,0,3];
document.write("suji[0] = " + suji[0]);
document.write("<br>suji[1] = " + suji[1]);
document.write("<br>suji[2] = " + suji[2]);
document.write("<br>suji[3] = " + suji[3]);
document.write("<br>suji[4] = " + suji[4]);
</script>
■実行結果■
■説明■
まずは配列を使いますよ！と宣言をします。
var suji = [2,4,1,0,3]; var 配列の名前 = [内容1,内容2,内容3・・・];
普通の変数と同じように名前を決めて配列を表す[]カッコの中に使いたい個数だけ変数の内容を「,」カンマで区切って入れていきます。
内容が決まってない時は
var suji = [0,0,0,0,0];
「0」でも入れておきましょう。
これで「suji」という名前の配列変数が５個使えるようになります。
そして使う時は
suji[0]
このように[]カッコの中に使いたい順番の番号を書いて使います。
var 配列の名前 = [0番目,1番目,2番目・・・];
この番号の事を添え字(そえじ)といいます。
一番最初は「0番目」から始まりますので注意です。
途中で一つだけ内容を変更したい場合は
suji[2] = 152;
のようにします。
宣言の時だけは複数の内容を決められますが、途中で内容を変更する時に
suji = [100,200,300,400,500];
のように複数の内容を同時に変更する事はできません。
関係ない番号には触らない！
例えば先ほどのプログラムのように
<script> var hairetu = [2,4,1,0,3]; </script>
配列の内容を５個用意したとして、
<script>
var hairetu = [2,4,1,0,3];
document.write("hairetu[8] = " + hairetu[8]);
</script>
このように関係のない場所の配列の内容も見る事や追加・変更する事ができたりします。(自分で内容を決めるまでは「undefined(定まっていない値)」というのが入ってます)
「JavaScript」言語の配列はけっこう自由なので(他のプログラミング言語によっては禁止されていたりします)、こんな事も簡単にできちゃいますが、思わぬエラーの原因になったりするので慣れるまでは最初に決めた配列の個数を守ってプログラムを組むようにしましょう！
上手に使ってみよう！
それでは小難しい話はこのへんで、配列をどんどん使っていきましょう！
配列にする事によって「添え字」を変数にする事ができます。
さきほどのようなプログラムをもっと簡単に書いてみましょう！
■12日目 プログラム２■
<script>
/*jspgm12_2*/
/*12日目 プログラム２*/
var hairetu = [2,4,1,0,3];
var count = 0;
for(count = 0;count < 5;count++){
document.write("hairetu[" + count + "] = " + hairetu[count])
document.write("<br>");
}
</script>
■実行結果■
■説明■
配列と「for」命令のよく使われるカタチです！
for(count = 0;count < 5;count++){
document.write("hairetu[" + count + "] = " + hairetu[count])
document.write("<br>");
}
添え字に変数を使って一気に配列の内容を表示してます！
こうすれば100個、200個あるたくさんのデータも一気に処理することができますね！
「while」命令を使った例も見てみましょう。
■12日目 プログラム３■
<script>
/*jspgm12_3*/
/*12日目 プログラム３*/
var hairetu = [2,5,1,8,3,0,7,6,9,4];
var suji = 0;
while(!(hairetu[suji] == 0)){
document.write("hairetu[" + suji + "] = " + hairetu[suji])
document.write("<br>");
suji++;
if(suji == 10)break;
}
</script>
■実行結果■
■説明■
目的のデータに到達するまで「while」命令で繰り返し配列内を調べるプログラムです。
while(!(hairetu[suji] == 0))
「hairetu[suji]」の内容が「0」ではない間繰り返しを続けます。
目的のデータがない時に無限ループにならないように
if(suji == 10)break;
配列の限界点で「break」命令を入れておくのもポイントです。
文章の場合
■12日目 プログラム４■
<script>
/*jspgm12_4*/
/*12日目 プログラム４*/
var hairetu = ["りんご","みかん","ばなな","キウイ","マンゴー"];
var suji = 0;
for(suji = 0;suji < 5;suji++){
document.write("hairetu[" + suji + "] = " + hairetu[suji])
document.write("<br>");
}
</script>
■実行結果■
■説明■
もちろん文章も同じように配列に入れる事ができます。
「"」で囲む事に注意です。
広告
二次元配列
続けてちょっと配列をパワーアップさせた２次元配列を学んでいきたいと思います。
「にじげん！」って聞いただけでいっきにレベルアップしそうな感じですが、ご安心ください。ただ配列が束(たば)になっただけの話です。
配列に配列を入れる
では説明するよりまずはやってみます。
■12日目 プログラム５■
<script>
/*jspgm12_5*/
/*12日目 プログラム５*/
var hairetu1 = ["りんご","みかん","ばなな","キウイ","マンゴー"];
var hairetu2 = [100,120,90,200,300];
var syouhin = [hairetu1,hairetu2];
document.write("商品名:" + syouhin[0][0] + " 値段:" + syouhin[1][0] + "円");
document.write("<br>");
document.write("商品名:" + syouhin[0][3] + " 値段:" + syouhin[1][3] + "円");
</script>
■実行結果■
■説明■
商品名を表す配列、値段を表す配列を別々に作ってそれを一つの配列にまとめる事によって商品一覧表のような配列を作ってみました。
図で表すとこんな感じになります。
添え字も
「0行目0列」→「syouhin[0][0]」・・・りんご
「0行目1列」→「syouhin[0][1]」・・・みかん
「1行目2列」→「syouhin[1][2]」・・・90
のようになります。
表とプログラムを見比べてどこに何が入るのかをゆっくり確認してみてください。
表で初期化
表のように初期化する事でさきほどのプログラムをもう少し直感的でわかりやすくする事ができます。
■12日目 プログラム６■
<script>
/*jspgm12_6*/
/*12日目 プログラム６*/
var syouhin = [
["りんご","みかん","ばなな","キウイ","マンゴー"],
[100,120,90,200,300]
];
document.write("商品名:" + syouhin[0][0] + " 値段:" + syouhin[1][0] + "円");
document.write("<br>");
document.write("商品名:" + syouhin[0][3] + " 値段:" + syouhin[1][3] + "円");
</script>
■実行結果■
■説明■
配列の[]カッコの中にさらに配列の[]カッコを入れる事で最初から表のように初期化する事ができます。
「,」カンマを打つ位置に注意してください。
２重の「for」命令
■12日目 プログラム７■
<script>
/*jspgm12_7*/
/*12日目 プログラム７*/
var tree = [
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,1,0,0,0,0],
[0,0,0,9,9,9,0,0,0],
[0,0,9,9,9,9,9,0,0],
[0,9,9,9,9,9,9,9,0],
[0,0,0,0,9,0,0,0,0],
[0,0,9,9,9,9,9,0,0],
[0,0,0,9,9,9,0,0,0],
[0,0,0,0,0,0,0,0,0]
];
var suji1 = 0;
var suji2 = 0;
for(suji1 = 0;suji1 < 9;suji1++){
for(suji2 = 0;suji2 < 9;suji2++){
if(tree[suji1][suji2] == 9)document.write("□");
else if(tree[suji1][suji2] == 1)document.write("☆");
else document.write("■");
}
document.write("<br>");
}
</script>
■実行結果■
■説明■
だいぶお粗末ですが、クリスマスツリーを描いてみました。
２次元配列を処理する時は２重のループを使うと便利です。
for(suji = 0;suji < 9;suji++){
for(suji2 = 0;suji2 < 9;suji2++){
/*ループの中の命令*/
}
}
２重のループを使って二次元配列の内容をひとつひとつ調べつつ「if」命令を使って
if(tree[suji1][suji2] == 9)document.write("□");
配列の内容により絵柄に置き換えてます。
ループのイメージですがこのプログラムで言うと
まず外側のループを通りこして先に内側のループで横一列のラインを作ります。
その１
■■■■■■■■■
一列作った所で一度内側のループを抜けて縦のラインを一つだけ進めてから、再び内側のループに入ります。
その２
■■■■■■■■■
■■■■☆■・・・
後は繰り返しですね！
その３
■■■■■■■■■
■■■■☆■■■■
■■■□□□■■■
■■□□□・・・
内側のループが終わったら外側のループを一つ進めるというのを想像しましょう！
配列はプログラムを組む上でスゴイ大事なテクニックです。何回も練習して身につけましょう！
次回
広告
広告
Copyright 2016 K.N/petitetech.com