JavaScript breakとは？ループを抜ける方法を基礎から解説

みなさん、JavaScriptでループを書いている時に困ったことはありませんか？

「特定の条件でループを止めたい！」 「見つけたい値が見つかったら、そこで処理を終わりにしたい！」 こんな場面って、プログラミングではよくありますよね。

そんな時に活躍するのがbreak文です！ この記事では、JavaScriptのbreak文について基礎から丁寧に解説します。 初心者でも必ず理解できるよう、実際のコード例を使って説明していきますね。

break文って何？基本を理解しよう

break文の役割

break文は、ループや条件分岐を途中で抜けるための命令です。

簡単に言うと、「もう処理を続けなくていいよ」と指示する機能なんです。 break文を実行すると、現在実行中のループから即座に抜け出して、次の処理に移ります。

// 基本的な使い方
for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break; // i が 5 になったらループを抜ける
    }
    console.log(i);
}
// 出力: 0, 1, 2, 3, 4

このコードでは、iが5になった時点でループが終了します。 6, 7, 8, 9は表示されないんです。

for文でbreakを使ってみよう

配列から目的の値を見つける

配列の中から特定の値を探して、見つかったらそこで終了する例を見てみましょう。

// 配列から最初の偶数を見つける
let numbers = [1, 3, 5, 7, 9, 2, 4, 6, 8];
let foundEven = false;

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
        console.log(`最初の偶数は ${numbers[i]} です`);
        foundEven = true;
        break; // 偶数が見つかったらループを抜ける
    }
}

if (!foundEven) {
    console.log('偶数は見つかりませんでした');
}
// 出力: 最初の偶数は 2 です

このコードでは、2が見つかった時点でループが終了します。 4, 6, 8があっても、それらはチェックされません。

ユーザー検索機能

実際のWebアプリっぽい例も見てみましょう。

function findUser(users, targetId) {
    for (let i = 0; i < users.length; i++) {
        if (users[i].id === targetId) {
            console.log(`ユーザーが見つかりました: ${users[i].name}`);
            return users[i]; // 見つかったら即座に返す
        }
    }
    console.log('ユーザーが見つかりませんでした');
    return null;
}

let users = [
    { id: 1, name: '田中太郎' },
    { id: 2, name: '佐藤花子' },
    { id: 3, name: '鈴木一郎' }
];

let user = findUser(users, 2);

この例では、returnを使ってループを抜けています。 returnもbreakと同じような効果がありますが、関数全体も終了する点が違います。

パスワード入力の試行回数制限

let correctPassword = 'secret123';
let maxAttempts = 3;

for (let attempt = 1; attempt <= maxAttempts; attempt++) {
    let input = prompt(`パスワードを入力してください (${attempt}/${maxAttempts})`);
    
    if (input === correctPassword) {
        console.log('ログイン成功！');
        break; // 正しいパスワードが入力されたらループを抜ける
    } else if (attempt === maxAttempts) {
        console.log('試行回数が上限に達しました');
    } else {
        console.log('パスワードが間違っています');
    }
}

正しいパスワードが入力されたら、残りの試行回数があってもループが終了します。

while文でbreakを使ってみよう

無限ループからの脱出

while文でも、break文は同じように使えます。

let i = 0;
while (true) { // 無限ループ
    console.log(i);
    i++;
    
    if (i >= 5) {
        break; // 条件を満たしたらループを抜ける
    }
}
// 出力: 0, 1, 2, 3, 4

while (true)は無限ループを作る書き方です。 break文がないと、ずっと続いてしまいます。

ユーザー入力を受け付ける

function calculateSum() {
    let sum = 0;
    
    while (true) {
        let input = prompt('数値を入力してください（終了する場合は「quit」）');
        
        if (input === 'quit') {
            break; // 「quit」が入力されたらループを抜ける
        }
        
        let number = parseFloat(input);
        if (isNaN(number)) {
            console.log('有効な数値を入力してください');
            continue; // 無効な入力の場合は次の繰り返しへ
        }
        
        sum += number;
        console.log(`現在の合計: ${sum}`);
    }
    
    console.log(`最終的な合計: ${sum}`);
}

この関数では、「quit」と入力されるまで数値の入力を受け付けます。 breakがあることで、ユーザーがいつでも処理を終了できるんです。

switch文でbreakを使ってみよう

基本的なswitch文

switch文でも、break文は重要な役割を果たします。

function processGrade(grade) {
    switch (grade) {
        case 'A':
            console.log('優秀です！');
            break; // case を抜ける
        case 'B':
            console.log('良好です');
            break;
        case 'C':
            console.log('普通です');
            break;
        case 'D':
            console.log('もう少し頑張りましょう');
            break;
        default:
            console.log('無効な成績です');
    }
}

processGrade('A'); // 優秀です！

switch文では、break文を忘れると大変なことになります。

break文を忘れるとどうなる？

function badSwitch(value) {
    switch (value) {
        case 1:
            console.log('1です');
            // break; を忘れた場合
        case 2:
            console.log('2です');
            // break; を忘れた場合
        case 3:
            console.log('3です');
            break;
        default:
            console.log('その他');
    }
}

badSwitch(1);
// 出力: 1です
//       2です
//       3です

break文がないと、下のcaseも実行されてしまいます。 これを「フォールスルー」と呼びます。

ネストしたループでの注意点

内側のループだけ抜ける

ループの中にループがある場合、break文は一番内側のループだけを抜けます。

// 内側のループのみbreak
for (let i = 0; i < 3; i++) {
    console.log(`外側のループ: ${i}`);
    
    for (let j = 0; j < 5; j++) {
        if (j === 2) {
            break; // 内側のループのみ抜ける
        }
        console.log(`  内側のループ: ${j}`);
    }
}

// 出力:
// 外側のループ: 0
//   内側のループ: 0
//   内側のループ: 1
// 外側のループ: 1
//   内側のループ: 0
//   内側のループ: 1
// 外側のループ: 2
//   内側のループ: 0
//   内側のループ: 1

内側のループが終了しても、外側のループは続きます。

外側のループも抜けたい場合

外側のループも一緒に抜けたい場合は、ラベル付きbreakを使います。

// ラベル付きbreak文
outerLoop: for (let i = 0; i < 3; i++) {
    console.log(`外側のループ: ${i}`);
    
    for (let j = 0; j < 5; j++) {
        if (i === 1 && j === 2) {
            break outerLoop; // 外側のループも抜ける
        }
        console.log(`  内側のループ: ${j}`);
    }
}

console.log('ループ終了');

// 出力:
// 外側のループ: 0
//   内側のループ: 0
//   内側のループ: 1
//   内側のループ: 2
//   内側のループ: 3
//   内側のループ: 4
// 外側のループ: 1
//   内側のループ: 0
//   内側のループ: 1
// ループ終了

outerLoop:がラベルで、break outerLoop;でそのラベルのループを抜けられます。

実際のアプリで使えそうな例

配列の最大値を見つける

function findMaxValue(numbers) {
    if (numbers.length === 0) {
        return null;
    }
    
    let maxValue = numbers[0];
    
    for (let i = 1; i < numbers.length; i++) {
        if (numbers[i] > maxValue) {
            maxValue = numbers[i];
        }
        
        // 非常に大きな値が見つかったら処理を終了
        if (maxValue > 1000000) {
            console.log('十分に大きな値が見つかりました');
            break;
        }
    }
    
    return maxValue;
}

let numbers = [5, 2, 8, 1, 9, 1500000, 3];
console.log(findMaxValue(numbers)); // 1500000

この例では、100万を超える値が見つかったら、それ以上探索を続けません。

文字列のパターン検索

function findPattern(text, pattern) {
    for (let i = 0; i <= text.length - pattern.length; i++) {
        let match = true;
        
        for (let j = 0; j < pattern.length; j++) {
            if (text[i + j] !== pattern[j]) {
                match = false;
                break; // パターンが一致しない場合は内側のループを抜ける
            }
        }
        
        if (match) {
            console.log(`パターンが見つかりました: 位置 ${i}`);
            return i; // 最初の一致を見つけたら終了
        }
    }
    
    return -1; // 見つからなかった場合
}

let text = "Hello World Hello";
let pattern = "World";
console.log(findPattern(text, pattern)); // 6

パターンが見つかったら、それ以上探索する必要がありません。

breakとcontinueの違い

break文の動作

console.log('break文の例:');
for (let i = 0; i < 5; i++) {
    if (i === 2) {
        break; // ループを完全に抜ける
    }
    console.log(i);
}
// 出力: 0, 1

break文はループ全体を終了します。

continue文の動作

console.log('continue文の例:');
for (let i = 0; i < 5; i++) {
    if (i === 2) {
        continue; // 現在の繰り返しをスキップ
    }
    console.log(i);
}
// 出力: 0, 1, 3, 4

continue文は今回の繰り返しだけスキップして、ループは続きます。

使う時のコツと注意点

適切な使用場面

break文は、明確な終了条件がある場合に使いましょう。

// 良い例：明確な終了条件がある場合
function findFirstEven(numbers) {
    for (let i = 0; i < numbers.length; i++) {
        if (numbers[i] % 2 === 0) {
            return numbers[i]; // break の代わりに return を使用
        }
    }
    return null;
}

関数の中では、returnを使う方が自然な場合もあります。

デバッグ時のヒント

function debugLoop(items) {
    for (let i = 0; i < items.length; i++) {
        console.log(`Processing item ${i}: ${items[i]}`);
        
        if (items[i] === 'target') {
            console.log('Target found, breaking loop');
            break;
        }
    }
    
    console.log('Loop completed or broken');
}

console.logを使って、breakが正しく動作しているか確認できます。

まとめ

JavaScript のbreak文について、基本から実用例まで学びました。

重要なポイント

• break文はループを途中で抜けるための命令
• for文、while文、switch文で使える
• ネストしたループでは内側のループだけ抜ける
• ラベル付きbreakで外側のループも抜けられる

実際の使い道

• 配列から特定の値を見つける処理
• ユーザー入力の受け付け
• エラーが発生した時の処理停止
• 条件を満たしたらすぐに終了したい処理

break文を上手に使うと、効率的なプログラムが書けるようになります。 特に検索処理では、見つけたい値が見つかったらすぐに処理を終了できるので、プログラムが速くなるんです。

ぜひいろいろな場面でbreak文を試してみてくださいね！