配列と反復処理の基礎：なぜ「ループ」が必要なのか
Webアプリケーション開発において、データは単体で存在することよりも、リスト（一覧）として扱われることが圧倒的に多いです。例えば、ECサイトの商品一覧、SNSのタイムライン、ToDoアプリのタスクリストなどはすべて、プログラミングの世界では「配列（Array）」というデータ構造で管理されています。配列とは、複数のデータを順序付けて一つの変数に格納したものであり、['データ1', 'データ2', 'データ3']のように角括弧を使って表現されます。
これらのデータを画面に表示したり、集計したりするためには、配列の中身を一つずつ取り出して処理を行う必要があります。これを「反復処理（ループ処理）」と呼びます。プログラミングの初歩ではfor文を使ったループを学びます。for (let i = 0; i < 5; i++) { ... }といった構文です。このfor文は非常に強力で、どのような繰り返し処理も記述できる万能な構文ですが、書き方がやや冗長になりがちです。具体的には、カウンタ変数（i）の初期化、継続条件の記述、インクリメント（i++）など、処理の本質とは関係のない「ループの制御」に関する記述が多くなります。
現代のJavaScript開発においては、このfor文の代わりに、配列自体が持っている便利な「メソッド」を使って反復処理を行うのが主流です。それが今回紹介するforEach、map、filterです。これらは「高階関数」とも呼ばれ、処理の内容を関数として渡すことで、配列の各要素に対する操作を簡潔に記述できます。これにより、コードの行数が減るだけでなく、「何をしているのか」が一目でわかるようになり、バグの発生も防ぎやすくなります。例えば、DOM（Document Object Model）を操作して、リスト項目（<li>）をまとめて処理するような場面でも、これらのメソッドは頻繁に利用されます。
コールバック関数の概念：メソッドに「処理」を渡す仕組み
forEachやmapなどのメソッドを使いこなすための最大の壁は、「コールバック関数」という概念の理解です。しかし、これは決して難しいものではありません。コールバック関数とは、簡単に言えば「他の関数に引数として渡され、後で実行される関数」のことです。
JavaScriptでは、関数も数値や文字列と同じように「値」として扱うことができます。そのため、ある関数の引数に別の関数を渡すことが可能です。非同期処理の文脈でよく登場するsetTimeout関数なども、指定した時間が経過した後に実行してほしい関数を引数として受け取りますが、これもコールバック関数の一種です。また、ボタンがクリックされたときに実行する処理を登録するaddEventListenerメソッドも、第二引数にコールバック関数を受け取ります。
配列の反復メソッドにおいても、この仕組みが利用されます。「配列の要素一つ一つに対して、どんな処理をしたいか」という具体的な命令を関数として定義し、それをforEachなどのメソッドに渡すのです。メソッド側は、配列から要素を取り出すたびに、渡されたコールバック関数を呼び出します。つまり、開発者は「ループの回し方」を気にする必要がなく、「個々の要素に対して何をしたいか」だけに集中できるのです。
このコールバック関数は、無名関数（名前のない関数）としてその場に直接記述することもあれば、事前に定義した関数の名前を渡すこともあります。さらに、ES6（ECMAScript 2015）以降では、より短く記述できる「アロー関数」が導入され、コールバック関数の記述が劇的にシンプルになりました。このアロー関数と配列メソッドの組み合わせは、モダンJavaScriptの象徴的な書き方と言えます。
forEachメソッド：基本の繰り返し処理とDOM操作
forEachは、配列の反復処理の中で最も基本的で直感的なメソッドです。その名の通り、「それぞれの要素に対して（for each）」指定した処理を実行します。従来のfor文を置き換える最初のステップとして最適です。
使い方は非常にシンプルです。配列に対して.forEach()を呼び出し、引数に関数を渡します。この関数（コールバック関数）は、配列の要素が順番に渡されて実行されます。
const fruits = ['りんご', 'みかん', 'バナナ'];
fruits.forEach((item) => {
console.log(item);
});
このコードでは、配列fruitsの要素が一つずつ変数itemに入り、console.logで出力されます。インデックス（何番目か）が必要な場合は、コールバック関数の第二引数で受け取ることも可能です。
forEachの大きな特徴は、「戻り値を持たない（undefinedを返す）」という点です。つまり、データの加工や抽出を行うのではなく、ログ出力やDOMの書き換えといった「副作用」を伴う処理を行う場合に使用されます。例えば、querySelectorAllで取得した複数のHTML要素（NodeList）に対して、一括でクラスを追加したり、イベントリスナーを設定したりする場合に威力を発揮します。
ただし、注意点としてquerySelectorAllが返すNodeListや、getElementsByClassNameが返すHTMLCollectionは、厳密には配列ではありません（配列風オブジェクト）。これらに対してforEachを使う場合、古いブラウザでは動作しなかったり、一度配列に変換する処理が必要だったりするケースがありました。現代の主要ブラウザではNodeListに対しても直接forEachを使えるようになっていますが、この「配列のようなもの」と「純粋な配列」の違いを理解しておくことは重要です。
mapメソッド：データの加工と新しい配列の生成
mapメソッドは、配列操作において最も強力で頻繁に使用されるメソッドの一つです。forEachとの決定的な違いは、「新しい配列を作成して返す」という点にあります。
mapは、配列の各要素に対してコールバック関数を実行し、その「戻り値」を集めて、元の配列と同じ長さの新しい配列を生成します。つまり、データを「変換（マッピング）」するためのメソッドです。元の配列自体は変更されず（非破壊的）、新しい配列が得られるため、データの整合性を保ちやすく、バグの少ないコードを書くことができます。
例えば、数値が入った配列のすべての要素を2倍にしたい場合、for文を使うと空の配列を用意してpushしていく必要がありますが、mapを使えば以下のように書けます。
const numbers = [10-12];
const doubled = numbers.map((num) => {
return num * 2;
});
// doubled は [11, 13, 14] になる
この特性は、Web開発の現場で非常に重宝します。例えば、APIから取得したユーザー情報のオブジェクト配列から、ユーザー名だけを抜き出した配列を作りたい場合や、データの形式を画面表示用に整形したい場合などに最適です。
また、Reactなどの最新のフロントエンドライブラリでは、データの配列をHTML要素（JSX）の配列に変換して画面にレンダリングする際、このmapメソッドが標準的に使用されます。mapを理解することは、単なる配列操作の枠を超えて、モダンなUI構築の基礎を理解することに直結します。
filterメソッド：条件に合うデータの抽出
大量のデータの中から、特定の条件を満たすものだけを取り出したい場合に使うのがfilterメソッドです。その名の通り、データを「フィルタリング（選別）」します。
filterメソッドに渡すコールバック関数では、条件判定を行い、その結果を真偽値（trueまたはfalse）で返す必要があります。trueを返した要素だけが新しい配列に残され、falseを返した要素は除外されます。mapと同様に、元の配列は変更せず、条件に合致した要素のみを含む新しい配列を返します。
例えば、数値の配列から偶数だけを取り出すコードは以下のようになります。
const numbers = [10-13, 15];
const evens = numbers.filter((num) => {
return num % 2 === 0;
});
// evens は [11, 13] になる
実務的なシナリオとしては、ToDoリストアプリで「完了済みのタスク」だけを表示したり、商品リストから「在庫あり」の商品だけを絞り込んだりする機能の実装に使われます。
filterを使う際のポイントは、コールバック関数内の条件式が「何を残したいか」を表すように書くことです。if文による条件分岐をループ内で書くよりも、宣言的で読みやすいコードになります。また、検索機能の実装などでも、ユーザーの入力キーワードを含むデータだけをfilterで抽出するといった使い方が一般的です。
アロー関数による記述の簡略化：モダンな構文
ここまで紹介したforEach、map、filterのコード例では、簡潔な記述のために「アロー関数」を使用してきました。アロー関数は、functionキーワードを使わずに=>（アロー）を使って関数を定義する、ES6から導入された構文です。
従来の無名関数とアロー関数を比較してみましょう。
// 従来の書き方
numbers.map(function(num) {
return num * 2;
});
// アロー関数
numbers.map((num) => {
return num * 2;
});
さらに、アロー関数には「処理が1行で、その結果を戻り値とする場合、波括弧{}とreturnを省略できる」という強力な省略記法があります。
// 省略記法
numbers.map(num => num * 2);
この書き方を使うと、データ変換やフィルタリングのロジックを極めてシンプルに記述できます。コードのノイズが減り、ロジックの本質部分に集中しやすくなるため、配列メソッドとアロー関数はセットで使われることがほとんどです。
ただし、アロー関数と従来の関数ではthisの扱いが異なるという点には注意が必要です。配列操作の文脈ではあまり問題になりませんが、オブジェクトのメソッドとして定義する場合など、スコープやthisの挙動を理解しておく必要があります。とはいえ、配列のコールバック関数として使う分には、アロー関数の簡潔さは大きなメリットとなります。
メソッドチェーン：複数の処理を組み合わせる
mapやfilterが「新しい配列を返す」という特性を利用すると、複数のメソッドをドット.で繋げて連続して実行することができます。これを「メソッドチェーン」と呼びます。
例えば、「商品リストから価格が1000円以上の商品を抜き出し（filter）、その商品名のリストを作成する（map）」といった処理を、中間変数を作らずに一気に記述できます。
const products = [
{ name: 'ペン', price: 100 },
{ name: 'ノート', price: 1200 },
{ name: 'ファイル', price: 1500 }
];
const expensiveItemNames = products
.filter(item => item.price >= 1000)
.map(item => item.name);
// 結果: ['ノート', 'ファイル']
このように処理を連鎖させることで、データの加工プロセスが左から右（あるいは上から下）へと流れるように記述でき、コードの可読性が大幅に向上します。非同期処理のPromiseにおける.then()のチェーンとも似た考え方です。
メソッドチェーンを行う際は、各メソッドが何を返しているかを意識することが重要です。filterの戻り値は配列なので続けてmapを呼べますが、forEachの戻り値はundefinedなので、forEachの後に別の配列メソッドを繋げることはできません。チェーンの最後で処理を完結させるか、あるいは結果を受け取って変数に格納するか、設計を意識しましょう。
NodeListやHTMLCollectionの扱い：配列への変換
Web開発、特にDOM操作を行う際に直面するのが、document.querySelectorAllなどが返す「NodeList」や、childrenプロパティが返す「HTMLCollection」の扱いです。これらは配列のようにインデックスでアクセスできたり、lengthプロパティを持っていたりしますが、完全な配列ではありません。そのため、古いブラウザ環境や一部のメソッドにおいては、直接mapやfilterが使えないことがあります。
このような場合、これらを「本物の配列」に変換する必要があります。以前はArray.prototype.slice.call()のような少し難解な書き方が使われていましたが、ES6以降では「スプレッド構文（…）」を使って非常に簡単に変換できるようになりました。
const nodeList = document.querySelectorAll('li');
const listArray = [...nodeList]; // 配列に変換
こうして配列に変換してしまえば、mapやfilterを含むすべての配列メソッドが自由に使えるようになります。
例えば、画面上のすべてのチェックボックス要素を取得し、チェックされているものだけをfilterで抽出し、その値をmapで取り出す、といった高度なDOM操作も、配列への変換を行うことでスムーズに実装できます。DOM操作と配列操作を組み合わせる能力は、フロントエンド開発において必須のスキルです。
for文との使い分けとパフォーマンス
ここまで配列メソッドの利点を強調してきましたが、従来のfor文が不要になったわけではありません。状況によってはfor文の方が適している場合もあります。
まず、for文はbreakやcontinueを使ってループを途中で抜けたり、スキップしたりする制御が容易です。一方、forEachなどのメソッドは、基本的に配列の最後まで処理を回し切る設計になっており、途中で止めることができません（例外を投げるなどの裏技はありますが、推奨されません）。巨大な配列を探索し、目的のものが見つかったら即座に終了したいようなケースでは、for文やfor...of文の方が効率的な場合があります。
また、単純な実行速度（パフォーマンス）の面では、関数呼び出しのオーバーヘッドがない分、従来のfor文の方が高速であるケースが多いです。しかし、現代のJavaScriptエンジンの最適化により、その差は多くのWebアプリにおいて無視できるレベルになっています。
基本的には、「可読性」と「保守性」を優先してforEach、map、filterを積極的に使い、パフォーマンスがクリティカルな箇所のチューニングや、複雑なループ制御が必要な場合にのみfor文を選択する、というスタンスが推奨されます。コードは「書く時間」より「読まれる時間」の方が圧倒的に長いため、意図が伝わりやすい配列メソッドの活用は合理的です。
実践応用：ToDoリストアプリでのデータ操作
最後に、これまで学んだメソッドを活用して、簡単なアプリケーションの機能をイメージしてみましょう。初心者が成果物として作るのにおすすめな「ToDoリスト」を例にします。
アプリ内では、タスクのデータを以下のようなオブジェクトの配列で管理するとします。
const todos = [
{ id: 1, text: 'JavaScriptの勉強', done: false },
{ id: 2, text: '買い物', done: true },
{ id: 3, text: 'メール返信', done: false }
];
1. 一覧表示（forEach/map）: この配列を元に画面のリスト（<ul>）を作成する場合、mapを使って各タスクデータを<li>タグのHTML文字列に変換し、それを画面に挿入する処理が行われます。あるいは、forEachを使ってcreateElementで要素を作りながらappendChildしていくことも可能です。
2. 完了タスクの削除（filter）: 「完了済みのタスクを削除する」ボタンが押されたとき、filterメソッドを使います。doneプロパティがfalse（未完了）のものだけを残すフィルタリングを行えば、完了タスクが除外された新しい配列が得られます。
3. タスクの完了状態の切り替え（map）: 特定のタスクのdone状態を反転させる場合、mapを使います。IDが一致するタスクだけオブジェクトの内容を更新し、それ以外はそのまま返すことで、一部だけが変更された新しいタスク一覧配列を生成できます。
このように、アプリケーションの主要な機能は、配列に対するmapやfilterの操作と、その結果をDOMに反映する処理の組み合わせで実現されています。これらのメソッドを自在に操れるようになることは、脱初心者への大きな一歩であり、ReactやVue.jsといったモダンなフレームワークを学ぶための強固な土台となります。