本記事ではJavaScriptのfor文について解説します。
for文が使えると、繰り返し処理ができるようになります。
for文はほとんどのプログラミング言語で実装されている構文です。
加えて、本記事ではwhile文についてもみていきましょう。
while文も同じく繰り返し処理を行うものですが、for文とは少し異なります。
どのあたりが異なるのか着目しお読み頂けると、より理解が深まるでしょう。
JavaScriptのfor文とは？
for文とは、繰り返し処理を行うための構文のことです。
プログラムでは、同じ処理を何度も繰り返さないといけない場合もあります。
たとえば、「Hello World」と5回表示しないといけないとき。
以下のように書けば、5回表示が可能ですね。
<script>
document.write("Hello World");
document.write("Hello World");
document.write("Hello World");
document.write("Hello World");
document.write("Hello World");
</script>しかし、これはあまり良い書き方ではありません。
なぜなら同じ行が何行も続くと、ソースコード全体が読みにくくなるからです。
5回表示ならまだしも、100回、1000回とかになると、コード量が増えすぎてしまいます。
そこで使うのが、for文と呼ばれるものです。
for文を使えば、同じ行を何回も書く必要がなくなります。
for文の基本的な使い方
それではfor文の具体的な使い方をみていきましょう。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
for (var i=0; i<3; i++) {
document.write(i + " ");
}
</script>
</body>
</html>○実行結果
上記のコードではfor文を使って、繰り返し処理を行っています。
for文を使う場合、
for(初期値; 条件式; 変化式){
for文の中の処理
}
というように書きます。
上記の例では、まず変数iを0に初期化しています。
その後条件式に当てはまっているかどうかの、チェックが行われます。
iは0なので当てはまり、for文の中の処理が動きます。
for文の中では、変数iの値を表示しています。
その後、変化式の「i++」によってiは「+1」されます。
以下、条件式に当てはまらなくなるまで、for文の中の処理が繰り返されます。
for文ではこのようにして、繰り返し処理を書くのです。
JavaScriptのwhile文とは？
続いて、JavaScriptのwhile文についてみていきましょう。
while文はfor文同様、繰り返し処理を行うための構文です。
ただし、while文の場合for文のように、「初期値」「変化式」を書くことができません。
それではどうやって使うのか、詳しくみていきましょう。
while文の基本的な使い方
while文の基本的な使い方は以下の通りです。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var i = 0;
while(i < 3) {
document.write(i + " ");
i++
}
</script>
</body>
</html>○実行結果
while文を書く前にまず、変数iを初期化しています。
while文は自分で初期値の設定ができないため、事前に初期化する必要があります。
while文の()の中には条件式を書きます。
条件式に当てはまる場合のみ、while文の中の処理が動きます。
while文の中では、変数iの値を表示しています。
更に「i++」でiの値に「+1」していますね。
while文では変化式が書けないので、このように()の中で「+1」する必要があるのです。
これがwhile文の基本的な使い方です。
基本的にはfor文の方が便利ですが、whileもたまに使うことがあります。
continue文の使い方
繰り返し処理を行う上で、continue文という大事なものをみていきましょう。
continue文を使うことで、for文やwhile文での繰り返し処理を、「スキップ」することが可能です。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
for (var i=0; i<3; i++) {
if(i == 1){ continue; }
document.write(i + " ");
}
</script>
</body>
</html>○実行結果
上記の例では、for文内でif文により、iが1の場合のみ繰り返し処理がスキップされています。
そのため、i=1の場合、document.writeによって表示がされません。
実行結果を見て分かる通り、「0」と「2」のみが表示されています。
このようにcontinue文を使うと、for文内の処理を途中でスキップ可能です。
break文の使い方
続いてbreak文の使い方をみていきましょう。
break文を使うことで、for文やwhile文での繰り返し処理を、「終了」することが可能です。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
for (var i=0; i<3; i++) {
if(i == 1){ break; }
document.write(i + " ");
}
</script>
</body>
</html>○実行結果
上記の例では、for文内でif文により、iが1の場合に繰り返し処理か終了されています。
そのため i=1移行、document.writeによって表示がされていません。
「0」のみが表示されていますね。
continue文は処理をスキップしますが、break文は処理を終了させます。
このような違いがあるので、覚えておきましょう。
まとめ
本記事では、JavaScriptのfor文について解説しました。
for文やwhile文は、同じ処理を何度も行いたい場合に便利です。
またcontinue文を使えば繰り返し処理を「スキップ」、break文を使えば繰り返し処理を「終了」することができます。
次回はJavaScriptの配列をみていきましょう。
