path: root/files/ja/web/javascript/guide/loops_and_iteration/index.html

---
title: ループと反復処理
slug: Web/JavaScript/Guide/Loops_and_iteration
tags:
  - Guide
  - JavaScript
  - Loop
  - Syntax
  - 'l10n:priority'
translation_of: Web/JavaScript/Guide/Loops_and_iteration
---
<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div>

<p class="summary">ループは繰り返し何かを実行するための簡便な方法を提供します。本章では JavaScript で利用可能な反復処理を行う数々の文を紹介します。</p>

<p>ループは、ある方向に <em>X</em> 歩進み、次に別の方向に <em>Y</em> 歩進むように誰かに指示するゲームをコンピュータ化した版と考えることができます。例えば、「西に 5 歩進む」という概念はループとして、下記のように表現できます :</p>

<pre class="brush: js notranslate">for (let step = 0; step &lt; 5; step++) {
  // 値が 0 から 4 まで計 5 回実行される
  console.log('一歩西に歩く');
}
</pre>

<p>ループには様々な種類がありますが、本質的にはそれらはすべて同じことをしています : 何らかの行為をある回数繰り返すということです（ただしその回数がゼロということもありえます）。</p>

<p>様々なループ機構が存在することによって、色々な方法でループの開始点と終了点を決定することができます。あるループの方が別のタイプのループより簡単に目的を果たせる、という状況はたくさんあります。</p>

<p>JavaScript で提供されるループ文は以下のとおりです :</p>

<ul>
 <li>{{anch("for statement","for 文")}}</li>
 <li>{{anch("do...while statement","do...while 文")}}</li>
 <li>{{anch("while statement","while 文")}}</li>
 <li>{{anch("label statement","label 文")}}</li>
 <li>{{anch("break statement","break 文")}}</li>
 <li>{{anch("continue statement","continue 文")}}</li>
 <li>{{anch("for...in statement","for...in 文")}}</li>
 <li>{{anch("for...of statement","for...of 文")}}</li>
</ul>

<h2 id="for_statement" name="for_statement"><code>for</code> 文</h2>

<p>{{jsxref("Statements/for","for")}} 文によるループは指定された条件が <code>false</code> と評価されるまで繰り返されます。JavaScript の <code>for</code> ループは Java や C 言語の <code>for</code> ループと同じです。</p>

<p><code>for</code> 文は以下のような形です :</p>

<pre class="syntaxbox notranslate">for ([初期化式]; [条件式]; [加算式])
  文
</pre>

<p><code>for</code> ループが実行されるとき、次の処理が行われます :</p>

<ol>
 <li>もしあれば、<code>初期化式</code>が実行されます。この式は通常、1 個またはそれ以上のループカウンターを初期化しますが、この構文ではいかなるレベルの複雑な式を入れることが可能です。初期化式で変数を宣言することもできます。</li>
 <li><code>条件式</code>が評価されます。<code>条件式</code>の値が <code>true</code> の場合、ループ文が実行されます。<code>条件式</code>の値が <code>false</code> の場合、<code>for</code> ループは終了します。<code>条件式</code>がすべて省略されている場合、条件式は真であると仮定されます。</li>
 <li><code>文</code>が実行されます。複数の文を実行するには、それらの文をグループ化するためにブロック文 (<code>{ ... }</code>) を使用します。</li>
 <li>もしあれば、<code>加算式</code>が実行されます。</li>
 <li>ステップ 2 に制御が戻ります。</li>
</ol>

<h3 id="Example" name="Example"><strong>例</strong></h3>

<p>下の例では、スクロールリスト（複数選択できる {{HTMLElement("select")}} 要素）で選択したオプションの数をカウントする <code>for</code> 文が関数内にあります。<code>for</code> 文が変数 <code>i</code> を宣言しゼロに初期化します。<code>i</code> が <code>&lt;select&gt;</code> 要素のオプション数未満であることがチェックされると、後続の <code>if</code> 文が実行され、オプションが選択されていれば、ループの各通過後に 1 個ずつ <code>i</code> が加算されます。</p>

<pre class="brush: html notranslate">&lt;form name="selectForm"&gt;
  &lt;p&gt;
    &lt;label for="musicTypes"&gt;Choose some music types, then click the button below:&lt;/label&gt;
    &lt;select id="musicTypes" name="musicTypes" multiple="multiple"&gt;
      &lt;option selected="selected"&gt;R&amp;B&lt;/option&gt;
      &lt;option&gt;Jazz&lt;/option&gt;
      &lt;option&gt;Blues&lt;/option&gt;
      &lt;option&gt;New Age&lt;/option&gt;
      &lt;option&gt;Classical&lt;/option&gt;
      &lt;option&gt;Opera&lt;/option&gt;
    &lt;/select&gt;
  &lt;/p&gt;
  &lt;p&gt;&lt;input id="btn" type="button" value="How many are selected?" /&gt;&lt;/p&gt;
&lt;/form&gt;

&lt;script&gt;
function howMany(selectObject) {
  let numberSelected = 0;
  for (let i = 0; i &lt; selectObject.options.length; i++) {
    if (selectObject.options[i].selected) {
      numberSelected++;
    }
  }
  return numberSelected;
}

let btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes));
});
&lt;/script&gt;

</pre>

<h2 id="do...while_statement" name="do...while_statement"><code>do...while</code> 文</h2>

<p>{{jsxref("Statements/do...while","do...while")}} 文は指定された条件が <code>false</code> になるまで繰り返します。</p>

<p><code>do...while</code> 文は以下のような形です :</p>

<pre class="syntaxbox notranslate">do
  文
while (条件式);
</pre>

<p><em><code>文</code></em>は条件式がチェックされる前に毎回一度実行されます。(複数の文を実行するには、ブロック文 (<code>{ ... }</code>) を使って一つの文にします)。</p>

<p><code>条件式</code>が <code>true</code> の場合、<code>文</code>が再び実行されます。<code>文</code>の実行終了時に毎回条件がチェックされます。条件が <code>false</code> の場合、実行は停止し、制御は <code>do...while</code> の次の文に渡ります。</p>

<h3 id="Example_2" name="Example_2"><strong>例</strong></h3>

<p>次の例では、<code>do</code> ループは少なくとも一度繰り返されます。そして <code>i</code> が 5 未満でなくなる直前まで繰り返されます。</p>

<pre class="brush: js notranslate">let i = 0;
do {
  i += 1;
  console.log(i);
} while (i &lt; 5);</pre>

<h2 id="while_statement" name="while_statement"><code>while</code> 文</h2>

<p>{{jsxref("Statements/while","while")}} 文は指定された条件が <code>true</code> に評価される限り文を実行します。<code>while</code> 文は以下のようになります :</p>

<pre class="syntaxbox notranslate">while (条件式)
  文
</pre>

<p><code>条件式</code>が <code>false</code> となる場合、ループ内の<code>文</code>は実行を停止し、ループに続く文に制御が渡されます。</p>

<p>ループ内の<code>文</code>が実行される<em>前</em>に条件がテストされます。条件が <code>true</code> を返す場合、<code>文</code>は実行され、条件が再びテストされます。条件が <code>false</code> を返す場合、実行は停止し、<code>while</code> の次の文に制御が渡されます。</p>

<p>複数の文を実行するには、それらの文をグループ化するブロック文 (<code>{ ... }</code>) を使用します。</p>

<h3 id="Example_1" name="Example_1"><strong>例 1</strong></h3>

<p>次の例では、<code>while</code> ループは、<code>n</code> が <code>3</code> 未満の場合繰り返されます。:</p>

<pre class="brush: js notranslate">let n = 0;
let x = 0;
while (n &lt; 3) {
  n++;
  x += n;
}
</pre>

<p>各反復で、<code>n</code> がインクリメントされ、その値が <code>x</code> に加算されます。そのため、<code>x</code> と <code>n</code> は以下の値をとります:</p>

<ul>
 <li>1 回目の反復後 : <code>n</code> = <code>1</code>, <code>x</code> = <code>1</code></li>
 <li>2 回目の反復後 : <code>n</code> = <code>2</code>, <code>x</code> = <code>3</code></li>
 <li>3 回目の反復後 : <code>n</code> = <code>3</code>, <code>x</code> = <code>6</code></li>
</ul>

<p>3 回目の通過完了後、条件式 <code>n &lt; 3</code> はもはや <code>true</code> ではなくなるため、ループが終了します。</p>

<h3 id="Example_2_2" name="Example_2_2"><strong>例 2</strong></h3>

<p>無限ループは避けてください。ループ内の条件が最終的に <code>false</code> になることを確かめるようにしましょう。さもないと、ループは永遠に終了しません。次の <code>while</code> ループ文は、条件が決して <code>false</code> にならないので永遠に実行されます :</p>

<pre class="example-bad brush: js notranslate">// 無限ループは悪!
while (true) {
  console.log('Hello, world!');
}</pre>

<h2 id="label_statement" name="label_statement"><code>ラベルつき</code>文</h2>

<p>{{jsxref("Statements/label","label")}} を使って、プログラム内の他の場所から参照できる識別子を組み込んだ文が作成できます。例えば、ループの識別にラベルを使い、そのプログラムでループを中断するか、実行を継続するかどうかを指定する場合に、ラベルを <code>break</code> 文や <code>continue</code> 文で使用することができます。</p>

<p>ラベル文の構文は以下のようになります :</p>

<pre class="syntaxbox notranslate">ラベル :
   文
</pre>

<p><code>ラベル</code> の値には、予約語でなければあらゆる JavaScript 識別子を使用できます。ラベルによって識別される<code>文</code>はどんな文でもかまいません。</p>

<h3 id="Example_3" name="Example_3"><strong>例</strong></h3>

<p>この例では、ラベル <code>markLoop</code> は <code>while</code> ループを指し示しています。</p>

<pre class="brush: js notranslate">markLoop:
while (theMark === true) {
   doSomething();
}</pre>

<h2 id="break_statement" name="break_statement"><code>break</code> 文</h2>

<p>ループ、<code>switch</code>、ラベル文を使った関連付けを終了させるには {{jsxref("Statements/break","break")}} 文を使います。</p>

<ul>
 <li>ラベルなしで <code>break</code> を使用すると、最も内側の <code>while</code>、<code>do-while</code>、<code>for</code>、<code>switch</code> をただちに終了し、次の文に制御を移します。この場合の <code>break</code> 文の構文は下記のようになります</li>
 <li>ラベルつきで <code>break</code> を使用すると、指定したラベルつき文まで終了します。</li>
</ul>

<p><code>break</code> 文の構文は下記のようになります:</p>

<pre class="syntaxbox notranslate">break;
break [ラベル];
</pre>

<ol>
 <li>最初の形では最も内側のループや <code>switch</code> を終了します</li>
 <li>2 つ目の形では指定した外側のラベルつき文を終了します。</li>
</ol>

<h3 id="Example_1_2" name="Example_1_2"><strong>例</strong> <strong>1</strong></h3>

<p>次の例では、値が <code>theValue</code> である要素のインデックスを探すまで配列の要素を反復します。:</p>

<pre class="brush: js notranslate">for (let i = 0; i &lt; a.length; i++) {
  if (a[i] === theValue) {
    break;
  }
}</pre>

<h3 id="Example_2_Breaking_to_a_label" name="Example_2_Breaking_to_a_label"><strong>例 2: </strong>ラベルまでブレーク</h3>

<pre class="brush: js notranslate">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 &amp;&amp; x === 10) {
      break labelCancelLoops;
    } else if (z === 10) {
      break;
    }
  }
}
</pre>

<h2 id="continue_statement" name="continue_statement"><code>continue</code> 文</h2>

<p>{{jsxref("Statements/continue","continue")}} 文は <code>while</code>、<code>do-while</code>、<code>for</code>、<code>label</code> 文を再開する際に使用されます。</p>

<ul>
 <li>ラベルなしで <code>continue</code> を使用すると、その文を囲んでいる最も内側の <code>while</code>、<code>do-while</code>、<code>for</code> 文による現在の反復を終了し、次の反復のループの実行を継続します。<code>break</code> 文とは対照的に、<code>continue</code> は完全にループの実行を終了しません。<code>while</code> ループの場合、条件にジャンプします。<code>for</code> ループでは、<code>加算式</code> にジャンプします。</li>
 <li>ラベルとともに <code>continue</code> を使用すると、この動作がそのラベルによって識別されるループ文に対して適用されます。</li>
</ul>

<p><code>continue</code>文の構文は下記のようになります :</p>

<pre class="syntaxbox notranslate">continue [ラベル];
</pre>

<h3 id="Example_1_3" name="Example_1_3"><strong>例 1</strong></h3>

<p>次の例では、<code>i</code> の値が 3 のときに実行される <code>continue</code> 文が使用された <code>while</code> ループを示しています。この場合、<code>n</code> の値は <code>1</code>、<code>3</code>、<code>7</code>、<code>12</code> となります。</p>

<pre class="brush: js notranslate">let i = 0;
let n = 0;
while (i &lt; 5) {
  i++;
  if (i === 3) {
    continue;
  }
  n += i;
  console.log(n);
}
//1,3,7,12


let i = 0;
let n = 0;
while (i &lt; 5) {
  i++;
  if (i === 3) {
     // continue;
  }
  n += i;
  console.log(n);
}
// 1,3,6,10,15
</pre>

<h3 id="Example_2_3" name="Example_2_3"><strong>例 2</strong></h3>

<p>次の例では、<code>checkiandj</code> とラベル付けされた文には <code>checkj</code> とラベル付けされた文が含まれています。<code>continue</code> 文に出会うと、プログラムは <code>checkj</code> の現在の反復を終了し次の反復を開始します。<code>continue</code> に出会うたびに、<code>checkj</code> はその条件が <code>false</code> を返すまで繰り返されます。<code>false</code> が返されると、<code>checkiandj</code> の残りの部分が完了し、その条件が <code>false</code> を返すまで <code>checkiandj</code> が繰り返されます。<code>false</code> が返されると、プログラムは <code>checkiandj</code> に続く文を継続します。</p>

<p>もし <code>continue</code> が <code>checkiandj</code> のラベルを持っていると、プログラムは <code>checkiandj</code> のラベル文の先頭から継続されます。</p>

<pre class="brush: js notranslate">let i = 0;
let j = 10;
checkiandj:
  while (i &lt; 4) {
    console.log(i);
    i += 1;
    checkj:
      while (j &gt; 4) {
        console.log(j);
        j -= 1;
        if ((j % 2) === 0) {
          continue checkj;
        }
        console.log(j + ' is odd.');
      }
      console.log('i = ' + i);
      console.log('j = ' + j);
  }</pre>

<h2 id="for...in_statement" name="for...in_statement"><code>for...in</code> 文</h2>

<p>{{jsxref("Statements/for...in","for...in")}} 文はオブジェクトにあるすべての列挙可能なプロパティに対し指定された変数を通して反復処理を行います。それぞれの異なるプロパティに、JavaScript は指定された文を実行します。<code>for...in</code> 文は下記のようになります :</p>

<pre class="syntaxbox notranslate">for (変数 in オブジェクト)
  文
</pre>

<h3 id="Example_4" name="Example_4"><strong>例</strong></h3>

<p>次の関数は引数としてオブジェクトと、そのオブジェクトの名前を表す文字列を取ります。それからすべてのオブジェクトのプロパティに対して反復し、プロパティ名とその値を表示する文字列を返します。</p>

<pre class="brush: js notranslate">function dump_props(obj, obj_name) {
  let result = '';
  for (let i in obj) {
    result += obj_name + '.' + i + ' = ' + obj[i] + '&lt;br&gt;';
  }
  result += '&lt;hr&gt;';
  return result;
}
</pre>

<p><code>make</code> プロパティと <code>model</code> プロパティを持つ <code>car</code> オブジェクトに対し、<code>result</code> は下記のようになります :</p>

<pre class="brush: js notranslate">car.make = Ford
car.model = Mustang
</pre>

<h3 id="Arrays" name="Arrays">配列</h3>

<p>{{jsxref("Array")}} の要素に対して反復処理を行う方法として <strong>for...in</strong> 文を使用したくなるかもしれませんが、これは数値のインデックスに加えてユーザー定義プロパティの名前も返します。</p>

<p>そのため、配列に対しての反復処理には、数値のインデックスを使い従来の {{jsxref("Statements/for","for")}} ループを使用するほうが良いです。なぜなら、(カスタムプロパティやカスタムメソッドを追加するといった) Array オブジェクトの変更を行った場合、<strong>for...in</strong> 文は配列要素に加えてユーザー定義プロパティに対しても反復処理するからです。</p>

<h2 id="for...of_statement" name="for...of_statement"><code>for...of</code> 文</h2>

<p>{{jsxref("Statements/for...of","for...of")}} 文は、<a href="/ja/docs/Web/JavaScript/Guide/iterable">反復可能オブジェクト</a>（{{jsxref("Array")}}、{{jsxref("Map")}}、{{jsxref("Set")}}、{{jsxref("functions/arguments","arguments")}} オブジェクトなどを含む）を反復処理するループを生成し、それぞれのプロパティの値に対して実行したい文をともなって作られた反復処理フックを呼び出します。</p>

<pre class="syntaxbox notranslate">for (<em>変数</em> of <em>オブジェクト</em>)
  <em>文</em>
</pre>

<p>次の例では、<code>for...of</code> ループと {{jsxref("Statements/for...in","for...in")}} ループとの違いを示しています。<code>for...in</code> はプロパティ名に対し反復処理される一方、<code>for...of</code> はプロパティの値に対し反復処理します :</p>

<pre class="brush:js notranslate">const arr = [3, 5, 7];
arr.foo = 'hello';

for (let i in arr) {
   console.log(i); // "0", "1", "2", "foo" が出力される
}

for (let i of arr) {
   console.log(i); // 3, 5, 7 が出力される
}
</pre>

<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p>