レッスン3：条件分岐と繰り返し——プログラムに判断と反復を持たせる

このレッスンで学ぶこと

• if・else if・elseで状況に応じた処理を書ける
• 比較演算子と論理演算子を組み合わせた条件式を作れる
• forとwhileによる繰り返しを書ける
• for...ofで配列の中身を順番に処理できる

---

レッスン2では、変数とデータ型、テンプレートリテラルを学びました。このレッスンでは、変数の値に応じて違う処理を実行する「条件分岐」と、同じ処理を何度も繰り返す「繰り返し（ループ）」を学びます。これらが書けるようになると、プログラムに「判断」と「反復」の力が加わります。

条件分岐——状況に応じて処理を変える

「もし〇〇なら××する」という処理を書くのが条件分岐です。JavaScriptでは if 文を使います。

my-website フォルダの assets/js/main.js を開き、これまでのコードを残したまま（または整理して）、次のコードを試してみてください。

const score = 75;

if (score >= 80) {
  console.log("合格です。よくできました。");
} else {
  console.log("不合格です。もう一度復習しましょう。");
}

score の値が80以上なら「合格です」、そうでなければ「不合格です」と表示されます。今は75なので「不合格です」が表示されるはずです。score の値を85や90に変えて再読み込みすると、表示が変わるのが確認できます。

if文の基本構文

if (条件式) {
  条件が true のときに実行する処理
} else {
  条件が false のときに実行する処理
}

else のブロックは省略してもOKです。「条件に当てはまるときだけ何かしたい」場合は、if だけで十分です。

const isLoggedIn = true;
if (isLoggedIn) {
  console.log("ログイン済みです。");
}

💡 ポイント 条件式は最終的に true か false のどちらかになります。比較演算子（===、<、> など）や論理演算子（&&、||、!）を使って条件式を組み立てます。

else ifで複数の条件を扱う

3つ以上の分岐がある場合は、else if を使います。条件は上から順に評価され、最初に当てはまったブロックだけが実行されます。

const score = 75;

if (score >= 90) {
  console.log("評価：A");
} else if (score >= 70) {
  console.log("評価：B");
} else if (score >= 50) {
  console.log("評価：C");
} else {
  console.log("評価：D");
}

score が75の場合、score >= 90 は false なので次へ進み、score >= 70 が true なので「評価：B」が表示されます。残りの条件は評価されません。

⚠️ 注意 else if の順番は重要です。例えば上の例で score >= 50 を最初に書くと、75も90も100もすべて「評価：C」になってしまいます。範囲が狭い条件から広い条件の順に書く（または、逆順に書く）のが基本です。

論理演算子で条件を組み合わせる

レッスン2で学んだ論理演算子を、条件分岐の中で活用してみましょう。

const age = 25;
const hasTicket = true;

if (age >= 18 && hasTicket) {
  console.log("入場できます。");
} else {
  console.log("入場できません。");
}

&&（かつ）で2つの条件を結ぶと、両方が true のときだけ全体が true になります。「18歳以上」かつ「チケットあり」の両方を満たすときだけ入場可、という処理です。

||（または）も同様に使えます。

const day = "土";
if (day === "土" || day === "日") {
  console.log("週末です。");
}

繰り返し——同じ処理を何度も実行する

同じような処理を何度も書くのは大変です。プログラムには「同じ処理を指定回数くり返す」「条件を満たす間くり返す」といった仕組みがあります。これを「繰り返し」または「ループ」と呼びます。

JavaScriptには複数の繰り返し構文があります。本レッスンでは、特によく使う for 文・while 文・for...of 文の3つを紹介します。

for文——指定回数の繰り返し

「○回くり返したい」というときに使うのが for 文です。

for (let i = 0; i < 5; i++) {
  console.log(`これは${i + 1}回目です。`);
}

実行すると、コンソールに次の5行が表示されます。

これは1回目です。
これは2回目です。
これは3回目です。
これは4回目です。
これは5回目です。

for文の構造

for 文は () の中に3つの要素をセミコロンで区切って書きます。

for (初期化; 条件式; 更新式) {
  繰り返す処理
}

• 初期化：ループ開始時に1回だけ実行（例：let i = 0）
• 条件式：ループを続けるかの判定（例：i < 5）
• 更新式：1周ごとに実行（例：i++ は i = i + 1 の省略形）

最初は手品のように感じるかもしれませんが、「i が0から始まって、5未満の間、毎回1ずつ足しながらくり返す」と読めば理解できます。

💡 ポイント for文の i という変数名は「index（番号）」の頭文字で、ループ用変数として広く使われる慣例です。たいていの場合、ループ内でしか使わない仮の変数なので、短く i で構いません。

while文——条件を満たす間くり返す

回数があらかじめ決まっていない場合は、while 文を使います。

let n = 1;
while (n <= 100) {
  console.log(n);
  n = n * 2;
}

このコードは「n を2倍ずつしながら、100以下の間くり返す」処理です。n は1, 2, 4, 8, 16, 32, 64と表示され、128になった時点で条件を満たさなくなりループが終わります。

⚠️ 注意 while 文の中で「条件をいつか false にする処理」を書き忘れると、永遠にループが終わらない「無限ループ」になります。ブラウザがフリーズしたように見えることがあるので、書くときは終了条件を必ず確認しましょう。

配列を先取りで紹介——リストとしてのデータ

次の for...of を学ぶ前に、レッスン5で詳しく扱う「配列」を先取りで紹介します。

配列は、複数の値をまとめて扱うためのデータ型です。角括弧 [ ] で囲み、カンマで区切って書きます。

const fruits = ["りんご", "みかん", "ぶどう"];

console.log(fruits[0]);  // "りんご"
console.log(fruits[1]);  // "みかん"
console.log(fruits.length);  // 3

fruits[0] の 0 は配列の番号で、これを「インデックス」と呼びます。インデックスは0から始まります。これはJavaScriptに限らず、多くのプログラミング言語に共通する決まりです。fruits.length で配列の長さ（要素の数）がわかります。

詳しい配列の操作はレッスン5で扱います。ここでは「配列は値の並びをまとめて持つもの」というイメージだけ持ってください。

for...of文——配列の中身を順番に処理する

配列の各要素に対して同じ処理をしたいときに、最も書きやすいのが for...of 文です。

const fruits = ["りんご", "みかん", "ぶどう"];

for (const fruit of fruits) {
  console.log(`好きな果物：${fruit}`);
}

これだけで、配列の中身が順番に fruit という変数に入って、各要素についての処理が実行されます。出力はこうなります。

好きな果物：りんご
好きな果物：みかん
好きな果物：ぶどう

通常の for 文でも書けますが、for...of のほうが圧倒的に読みやすく、書き間違いも減ります。配列を順番に処理したい場面では、まず for...of を選びましょう。

📝 補足 似た構文に for...in がありますが、これはオブジェクトのプロパティ名を取り出すための構文で、配列処理には向きません。配列の要素を順番に取り出したいときは for...of を使う、と区別しておけば十分です。

実習：配列とif文を組み合わせる

ここまでの内容を組み合わせた実習です。main.js を次のように書き換えてください。

const scores = [85, 62, 78, 44, 91, 55];

for (const score of scores) {
  if (score >= 80) {
    console.log(`${score}点：合格（A）`);
  } else if (score >= 60) {
    console.log(`${score}点：合格（B）`);
  } else {
    console.log(`${score}点：不合格`);
  }
}

保存してブラウザを再読み込みすると、コンソールに次の6行が表示されます。

85点：合格（A）
62点：合格（B）
78点：合格（B）
44点：不合格
91点：合格（A）
55点：不合格

配列の各要素に対して、条件分岐で評価を変えています。これだけで、点数のリストから一気に評価レポートが作れたことになります。

💡 ポイント 「配列の各要素に対して条件分岐で処理を変える」は、Webアプリでも頻出のパターンです。商品リストから在庫切れだけ別表示にする、ToDoの項目から完了済みだけ取り出す、といった処理が同じ書き方で実現できます。

まとめ

このレッスンでは、以下のことを学びました。

• if・else if・elseで条件に応じた処理を書ける
• 論理演算子（&&、||、!）で複数の条件を組み合わせられる
• for文は指定回数の繰り返し、while文は条件を満たす間の繰り返しに使う
• インデックスは0から始まる
• for...of文は配列の各要素に対して同じ処理をするときに最も読みやすい
• 配列とif文の組み合わせは、Webアプリで頻出する基本パターン

次のレッスンでは「関数」を学びます。同じような処理を何度も書く代わりに、処理に名前を付けて呼び出せるようにする仕組みです。コードがぐっと整理しやすくなります。

---

確認クイズ

このレッスンの理解度をチェックしましょう。

回答する もう一度挑戦