HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
All web technology
Learn web development
Discover our tools
Get to know MDN better
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
View in English Always switch to English
ループは、何かを繰り返して行う手軽で簡単な方法を提供します。 JavaScript ガイドの本章では、 JavaScript で利用可能な反復処理を行う数々の反復文を紹介します。
ループは、ある方向に X 歩進み、次に別の方向に Y 歩進むように誰かに指示するゲームをコンピューター化した版と考えることができます。例えば、「西に 5 歩進む」という概念はループとして、下記のように表現できます。
for (let step = 0; step < 5; step++) { // 値が 0 から 4 まで計 5 回実行される console.log("一歩西に歩く"); }
ループには様々な種類がありますが、本質的にはそれらはすべて同じことをしています。 何らかの行為をある回数繰り返すということです（ただしその回数がゼロということもありえます）。
様々なループ機構が存在することによって、色々な方法でループの開始点と終了点を決定することができます。あるループの方が別の種類のループより簡単に目的を果たせる、という状況はたくさんあります。
JavaScript で提供されるループ文は以下のとおりです。
for 文によるループは指定された条件が false と評価されるまで繰り返されます。JavaScript の for ループは Java や C 言語の for ループと同じです。
for
false
for 文は以下のような形です。
for (初期化式; 条件式; 加算式) 文
for ループが実行されるとき、次の処理が行われます。
初期化式
条件式
文
{ }
加算式
例えば下記の例には for 文があり、スクロールリスト（複数選択が可能な <select> 要素）で選択されたオプションの数値をカウントしています。
<select>
<form name="selectForm"> <label for="musicTypes" >好きな音楽のジャンルをいくつか選び、下のボタンをクリックしてください。</label > <select id="musicTypes" name="musicTypes" multiple> <option selected>R&B</option> <option>Jazz</option> <option>Blues</option> <option>New Age</option> <option>Classical</option> <option>Opera</option> </select> <button id="btn" type="button">How many are selected?</button> </form>
ここでは、 for 文が変数 i を宣言し、 0 に初期化します。 i が <select> 要素のオプション数未満であることを確認し、後続の if 文を実行し、ループ内を一通り実行した後に i を 1 ずつ加算します。
i
0
if
function countSelected(selectObject) { let numberSelected = 0; for (let i = 0; i < selectObject.options.length; i++) { if (selectObject.options[i].selected) { numberSelected++; } } return numberSelected; } const btn = document.getElementById("btn"); btn.addEventListener("click", () => { const musicTypes = document.selectForm.musicTypes; console.log(`You have selected ${countSelected(musicTypes)} option(s).`); });
do...while 文は指定された条件が偽になるまで繰り返します。
do...while
do...while 文は以下のような形です。
do 文 while (条件式);
文は、条件式がチェックされる前に一度ずつ実行されます。（複数の文を実行するには、ブロック文 ({ }) を使って文をグループ化します。）
条件式が true の場合、文が再び実行されます。文の実行終了時に毎回条件がチェックされます。条件が false の場合、実行は停止し、制御は do...while の次の文に渡ります。
true
次の例では、do ループは少なくとも一度繰り返されます。そして i が 5 未満でなくなるまで繰り返されます。
do
let i = 0; do { i += 1; console.log(i); } while (i < 5);
while 文は指定された条件が true と評価される限り文を実行します。 while 文は以下のようになります。
while
while (条件式) 文
条件式が false となる場合、ループ内の文は実行を停止し、ループに続く文に制御が渡されます。
ループ内の文が実行される前に条件が検査されます。条件が true を返した場合、文が実行され、条件が再び検査されます。条件が false を返した場合、実行は停止し、 while の次の文に制御が渡されます。
複数の文を実行するには、それらの文をグループ化するブロック文 ({ }) を使用します。
次の例では、while ループは、n が 3 未満の場合繰り返されます。
n
3
let n = 0; let x = 0; while (n < 3) { n++; x += n; }
各反復で、n がインクリメントされ、その値が x に加算されます。そのため、x と n は以下の値をとります。
x
1
2
6
3 回目の通過完了後、条件式 n < 3 はもはや true ではなくなるため、ループが終了します。
n < 3
無限ループは避けてください。ループ内の条件が最終的に false になることを確かめるようにしましょう。さもないと、ループは永遠に終了しません。次の while ループ文は、条件が決して false にならないので永遠に実行されます :
// 無限ループは悪! while (true) { console.log("Hello, world!"); }
ラベルを使って、プログラム内の他の場所から参照できる識別子を組み込んだ文が作成できます。例えば、ループの識別にラベルを使い、そのプログラムでループを中断するか、実行を継続するかどうかを指定する場合に、ラベルを break 文や continue 文で使用することができます。
break
continue
ラベル文の構文は以下のようになります。
ラベル: 文
ラベルの値には、予約語でなければあらゆる JavaScript 識別子を使用できます。ラベルによって識別される文はどんな文でもかまいません。ラベル付き文の例については、下記の break と continue の例を参照してください。
ラベル
break 文を使用すると、ループ、switch、ラベル文を使った関連付けを終了させることができます。
switch
do-while
break 文の構文は下記のようになります。
break; break ラベル;
次の例では、値が theValue である要素のインデックスを探すまで配列の要素を反復します。
theValue
for (let i = 0; i < a.length; i++) { if (a[i] === theValue) { break; } }
let x = 0; let z = 0; labelCancelLoops: while (true) { console.log("外側のループ: " + x); x += 1; z = 1; while (true) { console.log("内側のループ: " + z); z += 1; if (z === 10 && x === 10) { break labelCancelLoops; } else if (z === 10) { break; } } }
continue 文は while、do-while、for、label 文を再起動する際に使用されます。
label
continue文の構文は下記のようになります。
continue; continue ラベル;
次の例では、i の値が 3 のときに実行される continue 文が使用された while ループを示しています。この場合、n の値は 1、3、7、12 となります。
7
12
let i = 0; let n = 0; while (i < 5) { i++; if (i === 3) { continue; } n += i; console.log(n); } // ログ出力: // 1 3 7 12
continue; をコメントアウトすると、ループは末尾まで実行され、 1,3,6,10,15 という結果になります。
continue;
1,3,6,10,15
次の例では、checkIandJ とラベル付けされた文には checkJ とラベル付けされた文が含まれています。continue 文に出会うと、プログラムは checkJ の現在の反復を終了し次の反復を開始します。continue に出会うたびに、checkJ はその条件が false を返すまで繰り返されます。false が返されると、checkIandJ の残りの部分が完了し、その条件が false を返すまで checkIandJ が繰り返されます。false が返されると、プログラムは checkIandJ に続く文を継続します。
checkIandJ
checkJ
もし continue が checkIandJ のラベルを持っていると、プログラムは checkIandJ のラベル文の先頭から継続されます。
let i = 0; let j = 10; checkIandJ: while (i < 4) { console.log(i); i += 1; checkJ: while (j > 4) { console.log(j); j -= 1; if (j % 2 === 0) { continue; } console.log(j, "is odd."); } console.log("i =", i); console.log("j =", j); }
for...in 文はオブジェクトにあるすべての列挙可能なプロパティに対し指定された変数を通して反復処理を行います。それぞれの異なるプロパティに、JavaScript は指定された文を実行します。for...in 文は下記のようになります。
for...in
for (変数 in オブジェクト) 文
次の関数は引数としてオブジェクトと、そのオブジェクトの名前を表す文字列を取ります。それからすべてのオブジェクトのプロパティに対して反復処理し、プロパティ名とその値を表示する文字列を返します。
function dumpProps(obj, objName) { let result = ""; for (const i in obj) { result += `${objName}.${i} = ${obj[i]}<br>`; } result += "<hr>"; return result; }
make プロパティと model プロパティを持つ car オブジェクトに対し、result は下記のようになります。
make
model
car
result
car.make = Ford car.model = Mustang
Array の要素に対して反復処理を行う方法としてこれを使用したくなるかもしれませんが、これは数値のインデックスに加えてユーザー定義プロパティの名前も返します。
Array
したがって、配列を繰り返し処理する場合は、数値インデックスを使用する従来の for ループを使用した方が良いでしょう。なぜなら、Array オブジェクトを変更した場合（カスタムプロパティやメソッドを追加した場合など）、 for...in 文は配列要素に加えて、ユーザー定義プロパティに対しても反復処理するからです。
for...of 文は、反復可能オブジェクト（Array、Map、Set、arguments オブジェクトなどを含む）を反復処理するループを生成し、それぞれのプロパティの値に対して実行したい文をともなって作られた反復処理フックを呼び出します。
for...of
Map
Set
arguments
for (変数 of オブジェクト) 文
次の例では、for...of ループと for...in ループとの違いを示しています。for...in はプロパティ名に対し反復処理する一方、 for...of はプロパティの値に対して反復処理します。
const arr = [3, 5, 7]; arr.foo = "hello"; for (const i in arr) { console.log(i); } // "0" "1" "2" "foo" for (const i of arr) { console.log(i); } // Logs: 3 5 7
for...of および for...in 文は、構造分解でも使用することができます。例えば、 Object.entries() を使用して、オブジェクトのキーと値を同時に反復処理することができます。
Object.entries()
const obj = { foo: 1, bar: 2 }; for (const [key, val] of Object.entries(obj)) { console.log(key, val); } // "foo" 1 // "bar" 2