JavaScriptでのwhileの使い方とは？繰り返し処理の基本的な使い方からソースコードを交えて解説！
- システム
エンジニア - JavaScriptでのwhileの使い方について教えてください。
- プロジェクト
マネージャー - それでは、JavaScriptでのwhileを使った繰り返し処理の基本的な使い方とソースコードについてご紹介しましょう。
JavaScriptでのwhileの使い方とは？
今回は、JavaScriptでのwhileを使った繰り返し処理について説明します。
基本的な使い方から、continueやbreakの方法について、ソースコードを交えて紹介します。
また、ラベル付きbreakの使い方についても紹介します。
JavaScriptでのwhileを使った繰り返し処理に興味のある方はぜひご覧ください。
基本的な使い方
JavaScriptでのwhileの基本的な使い方を紹介します。変数や配列、mapの繰り返し処理ができます。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
// 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
・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' ]
|
このようにJavaScriptでは、whileを使って変数や配列およびmapの繰り返し処理ができます。
continue
JavaScriptでの繰り返し処理をスキップするcontinueについて紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// 配列の定義
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]);
}
}
|
実行結果は以下のようになります。
|
1
2
3
4
5
6
7
8
9
10
|
item1
item2
item3
item4
item5
continue
item7
item8
item9
item10
|
このようにJavaScriptでは、continueで繰り返し処理をスキップできます。
break
JavaScriptでの繰り返し処理を中断するbreakについて紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// 配列の定義
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]);
}
}
|
実行結果は以下のようになります。
|
1
2
3
4
5
6
|
item1
item2
item3
item4
item5
break
|
このようにJavaScriptでは、breakで繰り返し処理を中断できます。
ラベル指定break
多重ループのbreakには、ラベル付きbreakが便利です。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
|
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
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は以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
|
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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も可能です。
無限ループ
繰り返し処理は無限ループに注意しましょう。無限ループになる処理を紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// 配列の定義
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が無限に出力されます。無限ループにならないように注意してロジックを作成してください。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
item1
item2
item3
item4
item5
continue
continue
continue
continue
continue
continue
continue
continue
continue
：
：
：
|
- システム
エンジニア - JavaScriptでのwhileの使い方がよく分かりました。
- プロジェクト
マネージャー - ご紹介したJavaScriptでのwhileの基本的な使い方だけでなく、continueやbreakの方法、ソースコードやラベル付きbreakの使い方についても参考にしてください。
まとめ
いかがでしたでしょうか。JavaScriptでのwhileを使った繰り返し処理について説明しました。
基本的な使い方から、continueやbreakの方法について、ソースコードを交えて紹介しました。
また、ラベル付きbreakの使い方についても紹介しました。
ぜひご自身でJavaScriptのソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
JavaScript新着案件New Job
-
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務
月給26万～26万円東京都千代田区(秋葉原駅) -
官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】
月給50万～60万円東京都府中市(中河原駅) -
官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】
月給25万～35万円東京都府中市(中河原駅) -
システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務
月給63万～63万円埼玉県川越市(南大塚駅)
関連記事Related Posts
-
JavaScriptでデータベースを操作する方法を紹介｜データベースの操作方法を整理しましょう
JavaScriptでデータベースを操作する方法 今回は、JavaScriptでデータベースを操作する方法について説明します。 データベースを操作するには、サーバサイドJavaScriptを使用します。JavaScrip […]
-
JavaScriptでのDOM操作とは｜さらに活用する3つの方法
DOM操作とは？ DOM（Document Object Model）とは、JavaScriptでhtmlを参照・操作するときに使用される、Webブラウザがhtmlを解析したときに構築されるhtmlの構造です。 DOMの […]
-
jQueryのloadとは？loadの使用方法やjQueryを使わずにloadを行う方法を紹介
jQueryのloadとは？ jQueryはJavaScriptで利用できる多機能なライブラリです。その機能の1つであるloadは、自ページとは別のtxtページやhtmlページを読み込んで表示することができる機能です。複 […]
-
jQueryでのValidationの使い方を紹介！Validationを正しく使いこなそう！
jQueryでのValidationの使い方を紹介します 今回は、jQueryでのValidationの使い方について説明します。 Validationとは、ユーザが正しく値を入力したかチェックする機能です。例えば、必須 […]
-
JavaScriptでtoStringメソッドとは？コードでわかりやすく紹介
JavaScriptでのtoStringメソッドの使い方とは？ 今回は、JavaScriptでのtoStringメソッドの使い方について説明します。 toStringメソッドは、数値や日付、配列、オブジェクトなどを文字列 […]
