【JavaScript】for...of文で簡単に配列やオブジェクトをループする方法！初心者向けステップバイステップガイド

「for...of文」はJavaScriptの構文で、配列やオブジェクトを簡潔にループするための強力なツールです。この記事では、基本的な使い方から文字列やMap、Setオブジェクトの取り扱い、そして「for...in文」との違いまで幅広く解説しています。

「for...of文」の基本的な使い方

「for...of文」とは？

for...of文は、配列やオブジェクトの各要素をループして取り出すためのJavaScriptの構文です。一番の特徴は、簡潔で直感的なコードが書けること。例えば、配列の各要素を表示したい場合、以下のように書けます。

let fruits = ['apple', 'banana', 'cherry'];
for (let fruit of fruits) {
    console.log(fruit);
}
// 出力:
// apple
// banana
// cherry

「for...of文」の使用例4パターン

文字列を1文字ずつ取り出す

for...of文は文字列のループもサポートしています。

let word = 'hello';
for (let letter of word) {
    console.log(letter);
}
// 出力:
// h
// e
// l
// l
// o

配列のインデックスも取得したい場合

Array.prototype.entries()を使って、インデックスと要素を同時に取得できます。

let colors = ['red', 'green', 'blue'];
for (let [index, color] of colors.entries()) {
    console.log(index, color);
}
// 出力:
// 0 'red'
// 1 'green'
// 2 'blue'

Mapオブジェクトのキーと値を取得する

for...of文はMapオブジェクトのループにも対応しています。

let capitalCities = new Map([
    ['Japan', 'Tokyo'],
    ['France', 'Paris'],
    ['Italy', 'Rome']
]);
for (let [country, city] of capitalCities) {
    console.log(country, city);
}
// 出力:
// Japan Tokyo
// France Paris
// Italy Rome

Setオブジェクトの要素を取得する

Setオブジェクトの要素もfor...of文で取り出せます。

let numbers = new Set([1, 2, 3, 4, 5]);
for (let number of numbers) {
    console.log(number);
}
// 出力:
// 1
// 2
// 3
// 4
// 5

「for...of文」と「for...in文」

「for...in文」とは？

for...in文は、オブジェクトのプロパティをループするための構文です。オブジェクトの各プロパティに対して処理を行いたいときに使用します。

let person = {
    name: 'John',
    age: 30,
    occupation: 'engineer'
};

for (let property in person) {
    console.log(property, person[property]);
}
// 出力:
// name John
// age 30
// occupation engineer

このように、for...in文を使用するとオブジェクトのプロパティ名とその値を簡単に取得できます。

「for...of文」と「for...in文」の違い

for...of文は要素そのものを、for...in文はインデックスやプロパティ名を取得します。また、for...in文はオブジェクトのプロパティもループしますが、for...of文はこれを行いません。

for...of文での例

let array = ['a', 'b', 'c'];
for (let element of array) {
    console.log(element);
}
// 出力:
// a
// b
// c

for...in文での例

let array = ['a', 'b', 'c'];
for (let index in array) {
    console.log(index);
}
// 出力:
// 0
// 1
// 2

このように、for...of文は配列の要素そのものをループしますが、for...in文はインデックスをループします。また、オブジェクトで使った場合、for...in文はプロパティ名をループしますが、for...of文はそれをサポートしていません。

「for...of文」を使用する際の注意点

NodeListやHTMLCollectionは直接ループできない

DOM操作で取得したNodeListやHTMLCollectionは、直接for...of文でループすることはできません。配列に変換してからループしましょう。

オブジェクトのプロパティはループできない

for...of文は、オブジェクトのプロパティを直接ループすることはできません。オブジェクトのプロパティをループする場合はfor...in文を使用しましょう。

「for...of文」の使い方まとめ

for...of文は、配列やオブジェクトの要素を簡単にループするための強力なツールです。適切な場面で使うことで、コードの可読性や効率が向上します。しかし、使用する際の注意点もしっかり理解して、正しく使いこなしましょう！