JavaScriptでのwhileの使い方とは？繰り返し処理の基本的な使い方からソースコードを交えて解説！

Javascript
プログラミング言語

公開日時: 2021-02-24 　更新日時: 2021-10-07

JavaScriptでのwhileの使い方とは？繰り返し処理の基本的な使い方からソースコードを交えて解説！

この記事でわかること

システム エンジニア: JavaScriptでのwhileの使い方について教えてください。

プロジェクト マネージャー: それでは、JavaScriptでのwhileを使った繰り返し処理の基本的な使い方とソースコードについてご紹介しましょう。

JavaScriptでのwhileの使い方とは？

今回は、JavaScriptでのwhileを使った繰り返し処理について説明します。
基本的な使い方から、continueやbreakの方法について、ソースコードを交えて紹介します。
また、ラベル付きbreakの使い方についても紹介します。

JavaScriptでのwhileを使った繰り返し処理に興味のある方はぜひご覧ください。

基本的な使い方

JavaScriptでのwhileの基本的な使い方を紹介します。変数や配列、mapの繰り返し処理ができます。実際のソースコードを見てみましょう。

// 1 <= i <= 10の繰り返し処理
console.log('・1 <= i <= 10の繰り返し処理');
let i = 1;
while (i <= 10) {
  console.log(i);
  i++;
}

// 配列の繰り返し処理
console.log('・配列の繰り返し処理');
let my_array = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'];
let idx = 0;
let length = my_array.length;
while (idx < length) {
  console.log(my_array[idx]);
  idx++;
}

// イテレータの繰り返し処理
console.log('・イテレータの繰り返し処理');
let my_map = new Map([['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3'], ['key4', 'value4'], ['key5', 'value5']]).entries();
let iterator;
while (iterator = my_map.next(), !iterator.done) {
  console.log(iterator.value);
}

// 1 <= i <= 10の繰り返し処理

console.log('・1 <= i <= 10の繰り返し処理');

let i = 1;

while (i <= 10) {

console.log(i);

i++;

}

// 配列の繰り返し処理

console.log('・配列の繰り返し処理');

let my_array = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'];

let idx = 0;

let length = my_array.length;

while (idx < length) {

console.log(my_array[idx]);

idx++;

}

// イテレータの繰り返し処理

console.log('・イテレータの繰り返し処理');

let my_map = new Map([['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3'], ['key4', 'value4'], ['key5', 'value5']]).entries();

let iterator;

while (iterator = my_map.next(), !iterator.done) {

console.log(iterator.value);

}

実行結果は以下のようになります。

・1 <= i <= 10の繰り返し処理
1
2
3
4
5
6
7
8
9
10
・配列の繰り返し処理
item1
item2
item3
item4
item5
item6
item7
item8
item9
item10
・イテレータの繰り返し処理
[ 'key1', 'value1' ]
[ 'key2', 'value2' ]
[ 'key3', 'value3' ]
[ 'key4', 'value4' ]
[ 'key5', 'value5' ]

・1 <= i <= 10の繰り返し処理

・配列の繰り返し処理

item1

item2

item3

item4

item5

item6

item7

item8

item9

item10

・イテレータの繰り返し処理

[ 'key1', 'value1' ]

[ 'key2', 'value2' ]

[ 'key3', 'value3' ]

[ 'key4', 'value4' ]

[ 'key5', 'value5' ]

このようにJavaScriptでは、whileを使って変数や配列およびmapの繰り返し処理ができます。

continue

JavaScriptでの繰り返し処理をスキップするcontinueについて紹介します。実際のソースコードを見てみましょう。

// 配列の定義
let my_array = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'];

// 初期化
let idx = -1;
let length = my_array.length -1;

// 繰り返し処理
while (idx++ < length) {
    if(idx == 5) {
        // 繰り返し処理のスキップ
        console.log('continue');
        continue;
    } else {
        console.log(my_array[idx]);
    }
}

// 配列の定義

let my_array = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'];

// 初期化

let idx = -1;

let length = my_array.length -1;

// 繰り返し処理

while (idx++ < length) {

if(idx == 5) {

// 繰り返し処理のスキップ

console.log('continue');

continue;

} else {

console.log(my_array[idx]);

}

実行結果は以下のようになります。

item1
item2
item3
item4
item5
continue
item7
item8
item9
item10

item1

item2

item3

item4

item5

continue

item7

item8

item9

item10

このようにJavaScriptでは、continueで繰り返し処理をスキップできます。

break

JavaScriptでの繰り返し処理を中断するbreakについて紹介します。実際のソースコードを見てみましょう。

// 配列の定義
let my_array = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'];

// 初期化
let idx = -1;
let length = my_array.length -1;

// 繰り返し処理
while (idx++ < length) {
    if(idx == 5) {
        // 繰り返し処理の中断
        console.log('break');
        break;
    } else {
        console.log(my_array[idx]);
    }
}

// 配列の定義

let my_array = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'];

// 初期化

let idx = -1;

let length = my_array.length -1;

// 繰り返し処理

while (idx++ < length) {

if(idx == 5) {

// 繰り返し処理の中断

console.log('break');

break;

} else {

console.log(my_array[idx]);

}

実行結果は以下のようになります。

item1
item2
item3
item4
item5
break

item1

item2

item3

item4

item5

break

このようにJavaScriptでは、breakで繰り返し処理を中断できます。

ラベル指定break

多重ループのbreakには、ラベル付きbreakが便利です。実際のソースコードを見てみましょう。

let i = 0;
while (i++ < 5) {
    let j = 0;
    while (j++ < 5) {
        if((i * j) > 15){
            break;
        }
        console.log(i + '*' + j + ' = ' + i * j);
    }
}

let i = 0;

while (i++ < 5) {

let j = 0;

while (j++ < 5) {

if((i * j) > 15){

break;

}

console.log(i + '*' + j + ' = ' + i * j);

}

実行結果は以下のようになります。breakで内側のループを抜けています。

1*1 = 1
1*2 = 2
1*3 = 3
1*4 = 4
1*5 = 5
2*1 = 2
2*2 = 4
2*3 = 6
2*4 = 8
2*5 = 10
3*1 = 3
3*2 = 6
3*3 = 9
3*4 = 12
3*5 = 15
4*1 = 4
4*2 = 8
4*3 = 12
5*1 = 5
5*2 = 10
5*3 = 15

1*1 = 1

1*2 = 2

1*3 = 3

1*4 = 4

1*5 = 5

2*1 = 2

2*2 = 4

2*3 = 6

2*4 = 8

2*5 = 10

3*1 = 3

3*2 = 6

3*3 = 9

3*4 = 12

3*5 = 15

4*1 = 4

4*2 = 8

4*3 = 12

5*1 = 5

5*2 = 10

5*3 = 15

これに対して、ラベル付きbreakは以下のように記述します。

let i = 0;
loop: while (i++ < 5) {
    let j = 0;
    while (j++ < 5) {
        if((i * j) > 15){
            break loop;
        }
        console.log(i + '*' + j + ' = ' + i * j);
    }
}

let i = 0;

loop: while (i++ < 5) {

let j = 0;

while (j++ < 5) {

if((i * j) > 15){

break loop;

}

console.log(i + '*' + j + ' = ' + i * j);

}

実行結果は以下のようになります。「break loop;」でloopラベルを抜けるので、外側のループを抜けています。先ほどとは結果が異なることが分かります。

1*1 = 1
1*2 = 2
1*3 = 3
1*4 = 4
1*5 = 5
2*1 = 2
2*2 = 4
2*3 = 6
2*4 = 8
2*5 = 10
3*1 = 3
3*2 = 6
3*3 = 9
3*4 = 12
3*5 = 15
4*1 = 4
4*2 = 8
4*3 = 12

1*1 = 1

1*2 = 2

1*3 = 3

1*4 = 4

1*5 = 5

2*1 = 2

2*2 = 4

2*3 = 6

2*4 = 8

2*5 = 10

3*1 = 3

3*2 = 6

3*3 = 9

3*4 = 12

3*5 = 15

4*1 = 4

4*2 = 8

4*3 = 12

breakと同様に、ラベル付きのcontinueも可能です。

無限ループ

繰り返し処理は無限ループに注意しましょう。無限ループになる処理を紹介します。実際のソースコードを見てみましょう。

// 配列の定義
let my_array = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'];

// 初期化
let idx = 0;
let length = my_array.length;

// 繰り返し処理
while (idx < length) {
    if(idx == 5) {
        // 繰り返し処理のスキップ
        console.log('continue');
        continue;
    } else {
        console.log(my_array[idx]);
        idx++;
    }
}

// 配列の定義

let my_array = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'];

// 初期化

let idx = 0;

let length = my_array.length;

// 繰り返し処理

while (idx < length) {

if(idx == 5) {

// 繰り返し処理のスキップ

console.log('continue');

continue;

} else {

console.log(my_array[idx]);

idx++;

}

実行結果は以下のようになります。idx++;が実行されなくなるので、continueが無限に出力されます。無限ループにならないように注意してロジックを作成してください。

item1
item2
item3
item4
item5
continue
continue
continue
continue
continue
continue
continue
continue
continue
：
：
：

item1

item2

item3

item4

item5

continue

：

システム エンジニア: JavaScriptでのwhileの使い方がよく分かりました。

プロジェクト マネージャー: ご紹介したJavaScriptでのwhileの基本的な使い方だけでなく、continueやbreakの方法、ソースコードやラベル付きbreakの使い方についても参考にしてください。

まとめ

いかがでしたでしょうか。JavaScriptでのwhileを使った繰り返し処理について説明しました。
基本的な使い方から、continueやbreakの方法について、ソースコードを交えて紹介しました。
また、ラベル付きbreakの使い方についても紹介しました。

ぜひご自身でJavaScriptのソースコードを書いて、理解を深めてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

JavaScriptでのwhileの使い方とは？繰り返し処理の基本的な使い方からソースコードを交えて解説！

JavaScriptでのwhileの使い方とは？

基本的な使い方

continue

break

ラベル指定break

無限ループ

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

JavaScript新着案件New Job

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】

官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】

システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務

JavaScriptでのwhileの使い方とは？繰り返し処理の基本的な使い方からソースコードを交えて解説！

JavaScriptでのwhileの使い方とは？

基本的な使い方

continue

break

ラベル指定break

無限ループ

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

JavaScript新着案件New Job

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】

官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】

システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務

関連記事Related Posts

JavaScriptでデータベースを操作する方法を紹介｜データベースの操作方法を整理しましょう

JavaScriptでのDOM操作とは｜さらに活用する3つの方法

jQueryのloadとは？loadの使用方法やjQueryを使わずにloadを行う方法を紹介

jQueryでのValidationの使い方を紹介！Validationを正しく使いこなそう！

JavaScriptでtoStringメソッドとは？コードでわかりやすく紹介