<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="ja">
	<id>http://mochiuwiki.e2.valueserver.jp/index.php?action=history&amp;feed=atom&amp;title=JavaScript%E3%81%AE%E5%9F%BA%E7%A4%8E_-_%E5%8F%8D%E5%BE%A9%E5%87%A6%E7%90%86%28for%E6%96%87%29</id>
	<title>JavaScriptの基礎 - 反復処理(for文) - 版の履歴</title>
	<link rel="self" type="application/atom+xml" href="http://mochiuwiki.e2.valueserver.jp/index.php?action=history&amp;feed=atom&amp;title=JavaScript%E3%81%AE%E5%9F%BA%E7%A4%8E_-_%E5%8F%8D%E5%BE%A9%E5%87%A6%E7%90%86%28for%E6%96%87%29"/>
	<link rel="alternate" type="text/html" href="http://mochiuwiki.e2.valueserver.jp/index.php?title=JavaScript%E3%81%AE%E5%9F%BA%E7%A4%8E_-_%E5%8F%8D%E5%BE%A9%E5%87%A6%E7%90%86(for%E6%96%87)&amp;action=history"/>
	<updated>2026-04-28T08:09:03Z</updated>
	<subtitle>このウィキのこのページに関する変更履歴</subtitle>
	<generator>MediaWiki 1.43.6</generator>
	<entry>
		<id>http://mochiuwiki.e2.valueserver.jp/index.php?title=JavaScript%E3%81%AE%E5%9F%BA%E7%A4%8E_-_%E5%8F%8D%E5%BE%A9%E5%87%A6%E7%90%86(for%E6%96%87)&amp;diff=14337&amp;oldid=prev</id>
		<title>Wiki: ページの作成:「== 概要 == JavaScriptにおける反復処理 (ループ) の中心となるのは、&lt;code&gt;for&lt;/code&gt;、&lt;code&gt;for...of&lt;/code&gt;、&lt;code&gt;for...in&lt;/code&gt; の3種類の構文である。&lt;br&gt; &lt;br&gt; &lt;code&gt;for&lt;/code&gt; 文はJavaScript誕生当初から存在する基本的なループ構文であり、カウンタ変数を使って任意の回数だけ処理を繰り返す。&lt;br&gt; インデックスを直接操作できるため、配列要素の位置に依存した処理…」</title>
		<link rel="alternate" type="text/html" href="http://mochiuwiki.e2.valueserver.jp/index.php?title=JavaScript%E3%81%AE%E5%9F%BA%E7%A4%8E_-_%E5%8F%8D%E5%BE%A9%E5%87%A6%E7%90%86(for%E6%96%87)&amp;diff=14337&amp;oldid=prev"/>
		<updated>2026-02-18T17:07:27Z</updated>

		<summary type="html">&lt;p&gt;ページの作成:「== 概要 == JavaScriptにおける反復処理 (ループ) の中心となるのは、&amp;lt;code&amp;gt;for&amp;lt;/code&amp;gt;、&amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt;、&amp;lt;code&amp;gt;for...in&amp;lt;/code&amp;gt; の3種類の構文である。&amp;lt;br&amp;gt; &amp;lt;br&amp;gt; &amp;lt;code&amp;gt;for&amp;lt;/code&amp;gt; 文はJavaScript誕生当初から存在する基本的なループ構文であり、カウンタ変数を使って任意の回数だけ処理を繰り返す。&amp;lt;br&amp;gt; インデックスを直接操作できるため、配列要素の位置に依存した処理…」&lt;/p&gt;
&lt;p&gt;&lt;b&gt;新規ページ&lt;/b&gt;&lt;/p&gt;&lt;div&gt;== 概要 ==&lt;br /&gt;
JavaScriptにおける反復処理 (ループ) の中心となるのは、&amp;lt;code&amp;gt;for&amp;lt;/code&amp;gt;、&amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt;、&amp;lt;code&amp;gt;for...in&amp;lt;/code&amp;gt; の3種類の構文である。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;code&amp;gt;for&amp;lt;/code&amp;gt; 文はJavaScript誕生当初から存在する基本的なループ構文であり、カウンタ変数を使って任意の回数だけ処理を繰り返す。&amp;lt;br&amp;gt;&lt;br /&gt;
インデックスを直接操作できるため、配列要素の位置に依存した処理や、複数の配列を並行して操作する場合に適している。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt; 文はES2015 (ES6) で導入された構文であり、イテラブルプロトコルに対応するオブジェクト (配列、文字列、Map、Set、NodeList等) の要素を順番に取り出して反復する。&amp;lt;br&amp;gt;&lt;br /&gt;
コードが簡潔になり、値の取得に集中できるため、現代的なJavaScript開発での配列やコレクション操作において推奨される。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;code&amp;gt;for...in&amp;lt;/code&amp;gt; 文はオブジェクトの列挙可能なプロパティキーを反復する構文である。&amp;lt;br&amp;gt;&lt;br /&gt;
プロトタイプチェーンの影響を受けるため、使用には注意が必要であり、配列の反復には使用してはならない。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
3種類のループを適切に使い分けることが、可読性の高い堅牢なソースコードを記述する上で重要である。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
原則として、配列や文字列の反復には &amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt;、インデックス操作が必要な場合は &amp;lt;code&amp;gt;for&amp;lt;/code&amp;gt;、&amp;lt;br&amp;gt;&lt;br /&gt;
オブジェクトのプロパティを列挙する場合は &amp;lt;code&amp;gt;Object.entries()&amp;lt;/code&amp;gt; と &amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt; の組み合わせを使用することが推奨される。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== for文 ==&lt;br /&gt;
&amp;lt;code&amp;gt;for&amp;lt;/code&amp;gt; 文は、初期化式、条件式、更新式の3つの部分で構成されるループ構文である。&amp;lt;br&amp;gt;&lt;br /&gt;
ループの制御を細かく記述できるため、カウンタを使った反復処理に適している。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
==== 基本構文 ====&lt;br /&gt;
&amp;lt;code&amp;gt;for&amp;lt;/code&amp;gt; 文の基本的な構文を以下に示す。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 for (initialization; condition; afterthought) {&lt;br /&gt;
    statement&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
各部分の役割を以下に示す。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;center&amp;gt;&lt;br /&gt;
{| class=&amp;quot;wikitable&amp;quot;&lt;br /&gt;
|+ for 文の構成要素&lt;br /&gt;
! 要素 !! 説明&lt;br /&gt;
|-&lt;br /&gt;
| initialization (初期化式) || ループ開始前に1度だけ実行される。&amp;lt;br&amp;gt;通常はカウンタ変数の宣言と初期化を行う。&lt;br /&gt;
|-&lt;br /&gt;
| condition (条件式) || 各反復の前に評価される。&amp;lt;br&amp;gt;trueであればループ本体を実行し、falseになるとループを終了する。&lt;br /&gt;
|-&lt;br /&gt;
| afterthought (更新式) || 各反復の後に実行される。&amp;lt;br&amp;gt;通常はカウンタ変数のインクリメントやデクリメントを行う。&lt;br /&gt;
|}&lt;br /&gt;
&amp;lt;/center&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
基本的な使用例を以下に示す。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 // 0〜4まで出力&lt;br /&gt;
 for (let i = 0; i &amp;lt; 5; i++) {&lt;br /&gt;
    console.log(i); // 0, 1, 2, 3, 4&lt;br /&gt;
 }&lt;br /&gt;
 &lt;br /&gt;
 // 逆順に反復&lt;br /&gt;
 for (let i = 4; i &amp;gt;= 0; i--) {&lt;br /&gt;
    console.log(i); // 4, 3, 2, 1, 0&lt;br /&gt;
 }&lt;br /&gt;
 &lt;br /&gt;
 // 2ずつインクリメント&lt;br /&gt;
 for (let i = 0; i &amp;lt;= 10; i += 2) {&lt;br /&gt;
    console.log(i); // 0, 2, 4, 6, 8, 10&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
初期化式と更新式は省略することができる。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 let i = 0;&lt;br /&gt;
 for (; i &amp;lt; 3;) {&lt;br /&gt;
    console.log(i);&lt;br /&gt;
    i++;&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
==== ループカウンタ ====&lt;br /&gt;
&amp;lt;code&amp;gt;for&amp;lt;/code&amp;gt; 文のカウンタ変数には、&amp;lt;code&amp;gt;let&amp;lt;/code&amp;gt; を使用することが推奨される。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;code&amp;gt;var&amp;lt;/code&amp;gt; を使用するとクロージャ問題が発生するため、現代的なJavaScript開発では使用しない。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
* &amp;lt;code&amp;gt;var&amp;lt;/code&amp;gt; を使用した場合のクロージャ問題&lt;br /&gt;
*: &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 // var を使用した場合: クロージャ問題が発生する&lt;br /&gt;
 var funcs = [];&lt;br /&gt;
 for (var i = 0; i &amp;lt; 3; i++) {&lt;br /&gt;
    funcs.push(function() {&lt;br /&gt;
       console.log(i);&lt;br /&gt;
    });&lt;br /&gt;
 }&lt;br /&gt;
 &lt;br /&gt;
 funcs[0]();  // 3 (期待値: 0)&lt;br /&gt;
 funcs[1]();  // 3 (期待値: 1)&lt;br /&gt;
 funcs[2]();  // 3 (期待値: 2)&lt;br /&gt;
 // varはブロックスコープを持たないため、全ての関数が同じ変数iを参照する&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
*: &amp;lt;br&amp;gt;&lt;br /&gt;
* &amp;lt;code&amp;gt;let&amp;lt;/code&amp;gt; を使用して問題を解決する例&lt;br /&gt;
*: &amp;lt;code&amp;gt;let&amp;lt;/code&amp;gt; はブロックスコープを持つため、各反復で独立した変数が作成される。&lt;br /&gt;
*: このため、非同期処理やコールバック関数を扱う場面でも正しく動作する。&lt;br /&gt;
*: &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 // let を使用した場合: 各反復で独立したスコープが作成される&lt;br /&gt;
 let funcs2 = [];&lt;br /&gt;
 for (let i = 0; i &amp;lt; 3; i++) {&lt;br /&gt;
    funcs2.push(function() {&lt;br /&gt;
       console.log(i);&lt;br /&gt;
    });&lt;br /&gt;
 }&lt;br /&gt;
 &lt;br /&gt;
 funcs2[0]();  // 0&lt;br /&gt;
 funcs2[1]();  // 1&lt;br /&gt;
 funcs2[2]();  // 2&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
==== 配列の反復 ====&lt;br /&gt;
&amp;lt;code&amp;gt;for&amp;lt;/code&amp;gt; 文で配列を反復する場合、インデックスを使って各要素にアクセスする。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 const arr = [10, 20, 30, 40, 50];&lt;br /&gt;
 &lt;br /&gt;
 // 基本的な配列の反復&lt;br /&gt;
 for (let i = 0; i &amp;lt; arr.length; i++) {&lt;br /&gt;
    console.log(arr[i]); // 10, 20, 30, 40, 50&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
大きな配列を反復する場合、&amp;lt;code&amp;gt;length&amp;lt;/code&amp;gt; プロパティへのアクセスを毎回行うとパフォーマンスに影響することがある。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;code&amp;gt;length&amp;lt;/code&amp;gt; の値をキャッシュすることで、この影響を軽減できる。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 // length をキャッシュしてパフォーマンスを最適化する&lt;br /&gt;
 const arr = [10, 20, 30, 40, 50];&lt;br /&gt;
 for (let i = 0, len = arr.length; i &amp;lt; len; i++) {&lt;br /&gt;
    console.log(arr[i]);&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
インデックスと値の両方を使用する例を以下に示す。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 const fruits = [&amp;quot;apple&amp;quot;, &amp;quot;banana&amp;quot;, &amp;quot;cherry&amp;quot;];&lt;br /&gt;
 &lt;br /&gt;
 for (let i = 0; i &amp;lt; fruits.length; i++) {&lt;br /&gt;
    console.log(`[${i}] ${fruits[i]}`);&lt;br /&gt;
    // [0] apple&lt;br /&gt;
    // [1] banana&lt;br /&gt;
    // [2] cherry&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
==== ネストしたfor文 ====&lt;br /&gt;
&amp;lt;code&amp;gt;for&amp;lt;/code&amp;gt; 文はネストして使用することができる。&amp;lt;br&amp;gt;&lt;br /&gt;
2次元配列の処理や、総当たりの組み合わせを求める場合等に活用される。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 // 2次元配列の反復&lt;br /&gt;
 const matrix = [&lt;br /&gt;
    [1, 2, 3],&lt;br /&gt;
    [4, 5, 6],&lt;br /&gt;
    [7, 8, 9]&lt;br /&gt;
 ];&lt;br /&gt;
 &lt;br /&gt;
 for (let i = 0; i &amp;lt; matrix.length; i++) {&lt;br /&gt;
    for (let j = 0; j &amp;lt; matrix[i].length; j++) {&lt;br /&gt;
       console.log(matrix[i][j]); // 1, 2, 3, 4, 5, 6, 7, 8, 9&lt;br /&gt;
    }&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
ネストしたループでは、通常の &amp;lt;code&amp;gt;break&amp;lt;/code&amp;gt; は内側のループのみを抜け出す。&amp;lt;br&amp;gt;&lt;br /&gt;
外側のループも含めて1度に抜け出すには、&amp;lt;code&amp;gt;ラベル付きbreak&amp;lt;/code&amp;gt; を使用する。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 const matrix = [&lt;br /&gt;
    [1, 2, 3],&lt;br /&gt;
    [4, 5, 6],&lt;br /&gt;
    [7, 8, 9]&lt;br /&gt;
 ];&lt;br /&gt;
 const target = 5;&lt;br /&gt;
 &lt;br /&gt;
 // ラベル付きbreakで外側のループを抜ける&lt;br /&gt;
 outerLoop: for (let i = 0; i &amp;lt; matrix.length; i++) {&lt;br /&gt;
    for (let j = 0; j &amp;lt; matrix[i].length; j++) {&lt;br /&gt;
       if (matrix[i][j] === target) {&lt;br /&gt;
          console.log(`Found at [${i}, ${j}]`); // Found at [1, 1]&lt;br /&gt;
          break outerLoop; // 外側のループごと終了する&lt;br /&gt;
       }&lt;br /&gt;
    }&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
ラベル付き &amp;lt;code&amp;gt;continue&amp;lt;/code&amp;gt; を使用すると、外側のループの次の反復にジャンプすることもできる。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 outer: for (let i = 0; i &amp;lt; 3; i++) {&lt;br /&gt;
    for (let j = 0; j &amp;lt; 3; j++) {&lt;br /&gt;
       if (j === 1) continue outer; // 外側のループの次の反復へ&lt;br /&gt;
       console.log(`i=${i}, j=${j}`);&lt;br /&gt;
       // i=0, j=0&lt;br /&gt;
       // i=1, j=0&lt;br /&gt;
       // i=2, j=0&lt;br /&gt;
    }&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
==== 無限ループとfor文 ====&lt;br /&gt;
&amp;lt;code&amp;gt;for&amp;lt;/code&amp;gt; 文の3つの式を全て省略すると、条件無しの無限ループになる。&amp;lt;br&amp;gt;&lt;br /&gt;
無限ループは、終了条件を &amp;lt;code&amp;gt;break&amp;lt;/code&amp;gt; で制御する場合に使用する。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 // for (;;) は無限ループを表す慣用的な記法&lt;br /&gt;
 let count = 0;&lt;br /&gt;
 for (;;) {&lt;br /&gt;
    count++;&lt;br /&gt;
    if (count &amp;gt;= 5) break; // 終了条件で break する&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
 console.log(count); // 5&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;u&amp;gt;無限ループは、ゲームループやサーバのイベントループ等、明示的な終了条件が必要な場面で使用される。&amp;lt;/u&amp;gt;&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;u&amp;gt;ただし、&amp;lt;code&amp;gt;break&amp;lt;/code&amp;gt; による終了条件を必ず設けなければ、プログラムが停止しなくなるため注意が必要である。&amp;lt;/u&amp;gt;&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== for...of文 ==&lt;br /&gt;
&amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt; 文は、ES2015 (ES6)で導入されたループ構文であり、イテラブルプロトコルに対応するオブジェクトの要素を順番に取り出して反復する。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
==== 基本構文 ====&lt;br /&gt;
&amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt; 文の基本的な構文を以下に示す。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 for (variable of iterable) {&lt;br /&gt;
    statement&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;code&amp;gt;variable&amp;lt;/code&amp;gt; には各反復で取り出された値が代入される。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;code&amp;gt;iterable&amp;lt;/code&amp;gt; はイテラブルプロトコルに対応するオブジェクトであり、内部的に &amp;lt;code&amp;gt;Symbol.iterator&amp;lt;/code&amp;gt; メソッドを実装する。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt; で使用可能な主なイテラブルを以下に示す。&amp;lt;br&amp;gt;&lt;br /&gt;
* 配列 (Array)&lt;br /&gt;
* 文字列 (String)&lt;br /&gt;
* Map&lt;br /&gt;
* Set&lt;br /&gt;
* NodeList&lt;br /&gt;
* arguments オブジェクト&lt;br /&gt;
* ジェネレータオブジェクト&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
基本的な使用例を以下に示す。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 const colors = [&amp;quot;red&amp;quot;, &amp;quot;green&amp;quot;, &amp;quot;blue&amp;quot;];&lt;br /&gt;
 &lt;br /&gt;
 for (const color of colors) {&lt;br /&gt;
    console.log(color); // red, green, blue&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;u&amp;gt;各反復で値を変更しない場合は &amp;lt;code&amp;gt;const&amp;lt;/code&amp;gt; を使用することが推奨される。&amp;lt;/u&amp;gt;&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;u&amp;gt;反復中に値を変更する必要がある場合は &amp;lt;code&amp;gt;let&amp;lt;/code&amp;gt; を使用する。&amp;lt;/u&amp;gt;&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
==== 配列の反復 ====&lt;br /&gt;
配列の反復に &amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt; を使用すると、インデックスを気にせず各要素に直接アクセスできる。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 const numbers = [10, 20, 30, 40, 50];&lt;br /&gt;
 &lt;br /&gt;
 // 値のみを取得&lt;br /&gt;
 for (const num of numbers) {&lt;br /&gt;
    console.log(num); // 10, 20, 30, 40, 50&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
インデックスと値の両方が必要な場合は、配列の &amp;lt;code&amp;gt;entries()&amp;lt;/code&amp;gt; メソッドと組み合わせて使用する。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 const fruits = [&amp;quot;apple&amp;quot;, &amp;quot;banana&amp;quot;, &amp;quot;cherry&amp;quot;];&lt;br /&gt;
 &lt;br /&gt;
 // entries() でインデックスと値の両方を取得&lt;br /&gt;
 for (const [index, fruit] of fruits.entries()) {&lt;br /&gt;
    console.log(`[${index}] ${fruit}`);&lt;br /&gt;
    // [0] apple&lt;br /&gt;
    // [1] banana&lt;br /&gt;
    // [2] cherry&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;u&amp;gt;インデックスのみが必要な場合は &amp;lt;code&amp;gt;keys()&amp;lt;/code&amp;gt;、値のみが必要な場合は &amp;lt;code&amp;gt;values()&amp;lt;/code&amp;gt; を使用できる。&amp;lt;/u&amp;gt;&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 const arr = [&amp;quot;a&amp;quot;, &amp;quot;b&amp;quot;, &amp;quot;c&amp;quot;];&lt;br /&gt;
 &lt;br /&gt;
 // keys(): インデックスを反復&lt;br /&gt;
 for (const index of arr.keys()) {&lt;br /&gt;
    console.log(index); // 0, 1, 2&lt;br /&gt;
 }&lt;br /&gt;
 &lt;br /&gt;
 // values(): 値を反復 (for...of と同等)&lt;br /&gt;
 for (const value of arr.values()) {&lt;br /&gt;
    console.log(value); // a, b, c&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
==== 文字列の反復 ====&lt;br /&gt;
&amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt; は文字列を UNICODEコードポイント単位で反復する。&amp;lt;br&amp;gt;&lt;br /&gt;
サロゲートペアで表現される文字 (絵文字や一部の漢字など) も1文字として正しく扱われる点が、従来のfor文との大きな違いである。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 // for...of: Unicodeコードポイント単位で反復 (サロゲートペアに対応)&lt;br /&gt;
 const emoji = &amp;quot;Hello 😀&amp;quot;;&lt;br /&gt;
 &lt;br /&gt;
 for (const char of emoji) {&lt;br /&gt;
    console.log(char);&lt;br /&gt;
    // H, e, l, l, o, &amp;#039; &amp;#039;, 😀 (7回の反復)&lt;br /&gt;
    // 😀 が 1文字として正しく扱われる&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
従来のfor文では、サロゲートペアが2つのコード単位に分割されてしまう。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 // 従来の for 文: サロゲートペアが分割される&lt;br /&gt;
 const emoji = &amp;quot;Hello 😀&amp;quot;;&lt;br /&gt;
 &lt;br /&gt;
 for (let i = 0; i &amp;lt; emoji.length; i++) {&lt;br /&gt;
    console.log(emoji[i]);&lt;br /&gt;
    // H, e, l, l, o, &amp;#039; &amp;#039;, (サロゲートペアの前半), (サロゲートペアの後半)&lt;br /&gt;
    // 😀 が 2文字に分割される (8回の反復)&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
UNICODE文字を正しく扱う必要がある場面では、&amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt; を使用することを推奨する。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
==== Mapの反復 ====&lt;br /&gt;
&amp;lt;code&amp;gt;Map&amp;lt;/code&amp;gt; オブジェクトは、&amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt; で反復することができる。&amp;lt;br&amp;gt;&lt;br /&gt;
各反復では、&amp;lt;code&amp;gt;[key, value]&amp;lt;/code&amp;gt; のペアが取り出される。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 const map = new Map([&lt;br /&gt;
    [&amp;quot;name&amp;quot;, &amp;quot;Taro&amp;quot;],&lt;br /&gt;
    [&amp;quot;age&amp;quot;, 30],&lt;br /&gt;
    [&amp;quot;city&amp;quot;, &amp;quot;Tokyo&amp;quot;]&lt;br /&gt;
 ]);&lt;br /&gt;
 &lt;br /&gt;
 // [key, value] のペアを反復&lt;br /&gt;
 for (const [key, value] of map) {&lt;br /&gt;
    console.log(`${key}: ${value}`);&lt;br /&gt;
    // name: Taro&lt;br /&gt;
    // age: 30&lt;br /&gt;
    // city: Tokyo&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;code&amp;gt;Map&amp;lt;/code&amp;gt; の &amp;lt;code&amp;gt;keys()&amp;lt;/code&amp;gt;、&amp;lt;code&amp;gt;values()&amp;lt;/code&amp;gt;、&amp;lt;code&amp;gt;entries()&amp;lt;/code&amp;gt; メソッドも &amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt; で使用できる。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 const map = new Map([[&amp;quot;a&amp;quot;, 1], [&amp;quot;b&amp;quot;, 2], [&amp;quot;c&amp;quot;, 3]]);&lt;br /&gt;
 &lt;br /&gt;
 // キーのみを反復&lt;br /&gt;
 for (const key of map.keys()) {&lt;br /&gt;
    console.log(key); // a, b, c&lt;br /&gt;
 }&lt;br /&gt;
 &lt;br /&gt;
 // 値のみを反復&lt;br /&gt;
 for (const value of map.values()) {&lt;br /&gt;
    console.log(value); // 1, 2, 3&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
==== Setの反復 ====&lt;br /&gt;
&amp;lt;code&amp;gt;Set&amp;lt;/code&amp;gt; オブジェクトは重複しない値のコレクションであり、&amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt; で反復できる。&amp;lt;br&amp;gt;&lt;br /&gt;
挿入順に値が取り出される。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 const set = new Set([1, 2, 3, 2, 1]); // 重複は自動的に除去される&lt;br /&gt;
 &lt;br /&gt;
 for (const value of set) {&lt;br /&gt;
    console.log(value); // 1, 2, 3&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
文字列の重複除去と反復を組み合わせる実用的な例を以下に示す。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 const words = [&amp;quot;apple&amp;quot;, &amp;quot;banana&amp;quot;, &amp;quot;apple&amp;quot;, &amp;quot;cherry&amp;quot;, &amp;quot;banana&amp;quot;];&lt;br /&gt;
 const uniqueWords = new Set(words);&lt;br /&gt;
 &lt;br /&gt;
 for (const word of uniqueWords) {&lt;br /&gt;
    console.log(word); // apple, banana, cherry&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
==== NodeListの反復 ====&lt;br /&gt;
Webブラウザ環境では、&amp;lt;code&amp;gt;document.querySelectorAll()&amp;lt;/code&amp;gt; 等が返す &amp;lt;code&amp;gt;NodeList&amp;lt;/code&amp;gt; も &amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt; で反復できる。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 // 全ての &amp;lt;p&amp;gt; 要素を取得して反復&lt;br /&gt;
 const paragraphs = document.querySelectorAll(&amp;quot;p&amp;quot;);&lt;br /&gt;
 &lt;br /&gt;
 for (const paragraph of paragraphs) {&lt;br /&gt;
    paragraph.style.color = &amp;quot;blue&amp;quot;;&lt;br /&gt;
    console.log(paragraph.textContent);&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;code&amp;gt;NodeList&amp;lt;/code&amp;gt; は配列ではないため、&amp;lt;code&amp;gt;Array.prototype&amp;lt;/code&amp;gt; のメソッドを直接使用できない場合がある。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt; は &amp;lt;code&amp;gt;NodeList&amp;lt;/code&amp;gt; のイテラブルインターフェースを通じて動作するため、配列への変換が不要になる。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== for...in文 ==&lt;br /&gt;
&amp;lt;code&amp;gt;for...in&amp;lt;/code&amp;gt; 文は、オブジェクトの列挙可能な (enumerable) プロパティキーを反復する構文である。&amp;lt;br&amp;gt;&lt;br /&gt;
プロトタイプチェーンの影響を受けるため、使用する場面を慎重に選ぶ必要がある。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
==== 基本構文 ====&lt;br /&gt;
&amp;lt;code&amp;gt;for...in&amp;lt;/code&amp;gt; 文の基本的な構文を以下に示す。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 for (variable in object) {&lt;br /&gt;
    statement&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;code&amp;gt;variable&amp;lt;/code&amp;gt; には各反復でプロパティキーが文字列として代入される。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
基本的な使用例を以下に示す。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 const person = {&lt;br /&gt;
    name: &amp;quot;Taro&amp;quot;,&lt;br /&gt;
    age: 30,&lt;br /&gt;
    city: &amp;quot;Tokyo&amp;quot;&lt;br /&gt;
 };&lt;br /&gt;
 &lt;br /&gt;
 for (const key in person) {&lt;br /&gt;
    console.log(`${key}: ${person[key]}`);&lt;br /&gt;
    // name: Taro&lt;br /&gt;
    // age: 30&lt;br /&gt;
    // city: Tokyo&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
==== プロトタイプチェーンの影響 ====&lt;br /&gt;
&amp;lt;code&amp;gt;for...in&amp;lt;/code&amp;gt; は、オブジェクト自身のプロパティだけでなく、プロトタイプチェーンを通じて継承されたプロパティも列挙する。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 function Parent() {&lt;br /&gt;
    this.a = 1;&lt;br /&gt;
 }&lt;br /&gt;
 Parent.prototype.b = 2; // プロトタイプに追加&lt;br /&gt;
 &lt;br /&gt;
 const obj = new Parent();&lt;br /&gt;
 &lt;br /&gt;
 for (const key in obj) {&lt;br /&gt;
    console.log(key); // &amp;quot;a&amp;quot;, &amp;quot;b&amp;quot; (b は継承プロパティ)&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
継承されたプロパティを除外して、オブジェクト自身のプロパティのみを処理するには、&amp;lt;code&amp;gt;Object.hasOwn()&amp;lt;/code&amp;gt; (ES2022) または &amp;lt;code&amp;gt;hasOwnProperty()&amp;lt;/code&amp;gt; を使用する。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 function Parent() {&lt;br /&gt;
    this.a = 1;&lt;br /&gt;
 }&lt;br /&gt;
 Parent.prototype.b = 2;&lt;br /&gt;
 &lt;br /&gt;
 const obj = new Parent();&lt;br /&gt;
 &lt;br /&gt;
 // Object.hasOwn を使用 (ES2022以降で推奨)&lt;br /&gt;
 for (const key in obj) {&lt;br /&gt;
    if (Object.hasOwn(obj, key)) {&lt;br /&gt;
       console.log(key); // &amp;quot;a&amp;quot; のみ&lt;br /&gt;
    }&lt;br /&gt;
 }&lt;br /&gt;
 &lt;br /&gt;
 // hasOwnProperty を使用 (互換性が必要な場合)&lt;br /&gt;
 for (const key in obj) {&lt;br /&gt;
    if (obj.hasOwnProperty(key)) {&lt;br /&gt;
       console.log(key); // &amp;quot;a&amp;quot; のみ&lt;br /&gt;
    }&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;code&amp;gt;Object.hasOwn()&amp;lt;/code&amp;gt; は &amp;lt;code&amp;gt;hasOwnProperty()&amp;lt;/code&amp;gt; よりも安全であり、&amp;lt;code&amp;gt;hasOwnProperty&amp;lt;/code&amp;gt; が上書きされたオブジェクトでも正しく動作する。&amp;lt;br&amp;gt;&lt;br /&gt;
現代的なコードでは &amp;lt;code&amp;gt;Object.hasOwn()&amp;lt;/code&amp;gt; の使用が推奨される。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
==== 配列にfor...inを使用してはならない理由 ====&lt;br /&gt;
&amp;lt;code&amp;gt;for...in&amp;lt;/code&amp;gt; を配列の反復に使用してはならない。&amp;lt;br&amp;gt;&lt;br /&gt;
配列に &amp;lt;code&amp;gt;for...in&amp;lt;/code&amp;gt; を使用することにより、以下の問題が発生する。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
* &amp;lt;u&amp;gt;インデックスが文字列になる。&amp;lt;/u&amp;gt;&lt;br /&gt;
*: 配列のインデックスは数値だが、&amp;lt;code&amp;gt;for...in&amp;lt;/code&amp;gt; ではキーとして文字列 (&amp;quot;0&amp;quot;, &amp;quot;1&amp;quot;, &amp;quot;2&amp;quot;) が返される。&lt;br /&gt;
*: 数値計算に使用すると、型変換による予期しない動作が発生する可能性がある。&lt;br /&gt;
* &amp;lt;u&amp;gt;プロトタイプに追加されたプロパティが列挙される。&amp;lt;/u&amp;gt;&lt;br /&gt;
*: &amp;lt;code&amp;gt;Array.prototype&amp;lt;/code&amp;gt; に追加されたメソッドや、配列に直接追加されたプロパティも列挙対象になる。&lt;br /&gt;
* &amp;lt;u&amp;gt;列挙順序が保証されない場合がある。&amp;lt;/u&amp;gt;&lt;br /&gt;
*: 配列のインデックス順での反復が保証されず、エンジンの実装によって異なる可能性がある。&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
問題を示すコード例を以下に示す。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 const arr = [10, 20, 30];&lt;br /&gt;
 arr.custom = &amp;quot;extra&amp;quot;; // 配列に直接プロパティを追加&lt;br /&gt;
 &lt;br /&gt;
 for (const i in arr) {&lt;br /&gt;
    console.log(i);&lt;br /&gt;
    // &amp;quot;0&amp;quot;, &amp;quot;1&amp;quot;, &amp;quot;2&amp;quot;, &amp;quot;custom&amp;quot;&lt;br /&gt;
    // custom が意図せず列挙される&lt;br /&gt;
    // インデックスは文字列として返される&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;u&amp;gt;配列の反復には &amp;lt;code&amp;gt;for&amp;lt;/code&amp;gt; 文 または &amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt; 文を使用すること。&amp;lt;/u&amp;gt;&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
==== Object.keys / Object.values / Object.entries ====&lt;br /&gt;
&amp;lt;code&amp;gt;for...in&amp;lt;/code&amp;gt; の代わりに、&amp;lt;code&amp;gt;Object.keys()&amp;lt;/code&amp;gt;、&amp;lt;code&amp;gt;Object.values()&amp;lt;/code&amp;gt;、&amp;lt;code&amp;gt;Object.entries()&amp;lt;/code&amp;gt; と &amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt; を組み合わせる方法が推奨される。&amp;lt;br&amp;gt;&lt;br /&gt;
これらのメソッドはプロトタイプチェーンの影響を受けず、オブジェクト自身の列挙可能なプロパティのみを対象とする。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 const obj = { name: &amp;quot;Taro&amp;quot;, age: 30, city: &amp;quot;Tokyo&amp;quot; };&lt;br /&gt;
 &lt;br /&gt;
 // Object.keys(): プロパティキーの配列を返す&lt;br /&gt;
 console.log(Object.keys(obj));   // [&amp;quot;name&amp;quot;, &amp;quot;age&amp;quot;, &amp;quot;city&amp;quot;]&lt;br /&gt;
 &lt;br /&gt;
 for (const key of Object.keys(obj)) {&lt;br /&gt;
    console.log(key); // name, age, city&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 const obj = { name: &amp;quot;Taro&amp;quot;, age: 30, city: &amp;quot;Tokyo&amp;quot; };&lt;br /&gt;
 &lt;br /&gt;
 // Object.values(): プロパティ値の配列を返す&lt;br /&gt;
 console.log(Object.values(obj)); // [&amp;quot;Taro&amp;quot;, 30, &amp;quot;Tokyo&amp;quot;]&lt;br /&gt;
 &lt;br /&gt;
 for (const value of Object.values(obj)) {&lt;br /&gt;
    console.log(value); // Taro, 30, Tokyo&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 const obj = { name: &amp;quot;Taro&amp;quot;, age: 30, city: &amp;quot;Tokyo&amp;quot; };&lt;br /&gt;
 &lt;br /&gt;
 // Object.entries(): [key, value] ペアの配列を返す&lt;br /&gt;
 console.log(Object.entries(obj));&lt;br /&gt;
 // [[&amp;quot;name&amp;quot;, &amp;quot;Taro&amp;quot;], [&amp;quot;age&amp;quot;, 30], [&amp;quot;city&amp;quot;, &amp;quot;Tokyo&amp;quot;]]&lt;br /&gt;
 &lt;br /&gt;
 for (const [key, value] of Object.entries(obj)) {&lt;br /&gt;
    console.log(`${key}: ${value}`);&lt;br /&gt;
    // name: Taro&lt;br /&gt;
    // age: 30&lt;br /&gt;
    // city: Tokyo&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;u&amp;gt;オブジェクトのプロパティを反復する場合、&amp;lt;code&amp;gt;Object.entries()&amp;lt;/code&amp;gt; と &amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt; の組み合わせが最も安全で明示的な方法である。&amp;lt;/u&amp;gt;&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== for系ループの比較 ==&lt;br /&gt;
&amp;lt;code&amp;gt;for&amp;lt;/code&amp;gt;、&amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt;、&amp;lt;code&amp;gt;for...in&amp;lt;/code&amp;gt; の特性を比較した表を以下に示す。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;center&amp;gt;&lt;br /&gt;
{| class=&amp;quot;wikitable&amp;quot;&lt;br /&gt;
|+ for / for...of / for...in の比較表&lt;br /&gt;
! 特性 !! for !! for...of !! for...in&lt;br /&gt;
|-&lt;br /&gt;
| 主な用途 || カウンタベースの反復 || イテラブルの要素反復 || オブジェクトのプロパティキー列挙&lt;br /&gt;
|-&lt;br /&gt;
| 主な対象 || 任意 (カウンタで制御) || 配列, 文字列, Map, Set, NodeList等 || オブジェクト&lt;br /&gt;
|-&lt;br /&gt;
| 各反復で取得できる値 || カスタム (インデックス等) || 要素の値 || プロパティキー (文字列)&lt;br /&gt;
|-&lt;br /&gt;
| 導入バージョン || ES1 (初期) || ES2015 (ES6) || ES1 (初期)&lt;br /&gt;
|-&lt;br /&gt;
| break / continue || 使用可能 || 使用可能 || 使用可能&lt;br /&gt;
|-&lt;br /&gt;
| インデックスの取得 || 直接アクセス可能 || entries() で取得 || キー自体がインデックス文字列&lt;br /&gt;
|-&lt;br /&gt;
| 配列での使用 || 推奨 (インデックス操作が必要な場合) || 推奨 (値のみの反復) || 非推奨&lt;br /&gt;
|-&lt;br /&gt;
| プロトタイプチェーンの影響 || なし || なし || あり (継承プロパティも列挙)&lt;br /&gt;
|-&lt;br /&gt;
| サロゲートペアへの対応 || 非対応 (分割される) || 対応 (1文字として扱う) || 非対応&lt;br /&gt;
|}&lt;br /&gt;
&amp;lt;/center&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
==== 使い分けの指針 ====&lt;br /&gt;
3種類のループの使い分けの指針を以下に示す。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
* 配列の値を順番に処理する。&lt;br /&gt;
*: &amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt; を使用する。&lt;br /&gt;
*: シンプルで可読性が高く、インデックスを意識しなくてよい。&lt;br /&gt;
*: &amp;lt;br&amp;gt;&lt;br /&gt;
* インデックスが必要な配列の反復&lt;br /&gt;
*: &amp;lt;code&amp;gt;for&amp;lt;/code&amp;gt; 文を使用する。または &amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt; と &amp;lt;code&amp;gt;array.entries()&amp;lt;/code&amp;gt; を組み合わせる。&lt;br /&gt;
*: &amp;lt;br&amp;gt;&lt;br /&gt;
* 文字列をUNICODEコードポイント単位で正しく処理する。&lt;br /&gt;
*: &amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt; を使用する。&lt;br /&gt;
*: 絵文字等のサロゲートペア文字を1文字として扱うことができる。&lt;br /&gt;
*: &amp;lt;br&amp;gt;&lt;br /&gt;
* Map または Set の反復&lt;br /&gt;
*: &amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt; を使用する。&lt;br /&gt;
*: それぞれのコレクションのイテラブルインターフェースをそのまま活用できる。&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
* オブジェクト自身のプロパティを安全に反復する。&lt;br /&gt;
*: &amp;lt;code&amp;gt;Object.entries()&amp;lt;/code&amp;gt; と &amp;lt;code&amp;gt;for...of&amp;lt;/code&amp;gt; を組み合わせる。&lt;br /&gt;
*: プロトタイプチェーンの影響を受けない。&lt;br /&gt;
*: &amp;lt;br&amp;gt;&lt;br /&gt;
* 継承プロパティを含めてオブジェクトのプロパティを列挙する。&lt;br /&gt;
*: &amp;lt;code&amp;gt;for...in&amp;lt;/code&amp;gt; と &amp;lt;code&amp;gt;Object.hasOwn()&amp;lt;/code&amp;gt; を組み合わせる。&lt;br /&gt;
*: 自身のプロパティのみを対象にする場合は、&amp;lt;code&amp;gt;Object.hasOwn()&amp;lt;/code&amp;gt; でフィルタリングする。&lt;br /&gt;
*: &amp;lt;br&amp;gt;&lt;br /&gt;
* 特定の条件が満たされるまで反復する。(回数が不定の場合)&lt;br /&gt;
*: &amp;lt;code&amp;gt;for (;;)&amp;lt;/code&amp;gt; と &amp;lt;code&amp;gt;break&amp;lt;/code&amp;gt; を組み合わせる。&lt;br /&gt;
*: または &amp;lt;code&amp;gt;while&amp;lt;/code&amp;gt; 文を使用する。&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
使い分けを示す例を以下に示す。&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
 &amp;lt;syntaxhighlight lang=&amp;quot;javascript&amp;quot;&amp;gt;&lt;br /&gt;
 // 配列の値のみが必要: for...of&lt;br /&gt;
 const numbers = [1, 2, 3, 4, 5];&lt;br /&gt;
 for (const num of numbers) {&lt;br /&gt;
    console.log(num * 2);&lt;br /&gt;
 }&lt;br /&gt;
 &lt;br /&gt;
 // 配列のインデックスが必要: for&lt;br /&gt;
 for (let i = 0; i &amp;lt; numbers.length; i++) {&lt;br /&gt;
    console.log(`numbers[${i}] = ${numbers[i]}`);&lt;br /&gt;
 }&lt;br /&gt;
 &lt;br /&gt;
 // オブジェクトのプロパティ反復: Object.entries + for...of&lt;br /&gt;
 const config = { host: &amp;quot;localhost&amp;quot;, port: 3000, debug: true };&lt;br /&gt;
 for (const [key, value] of Object.entries(config)) {&lt;br /&gt;
    console.log(`${key}: ${value}`);&lt;br /&gt;
 }&lt;br /&gt;
 &lt;br /&gt;
 // 文字列をコードポイント単位で処理: for...of&lt;br /&gt;
 const text = &amp;quot;Hello 😀 World&amp;quot;;&lt;br /&gt;
 for (const char of text) {&lt;br /&gt;
    console.log(char);&lt;br /&gt;
 }&lt;br /&gt;
 &amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== 関連情報 ==&lt;br /&gt;
* [[JavaScriptの基礎 - 変数宣言]]&lt;br /&gt;
*: let / const / varの宣言方法、スコープ、ホイスティング&lt;br /&gt;
* [[JavaScriptの基礎 - プリミティブ型]]&lt;br /&gt;
*: 7つのプリミティブ型、typeof演算子、型の自動変換&lt;br /&gt;
* [[JavaScriptの基礎 - 比較演算子と論理演算子]]&lt;br /&gt;
*: === / ==の違い、短絡評価、Null合体演算子、オプショナルチェーン&lt;br /&gt;
* [[JavaScriptの基礎 - 条件分岐]]&lt;br /&gt;
*: if/else、三項演算子、switch文、Truthy/Falsy&lt;br /&gt;
* [[JavaScriptの基礎 - 反復処理(while文)]]&lt;br /&gt;
*: while文、do...while文、break / continue、無限ループ回避&lt;br /&gt;
&amp;lt;br&amp;gt;&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
{{#seo:&lt;br /&gt;
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki&lt;br /&gt;
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,電気回路,電子回路,基板,プリント基板&lt;br /&gt;
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux&lt;br /&gt;
|image=/resources/assets/MochiuLogo_Single_Blue.png&lt;br /&gt;
}}&lt;br /&gt;
&lt;br /&gt;
__FORCETOC__&lt;br /&gt;
[[カテゴリ:Web]]&lt;/div&gt;</summary>
		<author><name>Wiki</name></author>
	</entry>
</feed>