WEBVTT

1
00:00:00.000 --> 00:00:01.135
こんにちは。

2
00:00:01.135 --> 00:00:03.974
今回はリデュースを紹介します。

3
00:00:03.974 --> 00:00:09.841
これは、配列の複数の値を一つの集計結果へまとめるメソッドです。

4
00:00:09.841 --> 00:00:14.761
要素を先頭から順番に取り出し、前の集計結果と組み合わせる処理を繰り返すことで、

5
00:00:14.761 --> 00:00:19.682
最後に一つの値が残ります。

6
00:00:19.682 --> 00:00:23.088
結果は数値の合計だけではありません。

7
00:00:23.088 --> 00:00:30.658
文字列をつないだ結果や、最大値、さらにはオブジェクトや配列にすることもできます。

8
00:00:30.658 --> 00:00:37.661
たとえば、買い物かごの価格と数量を掛けて合計金額を求める場面で役立ちます。

9
00:00:37.661 --> 00:00:44.284
この動画では、書き方と引数、初期値の役割、記事の基本例、集計関数の四つの引数、

10
00:00:44.284 --> 00:00:50.908
空の配列の注意点、そして応用例まで、実行結果と一緒に学びます。

11
00:00:50.908 --> 00:00:52.786
まず動作環境を確認します。

12
00:00:52.786 --> 00:00:57.263
記事の互換性情報では、クロームでは三以降、エッジでは十二以降、ファイアーフォックスでは三以降、

13
00:00:57.263 --> 00:01:01.740
サファリでは四以降で使えます。

14
00:01:01.740 --> 00:01:06.073
ノード・ジェイエスではゼロ・一〇・ゼロ以降に対応しています。

15
00:01:06.073 --> 00:01:10.405
これらの数値はエムディーエヌの互換性データに基づく目安です。

16
00:01:10.405 --> 00:01:16.471
リデュースは非常に古くから使えるメソッドで、現在の主要な環境では広く対応しています。

17
00:01:16.471 --> 00:01:22.826
追加の読み込みは不要で、配列に最初から関数として備わっていることを、実機で確認済みです。

18
00:01:22.826 --> 00:01:27.303
対応開始の版は、推奨版という意味ではない点にも注意しましょう。

19
00:01:27.303 --> 00:01:33.080
ブラウザーでもノードでも同じ書き方で動くため、学習したコードをそのまま試せます。

20
00:01:33.080 --> 00:01:34.841
書き方を確認します。

21
00:01:34.841 --> 00:01:41.885
対象の配列に続けてリデュースと書き、カッコの中に集計する関数と初期値を渡します。

22
00:01:41.885 --> 00:01:48.753
リファレンス名にあるプロトタイプは、実際の呼び出しで毎回書く必要はありません。

23
00:01:48.753 --> 00:01:55.798
集計関数は各要素に対して先頭から順番に呼ばれ、その戻り値が次の集計値になります。

24
00:01:55.798 --> 00:02:01.961
集計関数には、ここまでの集計値、今の要素、位置、配列自体が渡されます。

25
00:02:01.961 --> 00:02:04.955
初期値は集計の出発点になる値です。

26
00:02:04.955 --> 00:02:09.358
戻り値は最後の集計値で、元の配列は変更されません。

27
00:02:09.358 --> 00:02:12.704
まずは、この基本の形を押さえましょう。

28
00:02:12.704 --> 00:02:19.572
引数の名前は自由に付けられますが、集計値を表す名前を使うと読みやすくなります。

29
00:02:19.572 --> 00:02:21.561
記事の基本例を見ます。

30
00:02:21.561 --> 00:02:29.880
価格百二十円が二個と、価格三百円が一個という、二つの商品オブジェクトが入った配列があります。

31
00:02:29.880 --> 00:02:37.837
この配列にリデュースを呼び、価格と数量を掛けた金額を、初期値ゼロから順に足していきます。

32
00:02:37.837 --> 00:02:43.353
最初は二百四十、次に三百が加わり、実行すると五百四十が表示され、記事の期待出力と一致し、

33
00:02:43.353 --> 00:02:48.869
ノードの実機結果とも一致しました。

34
00:02:48.869 --> 00:02:55.199
集計関数の中で掛け算と足し算を組み合わせるのが、この例のポイントです。

35
00:02:55.199 --> 00:02:59.720
この短いコードが、合計を求める基本の形になります。

36
00:02:59.720 --> 00:03:06.592
一段ずつ途中結果を思い浮かべながら読むと、集計の流れがつかみやすくなります。

37
00:03:06.592 --> 00:03:10.146
集計関数に渡される引数を詳しく見ます。

38
00:03:10.146 --> 00:03:13.513
集計関数は四つの引数を受け取ります。

39
00:03:13.513 --> 00:03:18.563
一つ目はここまでの集計値、二つ目は今調べている要素の値、三つ目はその要素の位置、

40
00:03:18.563 --> 00:03:23.614
四つ目は対象の配列自体です。

41
00:03:23.614 --> 00:03:32.405
スライドの例では、十、二十、三十という配列を初期値ゼロから足していき、結果は六十になりました。

42
00:03:32.405 --> 00:03:34.649
実機でも同じ結果でした。

43
00:03:34.649 --> 00:03:44.376
通常は集計値と今の要素の二つを使うことが多いのですが、位置を条件に使いたい場合に残りの引数が役立ちます。

44
00:03:44.376 --> 00:03:49.988
必要な引数だけを書けばよく、途中までで省略しても構いません。

45
00:03:49.988 --> 00:03:55.412
引数の順番は、集計値、値、位置、配列の順と覚えてください。

46
00:03:55.412 --> 00:03:58.184
実例として、数値の合計を見ます。

47
00:03:58.184 --> 00:04:04.766
一、二、三、四という配列について、初期値ゼロからリデュースで足していきます。

48
00:04:04.766 --> 00:04:09.789
ゼロに一、二、三、四が順に加わり、実行すると十になります。

49
00:04:09.789 --> 00:04:11.868
実機でも同じ結果でした。

50
00:04:11.868 --> 00:04:14.813
初期値を変えると結果も変わります。

51
00:04:14.813 --> 00:04:21.049
一、二、三の配列に初期値百を指定すると、百に六が加わって百六になります。

52
00:04:21.049 --> 00:04:25.726
初期値は単なる飾りではなく、集計の出発点そのものです。

53
00:04:25.726 --> 00:04:32.135
合計を求める場合はゼロ、文字列をつなぐ場合は空の文字列、オブジェクトを作る場合は空のオブジェクトというように、

54
00:04:32.135 --> 00:04:38.544
結果の型に合った初期値を選びましょう。

55
00:04:38.544 --> 00:04:41.593
初期値の役割をもう少し詳しく見ます。

56
00:04:41.593 --> 00:04:48.538
初期値を指定すると、集計はその値から始まり、すべての要素が集計関数で処理されます。

57
00:04:48.538 --> 00:04:56.839
一方、初期値を省略すると、配列の最初の要素が最初の集計値になり、処理は二番目の要素から始まります。

58
00:04:56.839 --> 00:05:04.292
スライドの例では、初期値なしでも一、二、三、四の合計は十になり、実機でも同じ結果でした。

59
00:05:04.292 --> 00:05:08.866
ただし、結果が数値なのか文字列なのかが曖昧になる場合や、空の配列を扱う場合は、

60
00:05:08.866 --> 00:05:13.440
初期値を明示した方が安全です。

61
00:05:13.440 --> 00:05:17.505
迷ったら初期値を書く、という習慣がおすすめです。

62
00:05:17.505 --> 00:05:25.636
要素が一つだけの配列では、初期値がなければ集計関数は一度も呼ばれず、その要素がそのまま返ります。

63
00:05:25.636 --> 00:05:29.233
記事の境界例で、空の配列の場合を確かめます。

64
00:05:29.233 --> 00:05:34.384
要素が一つもない空の配列に、初期値ゼロを指定してリデュースを呼ぶと、集計関数は一度も呼ばれず、

65
00:05:34.384 --> 00:05:39.535
初期値のゼロがそのまま返ります。

66
00:05:39.535 --> 00:05:43.950
スライドの例でも結果はゼロで、実機でも同じ結果でした。

67
00:05:43.950 --> 00:05:50.490
初期値があるおかげで、データが空でもエラーにならず、意味のある答えが返るのです。

68
00:05:50.490 --> 00:05:55.804
合計ならゼロ、件数ならゼロ、文字列なら空の文字列というように、入力が空でも意味を持つ初期値を明示するのが、

69
00:05:55.804 --> 00:06:01.119
記事が勧める書き方です。

70
00:06:01.119 --> 00:06:05.206
次のセクションで、初期値がない場合の違いを見ます。

71
00:06:05.206 --> 00:06:12.728
空かどうかを事前に調べて分岐させるよりも、初期値で受け止める方がコードは短く安全になります。

72
00:06:12.728 --> 00:06:15.245
記事が注意する仕様を確認します。

73
00:06:15.245 --> 00:06:19.178
初期値がない状態で空の配列にリデュースを呼ぶと、集計を始める値がないため、

74
00:06:19.178 --> 00:06:23.110
タイプエラーが発生します。

75
00:06:23.110 --> 00:06:25.785
実機でも同じエラーを確認しました。

76
00:06:25.785 --> 00:06:32.706
もう一つの落とし穴は、波括弧で書いた集計関数で、集計結果のリターンを書き忘れることです。

77
00:06:32.706 --> 00:06:38.370
その場合、次の集計値がアンディファインドになってしまい、計算が壊れます。

78
00:06:38.370 --> 00:06:43.246
アロー関数で式だけを書く形なら、このミスは起きにくくなります。

79
00:06:43.246 --> 00:06:51.112
また記事の通り、単純なループの方が読みやすい場合まで、無理にリデュースへ置き換える必要はありません。

80
00:06:51.112 --> 00:06:57.876
エラーが出たときは、まず配列が空かどうかと、初期値を書いたかどうかを確認してください。

81
00:06:57.876 --> 00:07:00.486
応用例として、数え上げを見ます。

82
00:07:00.486 --> 00:07:05.788
リンゴ、バナナ、リンゴという単語の配列を、初期値の空のオブジェクトから集計すると、

83
00:07:05.788 --> 00:07:11.091
各単語の出現回数を数えたオブジェクトが作れます。

84
00:07:11.091 --> 00:07:16.474
スライドの例では、リンゴの回数が二になることを実機で確認しました。

85
00:07:16.474 --> 00:07:22.511
同じ考え方で、最大値を残す集計や、入れ子の配列を平らにする処理も書けます。

86
00:07:22.511 --> 00:07:25.610
似たメソッドとの違いも整理しましょう。

87
00:07:25.610 --> 00:07:30.668
マップは各要素を変換して配列を返し、フィルターは合う要素だけを返しますが、

88
00:07:30.668 --> 00:07:35.725
リデュースは一つの値にまとめる点が役割の違いです。

89
00:07:35.725 --> 00:07:42.088
集計の途中経過を紙に書いて追う練習をすると、複雑な応用でも迷いにくくなります。

90
00:07:42.088 --> 00:07:42.987
まとめです。

91
00:07:42.987 --> 00:07:48.683
リデュースは、配列の要素を順番に集計して、最後に一つの値を返すメソッドです。

92
00:07:48.683 --> 00:07:50.181
ポイントは三つです。

93
00:07:50.181 --> 00:07:56.027
まず、集計関数には集計値と今の要素が渡され、その戻り値が次の集計値になること。

94
00:07:56.027 --> 00:08:01.872
次に、初期値を明示すると、集計の型が安定し、空の配列でもエラーにならないこと。

95
00:08:01.872 --> 00:08:09.815
そして、初期値なしの空配列はタイプエラーになる点と、集計結果のリターンを書き忘れない点に注意することです。

96
00:08:09.815 --> 00:08:15.511
まずは記事の基本例と境界例を実行し、結果を予測してから確かめてみてください。

97
00:08:15.511 --> 00:08:16.860
お疲れさまでした。

98
00:08:16.860 --> 00:08:21.356
集計が書けるようになれば、データ処理の幅が大きく広がります。