JavaScript：条件分岐と繰り返し（書き方を固める）

投稿日：2026-01-13

音声

※ AI音声で読み上げます

switchは値が離散（具体的な定数）で分岐が多いときに向いています。caseごとに処理が分かれる場合に見通しがよくなりますが、fall-through（フォールスルー）は要チェックです。簡単なラベル付けや複数caseを同じ処理にまとめるときに有効です。

条件が式や範囲に依存する場合はif/elseの方が自然です。

for / for...of / while の違い

forはインデックスを使ったループに向いており、開始・終了・増分を明示できます。for...ofは配列や文字列などの反復可能オブジェクト（イテラブル）を要素単位で扱うのに適しています。whileは繰り返し回数が事前にわからない場合や、条件が外部で変わるケースに便利です。どれを使うかで読みやすさと意図の伝わりやすさが変わります。

break/continueの使い方

breakはループを完全に抜けるとき、continueはその反復をスキップして次に進むときに使います。

検索で最初に見つけた要素で終了する場合はbreak、特定の条件のときだけ処理を飛ばしたいときはcontinueを使うと、余分なネストを作らずに書けます。

switch内でのbreakはフォールスルー防止のためによく使われます。

早期returnでネストを浅くする

関数の冒頭で入力チェックや異常系を早めに返すと、残りの処理をインデントせずに書けて可読性が上がります。ガード節は「問題があるならすぐ返す」という考え方で、例外的な処理を先に片付けてから主処理を書くイメージです。これによりifの入れ子を避け、主要ロジックが左に揃って読みやすくなります。

最小コード：
貼り付け場所：CodePenの場合はHTML欄にHTML、JS欄に以下のJavaScriptを貼り付けてください。HTML欄にはボタンや出力用要素を用意しています。

<input id="num" type="number" placeholder="数値を入力" />
<button id="run">実行</button>
<pre id="out"></pre>

// ボタン要素（id="run"）と、結果表示用の要素（id="out"）を取得
const btn = document.getElementById('run');
const out = document.getElementById('out');

// 入力された文字（input）を受け取り、判定結果の文章を返す関数
function analyze(input) {
  // 入力が空、または数字として扱えないならメッセージを返して終了
  if (input === '' || isNaN(input)) return '入力が必要です';

  // 文字を数字に変換
  const n = Number(input);

  // ここに結果の文章を追加していく（\n は改行）
  let s = '';

  // n が正/負/ゼロ どれかを判定
  if (n > 0) s += 'positive\n';
  else if (n < 0) s += 'negative\n';
  else s += 'zero\n';

  // n を 3 で割った余り（n % 3）で分岐
  switch (n % 3) {
    case 0:
      s += 'mod 3 == 0\n'; // 3で割り切れる
      break;
    default:
      s += 'mod 3 != 0\n'; // 3で割り切れない
  }

  // i を 0 から増やしながら繰り返す（最大5回まで）
  // Math.min(n, 5) なので、n が大きくても 5 回で止まる
  for (let i = 0; i < Math.min(n, 5); i++) {
    // i が 2 のときだけスキップして次の回へ
    if (i === 2) continue;

    // バッククォート `...` を使うと、${i} のように変数を文字に混ぜられる
    s += `for i=${i}\n`;
  }

  // 配列（複数の値をまとめたもの）を用意
  const arr = [10, 20, 30];

  // 配列の中身を1つずつ取り出して文章に追加
  for (const v of arr) s += `of:${v}\n`;

  // 条件が true の間、繰り返す（ここでは 0 と 1 の2回）
  let i = 0;
  while (i < 2) {
    s += `while:${i}\n`;
    i++; // i を 1 増やす
  }

  // ここまで作った文章を返す
  return s;
}

// ボタンが押されたら実行する処理
btn.addEventListener('click', () => {
  // id="num" の入力欄の文字を取り出して analyze に渡す
  // 返ってきた文章を out に表示する
  out.textContent = analyze(document.getElementById('num').value);
});

実行方法：CodePenに貼って「Run」するか、上のHTMLをindex.html、JSを外部スクリプトでブラウザに読み込ませて開きます。ボタンをクリックすると処理が動きます。

確認方法：画面の入力欄に数値を入れて実行ボタンを押すと #out に結果が表示されます。Consoleでログを確認する場合は console.log に出力するよう一時変更して試せます。

よくあるミス：比較で == を使って型変換に頼ることがあります。原因は型の違いを意識しないことです。直し方は厳密等価演算子 === を使い、必要であれば Number() や String() で明示的に型変換することです。

使い分けの基準：インデックスや逆方向ループが必要なときは for、配列要素を順に処理するだけなら for...of を優先します。配列操作で新しい配列が欲しいときは map、条件で絞るなら filter を使うと宣言的で読みやすくなります。オブジェクトの固定キーでの分岐はオブジェクトマップ（辞書）で代替可能です。

注意（ここだけ）

if (x = 1) のような「代入」を条件に書くミスが起きがちです。比較は === を基本にします。
switch は break を忘れるとフォールスルーします。意図がない限り必ず入れます。
ループの「回数・境界（< と <=）」はバグの温床です。配列は i < arr.length を基本にします。

要約

if/else は少数分岐で直感的です。深いネストは早期returnで回避します。
switch は離散値の多分岐で有効です。フォールスルーに気を配ります。
for はインデックス管理に向きます。for...of は要素列の反復に向き、while は回数不定の繰り返しに向きます。
break でループから脱出します。continue で現在の反復をスキップして可読性を保ちます。
早期return（ガード節）を使うとネストが浅くなり、主要ロジックが見やすくなります。

JavaScript：条件分岐と繰り返し（書き方を固める）

音声

目次

if/elseの基本と読みやすい並べ方

switchの使いどころ

for / for...of / while の違い

break/continueの使い方

早期returnでネストを浅くする

注意（ここだけ）

要約