JavaScript | continue文

JavaScript JavaScript
2020.07.12
スポンサーリンク

JavaScriptのcontinue文

繰り返しの中で「この回は飛ばしたい」を実現するのがcontinueです。初心者がつまずきやすいポイントを、例題と一緒に丁寧に解説します。

仕組みと使いどころ

  • 役割: 条件に当てはまったとき、その回の残り処理をスキップして、次の繰り返しに進みます。
  • 使える場所: for、while、do…while、for…of、for…in などのループ内。
  • 覚え方: 「スキップ＝continue」「完全終了＝break」。ここを間違えないと一気に楽になります。

基本の書き方と最小例

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue; // 3のときはスキップ
  }
  console.log(i);
}
JavaScript
  • 動き: 1, 2, 4, 5 が表示。3のときは「残りの処理（console.log）」を飛ばす。
  • ポイント: continue自体は何も表示しません。あくまで「その回の後半を飛ばす」だけ。

よくあるパターン例

偶数だけ処理したい（奇数をスキップ）

for (let i = 1; i <= 10; i++) {
  if (i % 2 !== 0) continue; // 奇数なら飛ばす
  console.log(i); // 偶数だけ表示
}
JavaScript
  • 狙い: フィルタリング（いらないものを除外）にcontinueは相性がいい。

特定の値を除外した配列処理

const names = ["Alice", "Bot", "Carol", "Bot", "Dave"];
for (const name of names) {
  if (name === "Bot") continue; // Botはスキップ
  console.log(name);
}
JavaScript
  • 狙い: 「NGワード」「無効なデータ」を飛ばしながら、他は普通に処理したいとき。

複数条件でのスキップ

for (let i = 1; i <= 20; i++) {
  if (i % 3 === 0 || i % 5 === 0) continue; // 3or5の倍数を除外
  console.log(i);
}
JavaScript
  • 狙い: 条件が増えても「除外したいものはcontinue」に集約すると読みやすい。

breakとの違いを体感する例

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    // try switching between continue and break
    continue; // ここを break にするとどうなる？
  }
  console.log(i);
}
console.log("loop end");
JavaScript
  • continueの場合: 出力は 1, 2, 4, 5。「3の回だけ飛ばしてその後も続行」。
  • breakの場合: 出力は 1, 2 で終了。「3に到達したらループ自体を終了」。

初心者がハマりやすい落とし穴

  • ラベル忘れ（多重ループでの誤解）: continueは「今いるループ」にしか効きません。外側のループを飛ばしたいならラベル付きcontinueが必要です。
outer: for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    if (j === 2) continue outer; // 外側の次周回へ進む
    console.log(`i=${i}, j=${j}`);
  }
}
JavaScript
  • 条件の反転ミス: 「処理したい条件」ではなく「飛ばしたい条件」で書くと考えやすいです。
// 悪い例：処理したい条件で長くなる
if (score >= 0 && score <= 100 && score % 2 === 0) {
  // ...
}

// 良い例：飛ばしたい条件を先にcontinueで排除
if (score < 0 || score > 100 || score % 2 !== 0) continue;
// 残りは「正常データだけ」
JavaScript
  • 後続処理が必須だと気づかない: continue後のコードは実行されないので、必要な更新やログ出力が飛ぶことがあります。必要ならcontinue前に行うか、条件を見直しましょう。

実践ミニ課題

課題1: 3の倍数を「Fizz」と表示し、それ以外の奇数はスキップ

  • ゴール: 1〜20で、3の倍数なら “Fizz”、偶数は無視、奇数のうち3の倍数以外はスキップ。
for (let i = 1; i <= 20; i++) {
  if (i % 2 !== 0 && i % 3 !== 0) continue; // 奇数のうち3の倍数以外は飛ばす
  if (i % 3 === 0) console.log("Fizz");
}
JavaScript

課題2: 無効データを捨てて合計を出す

  • 条件: numbersに負数とnullが混ざる。負数とnullはスキップして合計を計算。
const numbers = [10, -5, null, 7, 0, 13, null, -2];
let total = 0;

for (const n of numbers) {
  if (n === null || n < 0) continue; // 無効値を除外
  total += n;
}
console.log(total); // 10 + 7 + 0 + 13 = 30
JavaScript

課題3: 検索結果から広告を除外して最初の3件だけ表示

const results = [
  { title: "How to code", ad: false },
  { title: "Sponsored: Best IDE", ad: true },
  { title: "JS loops", ad: false },
  { title: "Sponsored: Learn fast", ad: true },
  { title: "Array methods", ad: false },
  { title: "Objects 101", ad: false },
];

let shown = 0;
for (const r of results) {
  if (r.ad) continue; // 広告は飛ばす
  console.log(r.title);
  shown++;
  if (shown === 3) break; // 3件出したら終了
}
JavaScript
  • ポイント: 「除外はcontinue」「上限はbreak」。役割分担が明確だと読みやすい。

いつcontinueを使うかの指針

  • 除外の明示: 「この条件のときは処理しない」を先に書くと、後続のロジックがスッキリします。
  • ネストの削減: いらないケースを早めに弾くことで、ifの入れ子を浅くできます（早期リターンのループ版）。
  • 読みやすさ優先: 条件が複雑になりすぎる場合は、関数化や配列のfilter/mapの利用と比較検討しましょう。

練習の次ステップ

  • ラベル付きcontinue/breakで多重ループを制御
  • for…of と配列メソッド（filter, map, forEach）の使い分け
  • continue前後で必要な副作用（ログ、カウンタ更新）がないかの確認癖をつける
前へ次へ
12345678910111213141516171819
スポンサーリンク
タイトルとURLをコピーしました