最速JavaScript講座

制御構造:ループ

イベントコマンドにおける『ループ』『ループの中断』にあたる処理もJavaScriptに用意されています。
前章の条件分岐と本章のループは、JavaScriptに限らず、ほぼすべてのプログラミング言語に実装されています。
もうお気づきかもしれませんがツクールにおけるイベントコマンドは、もともとプログラミング言語における変数や条件分岐などの制御構造を参考にして作られたものです。

ループ(while)

もっとも基本的なループ処理、それが『while文』です。
イベントコマンドではループの終了条件を指定することはできず、ループ内で条件分岐して中断していましたが、JavaScriptのwhile文ではループし続ける条件を指定できます。

構文
while(『条件式』) {
『繰り返し実行される処理』
}
let a = 0;
while(a < 10) {
a++;
console.log(a);
}

上記の例の場合は、『aが10より小さい』を満たしている限り、ブロックの中身が繰り返し実行され、1から10まで数字がログ出力されます。

無限ループの恐怖

while文の条件式に永遠にtrueを返すような式を指定したらどうなるでしょうか。
答えは『永遠にループの中身を実行し続けてフリーズしてしまう』です。
イベントコマンド『ループ』でも同じ現象が起きると思います。
そうなるとゲームが止まってしまう他、PCにも負荷を与えてしまうので条件式に指定する内容は間違いがないかどうか、慎重に見極めましょう。

ループの中断(break)

イベントコマンドにおける『ループの中断』にあたる処理も用意されています。
それが『break』です。

let a = 0;
while(a < 10) {
a++;
console.log(a);
if (a >= 5) {
break;
}
}

この例の場合だと5まで出力した段階でループが中断されます。

ループ(for)

while文は条件式を満たしている間ずっと繰り返し処理を実行する構文でした。
一方、これから紹介するfor文は、最初から繰り返したい回数が決まっている場合などに使います。

構文
for (『初期化』; 『条件式』; 『インクリメント式』) {
『繰り返し実行される処理』
}
for (let i = 0; i < 5; i++) {
console.log(i);
}

上の例では、0から4まで数値がログ出力されます。
『i』は一般的にカウンタ変数と呼ばれます。
普通の変数なので好きな名称を付けられますが、『i』が使われることが多いです。

for文は配列に対する繰り返し処理を実行したいときにも使われます。

let aaa = [1, 3, 5, 7, 9];
for (let i = 0; i < aaa.length; i++) {
console.log(aaa[i]);
}

上の例では、配列の各要素、1, 3, 5, 7, 9が順番にログ出力されます。

ループ(for-in)

前項で配列に対する処理の繰り返しを紹介しましたが、実はもっと簡単に記述できます。
配列の各要素に対して繰り返し処理をしたい場合に使われるのが、for-inです。

構文
for (『添字の変数宣言』in 『配列』) {
『繰り返し処理』
}
let aaa = [1, 3, 5, 7, 9];
for (let i in aaa) {
console.log(aaa[i]);
}

for-inでは、変数『i』に配列の添字、つまり0から4までの値が順番に入ります。
よって前項の例文と同様に配列の各要素、1, 3, 5, 7, 9が出力されます。

さらに、for-inはオブジェクトに対しても使用できます。

構文
for (『プロパティ名称の変数宣言』in 『オブジェクト』) {
『繰り返し処理』
}
let aaa = {bbb:1, ccc:2};
for (let property in aaa ) {
console.log(aaa[property]);
}

上の例では変数『property 』にプロパティ名『bbb』と『ccc』が入ります。
よってログには『1』『2』が出力されます。
ただし、『1』と『2』のどちらが先に出力されるかは順不同であることに注意してください。

ループ(for-of)

for-ofもfor-inと同様に配列に対する繰り返し処理を簡単に記述できます。
for-inとの違いは、変数に添字ではなく要素自体が格納される、という点です。

構文
for (『要素の変数宣言』of 『配列』) {
『繰り返し処理』
}
let aaa = [1, 3, 5, 7, 9];
for (let data of aaa) {
console.log(data);
}

for-ofの方が便利なため、コアスクリプトでも多用されています。ただしfor-ofはfor-inと異なり、オブジェクトに対しては使用できません。