プログラミングやWEB制作の勉強ならCANIT (キャニット)

【入門編5】JavaScriptのfor文でループ処理を行おう

JavaScript入門

本記事では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の配列をみていきましょう。

❤内容は役に立ちましたか?皆さまのご意見が励みになります☺
YesNo
手に職をつけてプログラマー転職

そろそろ本気で将来のことを考えなくちゃ……手に職をつけてプログラマーやエンジニアに転職したいなぁ。でも、プログラミングスクールってものすごくたくさんあるし、なんか敷居が高いのよね

これからプログラマーやエンジニアへの転身を目指すあなたに、どのスクールがもっとも適しているのかを紹介します。

JavaScript入門
【この記事を書いた人】
谷津弘樹

某自社開発のIT企業に勤めていた元webプログラマーです。主にサーバーサイド側を担当し、phpを使った開発経験があります。現在は退職しフリーランスライターとして活動中。IT系の記事を主に執筆し生計を立てています。

CANIT
タイトルとURLをコピーしました