現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

基礎

【JavaScript入門】breakとcontinueの使い方|ループ処理を制御する基本構文を初心者向けに解説

投稿日:2019年4月16日 更新日:

JavaScriptのbreakとcontinueの使い方|繰り返し処理を制御する基本構文を解説

JavaScriptの繰り返し処理(for / while / do…while)や switch 文では、
処理の流れを途中で制御したい場面があります。

そのときに使うのが breakcontinue です。

  • break:処理を途中で抜ける
  • continue:その回の処理をスキップして先頭に戻る



break|処理から抜け出す

break は、次のような場面で使用します。

  • for / while / do…while のループを途中で終了したい
  • switch 文で case の処理を終わらせたい

ループが入れ子になっている場合は、一番内側のループだけを抜けます。

switch 文では break を書かないと、次の case に処理が流れてしまうため注意が必要です。

continue|その回の処理をスキップして先頭に戻る

continue は、ループの中で「この回の処理はスキップしたい」というときに使います。

  • その回の処理を中断し、次のループへ進む
  • 入れ子の場合は一番内側のループに適用される



例:パスワードチェックを3回まで繰り返す

次の例では、ユーザーにパスワードを3回まで入力させ、
途中で正しいパスワードが入力されたら break でループを抜けます。

check = false;
for (i = 0; i < 3; i++) { // 最大3回繰り返す
    pass = prompt(“パスワードを入力してください。”, “********”);

    if (pass == “password”) {
        check = true;
        break; // 一致したらループ終了
    }

    alert(“パスワードが違います。”);
}

if (check == false) {
    location.href = “nogood.html”; // 3回失敗したら別ページへ
}

このように、break を使うことで「条件を満たしたら即終了」という処理が簡単に書けます。

JavaScript 初心者におすすめの学習書籍

書籍で学ぶのが向いている人

  • 紙の本でじっくり読み込みたい
  • 体系的にまとまった教材で学びたい
  • ネット記事だけだと情報が断片的に感じる

JavaScriptは「文法 → DOM → イベント → 非同期処理」という順で学ぶと理解しやすいです。
以下の書籍はこの流れに沿って学べるため、初心者でも挫折しにくい構成になっています。

いちばんやさしい JavaScript の教本

手を動かしながら JavaScript を学びたい方には、初心者向けにやさしく解説された実践型の入門書があります。
実際に動くサンプルを使って学べるため、基本をしっかり身につけたい方に最適です。

この本で解決できること:

  • JavaScriptの基本文法をやさしく理解できる
  • 手を動かしながら学べるため、挫折しにくい
  • 「まず動くものを作ってみたい」が実現できる

いちばんやさしい JavaScript の教本

確かな力が身につくJavaScript「超」入門

JavaScriptの基礎を体系的に学びたい方には、こちらの書籍がとても分かりやすくおすすめです。
初心者がつまずきやすいポイントを丁寧に解説している入門書です。

この本で解決できること:

  • JavaScriptの基礎を体系的に学び直せる
  • 初心者がつまずきやすい部分を重点的に理解できる
  • 実務で使えるレベルの基礎力を身につけられる

確かな力が身につくJavaScript「超」入門

体系的に学びたい方へ(スクールという選択肢)

独学の限界を感じやすいポイント

  • エラーの原因が分からず、調べても解決できない
  • 学習の順番に自信が持てない
  • モチベーションが続かず、途中で止まってしまう
  • 実務レベルのコードレビューを受ける機会がない

こういった悩みが増えてきたら、「質問できる環境」や「学習ロードマップを一緒に考えてくれる人」がいるだけで、学習効率は大きく変わります。

無料相談で得られるメリット

  • あなたの現在のレベルに合わせた学習ロードマップを作成してくれる
  • 独学で詰まりやすいポイントを事前に教えてくれる
  • 学習方法の改善点をプロがアドバイスしてくれる
  • エンジニア転職を考えている場合、キャリア相談も可能

JavaScript を独学で学んでいると、「もっと効率よく理解したい」「プロに質問しながら進めたい」と感じる方も多いです。
そのような方には、未経験からエンジニアを目指せる DMM WEBCAMP の学習コースも選択肢のひとつです。
無料相談では、学習ロードマップの作成やキャリア相談など、独学では得られないサポートを受けられます。

DMM WEBCAMP 学習コース(無料相談はこちら)



まとめ

  • break:ループや switch 文から抜ける
  • continue:その回の処理をスキップして次のループへ
  • break は switch 文で特に重要(書かないと処理が流れる)
  • ループ制御を理解すると、複雑な処理が書きやすくなる

関連記事

【JavaScript入門】Ajaxとは?仕組み・特徴・XMLHttpRequestを初心者向けにわかりやすく解説

2019/04/20   -基礎

Ajaxとは?仕組み・特徴・JavaScriptとの関係を初心者向けにわかりやすく解説 近年、JavaScriptが再び注目を集めている理由のひとつが Ajax(エイジャックス) の普及です。 Goo …

【JavaScript入門】HTML要素内に直接スクリプトを書く方法|javascript: の使い方と注意点

2019/04/04   -基礎

【JavaScript入門】javascript: の意味と使い方をやさしく解説|仕組み・注意点・良い例/悪い例まで完全ガイド この記事で分かること javascript: とは何か(スキームの意味) …

【JavaScript入門】コメントの書き方を解説|1行コメントと複数行コメントの使い分け

2019/04/06   -基礎

JavaScriptのコメントの書き方|1行コメントと複数行コメントを初心者向けに解説 プログラムには「コメントを書く派」と「書かない派」がいますが、実務ではコメントがないコードは理解が難しくなること …

【JavaScript入門】基本書式と記述ルールまとめ|命名規則・文字列・数値・セミコロンの使い方

2019/04/08   -基礎

JavaScriptの基本書式と記述ルールまとめ|初心者が知っておくべき注意点を解説 JavaScriptを書くときには、基本的な書式や命名ルール、文字列の扱いなど、知っておくべきポイントがいくつかあ …

【JavaScript入門】繰り返し処理の基本|for文・while文・do…while文の使い方を初心者向けに解説

2019/04/15   -基礎

JavaScriptの繰り返し処理|for文・while文・do…while文を初心者向けに解説 JavaScriptで同じ処理を繰り返したい場合は、for文 と while文 を使います …

このブログは Xserver 上の WordPress で運用しています。
表示速度が速く、安定しているのでブログ初心者にもおすすめです。

レンタルサーバー エックスサーバー

-基礎

執筆者: