---
title: while
slug: Web/JavaScript/Reference/Statements/while
tags:
  - JavaScript
  - Language feature
  - Statement
  - while
translation_of: Web/JavaScript/Reference/Statements/while
---
<div>{{jsSidebar("Statements")}}</div>

<p><strong>while 文</strong>は、テスト条件が true と評価されている間、指定された文を実行するループを作成します。条件はその文を実行する前に評価されます。</p>

<div>{{EmbedInteractiveExample("pages/js/statement-while.html")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="syntaxbox notranslate">while (<var>condition</var>)
  <var>statement</var>
</pre>

<dl>
 <dt><code><var>condition</var></code></dt>
 <dd>ループを通過するごとに、その前に評価される式。この条件が true と評価された場合は、 <code><var>statement</var></code> が実行されます。条件が false と評価された場合は、実行は <code>while</code> ループの後の文に続きます。</dd>
 <dt><code><var>statement</var></code></dt>
 <dd>条件が true と評価されている間に実行される文。ループ内で複数の文を実行する場合は、 <a href="/ja/docs/JavaScript/Reference/Statements/block">ブロック</a>文 (<code>{ ... }</code>) を使用してそれらの文をグループ化してください。<br>
 <br>
 メモ: <code>break</code> 文を使用すると、条件が true と評価される前にループを停止することができます。</dd>
</dl>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Using_while" name="Using_while">while の使用</h3>

<p>次の <code>while</code> ループは、 <code>n</code> が 3 より小さい間反復します。</p>

<pre class="brush:js notranslate">var n = 0;
var 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>最初の通過の後: <code>n</code> = 1 および <code>x</code> = 1</li>
 <li>2 回目の通過の後: <code>n</code> = 2 および <code>x</code> = 3</li>
 <li>3 回目の通過の後: <code>n</code> = 3 および <code>x</code> = 6</li>
</ul>

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

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-while-statement', 'while statement')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("javascript.statements.while")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{jsxref("Statements/do...while", "do...while")}}</li>
 <li>{{jsxref("Statements/for", "for")}}</li>
</ul>