【JavaScript】for文の使い方【繰り返し処理ができる】
この記事では、JavaScriptのfor文の使い方を解説します。
「そもそもfor文とは何か？」から解説するので、初心者にもおすすめの記事となっています。
では、さっそく内容へ！
JavaScriptにおけるfor文とは？
JavaScriptには、繰り返しの処理を簡単に書く方法があります。
そうです、それが「for文」です。
for文を使うことで繰り返しの処理を、簡潔に書くことが可能です。
なぜfor文は便利か？
同じ処理を何回も書くのは、回数のミスが起こったり、単純に面倒だったりと、非効率です。
ですが、「この処理を、x回繰り返してね」という命令が書ければ、すっきりと書くことが可能ですし、効率的です。
forの具体的な書き方
では、for文の具体的な書き方に入ります。
for ( 初期化式; 条件式; 変化式 ) {
繰り返す処理
}この様に、書くことで、繰り返し処理が書けます。
※「;」セミコロンが「２つ必要」なので注意しましょう。
※セミコロンがないと構文エラーになります。
for ( ; ; ) {
}セミコロンなど、上の例のような最低限の形があれば、構文エラーにはなりません。
- 初期化式
- 条件式
- 変化式
- 繰り返す処理
これらは省略可能、ということですね。
これだと無限ループになってしまいますが。
「スペースや改行」は慣習的に、上の例のように書くだけなので、「スペースも改行」つけなくても、文法的にはOKです。
for(初期化式;条件式;変化式){}圧縮するとこの様に、改行やスペースは消されるので、速度に関して気にする必要はないと思います。
ですが、見やすいので、つけておくことをお勧めします。
初期化式とは？
「初期化式」とは、forの繰り返し処理がスタートする時に、「一回だけ読み込まれる式」のことです。
なので通常は、for文の中で使う「イテレーションを管理する変数」の宣言が行われます。
for ( let i = 0; 条件式; 変化式 ) {
繰り返す処理
}こんな感じで使われます。
「i」は、「iteration」(イテレーション)という「反復」などを意味する英単語の頭文字からきています。
この「i」はループ処理の回数を制御する変数として使われることが多いです。
条件式とは？
条件式とは、for文の中の「繰り返えす処理」を実行する「前」に「毎回」、評価される式のことです。
その結果が「true」の場合は、「繰り返す処理」が実行されます。
その結果が「false」だった場合は、for文のループ処理は止まります。(そのfor文は終了。)
for ( let i = 0; i < 10; 変化式 ) {
繰り返す処理
}この例では、「i」という変数が10より小さい限り、「true」を返します。
一度でもfalseになったところで、for文のループを抜けて、次のJavaScriptのコードが実行されますが、それまではずっとfor文によるループが続きます。
変化式
変化式は、「繰り返す処理」が実行された「後」に「毎回」実行されます。
ここで、「i」などのイテレーションに使う変数を「変化させることで」、意図した回数のループが繰り返された後に、ループを抜けるように設定することが可能、ということですね。
for ( let i = 0; i < 10; i++ ) {
繰り返す処理
}この様な場合、「繰り返す処理」が実行された後に、毎回「i++」が実行されれば、いつか条件式が「false」となるので、これを上手く使うことにより、ループを終わらせることができます。
変化式が「繰り返す処理」の後に毎回読み込まれたとしても、ずっと条件式が「true」になるように設定すると、無限ループになります。
無限ループをしてもすぐにPCが壊れる、ということはないので大丈夫です。
「繰り返す処理」は何行でも書ける！
for ( let i = 0; i < 3; i++ ) {
console.log( "Hello!" );
alert("Hello");
confirm("OK？");
}このように何行でも「繰り返す処理」を書くことが可能です！
どんなところで便利か？
「ところで、for文を使ったループ処理ってそんなに便利なの？」という疑問もでるかもしれないので、それについて解説します。
結論、上手く使えば便利です。
拡張性を考える時
例えば、「10回だけ同じ処理を繰り返す」、などのようなコピペなどで対応できそうなコードも、将来的にそのコードが100回繰り返すように変更するかもしれません。
その時に備えて、柔軟に書けるように準備しておくと、いいかもしれません。
修正が入る時に、for文を使っていたら、「繰り返す処理」の箇所を変更するだけで済みます。
ですが、なんども同じ処理を書いていた時は、その分、書き換える箇所が多いはずなので、ミスが起こったり、単純に面倒です。
読みやすさ
for文を使っても使わなくても、動きは同じかもしれませんが、読みやすさが違ってきます。
for文だと、すっきりかけますし、何回繰り返すかも、条件式と変化式を見ることで簡単に把握できます。
コピペで何行も同じ処理を書いていた場合は、何回繰り返すのかが分かりづらいです。
また、全て同じ処理が書かれているか？を確認する必要もでてくる、かもしれないです。
そして、自分は分かっていても、他の人がそのコードを読むことが後からあるかもしれないので、そのことも考慮するとfor文は積極的に使うべきだと思います。
例えば、なんかの理由によりチーム開発に切り替えるとか、単純に引き渡すとか、教えてもらうときに読んでもらうとか、ですかね。
まとめ
JavaScriptでは、for文を使うことで、繰り返し処理が簡潔に書けます。
繰り返し処理はループ処理と呼ばれることもあります。
for ( 初期化式; 条件式; 変化式 ) {
繰り返す処理
}for文は、この様に書きます。
※セミコロンは必ず２つ必要です。
- 初期化式
- 条件式
- 変化式
- 繰り返す処理
は省略可能です。
「繰り返す処理」は何行でも書けます。
最後まで読んでくれてありがとうございました！
ではまた！