JavaScript - For...of Loop

こんにちは、未来的プログラマーさんたち！今日は、JavaScriptの非常に便利な機能の1つであるfor...ofループについて深く掘り下げます。あなたの近所の親切なコンピュータサイエンスの先生として、この旅をガイドするのを楽しみにしています。お気に入りの飲み物を手に取り、リラックスして、一緒にこのコーディングの冒険を楽しんでいきましょう！

What is the for...of Loop?

まず、for...ofループとは何について話しましょう。 basketsに色とりどりの果物が詰まっているのを思い浮かべてください。あなたはそれぞれの果物を1つずつ見ていきたいと思います。for...ofループは、そのバスケットからそれぞれの果物を拾い上げて、あなたに1つずつ渡してくれる便利なアシスタントのようなものです。

プログラミング用語では、for...ofループは配列や文字列、後で学ぶ他将のデータ構造を反復（＝「通る」）するためのものです。

Syntax

次に、for...ofループの書き方を見てみましょう。最初は少し奇妙に見えるかもしれませんが、一緒に分解していきましょう！

for (variable of iterable) {
// 実行するコード
}

これを分解すると：

• for：このキーワードはJavaScriptにループを開始することを伝えます。
• variable：これは反復するたびに格納するアイテムです。
• of：このキーワードがfor...ofループを特定します。
• iterable：これは反復するオブジェクトです（果物のバスケットのようなもの）。
• カッコ内のコードは、それぞれのアイテムに対して行いたいことです。

Examples

Example 1: Looping through an Array

まずは簡単な例から始めましょう。果物の配列を作成し、それぞれを表示します。

let fruits = ['apple', 'banana', 'cherry', 'date'];

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

このコードを実行すると以下が表示されます：

apple
banana
cherry
date

ここで何が起きているのでしょうか？私たちのfor...ofループはfruits配列のそれぞれの果物を拾い上げ、fruit変数に格納します。その後、console.log()を使ってそれぞれの果物を表示します。

Example 2: Looping through a String

文字列も反復可能なことをご存知ですか？言葉を文字列として spell out してみましょう：

let word = 'Hello';

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

これは以下のように出力されます：

H
e
l
l
o

文字列の各文字は個々のアイテムとして反復されます。すごいですね？

Example 3: Using for...of with Numbers

もう少し実用的な例を見てみましょう。あなたが先生（私のように！）で、クラスの平均点を計算したいとします：

let scores = [85, 92, 78, 95, 88];
let total = 0;
let count = 0;

for (let score of scores) {
total += score;
count++;
}

let average = total / count;
console.log(`The class average is ${average}`);

このスクリプトは平均点を計算し表示します。私たちはfor...ofループを使って全ての点数を足し合わせ、数を数えます。

Example 4: Breaking out of a Loop

ループを終了前に停止したい場合があります。breakキーワードを使ってこれを行うことができます。特定の果物を探しているとしましょう：

let fruits = ['apple', 'banana', 'cherry', 'date'];
let searchFor = 'cherry';

for (let fruit of fruits) {
if (fruit === searchFor) {
console.log(`Found ${searchFor}!`);
break;
}
console.log(`Checking ${fruit}...`);
}

このスクリプトはcherryを見つけ次第停止します。

Example 5: Skipping Items with continue

特定のアイテムをスキップしたい場合はどうでしょうか？continueキーワードを使います。以下は'A'で始まる果物だけを表示する例です：

let fruits = ['apple', 'banana', 'apricot', 'cherry', 'avocado'];

for (let fruit of fruits) {
if (!fruit.startsWith('a')) {
continue;
}
console.log(fruit);
}

これは'A'で始まる果物だけを表示します。

Methods Table

以下に、例で使用したメソッドの表を示します：

メソッド	説明	例
console.log()	コンソールに出力	console.log('Hello, World!')
startsWith()	文字列が指定の文字で始まるか確認	'apple'.startsWith('a') // true
break	ループを終了	if (condition) break;
continue	ループの次の反復に進む	if (condition) continue;

Conclusion

さて、みんな！for...ofループの世界を一緒に旅しました。シンプルな配列から文字列、そしてアイテムのスキップやループの終了まで、さまざまな使い方を学びました。実践を重ねることが肝要ですので、さまざまなデータで自分自身のfor...ofループを作成してみてください。

コーディングを楽しんでください、そして、プログラミングの世界では、それぞれのループが発見の機会となります！

Credits: Image by storyset