同じ処理を繰り返すループは、どんなプログラミング言語でも使います。
管理画面で投稿した記事を、順番に出力したり。
連番でデータを表示させたり。
主に、何かデータのリストがあって、順番に出力したい時などに使います。
例えば、処理を繰り返す度に1ずつ数字が「変数」に加算されていくとします。
1、2、3、4、5といった具合に繰り返した分、数字が増えていくイメージです。
このような連番を作り出す処理をfor文で作ったとします。
連番を利用して、様々な機能が実装できます。
例えばループの回数に応じて、
1番だったらこのデータを出力。
2番だったらこのデータを出力。
というように「各数字に応じて処理を出し分ける」と考えてください。
すると、ループだけでたくさんのデータを出し分けられるのです。
とは言え、まだピンとこない方も多いでしょう。
今はざっくりと概念だけ把握してみてください。
では、こうしたループは、どんな書き方で実現できるのでしょうか。
JavaScriptにおいて、ループ機能を持つのが「for文」です。
JavaScriptだけではありません。
たいていの言語にfor文は存在していますね。
for文は、指定条件が満たされるまで、延々とループが繰り返されます。
今回は、for文を使い数字を10番まで一覧で出力してみましょう。
ミッションの内容
下記のファイルを再現してみましょう。
開いた瞬間に、1〜10まで数字が出力されています。
この数字はHTMLに直接書いたわけではありません。
for文を使って、動的に ( プログラミングで ) 出力しています。
一度「ソースコードの解説」を確認してから、挑戦してみましょう。
もし、どうしても再現できない場合は、下記のファイルを参考にしてください。
ソースコードの解説
for文は下記のように記述します。
<script>
//基本for()の中では、何回ループするかを示します。
//for(開始時点の数字;ループされる条件;1つのループで加算(または減算)する数){
//下記では「最初1からカウントを開始し、10以下の場合はループを継続、1ループにつき1ずつ加算」です。
for(let i=1;i<=10;i++){
//ループ1回につき、.printAreaに繰り返した回数を追記します。
$(".printArea").append(i);
};
</script>
クラスprintAreaのついた要素の中に、連番で1〜10まで表示させます。
forの括弧内の条件が満たされるまで、{}内の処理が繰り返されます。
特に分かりずらいのは条件を指定する括弧内ではないでしょうか。
簡単に、説明していきましょう。
括弧の中は「;」で区切られ、下記3つの処理に分かれています。
let i=1の処理について
まず「let i = 1」で変数iに1を挿入しています。
この数値がループのスタート地点での数値です。
ここで、変数の定義であるletとvarについてご説明させて頂きます。
昔はvarをよく使っていましたが、今はletを使うようになりました。
この2つの違いは、主に「有効範囲」と「再定義の可不可」です。
- varはfor文の外でも同じ変数にデータを加えたり出力したりできます。
for文の中でvarに数字の1が入っていたとします。
for文の外で1を加えると2になります。 - letはfor文の外では同じ変数にデータを加えたり出力したりできません。
for文の中でletに数字の1が入っていたとします。
for文の外では未定義となり、継続して同じletを使うことは出来ません。
というような違いがあります。
letは主にfor文やif文のような限定的な範囲内で使います。
簡単に言えば、その処理内だけの使い捨てです。
例えば「すでに他の箇所で同じ変数を定義していた」なんてミスを防げます。
今回の場合であればiという変数の重複が考えられます。
for文でiを使ったことを忘れ、他の箇所でiを使ってしまうかもしれません。
すると、すでにiには値が入っているので、上手く動かない可能性もあります。
こうした細かいミスを防ぐこともできるでしょう。
varは同じページ全体を通して使いたい変数に適応します。
varとlet、それぞれ使い分けてみてください。
i<=10の処理について
「i<=10」でループが実行される条件を示しています。
変数「i」の中身が「10」になるまで、繰り返される、ということです。
i++の処理について
そして「i++」はループが繰り返されるごとに、iが1ずつ追加される、という意味です。
for文は、基本的にこの3つで出来ています。
あとは、数字や比較演算子で条件を変えていきます。
{}内の処理について
{}の中は、前回やった内容と同じ処理をつかっていますね。
$(".printArea").append(i);
クラスprintAreaのついたHTMLタグの中に、変数「i」の数字を追加していきます。
for文の条件に従い10回表示されるので、HTML上にも1〜10までの数字が羅列されます。
これで、for文のイメージはついたでしょうか。
次回は配列「array」について進めていきます。