continue を使った現実的な場面を 6つの例(コード+出力+解説)で紹介。各例はそのままコピーしてブラウザのコンソールや Node.js で試せるよ。
1) 配列を走査して「条件に合うものだけ処理する」
配列を for…of で回して、条件に合わない要素を早めにスキップするパターン。filter を使う代わりにループ内で処理時の条件を減らせる。
const items = [5, 12, 8, 130, 44];
for (const n of items) {
if (n < 10) continue; // 10 未満は処理しない
console.log(`${n} は10以上`);
}
JavaScript出力:
12 は10以上
130 は10以上
44 は10以上
解説: if を前置して continue する「ガード節」にするとネストが浅く読みやすい。
2) 入力行(CSVやテキスト)の前処理 — 空行やコメントを無視する
ファイルやフォーム入力の各行を処理する際、空行・コメント行をスキップして本処理だけを行う。
const lines = [
"# コメント: ヘッダ",
"name,age",
"",
"Alice,30",
"Bob, ",
" ", // 空白だけの行
"Charlie,25"
];
for (const raw of lines) {
const line = raw.trim();
if (!line || line.startsWith("#")) continue; // 空行・コメントは無視
const [name, ageStr] = line.split(",");
const age = parseInt(ageStr, 10);
if (Number.isNaN(age)) {
console.log(`${name} の年齢が不正なのでスキップ`);
continue; // 年齢が不正なら次の行へ
}
console.log(`${name} は ${age} 歳`);
}
JavaScript出力:
name は NaN 歳 // ヘッダの扱いに注意(実運用ではヘッダ処理を別に)
Alice は 30 歳
Bob の年齢が不正なのでスキップ
Charlie は 25 歳
解説: 入力の検査 → 問題なら continue でスキップするのが実用的。
3) フォームバリデーションで「エラー行を飛ばす」
複数フィールドをチェックして、あるフィールドでエラーならそのレコードの残りチェックをスキップして次へ。
const users = [
{name: "A", email: "a@example.com"},
{name: "", email: "b@example.com"}, // 名前が空
{name: "C", email: "invalid-email"} // メールが不正
];
for (const u of users) {
if (!u.name) {
console.log("名前が空のためスキップ:", u);
continue;
}
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(u.email)) {
console.log("メール不正のためスキップ:", u);
continue;
}
// ここまで来れば両方 OK
console.log("保存します:", u);
}
JavaScript出力:
保存します: {name: "A", email: "a@example.com"}
名前が空のためスキップ: {name: "", email: "b@example.com"}
メール不正のためスキップ: {name: "C", email: "invalid-email"}
解説: バリデーションは早期リターン(ここでは continue)で簡潔に。
4) ネストしたループで「内側条件により外側の次へ進みたい」 — ラベル付き continue
2重ループで、内側で見つけた条件により 外側の次のイテレーション に進めたい場合。
outer: for (let i = 1; i <= 3; i++) {
for (let j = 1; j <= 4; j++) {
if (j === 3) {
// 外側ループ i を次に進める(現在の i の残りは処理しない)
continue outer;
}
console.log(`i=${i}, j=${j}`);
}
}
JavaScript出力:
i=1, j=1
i=1, j=2
i=2, j=1
i=2, j=2
i=3, j=1
i=3, j=2
解説: 内側で j===3 が見つかったらその i 回 の残りを破棄してすぐ i++ するイメージ。ラベルは便利だが乱用は可読性を落とすので注意。
5) 非同期処理風(擬似) — 失敗したアイテムだけスキップして続行
実際の await を含むコードでも、条件によってはその回だけ飛ばして次へ行きたいことがある。以下は擬似例(同期版)だが考え方は同じ。
const tasks = [
{id:1, ready:true},
{id:2, ready:false},
{id:3, ready:true}
];
for (const t of tasks) {
if (!t.ready) {
console.log(`task ${t.id} は準備未完了。スキップ。`);
continue;
}
// 実際は await doTask(t) のような処理
console.log(`task ${t.id} を処理します`);
}
JavaScript出力:
task 1 を処理します
task 2 は準備未完了。スキップ。
task 3 を処理します
解説: 途中で失敗・未準備の要素があれば continue でスキップし、残りの要素は続けて処理できる。
6) パフォーマンス的な小技:余計な処理を避ける(早期スキップ)
ループ内で重い処理(文字列操作や計算)がある場合、まず軽い条件で continue して重い処理を回避すると効率的。
const big = Array.from({length: 100000}, (_, i) => i);
for (const n of big) {
if (n % 2 !== 0) continue; // まず簡単なチェック(奇数はスキップ)
// ここに重い処理があると仮定
const s = String(n).repeat(100); // 重い処理(例)
// ...処理続く
}
console.log("done");
JavaScript解説: コストの低いチェックを先に持ってくると、重い処理の呼び出し回数を下げられる。
練習問題(実践向け・自己確認用)
問題A: 配列のオブジェクトから active: true のものだけ console.log したい。continue を使って実装してみて。
答え例:
const arr = [{id:1, active:false}, {id:2, active:true}];
for (const a of arr) {
if (!a.active) continue;
console.log(a);
}
JavaScript問題B: 2重ループで、内側ループで found === true になったら その外側ループの残りをスキップして次の外側イテレーションに行きたい。ラベルを使って実装してみて。
答え例:
outer: for (let i = 0; i < 3; i++) {
for (let j = 0; j < 4; j++) {
if (someCondition(i, j)) {
continue outer;
}
}
}
JavaScript最後に — 実務でのベストプラクティス
- 単純な「この回だけスキップ」は
continueが最も読みやすい。 - ただし、複雑な条件や深いネストでは
continueが混ざると読みにくくなる → 関数に分ける、早期ガード節にまとめる、または配列メソッド(filter,map)を組み合わせることを検討。 - ラベル付き
continueは強力だが、コメントを必ず付けるか、代替(ロジック分割)を検討。
