- Web制作の勉強を初めた。
- HTML・CSSはなんとか基本的なことはわかった。
- 次は「JavaScript」を始めてみたけど、カンスウがよくわからない！
JavaScriptに入った時点でそのようになってしまう方はたくさんいると思います。
確かに「関数」や「条件分岐」「繰り返し」といった概念は、プログラミング自体に初めて触れる方には少し難しいかもしれません。
前回はその中でも「関数」についてお伝えいたしました。
【超初心者向け】JavaScript・関数の「基本のキ」を理解しよう
今回は、「繰り返し」の中でも「for文」についてです。
・「for文」ってなに？
・「for文」の書き方
・「for文」の途中で処理を止める方法
について解説をしていきたいと思います。
「for文」ってなに？
同じ処理を何度も繰り返し書くのは非常に手間がかかりますよね。
「for文」を使えば、同じ処理であれば繰り返し実行させることができる命令文です。
また、「何回繰り返すか」をあらかじめ設定します。
「for文」の書き方
基本的な書き方は以下の通りです。
|
1 2 3 4 5 |
for (初期化式; 条件式; 増分式) { // 繰り返し処理させたい内容はここに書きます; } |
何回繰り返すかは上記の「初期化式」「条件式」「増分式」で指定します。
シンプルな例を使ってみていきましょう。
|
1 2 3 4 5 |
for ( let i = 1; i < 5; i++){ console.log(i); } |
上記の例ですと、「初期化式」「条件式」「増分式」は以下のようになりますね。
初期化式：「 let i = 1 」
条件式：「 i < 5 」
増分式：「 i++ 」
この意味ですが、
「 i=1 」からスタートして、
処理が終わるたびに「 i++ 」でiが1つずつ増えて、
「 i < 5 」の条件を満たしている間は繰り返しを続行する、という意味を示しています。
結果的に、iが「1、2、3、4」の4回分繰り返されるため、実際に実行するとコンソールには下記のように出力されます。
1
2
3
4
「for文」の途中で処理を止める方法
continue
特定の条件では処理を実行させないようにすることができます。
先ほどの例文にcontinueを足してみていきましょう。
|
1 2 3 4 5 6 7 |
for ( let i = 1; i < 5; i++){ if( i % 2 === 0 ) continue; //iが偶数の時は処理をせずに次の繰り返しに移行する console.log(i); } |
実行するとコンソールには下記のように出力されます。
1
3
continueで、偶数である２と４が処理されていませんね。
break
こちらは繰り返し処理をある条件下で止めてしまうものです。
|
1 2 3 4 5 6 7 |
for ( let i = 1; i < 5; i++){ if( i === 3 ) break; //iが3であれば繰り返しを中断する。 console.log(i); } |
実行するとコンソールには下記のように出力されます。
1
2
breakで、３が処理される前に繰り返しが中断されていますね。
まとめ
HTML・CSSからJavaScriptの学習に入り、for文でつまずく人のために
・「for文」ってなに？
・「for文」の書き方
・「for文」の途中で処理を止める方法
について解説いたしました。
ここを理解できればfor文の基本的な使い方はOKですので是非マスターしてみてください。
