【JavaScript】for…ofで配列の中身を順番に表示する方法

JavaScriptで配列の中身を順番に処理したいときには、「繰り返し処理（ループ）」を使います。
その中でも for...of 文は、配列の要素を1つずつ取り出すのに便利で、読みやすい書き方です。
このページでは、for...of を使って配列の中身を順番に表示するシンプルなサンプルコードを紹介します。

コード
1. 実行結果
簡単な解説
Web制作を学ぶならUdemy

コード

const members = ['佐藤', '鈴木', '高橋', '田中', '伊藤'];

for (const member of members) {
  console.log(`お帰りなさいませ、${member} さま`);
}

実行結果

お帰りなさいませ、佐藤 さま
お帰りなさいませ、鈴木 さま
お帰りなさいませ、高橋 さま
お帰りなさいませ、田中 さま
お帰りなさいませ、伊藤 さま

簡単な解説

このコードは、members という配列の中に名前を入れて、それをひとつずつ取り出して表示するサンプルです。

const members = ['佐藤', '鈴木', '高橋', '田中', '伊藤'];

このように配列に5つの名前が入っており、for...of 文を使って、順番に取り出しています。

for (const member of members) {
  console.log(`お帰りなさいませ、${member} さま`);
}

この for...of 文は、「members の中から 1 件ずつ要素を取り出して、変数 member に代入する」という意味です。
ループが1回実行されるごとに、member には配列の中の次の名前が代入されます。

処理の流れ

members 配列：
['佐藤', '鈴木', '高橋', '田中', '伊藤']

↓ for...of で1つずつ取り出す

1回目：member = '佐藤' → 表示 → お帰りなさいませ、佐藤 さま  
2回目：member = '鈴木' → 表示 → お帰りなさいませ、鈴木 さま  
3回目：member = '高橋' → 表示 → お帰りなさいませ、高橋 さま  
4回目：member = '田中' → 表示 → お帰りなさいませ、田中 さま  
5回目：member = '伊藤' → 表示 → お帰りなさいませ、伊藤 さま

このように、配列の要素（名前）を for...of を使って1つずつ取り出し、
テンプレートリテラル（`${member} さま`）を使って、名前を含んだ文章を表示しています。

for...of 文は、配列のすべての要素に対して何かの処理をしたいときに、とてもわかりやすく便利な書き方です。