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
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
while 文は、テスト条件が真と評価されている間、指定された文を実行するループを作成します。条件はその文を実行する前に評価されます。
while
let n = 0; while (n < 3) { n++; } console.log(n); // 予想される結果: 3
while (condition) statement
condition
ループを通過するごとに、その前に評価される式。この条件が真と評価された場合は、 statement が実行されます。条件が偽と評価された場合は、実行は while ループの後の文に続きます。
statement
条件が真と評価される限り実行される文。複数の文を実行するには、ブロック文を使用することができます。
他のループ文と同様に、statement の中でフロー制御文を使用することができます。
break
continue
次の while ループは、 n が 3 より小さい間反復します。
n
let n = 0; let x = 0; while (n < 3) { n++; x += n; }
それぞれの反復で、ループは n を増加させ、それを x に加えます。したがって、 x および n は次の値をとります。
x
3 回目の通過が完了した後、条件 n < 3 は真ではなくなり、ループは終了します。
場合によっては、代入を条件として使用することに意味があることもあります。これは読みやすさとトレードオフの関係にあるので、このパターンを誰にでもわかりやすくするための、ある種の文体上の推奨事項があります。
次の例は、文書のコメントを反復処理し、コンソールにログ出力するものです。
const iterator = document.createNodeIterator(document, NodeFilter.SHOW_COMMENT); let currentNode; while (currentNode = iterator.nextNode()) { console.log(currentNode.textContent.trim()); }
これは完全によい例とは言えません。特に次の行があるからです。
while (currentNode = iterator.nextNode()) {
その行の動作は、毎回コメントノードが得られるという点では問題ありません。
iterator.nextNode()
currentNode
currentNode = iterator.nextNode()
console.log()
…そして、文書中にコメントノードがなくなったとき、次のようになります。
null
この行の問題は、条件式にはふつう比較演算子、例えば === を使用するものですが、この行の = は比較演算子ではなく、代入演算子です。そのため、= は === の間違いのように見えてしまいます（実際には間違いではなくても）。
===
=
従って、このようにすると、一部のコードリンティングツール、例えば ESLint の no-cond-assign ルールなどは、誤記の可能性があるものを発見して修正しやすくするために、以下のような警告を報告します。
no-cond-assign
Expected a conditional expression and instead saw an assignment.（条件式が期待されるところに代入がありました。）
多くのスタイルガイドでは、条件式に代入式を書くことが意図的であることを、より明確に示すことを推奨しています。それを行うための最小限の方法として、括弧をグループ化演算子として追加して代入式を囲む方法があります。
const iterator = document.createNodeIterator(document, NodeFilter.SHOW_COMMENT); let currentNode; while ((currentNode = iterator.nextNode())) { console.log(currentNode.textContent.trim()); }
実際、これは ESLint の no-cond-assign の既定値や Prettier で強制されているスタイルなので、このパターンをよく見かけるでしょう。
条件を明示的な比較に変えるために比較演算子を追加することを勧める人もいます。
while ((currentNode = iterator.nextNode()) !== null) {
このパターンは他にも書き方があります。
while ((currentNode = iterator.nextNode()) && currentNode) {
あるいは、while ループを使用するアイディアを完全に放棄する方法もあります。
const iterator = document.createNodeIterator(document, NodeFilter.SHOW_COMMENT); for ( let currentNode = iterator.nextNode(); currentNode; currentNode = iterator.nextNode() ) { console.log(currentNode.textContent.trim()); }
読者が条件式のパターンとして代入式を記述することに十分に慣れていれば、これらの読みやすさはすべて同じくらいのはずです。そうでなければ、最も冗長ではありますが、最後の形式が最も読みやすいでしょう。
Enable JavaScript to view this browser compatibility table.
do...while
for