array.prototype.foreach.callとは？初心者にもわかる使い方と注意点共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

配列を借りて回すテクニック：array.prototype.foreach.callの基本

JavaScript には配列を順番に処理するメソッド Array.prototype.forEach があり、配列の各要素に対してコールバック関数を実行します。array.prototype.foreach.call という表現は、forEach を「借りて」別のオブジェクトに適用する方法を指すことがあります。ここでは、配列風オブジェクトに対して call を使って forEach を適用する基本を、中学生にもわかるように解説します。

基本の仕組み

Array.prototype.forEach は配列や配列風オブジェクトを一つずつ回して、 callback(value, index, array) を呼ぶ仕組みです。call はこのメソッドを別のオブジェクトに適用するための機能です。つまり Array.prototype.forEach.call(arrayLike, callback) という書き方は「arrayLike」というオブジェクトを forEach で回す、という意味になります。ここでのポイントは、arrayLike が必ず length プロパティと 0 から始まる連番のプロパティを持つ必要がある、という点です。

実際の例

次の例では、オブジェクト var arrLike = {0: 'りんご', 1: 'みかん', length: 2}; に対して Array.prototype.forEach.call を使い、要素とインデックスを表示します。

Array.prototype.forEach.call(arrLike, function(value, index) { // value は 'りんご' や 'みかん'、index は 0, 1 console.log(index + ': ' + value); });

call と apply の違い

call は引数を個別に渡します。apply は引数を配列として渡します。したがって上の例では Array.prototype.forEach.call の第一引数に対象オブジェクトを、第二引数にコールバック関数を渡します。必要に応じて第三引数以降をコールバックの外部引数として渡すこともできます。

ポイントと注意点

配列風オブジェクトを処理する際の重要点は次のとおりです。length が正しく設定されていること、0 から length - 1 までの連番プロパティが存在すること、そしてコールバックで thisArg を使いたい場合は第三引数として渡すことです。

特徴	説明
対象	配列または配列風オブジェクト
呼び出し方	Array.prototype.forEach.call(arrayLike, callback, thisArg)
制限	arrayLike.length が正しく設定され、0..length-1 の連番プロパティが必要

現代のブラウザと実務での使いどころ

現代の多くのブラウザでは NodeList などにも forEach が直接使える場合が多いですが、古い環境や特定の場面では call を使って forEach を借りる選択肢が有効です。例えば、第三者が作ったオブジェクトや、arguments オブジェクトなど、配列リテラルでないデータ構造を素早く処理したいときに役立ちます。

実務でのヒントとよくある誤解

ヒント1: foreach という表記は小文字ではなく forEach という大文字小文字の組み合わせで書くのが正しいです。JavaScript はケースを区別するため、array.prototype.foreach.call のような誤表記は動作しない可能性があります。ヒント2: NodeList のようなオブジェクトは現代の環境では forEach が直接使えることが多いですが、古い環境ではこの借用テクニックが役立つ場面があります。ヒント3: thisArg を使うと、コールバック内の this が任意の値になります。必要に応じて第三引数で設定しましょう。

実用例をふまえたまとめ

要点はシンプルです。array.prototype.forEach.call は forEach の機能を「借りて」別のオブジェクトに適用する技法です。正しい大文字の Array.prototype.forEach を理解し、対象が配列風オブジェクトであることを確認できれば、自在に要素を列挙できます。

補足

この話題は初心者にとって難しく感じることがありますが、実務では forEach 自体の理解が最優先です。まずは配列での使い方を確実に身につけ、必要なときだけ借用テクニックを思い出せるように練習しましょう。

array.prototype.foreach.callの関連サジェスト解説

array.prototype.slice.call とは: array.prototype.slice.call とは、配列のようなオブジェクトを実際の配列として扱えるようにする方法です。JavaScript には length を持ち、0 から順番に番号が振られたプロパティを持つ「配列風」オブジェクトがありますが、それをそのまま配列として使うことはできません。そこで slice という配列の機能を、実行時に this にその配列風オブジェクトを渡して動かす方法が slice.call です。つまり Array.prototype.slice の機能をこのオブジェクトに対して適用するイメージです。この技術の代表的な用途は 2 つです。1 つは引数として渡されるオブジェクトを普通の配列に変換すること。関数の中でよく使われる arguments は配列風オブジェクトなので、これを配列にするには次のようにします。 `var arr = Array.prototype.slice.call(arguments);` これで arr は実際の Array になります。2 つ目は NodeList や HTMLCollection のような複数の要素を返すオブジェクトを配列化することです。例として `var divs = document.querySelectorAll('div'); var divArr = Array.prototype.slice.call(divs);` のように書きます。配列に変換した後は普通の配列と同じように map や filter を使えます。注意点としては、正しい表記は大文字の A の Array.prototype.slice.call です。小文字の array と混同する説明も見かけますが、JavaScript では区別されるためエラーになります。現代のコードではさらに読みやすさの観点から Array.from や spread 構文 `[...obj]` のほうがよく使われます。これらは配列風オブジェクトを簡単に実際の配列へ変換でき、コードの可読性も高めてくれます。

array.prototype.foreach.callの同意語

Array.prototype.forEach: 配列の各要素に対してコールバックを実行する、標準の反復処理メソッドです。
Array.prototype.forEach.call: callを使い、別の配列風オブジェクトに対してforEachを適用する方法のことです。
forEachメソッド: 配列の各要素を順番に処理するためのメソッドです（forEachの別称として使われます）。
ArrayのforEach: JavaScript の配列オブジェクトが持つforEachメソッドを指す表現です。
配列風オブジェクトに対するforEach適用: lengthやインデックスを持つ配列風のオブジェクトにもforEachの処理を適用する方法のことです。
Function.prototype.callを使ってArray.prototype.forEachを呼び出す: callを活用してthisを配列風オブジェクトに設定し、Array.prototype.forEachを実行するテクニックです。
callでforEachを呼び出す: call()を使って別の対象にforEachの動作を適用する操作のことです。
forEachのコールバック適用法: forEachのコールバック関数を対象の要素に適用する具体的な使い方の説明です。
配列風オブジェクトの要素を反復処理するforEach: 配列風オブジェクトの要素を順に処理するforEachの使い方を説明します。
配列オブジェクトに対するforEachの呼び出し方: 配列そのもの以外のオブジェクトにもforEachを適用する際の呼び出し方の説明です。

array.prototype.foreach.callの対義語・反対語

通常のforループで反復処理する: Array.prototype.forEach.call を使って借用する代わりに、従来の for ループを用いて配列を走査します。インデックスを自分で管理し、ループの中で柔軟に処理を組み立てられる利点がありますが、コードが長くなりやすい点がデメリットです。
for...of ループで反復処理する: 配列を for...of 構文で回す方法です。宣言がシンプルで読みやすく、要素を直接取得できるため、借用せずに反復処理を行いたい場合に有用です。
map による新しい配列の生成: 要素を変換して新しい配列を返す方法。副作用を伴わず、元の配列を変更せずに結果を得たいときに適しています。forEach の代わりに使うと処理の目的が変わります。
reduce による畳み込み処理: 要素を一つの値に集約する方法。集計や合計、最小/最大の計算などに向いており、forEach のような副作用ベースの反復とは異なる用途です。
自分自身の配列メソッドを直接呼ぶ（配列自身の forEach を使う）: Array.prototype.forEach.call の代わりに、someArray.forEach(callback) のように、配列自身の組み込みメソッドを直接呼ぶ方法。借用を使わず、自然な呼び出し方としての対比です。
while ループで反復処理する: 条件を満たす間、手動でポインタを進める while ループ。forEach の高水準な反復とは異なり、低レベルでの制御が可能ですが、実装が複雑になりやすい点がデメリットです。

array.prototype.foreach.callの共起語

Array.prototype.forEach: 配列の各要素に対して処理を実行する forEach メソッドを、他のオブジェクトにも適用する借用テクニックの文脈で使われる語
Function.prototype.call: 関数を任意の this 値と引数で呼び出すための組み込みメソッド
Function.prototype.apply: 関数を任意の this 値と引数の配列で呼び出すための組み込みメソッド
thisArg: forEach のコールバックに設定される this 値（call/apply で指定する引数）
メソッド借用: 他のオブジェクトのメソッドを自分のオブジェクトに適用するテクニック
配列風オブジェクト: length プロパティと数値プロパティを持つオブジェクト。forEach は配列風オブジェクトを対象に動作できる
コールバック関数: forEach が各要素で実行する関数
this: 関数が実行時に参照する文脈。callback 内で thisArg によって設定されることがある
length: 配列風オブジェクトの長さを示すプロパティ
要素: 配列/配列風オブジェクトの各データ値
index: 現在処理中の要素の位置を示す番号
イテレーション: 配列の要素を順番に処理する反復処理
配列: JavaScript の基本データ構造
Array.prototype: Array オブジェクトのプロトタイプ。forEach などのメソッドがここに定義されている
prototype: オブジェクトの共通機能を定義する基盤
ECMAScript: JavaScript の正式仕様（言語標準）
JavaScript: この技術が主に使われるプログラミング言語
ポリフィル: 環境が未サポートの場合に、同等の機能を実装する代替コード
互換性: ブラウザ間や実装間の機能互換性に関する話題

array.prototype.foreach.callの関連用語

Array.prototype.forEach: 配列の各要素に対して、コールバックを1回ずつ実行する組み込みメソッド。戻り値は undefined。副作用を伴う処理に向くが、値を変換して新しい配列を作る用途には不向き（map などを使う）。
Function.prototype.call: 関数を特定の this 値と引数で呼び出すためのメソッド。第一引数に this 値、第二引数以降に各引数を渡す。
Array.prototype.forEach.call: Array.prototype.forEach を、別の配列風オブジェクトにも適用する方法。対象オブジェクトを this として渡し、callback を実行する。
this: 実行時の文脈を表す値。forEach のコールバック内や call の結果などで参照される。
thisArg: forEach のコールバックの this 値として使われる任意の値。forEach の第2引数として渡すと callback 内で this にアクセスできる。
callback: forEach が各要素に対して実行する関数。通常は value, index, array の3つを引数として受け取る。
arrow function: => 記法の無名関数。this が外側のスコープに束縛されるため、thisArg を使わずに済むことが多い。
regular function: 通常の function キーワードで宣言する関数。this の参照先が arrow function と異なる点に注意。
array-like object: length と数値インデックスを持つオブジェクト。forEach はこの形状のオブジェクトにも適用できるが、必ずしも Array の実体ではない。
NodeList: DOM 操作の結果など、配列風オブジェクトの代表例。forEach を使うには Array.from で配列へ変換するのが一般的。
arguments: 関数に渡された引数の集合を表すオブジェクト。配列風だが配列メソッドをそのまま使えない場合があるので、Array.from(arguments) で配列化することが多い。
Array.from: 配列風オブジェクトやイテラブルを新しい Array に変換する便利なメソッド。forEach で扱いやすくするのに役立つ。
forEachとmapの違い: forEach は副作用を伴う処理向けで、戻り値は常に undefined。map は各要素を変換して新しい配列を返す。
break/return の制限: forEach の内部ループは break で途中退出できない。早期退出したい場合は some/every を使うか、従来の for ループを使う。
polyfill: 環境が forEach をサポートしていない場合に、自分で forEach の実装を追加するコード。
thisArgの使い方: コールバック内で this を使いたいときに役立つ。適切に設定しないと意図しない挙動になることもある。
for...of の代替としての使い分け: 配列を順に処理する別の方法。コードがシンプルで、early exit がしやすい点がメリット。