JavaScript | 基礎構文：ループ – for…of

JavaScript

2025.12.13

for…of 文とは何か
基本構文と流れ
例題で理解する
for…in との違い
注意点とコツ
1. インデックスが必要なら通常の for 文を使う
2. 読みやすさを優先できる
まとめ

for…of 文とは何か

for...of 文は、配列や文字列など「繰り返し可能なデータ（イテラブル）」の要素を順番に取り出すためのループ構文です。インデックス番号を意識せずに「中身だけ」を扱えるので、初心者にも分かりやすく、読みやすいコードが書けます。

基本構文と流れ

構文は次のようになります。

for (let element of 配列や文字列) {
  // element に要素が順番に入る
}

for (let element of 配列や文字列) {
  // element に要素が順番に入る
}

JavaScript

element には配列や文字列の「要素」が順番に代入されます。
配列なら値そのもの、文字列なら文字が1文字ずつ取り出されます。

例題で理解する

例題1：配列の要素を順番に表示

const fruits = ["apple", "banana", "orange"];

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

const fruits = ["apple", "banana", "orange"];

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

JavaScript

結果は以下のようになります。

apple
banana
orange

インデックス番号を使わずに、要素だけを簡単に取り出せます。

例題2：文字列を1文字ずつ処理

const word = "Hello";

for (let char of word) {
  console.log(char);
}

const word = "Hello";

for (let char of word) {
  console.log(char);
}

JavaScript

結果は以下のようになります。

H
e
l
l
o

文字列を1文字ずつ処理できるので、文字単位の操作に便利です。

例題3：Set や Map にも使える

for...of は配列や文字列だけでなく、Set や Map などのイテラブルにも使えます。

const set = new Set([1, 2, 3]);

for (let value of set) {
  console.log(value);
}
// 出力: 1, 2, 3

const set = new Set([1, 2, 3]);

for (let value of set) {
  console.log(value);
}
// 出力: 1, 2, 3

JavaScript

const map = new Map([
  ["name", "Taro"],
  ["age", 20]
]);

for (let [key, value] of map) {
  console.log(key, ":", value);
}
// 出力: name : Taro, age : 20

const map = new Map([
  ["name", "Taro"],
  ["age", 20]
]);

for (let [key, value] of map) {
  console.log(key, ":", value);
}
// 出力: name : Taro, age : 20