いっしー@Webエンジニア
Webツールプログラミング言語プログラミング学習ITニュースIT用語辞典ポートフォリオ

【JavaScript】for...of文の書き方と使い方の基本

JavaScriptの繰り返し構文for...of文の基本を解説します。配列や文字列など複数のデータから、要素を一つずつ取り出して処理するシンプルな書き方を学びます。基本的な使い方から、MapやSetでの応用、合計点を計算する実践例まで、サンプルコードと共に丁寧に説明します。

作成日: 更新日:

開発環境

  • OS: Windows10
  • Editor: Visual Studio Code
  • JavaScript: ES6以降

JavaScriptのfor...of文とは

for...of文は、JavaScriptで繰り返し処理を行うための構文の一つです。

この構文は、「配列」や「文字列」のように、複数の要素がまとまったデータ（これらを「iterableオブジェクト」と呼びます）から、要素を一つずつ順番に取り出して処理を実行するために使われます。

例えば、['りんご', 'バナナ', 'みかん'] という配列があった場合、for...of文を使うと、「りんご」「バナナ」「みかん」という各要素を先頭から順に取り出し、それぞれに対して同じ処理を行うことができます。

特に、配列に格納されたすべてのデータを取り扱いたい場合に、シンプルで分かりやすいコードを書くことができるため、非常によく利用されます。

for...of の書き方

for...of文は、配列や文字列のような複数の要素を持つデータから、要素を1つずつ順番に取り出して処理を繰り返すための構文です。これにより、各要素に対する同じ処理を簡潔に記述できます。

1for (変数 of 配列など) {
2    // 各要素ごとに実行される処理
3}

この構文は、以下の要素で構成されています。

  • 変数 配列などの中から取り出された1つの要素が、この変数に一時的に格納されます。ループが繰り返されるたびに、次の要素がこの変数に代入されます。

  • of for...of構文であることを示すキーワードです。

  • 配列など 処理の対象となる、複数の要素が集まったデータを指定します。主に配列が使われますが、文字列なども指定できます。

  • { }（波括弧）で囲まれた部分 変数に格納された各要素に対して実行したい処理を記述します。ここに書かれた処理は、配列などに含まれる要素の数だけ繰り返されます。

サンプルコード

この記事では、JavaScriptの for...of ループについて学習します。for...of は、配列や文字列のような複数の要素を持つデータコレクションから、要素を一つずつ順番に取り出して処理するための構文です。

javascript/chapter14/index.html

1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>JavaScriptチュートリアル</title>
7  </head>
8
9  <body>
10    <h1>JavaScriptチュートリアル</h1>
11    <script src="./script01.js" defer></script>
12    <script src="./script02.js" defer></script>
13    <script src="./script03.js" defer></script>
14    <script src="./script04.js" defer></script>
15    <script src="./script05.js" defer></script>
16  </body>
17</html>
18

このHTMLファイルは、これから見ていくJavaScriptのサンプルコードをブラウザで実行するためのものです。<script> タグを使って、5つのJavaScriptファイルを読み込んでいます。defer属性が付いているため、HTMLの解析を妨げることなくスクリプトが読み込まれます。

javascript/chapter14/script01.js

1// 配列の要素をfor...ofでループする基本例
2const fruits = ['apple', 'banana', 'cherry'];
3
4for (let fruit of fruits) {
5  console.log(fruit);
6}
7
8// 出力:
9// apple
10// banana
11// cherry

これはfor...ofループの最も基本的な使い方です。fruitsという配列に格納されている各要素（'apple', 'banana', 'cherry'）が、ループのたびに変数fruitに一つずつ代入されます。そしてconsole.log(fruit)によって、その値がコンソールに出力されます。このように、配列の全要素に対して同じ処理を順番に行いたい場合に非常に便利です。

javascript/chapter14/script02.js

1// 文字列の文字を1文字ずつ処理する例
2const word = "hello";
3
4for (let char of word) {
5  console.log(char);
6}
7
8// 出力:
9// h
10// e
11// l
12// l
13// o

for...ofループは配列だけでなく、文字列に対しても使用できます。文字列に対してfor...ofを使用すると、文字列を構成する文字が1文字ずつ順番に取り出されます。この例では、変数wordに格納された"hello"という文字列から、'h', 'e', 'l', 'l', 'o'が順番に変数charに代入され、コンソールに出力されています。

javascript/chapter14/script03.js

1// Mapオブジェクトをfor...ofでループする例
2const userMap = new Map([
3  ['name', '太郎'],
4  ['age', 25],
5  ['gender', 'male']
6]);
7
8for (let [key, value] of userMap) {
9  console.log(`${key}: ${value}`);
10}
11
12// 出力:
13// name: 太郎
14// age: 25
15// gender: male

Mapオブジェクトは、キーと値のペアを保持するデータ構造です。for...ofを使ってMapオブジェクトをループ処理すると、各ペアが [キー, 値] という形の配列として取り出されます。 コード中の [key, value] という書き方（分割代入と呼ばれます）を使うことで、取り出された配列からキーと値を直接それぞれの変数keyとvalueに代入できます。これにより、Mapに格納されたデータをキーと値のセットで簡単に扱うことができます。

javascript/chapter14/script04.js

1// Setオブジェクトをfor...ofでループする例
2const uniqueFruits = new Set(['apple', 'banana', 'apple', 'cherry']);
3
4for (let fruit of uniqueFruits) {
5  console.log(fruit);
6}
7
8// 出力:
9// apple
10// banana
11// cherry （重複しない）

Setオブジェクトは、重複しない値だけを保持するデータ構造です。この例では、Setを作成する際に'apple'が2つ含まれていますが、Setの特性により重複が取り除かれ、'apple', 'banana', 'cherry'の3つの要素だけが格納されます。 for...ofでSetオブジェクトをループ処理すると、格納されている値が順番に取り出されます。出力結果を見ると、'apple'が1回しか表示されていないことがわかります。

javascript/chapter14/script05.js

1// 練習問題：点数配列から合計点と平均点を出力する
2const scores = [80, 75, 90, 70, 85];
3
4let total = 0;
5
6for (let score of scores) {
7  console.log(`点数: ${score}点`);
8  total += score;
9}
10
11const average = total / scores.length;
12console.log(`合計点: ${total}点`);
13console.log(`平均点: ${average}点`);
14

最後に、これまでの知識を活用した実践的な例です。点数が格納されたscores配列があります。 まず、合計点を保存するための変数totalを0で初期化します。次にfor...ofループを使い、scores配列から点数を一つずつ取り出して変数scoreに代入し、totalに加算していきます。 ループが完了すると、totalにはすべての点数の合計が格納されています。最後に、合計点 total を要素の数 scores.length で割ることで、平均点を計算し、結果をコンソールに出力しています。

おわりに

今回は、JavaScriptのfor...of文について学習しました。この構文を使うことで、配列や文字列といった複数のデータから、要素を一つずつ簡単に取り出して処理できます。また、MapやSetのようなデータ構造にも応用できるため、非常に便利です。合計点を計算した例のように、シンプルで読みやすい繰り返し処理を書きたいときに、ぜひ活用してください。

【JavaScript】for...of文の書き方と使い方の基本 | いっしー@Webエンジニア