JavaScriptのfor-of文とは｜Claude Codeが使うデータ繰り返し処理を非エンジニア向けに解説

「Claude Codeが生成したJavaScriptのコードを見ても、なぜ繰り返し処理が3種類もあるのか分からない」——そんな疑問を持ったことはありませんか？

JavaScriptには繰り返し処理の書き方が複数あり、その中でも「for-of文」は、配列やDOM要素などのデータを順番に処理するための最もシンプルで現代的な書き方です。2015年以降に標準化されたこの構文は、今やWebシステムの業務自動化スクリプトで頻繁に使われています。

この記事では、JavaScriptを全く知らない非エンジニアの経営者・管理職の方に向けて、for-of文の概念・読み方・他の繰り返し構文との違い・そしてClaude Codeが生成するWebスクリプトでの活用シーンを解説します。コードを書けるようになることが目標ではなく、「コードを読んで意図を理解できるようになること」を目指します。

代表菅澤

弊社でClaude Codeを使ってWebシステムを自動化するとき、生成されたJavaScriptスクリプトの中によくfor-of文が登場します。「これは何をしているのか」が分かると、指示の精度が格段に上がります。今日はその基礎を整理します。

AI鬼管理山崎

for-of文は「リストを1件ずつ処理する」という日常業務の手順に対応する書き方です。Excel VBAの「For Each」に慣れている方なら、同じような発想で理解できます。

この記事で得られること:

01 WHAT IS FOR-OF JavaScriptのfor-of文とは｜「繰り返し」をシンプルに書く構文 ES2015以降の現代的な繰り返し処理の標準

for-of文は、JavaScriptの繰り返し処理（ループ）を書くための構文のひとつです。配列（リスト）・文字列・Map・Setなど、「順番に取り出せる」データ（イテラブルオブジェクト）に対して、1件ずつ処理を実行するときに使います。

日常業務の言葉で言えば、「顧客リストを1件ずつ読み上げながら、それぞれに同じ処理をする」という作業に対応します。例えば「全顧客にお礼メールを送る」「商品リストの価格を10%アップする」といった、「全部のデータに同じことをする」パターンで使います。

このように、for-of文は「リストの全件を順番に処理する」という繰り返し作業を1行で表現できる便利な構文です。

02 SYNTAX & READING for-of文の基本構文と読み方 「何を処理しているのか」をコードから読み取る

for-of文の基本的な構文は以下の通りです。

for (const 変数名 of イテラブルオブジェクト) {
  // 各要素に対して実行する処理
}

日本語で読み替えると「イテラブルオブジェクトの各要素を変数に取り出しながら、{ }内の処理を繰り返せ」という命令です。

2-1. 具体的な読み方：配列を処理するfor-of

const customers = ["田中花子", "鈴木一郎", "佐藤三郎"];

for (const name of customers) {
  console.log(`${name}様、ありがとうございました。`);
}

// 出力結果：
// 田中花子様、ありがとうございました。
// 鈴木一郎様、ありがとうございました。
// 佐藤三郎様、ありがとうございました。

このコードの読み方:

このパターンを理解できれば、「for (const X of Y)」という形のコードを見たとき、「YというリストのデータをX一件ずつ取り出して処理している」と即座に読み取れます。

2-2. オブジェクトの配列を処理する（実務でよく見るパターン）

const orders = [
  { id: 1001, customer: "田中", amount: 50000 },
  { id: 1002, customer: "鈴木", amount: 120000 },
  { id: 1003, customer: "佐藤", amount: 30000 },
];

let totalAmount = 0;

for (const order of orders) {
  console.log(`注文${order.id}: ${order.customer} - ¥${order.amount}`);
  totalAmount += order.amount;  // 合計金額を加算
}

console.log(`合計: ¥${totalAmount}`);

このパターンは「注文データのリストを1件ずつ読み込んで、合計金額を計算する」という売上集計処理です。Claude Codeが生成するWebシステムのスクリプトで、このような構造は非常に頻繁に登場します。

03 FOR VS FOR-IN VS FOR-OF for文・for-in文・for-of文の3つの違い どれを使うべきかの判断フレームを整理する

JavaScriptには「繰り返し処理」を書く方法が3つあります。Claude Codeのコードを読んでいると全て登場するため、違いを理解しておくことが重要です。

3-1. for文（古典的な回数指定ループ）

// 0から4まで5回繰り返す
for (let i = 0; i < 5; i++) {
  console.log(`${i}回目の処理`);
}

for文は「何回繰り返すか」が決まっているときに使います。しかし現代のJavaScriptでは、このパターンは多くの場合for-of文で書き換えられています。「for (let i = 0; ...)」という書き方を見たら「昔からある書き方」と認識してください。

3-2. for-in文（オブジェクトのキーを取り出す）

const employee = {
  name: "田中花子",
  department: "営業部",
  age: 35
};

for (const key in employee) {
  console.log(`${key}: ${employee[key]}`);
}
// 出力：
// name: 田中花子
// department: 営業部
// age: 35

for-in文はオブジェクト（キーと値のペアで管理するデータ）のキー名を順番に取り出します。for-ofと混同しやすいですが、「of」は配列の「値」を、「in」はオブジェクトの「キー名」を取り出すという違いがあります。

3-3. for-of vs for-in：誤用しやすいポイント

04 ITERABLE OBJECTS イテラブルオブジェクトとは｜for-ofが使える対象を理解する 「繰り返し可能なデータ」の概念と種類を整理する

for-ofが使えるのは「イテラブルオブジェクト」に限られます。ここを理解しておくと、for-ofを使えるかどうかの判断が即座にできます。

for-ofが使えるデータ型を整理します。

ビジネスシステムの開発でよく使われるのは配列とNodeListです。Webページの表（テーブル）の全行にスタイルを適用したり、フォームの全入力欄をバリデーションしたりする場面でfor-ofが活躍します。

05 CLAUDE CODE USE CASES Claude CodeのJSスクリプトでfor-ofが使われるシーン 実際に生成されるコードのパターンを読む

Claude Codeが生成するJavaScriptスクリプトで、for-ofが使われる典型的なシーンを紹介します。これらのパターンを知っておくと、生成されたコードの意図がすぐに分かります。

5-1. CRMデータの一括処理

// APIから取得した商談データ（配列）
const deals = await fetchDealsFromCRM();

let totalAmount = 0;
const wonDeals = [];     // 成約済み商談を格納するリスト

for (const deal of deals) {
  if (deal.status === "won") {       // 成約済みだけを対象に
    totalAmount += deal.amount;      // 合計金額を加算
    wonDeals.push(deal.id);          // 成約商談IDをリストに追加
  }
}

// 結果をSlackに通知
await postToSlack(`今月成約: ${wonDeals.length}件 / ¥${totalAmount.toLocaleString()}`);

このコードを読む視点:

5-2. Webページの要素一括操作

// HTMLページの全ての必須入力欄を取得
const requiredFields = document.querySelectorAll("input[required]");
const errors = [];  // エラーを収集するリスト

for (const field of requiredFields) {
  if (field.value.trim() === "") {
    field.classList.add("error-highlight");  // 空欄を赤くハイライト
    errors.push(field.name);                 // エラー項目名を記録
  }
}

if (errors.length > 0) {
  alert(`入力してください: ${errors.join(", ")}`);
}

これはWebフォームの「送信ボタンを押したとき、必須項目が空欄かチェックする」処理です。for-ofでHTMLの全必須入力欄（NodeList）を1つずつ確認し、空欄のものを赤くハイライトしてエラーリストに追加しています。業務システムの入力バリデーション（入力チェック）で頻繁に使われるパターンです。

代表菅澤

弊社のCRMや申し込みフォームにこのような処理が入っています。Claude Codeに「フォームの入力チェック処理を追加して」と指示すると、このようなfor-ofを使ったコードが生成されます。意図が分かると「なるほど、全入力欄を1つずつ確認しているんだな」と理解できて安心感があります。

06 BUSINESS PATTERNS ビジネスWebシステムでのfor-of活用パターン 経営者・管理職が知っておくべき実務パターンのカタログ

ビジネスWebシステムでfor-ofが使われる具体的なパターンを整理します。「こういう処理をClaude Codeに頼むとfor-ofが使われる」という理解ができるようになります。

これらの処理の共通点は「複数件のデータを同じ手順で処理する」という点です。「全顧客に同じメール」「全商品の価格を一律更新」「全入力欄を同じルールでチェック」——このような「全件一括処理」の需要がビジネスシステムには溢れており、for-ofはその実装の中核を担います。

07 CONCLUSION まとめ｜for-ofを知ることでコードリーディング力が上がる理由 「繰り返し処理」の理解が業務自動化の視野を広げる

この記事では、JavaScriptのfor-of文について非エンジニア向けに解説しました。最後にポイントを振り返ります。

「JavaScriptを書けるようになること」は今日の目標ではありません。Claude Codeが生成するコードを読んで「ああ、これは全顧客に同じ処理をしているんだな」と理解できるようになること——それだけで業務自動化のスピードと精度が大きく変わります。

WebシステムのJavaScript自動化をAI鬼管理が支援します

「Webフォームの一括チェックを自動化したい」「CRMのデータを毎日自動集計したい」という課題を、Claude Codeを活用して解決します。

AI鬼管理山崎

「for-ofの読み方は分かった。実際にWebシステムへの組み込みはどうすれば？」という方は、まず無料相談からご連絡ください。自社の業務フローに合った自動化の設計を一緒に考えます。

よくある質問

Q. for-ofとfor-inはどちらを使えばいいですか？

A. 処理したいデータの種類で選びます。配列・文字列・Mapなどのイテラブルなデータならfor-of、通常のオブジェクト（{}形式でキーと値のペア）のキー名を取り出したいならfor-inです。Claude Codeに「配列を処理して」と指示するとfor-ofが使われ、「オブジェクトのキーを取り出して」と指示するとfor-inが使われます。

Q. for-ofは古いブラウザでも使えますか？

A. ES2015（2015年導入）の仕様なので、Internet Explorer（IE）では動作しません。ただし現在のビジネスシステムはモダンブラウザ（Chrome・Edge・Firefox・Safari）前提が多く、IEサポートは終了しているため実務上は問題ありません。Claude Codeが生成するコードもモダンブラウザ前提です。

Q. for-ofの中でbreakやcontinueは使えますか？

A. 使えます。「break」で繰り返しを途中で終了、「continue」で現在の要素をスキップして次に進めます。例えば「エラーが出たら繰り返しを止める（break）」「条件に合わない要素はスキップ（continue）」という制御ができます。

Q. for-ofと同じことをforEach()でもできますか？

A. はい、配列の場合は多くの場面でforEach()でも同じ処理ができます。ただし、for-ofは「break/continue」が使え、awaitを含む非同期処理でも正しく動作する点がforEachと異なります。Claude Codeはケースによってfor-ofとforEachを使い分けます。

Q. for-ofで処理速度が問題になることはありますか？

A. 数万件以下のデータなら体感できる速度差はほとんどありません。ただし数百万件以上のデータを処理する場合、通常のfor文の方がわずかに高速なケースがあります。ビジネス業務での一般的なデータ量ではfor-ofを選んで問題ありません。

Q. Node.jsのバックエンドスクリプトでもfor-ofは使えますか？

A. はい、使えます。Node.jsはES2015以降をサポートしているため、for-ofは問題なく動作します。Claude Codeがバックエンドの自動化スクリプト（ファイル処理・API連携・DB操作など）を生成するときにもfor-ofは頻繁に使われます。

Q. for-ofを使った処理をClaude Codeに依頼する場合の指示の仕方は？

A. 「〇〇の一覧データを1件ずつ処理して〜をして」と自然言語で指示するだけで、Claude Codeは自動的にfor-ofを使ったコードを生成します。「for-ofを使って」と明示する必要はありません。ただし、「await（非同期処理）と組み合わせて」「breakが必要な条件がある場合は教えて」など、追加の制約を伝えることでより適切なコードが得られます。

監修 最終更新日: 2026年7月13日

菅澤 孝平 株式会社GENAI 代表取締役

• AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
• Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
• 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社（2021年設立・鬼管理専門塾運営）にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
• 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
• メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
• 明治大学政治経済学部卒

現在は AI鬼管理（Claude Code活用の伴走型パーソナルトレーニング）を主事業とし、経営者と二人三脚で「AIに業務を任せる仕組み」を実装。「実行を強制する環境」を AI で構築する手法を、自社の実運用知見をもとに発信している。

▸ 代表 菅澤孝平 のプロフィール詳細を見る