jquery for文でループをつくってみよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

for文でループをつくってみよう

jQuery|2018年11月02日

2018年11月02日
  • このエントリーをはてなブックマークに追加

同じ処理を繰り返すループは、どんなプログラミング言語でも使います。

管理画面で投稿した記事を、順番に出力したり。
連番でデータを表示させたり。

主に、何かデータのリストがあって、順番に出力したい時などに使います。

例えば、処理を繰り返す度に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」について進めていきます。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら