JavaScriptのループと条件式を組み合わせる便利な使い方！初心者でもわかる繰り返し処理のコツ

1. ループ処理と条件式の基本

1. ループ処理と条件式の基本

JavaScriptのループ処理とは、同じ処理を何度も繰り返す仕組みです。forやwhileがよく使われます。条件式とは、ある条件が「正しい（true）」か「正しくない（false）」かを判定して、処理の流れを変えるための式です。

たとえば、「1から10までの数字のうち、偶数だけ表示したい」という場合、ループで1から10まで繰り返しながら条件式で偶数かどうかを判定します。

2. if文で条件を判定する

2. if文で条件を判定する

if文は「もし〜なら」という条件分岐の書き方です。ループの中で使うと、繰り返しごとに条件に合うかどうかを調べられます。

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {  // iが2で割り切れる（偶数）のとき
    console.log(i + "は偶数です");
  }
}

このコードは1から10までの数字を順番に調べて、偶数だけを画面に表示します。

3. elseを使って条件に合わない場合の処理も書ける

3. elseを使って条件に合わない場合の処理も書ける

if文にはelseという「もし条件に合わなかったら」という場合の処理も書けます。これで条件に合う場合と合わない場合の両方を扱えます。

for (let i = 1; i <= 5; i++) {
  if (i % 2 === 0) {
    console.log(i + "は偶数です");
  } else {
    console.log(i + "は奇数です");
  }
}

偶数と奇数で表示内容を変えて、わかりやすくしています。

4. continueで処理をスキップする

4. continueで処理をスキップする

continueは「このループの今の回はここで終わりにして、次の回に進んでね」という意味です。たとえば、奇数のときは処理をスキップしたいときに使います。

for (let i = 1; i <= 5; i++) {
  if (i % 2 !== 0) {
    continue;  // 奇数はスキップ
  }
  console.log(i + "は偶数です");
}

このコードでは、奇数の場合は処理を飛ばして偶数だけ表示しています。

5. breakでループを途中で終わらせる

5. breakでループを途中で終わらせる

breakは「ループをそこで完全に終わらせる」という命令です。条件を満たしたら、もう繰り返しを続けたくない場合に使います。

for (let i = 1; i <= 10; i++) {
  if (i > 5) {
    break;  // iが5を超えたらループ終了
  }
  console.log(i);
}

このコードは1から5までの数字だけ表示します。6以上は表示しません。

6. 複数の条件を組み合わせる

6. 複数の条件を組み合わせる

条件は&&（そして）や||（または）を使って複数の条件を組み合わせられます。

たとえば、「1から10までのうち、偶数かつ5以下の数字だけ表示したい」場合はこう書きます。

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0 && i <= 5) {
    console.log(i + "は偶数で5以下です");
  }
}

7. 実践的な例：配列とループと条件式の組み合わせ

7. 実践的な例：配列とループと条件式の組み合わせ

配列は複数のデータをまとめて扱う便利な仕組みです。ループと条件式を組み合わせて、配列の中から条件に合うものだけを処理できます。

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

for (let i = 0; i < fruits.length; i++) {
  if (fruits[i] === "みかん") {
    console.log("みかんは好きな果物です！");
  } else {
    console.log(fruits[i] + "も美味しいですね。");
  }
}

このコードは果物のリストから「みかん」のときだけ特別なメッセージを表示し、それ以外は普通のメッセージを表示しています。

8. 条件式とループで効率よくプログラムを作ろう

8. 条件式とループで効率よくプログラムを作ろう

ループと条件式をうまく組み合わせると、たくさんのデータの中から必要な情報だけを取り出したり、特別な処理をしたりできます。これによりプログラムが便利で効率的になります。

難しそうに感じるかもしれませんが、基本の構造は単純です。ぜひ繰り返し練習して慣れていきましょう。

9. if文の条件式まとめ

9. if文の条件式まとめ

• ===：左と右が完全に同じか比較（型も値も同じ）
• !==：左と右が違うか比較
• &&：両方の条件が真（true）なら真
• ||：どちらかの条件が真（true）なら真
• !：条件の真偽（true/false）を反転

これらを使いこなせるようになると、より複雑な条件も簡単に扱えます。

10. 最後に

10. 最後に

JavaScriptのループと条件式は、一緒に使うことでプログラムの幅がぐっと広がります。ぜひ今回の例を参考に、自分でもコードを書いて試してみてください。

まとめ

まとめ

ここまでJavaScriptにおけるループ処理（繰り返し）と条件分岐（if文）を組み合わせた高度な制御方法について詳しく解説してきました。プログラミングの現場において、単に同じ処理を繰り返すだけでなく、特定の条件に応じて「動きを変える」技術は、実用的なアプリケーションを構築する上で欠かせない要素です。

今回の重要ポイントの振り返り

JavaScriptの繰り返し処理をマスターするためには、以下の3つの制御概念を正しく理解し、使い分けることが重要です。これらを適切に配置することで、コードの可読性が高まり、バグの少ないプログラムを作成できるようになります。

• フィルタリング（選別）： if文を用いて、特定のデータのみを処理対象にする手法です。例えば、ユーザーリストの中から「20歳以上」の人だけを抽出して表示するといった処理がこれに該当します。
• スキップ（継続）： continue文を使い、不要なデータの処理を飛ばして次の繰り返しへ移行します。エラーデータや空文字など、処理を続行できない要素がある場合に非常に有効です。
• 中断（終了）： break文を使い、目的のデータが見つかった瞬間にループを完全に終了させます。これにより、無駄な計算リソースの消費を抑え、パフォーマンスの向上に繋がります。

さらに一歩進んだ応用テクニック：多重条件とネスト

実際の開発現場では、より複雑な条件設定が求められる場面が多々あります。例えば、「特定の期間内で、かつ在庫がある商品だけを表示する」といった場合です。このようなケースでは、論理演算子（&& や ||）を活用することで、条件式を1行でスッキリと記述できます。また、ループの中にさらにループを入れる「二重ループ」と条件式を組み合わせることで、表形式のデータ（行列）の処理も可能になります。

実践的なプログラム例：スコア判定システムの構築

学んだことを活かして、テストの点数リストを解析し、合格者の平均点を計算するような、より実践に近いサンプルコードを見てみましょう。ここでは、これまでの知識を総動員して、条件分岐とスキップ処理を組み合わせています。

const scores = [45, 82, 60, 95, 30, 77]; // テストの点数リスト
let totalPassScore = 0; // 合格者の合計点
let passCount = 0;      // 合格者の人数

for (let i = 0; i < scores.length; i++) {
  const currentScore = scores[i];

  // 60点未満は不合格としてスキップ
  if (currentScore < 60) {
    console.log(currentScore + "点は不合格です。スキップします。");
    continue;
  }

  // 合格者の処理
  console.log(currentScore + "点は合格です！計算に含めます。");
  totalPassScore += currentScore;
  passCount++;

  // 90点以上の優秀者がいたら、特別なメッセージを出してループを途中で抜ける（例として）
  if (currentScore >= 90) {
    console.log("素晴らしい！90点以上の成績優秀者が現れたので集計を優先終了します。");
    break;
  }
}

const average = totalPassScore / passCount;
console.log("合格者の平均点（集計範囲内）: " + average);

このコードの実行結果は、コンソールで以下のように表示されます。

45点は不合格です。スキップします。
82点は合格です！計算に含めます。
60点は合格です！計算に含めます。
95点は合格です！計算に含めます。
素晴らしい！90点以上の成績優秀者が現れたので集計を優先終了します。
合格者の平均点（集計範囲内）: 79

TypeScriptでの型安全なループ処理

最近のWeb開発では、JavaScriptの拡張版であるTypeScriptが主流となっています。TypeScriptを使うと、配列の中身が「数値なのか文字列なのか」を厳密に定義できるため、条件式での比較ミスを未然に防ぐことができます。型定義（Type Definition）意識することで、より堅牢なプログラムが書けるようになります。

interface User {
  name: string;
  age: number;
  isActive: boolean;
}

const users: User[] = [
  { name: "田中", age: 25, isActive: true },
  { name: "佐藤", age: 17, isActive: true },
  { name: "鈴木", age: 30, isActive: false }
];

for (const user of users) {
  // アクティブかつ成人しているユーザーのみを抽出
  if (user.isActive && user.age >= 20) {
    console.log(`${user.name}さんはサービスを利用可能な成人ユーザーです。`);
  } else if (!user.isActive) {
    console.log(`${user.name}さんは現在アカウントが無効です。`);
  } else {
    console.log(`${user.name}さんは未成年のため、一部機能が制限されます。`);
  }
}

このように、オブジェクトのプロパティを条件式の対象にすることで、複雑なデータ構造も自由自在に操ることができるようになります。プログラミングは、こうした小さな部品の組み合わせで成り立っています。最初は難しく感じるかもしれませんが、自分で書いたコードが思い通りに動いた時の達成感は格別です。

今回の学習を通じて、JavaScriptの「制御フロー」の基礎をしっかりと固めることができました。次は、このループ処理を関数（function）の中に組み込んだり、配列のメソッドである forEach や filter、map といった、よりモダンで洗練された書き方にも挑戦してみると、さらにエンジニアとしてのスキルが飛躍的に向上するはずです。焦らず、一歩ずつ進んでいきましょう。