JavaScriptの繰り返し処理(ループ)はfor文!超入門編!

JavaScriptの繰り返し処理(ループ)

繰り返し処理のことをループといいます。

同じ処理を続けて行いたい時に使います。

例えば、1000枚のチケットを先着順にさばく時、1から1000番目までは「申し込みを受け付けました」と表示し、1001番目以降は「チケットは売り切れました」と表示させたい。そんな時にループの構文を使います。

繰り返し処理(ループ)for文の書き方

for (初期値; 条件式; 増減式) {処理}

これがfor文の基本です。

まずは、scriptタグの中に「for(){}」と書いたら、{}の中で改行させましょう。

( )の中にfor文の構文を書きます。

これは決まり事なので、まるごと覚えましょう!

初期値「var i = 1;」は、変数iを宣言し、iは1である、としています。

条件式「i < 10;」は、iが10より小さい数だったら、という意味です。iが10になるまで繰り返し処理を実行します。

ここで大事なのは、実行結果が表示されるのは9までということです。

10より小さいという条件だからです。

10になったら処理は実行されません。

増減式「i++」は、処理1回ごとにiの値を1ずつ増やしていくという意味です。

ダイアログにループ処理の結果を表示させてみよう!

初期値を「var i = 1;」と定義したので、最初の実行結果は「1」です。

OKをクリックします。

すると、変数iに1が足されて実行結果が「2」になります。

OKを押すたびに3,4,5,6,7,8・・・と処理が繰り返され、

実行結果が9までダイアログボックスがデバックされたら処理がストップします。

ブラウザにループ処理の結果を表示させてみよう!

alert(i); を document.write(i); に変えてブラウザに表示させてみましょう。

ブラウザにループの結果が連続して表示されました。

コンソールで処理を実行させよう!

console.log(i)を使うと、ブラウザで確認する必要がなく、開発者ツール(デベロッパーツール)に結果を送ることができます。

ブラウザには何も表示されていません。

F12キーを押して開発者ツール(デベロッパーツール)を開きましょう。

「console」をクリックします。

すると、上から順にループ処理の実行結果が表示されています。

for文の変数はなぜiなのか?

for文の変数には通常「i」が使われます。

それは一体なぜなんでしょうか。

通説によると、「integer(整数)」の頭文字をとったと言われています。

ループ変数で使うのは整数がが一般的だから、という理由です。

ちなみにiの次に使うのはj,k,l,m・・・の順番にするといいでしょう。

アルファベット順だと覚えやすく、順番もわかりやすいからです。

初期値と条件式の数値設定に決まりはない

初期値「var i = 1;」と定義すると、実行結果は1から始まりますが、0から結果を出したい時は「var i = 0;」と書けばオッケーです。

また、条件式「i < 10;」は、iが10未満、という意味ですが、10まで結果を出したい時は条件式「i < 11;」とすればオッケーです。

「i ≦ 10;」と書くと、10以下、という意味になり、同じ結果が得られますが、数字を1大きくするかどうかの違いなので、書き方を統一する意味で、使うのはどちらか1つでいいと思います。


まとめ

  • JavaScriptの繰り返し処理のことをループという
  • ループにはfor文を使う
  • for文の書き方は、for(初期値; 条件式; 増減式) {処理}
  • ( var i = 1; i < 10; i++ )の構文をまるごと覚えよう
  • 変数にはiを使おう