| No | 目次 |
|---|---|
| 1 | はじめに |
| 2 | for文とwhile文 |
| 3 | for文を使ってループ処理を行う場合 |
| 4 | while文を使ってループ処理を行う場合 |
| 5 | お約束 |
| 6 | おわり |
##はじめに
同じような処理を毎回書いていると、はっきり言って効率が悪いです。
そんな時に繰り返し処理をしてくれるのがfor文とwhile文です。
とても便利ですが、少し怖い部分もありますので、
繰り返し処理を行う際に絶対に意識するお約束についても解説していきます。
##for文とwhile文
0から10までの数字が表示されるプログラムをfor文を使った場合とwhile文を作った場合の2種類のケースを紹介します。
どちらを使ってもこちらのように表示できます↓
##for文を使ってループ処理を行う場合
HTMLはこのようになっています↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>for</title>
</head>
<body>
<script src="for.js"></script>
</body>
</html>
JavaScriptはこのようになっています↓
for (let i = 0; i < 11; i++) {
document.write(i + '<br>');
}
仕組みを見てみましょう↓
// ------------------------------------
// for(初期化; 繰り返し; 更新処理){
// 繰り返したい処理
// }
// ------------------------------------
それでは、解説をしていきます。
for (初期化; 条件; 更新処理;) と記載します。
初期化は、ループをカウントする変数を基本的に定義します。
ここで定義した変数はその for 文内でしか使えません。
条件は、どこまでループするのかを定義します。
この条件が満たされればループは終了します。
又、満たされなければ無限にループを続けます。
変化は、1回ループが完了する毎に実行されます。
現在は、10より大きい値が出力されていませんので正しくwhile文の条件式を処理し終了したことがわかります。
##while文を使ってループ処理を行う場合
HTMLはこのようになっています↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>while</title>
</head>
<body>
<script src="while.js"></script>
</body>
</html>
JavaScriptはこのようになっています↓
let i = 0;
while (i < 11) {
document.write(i + '<br>')
i++;
}
仕組みを見てみましょう↓
while (条件式) {
実行する処理;
}
それでは解説していきます。
whileのカッコ内にある条件式が正（true)の間はwhile内の処理を繰り返し実行します。
条件式が誤り(false)になった場合にはwhile文を抜けて次の処理に移ります。
又、for文と同じで10より大きい値が出力されていませんので、
正しくwhile文の条件式を処理し終了したことがわかります。
##お約束
⚠️ i++のように数値を増やす処理を絶対に書き忘れないようにしてください
「i++」という後値インクリメントを使い、変数の値を一ずつ増やします。
書き忘れると無限にループが起こり、パソコンに負担がかかり、
最悪の場合パソコンがクラッシュします。
必ずtrueがfalseになる(更新処理が終わる)ようにしましょう。
それでも無限ループが起きた際にはブラウザを強制終了しましょう！
##おわり
ご覧いただきありがとうございました。
また他の記事でお会いしましょう〜👋