【Javascript 入門】その3 : Javascript の繰り返し文
shiranashiどうも！こんにちは！
シラナシです！
今回は、これもプログラミングで欠かせない 繰り返し文についてやっていきたいと思います！
ここまでの 3 回の内容を覚えれば、汚くはありつつも簡単なシステムであれば書けるようになります！
これであなたもプログラマーの仲間入り！
是非しっかり身に着けていきましょう！
シリーズ目次
- 【Javascript 入門】その1 : Javascript を使う準備
- 【Javascript 入門】その2 : Javascript の処理の作り方(変数・条件式・演算子)
- 【Javascript 入門】その3 : Javascript の繰り返し文
- 【Javascript 入門】その4 : Javascript のエラーは救世主！？
- 【Javascript 入門】その5 : Javascript のデータ型
- 【Javascript 入門】その6 : Javascript の配列
- 【Javascript 入門】その7 : Javascript のオブジェクト
- 【Javascript 入門】その8 : Javascript の関数
※これ以降は、タイトルや内容を思いついたら追記する予定です。
今回の目次
- 繰り返し文って何？
- for 文の使い方
- for 文の中で処理を変える
- 色々な繰り返し文
- [本日のコラム] コメントアウトを有効活用しよう！
繰り返し文って何？
同じような処理を繰り返し行いたいときに使う物です。
例えばパズルゲームで「消せるブロックを探す」や「ブロックを10個 新しく生成する」などがあった場合、繰り返し文を使うことがあります。
同じような処理を何度も何度も書く必要がある場合、この繰り返し文等を使うことで、同じような処理を複数回書かなくても済むようになります。
今回は、まずはそんな繰り返し文の基本になる for 文に触れたいと思います。
for 文の使い方
for 文とは、一定回数同じ処理を行うときに使う処理です。
for (let i = 0; i < 5; i++) {
console.log(i);
}
これは for 文の一例です。
実際に自分でも動かしてみてください。
コンソールに、「0」「1」「2」「3」「4」と出たと思います。
これは「console.log() を5回行い、変数 i の値をログに表示する」処理です。
さてそれぞれの意味を言葉に置き換えると次のようになります。
for (変数宣言; 終了の条件式; 毎回実行する処理) {
繰り返し行う処理
}
変数宣言
最初の変数宣言は、for 文の中で使用する変数を宣言するブロックになっています。
ここでは、i をよく使います。(おそらく index の頭文字です。)
ここで宣言した変数は、主に「for 文を繰り返している回数」を示す変数にすることが多いです。
終了の条件式
ここでは、「いつまで繰り返すか」を決定する条件式を書きます。
この条件式が true の間、何回も繰り返します。
今回の例では、「i < 5」なので、「i が 5より小さい時繰り返す」ということですね。
ここに入れる条件次第で、好きなだけ繰り返させることができます。
毎回実行する処理
最後は、正しく言うと「次の繰り返しの処理に移る前に毎回実行する処理」となります。
for 文の実行する流れをここで説明すると、下記のようになります。
- 変数宣言
- 条件のチェック
- false だった場合、波括弧は実行せずにスルー
- true だった場合、波括弧の中を実行
- 波括弧の中の処理が終わったら、「毎回実行する処理」を実行
- 条件のチェック
- 2～6を false になるまで繰り返し
5番目に実行する処理がこの部分にあたります。
毎回必ず実行する部分となるので、回数を示す i などをここでプラス 1 ずつしていくような処理をここに書きます。
※「i++」は「インクリメント」といい、「変数の値を 1 プラスする」という演算子です。
繰り返し行う処理
ここには繰り返し行いたい処理を自分の思うように書いてください。
for 文の条件式が false になるまで、ひたすらその処理を実行してくれます。
if 文などを使うと「この場合だけ違う処理」みたいなことも作ることができます。
注意点
さて、条件式で false になるまで処理を抜けない説明をしましたが、この条件式が false にいつまでもならない場合、どうなるでしょうか？
答えは、うすうす感づいている方もいるかと思いますが、処理が終わらなくなります。
いつまでも for 文を抜け出せなくなり、無限にループし続けるので、次の処理にプログラムが行けず、プログラムも終わることがないので、そのうちアプリが処理に追いつけずフリーズします。
ブラウザの場合、タブの×ボタンを複数回押すことで、処理を強制終了できますし、最悪ブラウザの強制終了だけで対応できるので、一度経験してみると面白いでしょう。
実際にやってみると、そのタブで何も操作できなくなります。
たまに PC や ブラウザでフリーズする原因の一つがこれですね。
無限ループでなくても、アプリやマシンの処理限界を越した処理をさせると、処理しきれず固まってしまう現象です。
ただし、実験する場合は自己責任で行い、同じブラウザで他のことはせず、その実験だけのために開いてください。
Chrome で実施した場合、Chrome すべてを閉じることになるので、その時編集中の文章など全て破棄することになります。
実験する場合は注意して行いましょう。
for 文の中で処理を変える
次は for 文の使い方を覚えたところで、処理回数によって、実施する処理を変える方法です。
とは言っても難しいことはしません。
for 文の中に条件文を置くだけです。
今回は if 文を使います。
for (let i = 0; i < 5; i++) {
if (i === 2) {
console.log("true");
} else {
console.log("false");
}
}
上記を実行させると、i が 2の時だけ、コンソールに「true」が表示されます。
i は 0 からスタートなので、3個目のログだけ「true」になるのが確認できると思います。
実際に実装するときはこんな単純な書き方ではないですが、このように if 文を行うことで、「同じような処理を行い続けるけど、この条件の時だけ別の処理」といった実装が作れるようになります！
色々な繰り返し文
さて、ここまで for 文の説明をしてきましたが、繰り返し文は for 分だけではありません。
while 文
while 文は、for 文の括弧の中身を条件式だけにしたものです。
回数を決定するような変数は機能として作らないので、無限ループにならないように条件式はしっかり考えて作る必要はあります。
この条件式も true になっている間 繰り返し続けるので、途中で必ず false になる条件式を考えましょう。
また、for 文と同じで、while 文は 1 回目も条件式の判定があり、false になった場合、1度も波括弧の中を処理せずに終わることがあります。
while(条件式) {
繰り返す処理
}
let i = 0;
while(i <= 5) {
console.log(i);
i++;
}
do while文
do while 文は、while 文と殆ど同じ機能の処理ですが、大きく違うのが、1 回は必ず波括弧の中を処理することです。
条件式の真偽 (true/false) に関わらず必ず 1 回は処理を行うため、そういった処理を書く場合に使うと良いでしょう。
do {
繰り返す処理
} while(条件式);
let i = 0;
do {
i++;
console.log(i);
} while(i <= 5);
他の繰り返し文
さて他にも繰り返し文や、繰り返し処理を行う方法はありますが、次回以降にやる内容が前提の知識として必要になりますので、またその時にでも紹介したいと思います。
ともあれ、ここまでの 3 回でやった内容を使えば、ひとまず簡単なゲームやアプリを作ることは可能です。
(といっても、画面表示に関する処理などは まだやっていないので、コンソールログのみ でできることに限られてしまうと思いますが)
是非是非まずはこの 3 回で覚えたことを色々試してみて、まずはプログラムに慣れてみてください。
次回は、エラーについて触れていきたいと思います！
強力な手助けになってくれるものですので、恐れずしっかり見ていけるようになりましょう！
ここまで読んでいただきありがとうございました！
また次回もよろしくお願いいたします！
おすすめの本！
基本的な情報から、痒い所に手が届く細かな情報もあります！
Javascript やるなら是非買ってみてください！
[本日のコラム] コメントアウトを有効活用しよう！
さて、今までの話にも少し記述していましたが、「コメントアウト」の紹介をしていきたいと思います。
// コメントアウト
/** コメントアウト */
/**
* コメントアウト
*/
コメントアウトとは、「コード上に書いてあるけど、プログラムで無視される文字」です。
これが便利に使えて、 コード だけ書かれてても人の目ですぐにわからないことが多いかと思います。
そこで、「そのコードが何をやっているか、説明文が書かれている」状態にすることで、より良いコードになります。
大きなシステムになるほど、一度書けば終わり、ではなく、その後修正や追加機能などが出てくるので、誰でも読めるコードであることが重要になってきます。
その中で助けになるのが、コメントアウトとなるので、積極的に使っていきましょう。
また上記で書いたように色々なコメントアウトの仕方があります。
それぞれ使いどころを考え適切なコメントアウトを使用できるようになると、より読みやすいコードになりますので、用途に応じて使い分けていきましょう。
