VIDEO LESSON

JavaScriptのArray.prototype.forEach()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 8:07動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回はフォーイーチを紹介します。
0:03これは、配列の各要素に対して、決めた処理を順番に実行するためのメソッドです。
0:08大きな特徴は、結果を新しい配列として受け取るのではなく、処理そのものが目的になることです。
0:15たとえば、一覧を一行ずつ表示したり、合計に加えていったりする場面で役立ちます。
0:21この動画では、書き方と引数、戻り値、記事の基本例、コールバックの引数、集計の実例、
0:27よく似たマップとの違い、そして途中で止められない注意点まで、実行結果と一緒に学びます。
0:34処理を実行する、という役割を押さえると、使いどころが見えてきます。
0:39名前と役割を結びつけて覚えると、ほかの配列メソッドとの違いも整理しやすくなります。
0:45まず動作環境を確認します。
0:47記事の互換性情報では、クロームでは一以降、エッジでは十二以降、ファイアーフォックスでは一・五以降、
0:51サファリでは三以降で使えます。
0:56ノード・ジェイエスではゼロ・一〇・ゼロ以降に対応しています。
1:01これらの数値はエムディーエヌの互換性データに基づく目安です。
1:05フォーイーチは古くからある基本的な機能で、現在の主要な環境では広く使えます。
1:11追加の読み込みは不要で、配列に最初から関数として備わっていることを、実機で確認済みです。
1:17対応開始の版は、推奨版という意味ではない点にも注意しましょう。
1:22長く使われている機能なので、古い環境でも動かしやすい点も利点の一つです。
1:27書き方を確認します。
1:29対象の配列に続けてフォーイーチと書き、カッコの中に、実行したい処理を関数として渡します。
1:37リファレンス名にあるプロトタイプは、実際の呼び出しで毎回書く必要はありません。
1:44この関数をコールバックと呼び、要素の数だけ自動で呼び出されます。
1:49第二引数として、処理の中で使うディスを指定する値も渡せますが、通常は省略します。
1:57そして戻り値はアンディファインドで、変換後の配列は作られません。
2:02まずは、処理を渡すことと、戻り値は使わないこと、この二つを押さえましょう。
2:09この書き方に慣れれば、ほかの配列メソッドも同じ形で読めるようになります。
2:16記事の基本例を見ます。
2:17葵と空という二つの名前が入った配列があります。
2:21この配列にフォーイーチを呼び、名前と位置を受け取って、番号付きで表示します。
2:26実行すると、一行目に一、葵、二行目に二、空と表示され、記事の期待出力と一致し、
2:30ノードの実機結果とも一致しました。
2:35位置はゼロから始まるので、表示では一を足して一始まりにそろえています。
2:40ポイントは、処理が要素の順番どおりに一件ずつ実行されることです。
2:45一覧の表示やログへの出力など、その場で実行したい処理に、この形がそのまま使えます。
2:51番号と中身がそろって表示される様子を、目で追いながら確かめてみてください。
2:56コールバックが受け取る引数を詳しく見ます。
3:00第一引数は今処理している要素の値、第二引数はゼロ始まりの位置、第三引数は対象の配列そのものです。
3:08スライドの例では、エーとビーの配列で、値と位置と長さを表示し、実機で確認しました。
3:15必要な引数だけを受け取ればよく、値だけ使う場合は第一引数だけを書くのが一般的です。
3:22また、第二引数のディス指定を使うと、アロー関数でない通常の関数では、処理の中で使うディスを差し替えることもできます。
3:32まずは値と位置の二つを使いこなしましょう。
3:36引数の順番は、値、位置、配列、と決まっているので、この順番で覚えましょう。
3:42実例として、金額の合計を求める処理を見ます。
3:47合計を入れる変数をゼロで用意し、百、二百五十、八十という三つの金額をフォーイーチで順に加えていきます。
3:56実行すると合計は四百三十になり、実機で確認しました。
4:01フォーイーチ自体は値を返しませんが、外側の変数を書き換えることで、このように結果を積み上げることができます。
4:11これを副作用を使った集計と考えることができます。
4:16画面への表示、外部への保存、集計変数の更新など、実行すること自体が成果になる場面で、
4:21フォーイーチは力を発揮します。
4:27件数が増えても書き方は変わらず、一件ずつ加える形がそのまま使えます。
4:33記事の境界例で、戻り値を確かめます。
4:36一と二の配列にフォーイーチを呼び、各要素を二倍にする処理を渡し、その結果を変数に入れて調べます。
4:44実行すると、結果がアンディファインドと等しいことを示すトゥルーが表示され、
4:49記事の期待出力と一致し、実機でも確認しました。
4:54コールバックの中で二倍を計算しても、その値はどこにも集められません。
5:00変換した結果を配列として受け取りたい場合は、フォーイーチではなく、次に紹介するマップを使います。
5:08戻り値は使わない、という前提を忘れないことが大切です。
5:13結果を受け取る変数を用意しても、中身は常にアンディファインドになります。
5:19よく似たマップとの違いを整理します。
5:22マップは、各要素を変換した結果を集めて、新しい配列を返します。
5:26スライドの例では、一、二、三を二倍にして、二、四、六という配列が返ることを実機で確認しました。
5:34一方、フォーイーチは同じ処理を渡しても、アンディファインドを返し、配列は作りません。
5:40記事でも、値の変換を結果として利用するならマップが適している、と説明されています。
5:46結果がほしいならマップ、その場で実行したいならフォーイーチ、と目的で使い分けてください。
5:53迷ったら、戻り値を使うかどうかで判断すると分かりやすくなります。
5:58二つを並べて実行すると、戻り値の違いが一目で分かります。
6:02注意点の第一は、途中で止められないことです。
6:06フォーイーチにはブレイクがなく、一度始めたら最後の要素まで処理が進みます。
6:11スライドの例では、二のときだけリターンでその回を飛ばし、一、三、四が集まることを実機で確認しました。
6:18リターンは、その要素の処理を終わらせるだけで、全体は止まりません。
6:23途中で打ち切りたい場合や、条件に合う要素を探したい場合は、通常のフォーループや、
6:27検索用のメソッドを選んでください。
6:32記事でも、ブレイクできないことが注意点として明記されています。
6:36止める前提の処理では、最初から別の書き方を選ぶことが大切です。
6:41注意点をもう二つ確認します。
6:43まず、非同期処理です。
6:44コールバックを非同期関数にしても、フォーイーチはその完了を待たずに次の要素へ進み、
6:48全体も先に終わります。
6:52順番に待って処理したい場合は、記事でも勧められているフォーオブ文を使ってください。
6:58次に、空きのある配列です。
7:00要素が入っていない空き位置では、コールバックは呼ばれません。
7:04スライドの例では、三件中、空きを除いた二件だけが数えられることを実機で確認しました。
7:10待つ必要があるか、空きがあるか、この二点を事前に確かめる習慣が役立ちます。
7:15どちらの仕様も、実際に実行してみると挙動の違いがはっきり分かります。
7:20まとめです。
7:21フォーイーチは、配列の各要素に対して処理を順番に実行するメソッドで、戻り値はアンディファインドであり、
7:26新しい配列は作りません。
7:31ポイントは三つです。
7:32まず、コールバックは値と位置と配列を受け取り、要素の数だけ呼び出されること。
7:38次に、表示や集計のような、その場で実行する処理に向いており、変換結果がほしいときはマップを使うこと。
7:46そして、途中で止められず、非同期処理の完了も待たないことです。
7:51まずは記事の基本例と境界例を実行し、表示される順番と戻り値を予測してから確かめてみてください。
7:58お疲れさまでした。
7:59実行することと結果を受け取ること、この区別を言葉で説明できるようになれば、
8:03理解が深まった証拠です。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

Array.prototype.forEach()で配列の各要素に対して処理を実行する方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのArray.prototype.forEach()の使い方：引数・戻り値・実例と注意点 →