for...of

フォーオブ（制御構文）

意味配列やリストの要素を順番に取得してループ処理

for...ofとは？

Iterableオブジェクト（Array、Map、Setなど）の要素に対してループを実行する。

for...ofの具体的な使い方

配列の要素を反復処理する例

const fruits = ['りんご', 'バナナ', 'みかん'];

for (let fruit of fruits) {
  console.log(fruit);
}

👇出力結果

りんご
バナナ
みかん

fruits配列の各要素を順番に取得し、出力します。for...ofループを使用することで、配列の各要素に直接アクセスできます。

Mapオブジェクトの反復処理

const map = new Map([
  ['name', '山田太郎'],
  ['age', 30],
  ['job', 'エンジニア']
]);

for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}

👇出力結果

name: 山田太郎
age: 30
job: エンジニア

Mapオブジェクトの各エントリーを[key, value]の形で取得し、出力します。for...ofループはMapオブジェクトの反復にも使用できます。

for...ofに関するよくある質問

Q. for...ofで使えるオブジェクトは？

A. for...ofループは、イテラブル（反復可能）なオブジェクトに対して使用できます。これには配列、文字列、Map、Set、TypedArrayなどが含まれます。通常のオブジェクトは直接使用できません。

Q. for...ofとfor...inの違いは？

A. for...ofはイテラブルオブジェクトの値を直接取得しますが、for...inはオブジェクトのプロパティ名（キー）を取得します。for...ofは配列要素の順序を保証しますが、for...inは順序を保証しません。

Q. オブジェクトでfor...ofを使うには？

A. 通常のオブジェクトはイテラブルではないため、直接for...ofを使用できません。しかし、Object.keys()、Object.values()、Object.entries()などのメソッドを使用してイテラブルな配列を生成し、それに対してfor...ofを使用できます。

for...ofが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのfor...ofやelse if、switch、case（switch文で使用）、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。