VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:01今回はリデュースを紹介します。
0:03これは、配列の複数の値を一つの集計結果へまとめるメソッドです。
0:09要素を先頭から順番に取り出し、前の集計結果と組み合わせる処理を繰り返すことで、
0:14最後に一つの値が残ります。
0:19結果は数値の合計だけではありません。
0:23文字列をつないだ結果や、最大値、さらにはオブジェクトや配列にすることもできます。
0:30たとえば、買い物かごの価格と数量を掛けて合計金額を求める場面で役立ちます。
0:37この動画では、書き方と引数、初期値の役割、記事の基本例、集計関数の四つの引数、
0:44空の配列の注意点、そして応用例まで、実行結果と一緒に学びます。
0:50まず動作環境を確認します。
0:52記事の互換性情報では、クロームでは三以降、エッジでは十二以降、ファイアーフォックスでは三以降、
0:57サファリでは四以降で使えます。
1:01ノード・ジェイエスではゼロ・一〇・ゼロ以降に対応しています。
1:06これらの数値はエムディーエヌの互換性データに基づく目安です。
1:10リデュースは非常に古くから使えるメソッドで、現在の主要な環境では広く対応しています。
1:16追加の読み込みは不要で、配列に最初から関数として備わっていることを、実機で確認済みです。
1:22対応開始の版は、推奨版という意味ではない点にも注意しましょう。
1:27ブラウザーでもノードでも同じ書き方で動くため、学習したコードをそのまま試せます。
1:33書き方を確認します。
1:34対象の配列に続けてリデュースと書き、カッコの中に集計する関数と初期値を渡します。
1:41リファレンス名にあるプロトタイプは、実際の呼び出しで毎回書く必要はありません。
1:48集計関数は各要素に対して先頭から順番に呼ばれ、その戻り値が次の集計値になります。
1:55集計関数には、ここまでの集計値、今の要素、位置、配列自体が渡されます。
2:01初期値は集計の出発点になる値です。
2:04戻り値は最後の集計値で、元の配列は変更されません。
2:09まずは、この基本の形を押さえましょう。
2:12引数の名前は自由に付けられますが、集計値を表す名前を使うと読みやすくなります。
2:19記事の基本例を見ます。
2:21価格百二十円が二個と、価格三百円が一個という、二つの商品オブジェクトが入った配列があります。
2:29この配列にリデュースを呼び、価格と数量を掛けた金額を、初期値ゼロから順に足していきます。
2:37最初は二百四十、次に三百が加わり、実行すると五百四十が表示され、記事の期待出力と一致し、
2:43ノードの実機結果とも一致しました。
2:48集計関数の中で掛け算と足し算を組み合わせるのが、この例のポイントです。
2:55この短いコードが、合計を求める基本の形になります。
2:59一段ずつ途中結果を思い浮かべながら読むと、集計の流れがつかみやすくなります。
3:06集計関数に渡される引数を詳しく見ます。
3:10集計関数は四つの引数を受け取ります。
3:13一つ目はここまでの集計値、二つ目は今調べている要素の値、三つ目はその要素の位置、
3:18四つ目は対象の配列自体です。
3:23スライドの例では、十、二十、三十という配列を初期値ゼロから足していき、結果は六十になりました。
3:32実機でも同じ結果でした。
3:34通常は集計値と今の要素の二つを使うことが多いのですが、位置を条件に使いたい場合に残りの引数が役立ちます。
3:44必要な引数だけを書けばよく、途中までで省略しても構いません。
3:49引数の順番は、集計値、値、位置、配列の順と覚えてください。
3:55実例として、数値の合計を見ます。
3:58一、二、三、四という配列について、初期値ゼロからリデュースで足していきます。
4:04ゼロに一、二、三、四が順に加わり、実行すると十になります。
4:09実機でも同じ結果でした。
4:11初期値を変えると結果も変わります。
4:14一、二、三の配列に初期値百を指定すると、百に六が加わって百六になります。
4:21初期値は単なる飾りではなく、集計の出発点そのものです。
4:25合計を求める場合はゼロ、文字列をつなぐ場合は空の文字列、オブジェクトを作る場合は空のオブジェクトというように、
4:32結果の型に合った初期値を選びましょう。
4:38初期値の役割をもう少し詳しく見ます。
4:41初期値を指定すると、集計はその値から始まり、すべての要素が集計関数で処理されます。
4:48一方、初期値を省略すると、配列の最初の要素が最初の集計値になり、処理は二番目の要素から始まります。
4:56スライドの例では、初期値なしでも一、二、三、四の合計は十になり、実機でも同じ結果でした。
5:04ただし、結果が数値なのか文字列なのかが曖昧になる場合や、空の配列を扱う場合は、
5:08初期値を明示した方が安全です。
5:13迷ったら初期値を書く、という習慣がおすすめです。
5:17要素が一つだけの配列では、初期値がなければ集計関数は一度も呼ばれず、その要素がそのまま返ります。
5:25記事の境界例で、空の配列の場合を確かめます。
5:29要素が一つもない空の配列に、初期値ゼロを指定してリデュースを呼ぶと、集計関数は一度も呼ばれず、
5:34初期値のゼロがそのまま返ります。
5:39スライドの例でも結果はゼロで、実機でも同じ結果でした。
5:43初期値があるおかげで、データが空でもエラーにならず、意味のある答えが返るのです。
5:50合計ならゼロ、件数ならゼロ、文字列なら空の文字列というように、入力が空でも意味を持つ初期値を明示するのが、
5:55記事が勧める書き方です。
6:01次のセクションで、初期値がない場合の違いを見ます。
6:05空かどうかを事前に調べて分岐させるよりも、初期値で受け止める方がコードは短く安全になります。
6:12記事が注意する仕様を確認します。
6:15初期値がない状態で空の配列にリデュースを呼ぶと、集計を始める値がないため、
6:19タイプエラーが発生します。
6:23実機でも同じエラーを確認しました。
6:25もう一つの落とし穴は、波括弧で書いた集計関数で、集計結果のリターンを書き忘れることです。
6:32その場合、次の集計値がアンディファインドになってしまい、計算が壊れます。
6:38アロー関数で式だけを書く形なら、このミスは起きにくくなります。
6:43また記事の通り、単純なループの方が読みやすい場合まで、無理にリデュースへ置き換える必要はありません。
6:51エラーが出たときは、まず配列が空かどうかと、初期値を書いたかどうかを確認してください。
6:57応用例として、数え上げを見ます。
7:00リンゴ、バナナ、リンゴという単語の配列を、初期値の空のオブジェクトから集計すると、
7:05各単語の出現回数を数えたオブジェクトが作れます。
7:11スライドの例では、リンゴの回数が二になることを実機で確認しました。
7:16同じ考え方で、最大値を残す集計や、入れ子の配列を平らにする処理も書けます。
7:22似たメソッドとの違いも整理しましょう。
7:25マップは各要素を変換して配列を返し、フィルターは合う要素だけを返しますが、
7:30リデュースは一つの値にまとめる点が役割の違いです。
7:35集計の途中経過を紙に書いて追う練習をすると、複雑な応用でも迷いにくくなります。
7:42まとめです。
7:42リデュースは、配列の要素を順番に集計して、最後に一つの値を返すメソッドです。
7:48ポイントは三つです。
7:50まず、集計関数には集計値と今の要素が渡され、その戻り値が次の集計値になること。
7:56次に、初期値を明示すると、集計の型が安定し、空の配列でもエラーにならないこと。
8:01そして、初期値なしの空配列はタイプエラーになる点と、集計結果のリターンを書き忘れない点に注意することです。
8:09まずは記事の基本例と境界例を実行し、結果を予測してから確かめてみてください。
8:15お疲れさまでした。
8:16集計が書けるようになれば、データ処理の幅が大きく広がります。

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

この動画で学べること

Array.prototype.reduce()で複数の値を1つの集計結果へまとめる方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

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