WEBVTT

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

2
00:00:00.898 --> 00:00:03.294
今回はフォーイーチを紹介します。

3
00:00:03.294 --> 00:00:08.984
これは、配列の各要素に対して、決めた処理を順番に実行するためのメソッドです。

4
00:00:08.984 --> 00:00:15.722
大きな特徴は、結果を新しい配列として受け取るのではなく、処理そのものが目的になることです。

5
00:00:15.722 --> 00:00:21.562
たとえば、一覧を一行ずつ表示したり、合計に加えていったりする場面で役立ちます。

6
00:00:21.562 --> 00:00:27.851
この動画では、書き方と引数、戻り値、記事の基本例、コールバックの引数、集計の実例、

7
00:00:27.851 --> 00:00:34.140
よく似たマップとの違い、そして途中で止められない注意点まで、実行結果と一緒に学びます。

8
00:00:34.140 --> 00:00:39.081
処理を実行する、という役割を押さえると、使いどころが見えてきます。

9
00:00:39.081 --> 00:00:45.220
名前と役割を結びつけて覚えると、ほかの配列メソッドとの違いも整理しやすくなります。

10
00:00:45.220 --> 00:00:47.139
まず動作環境を確認します。

11
00:00:47.139 --> 00:00:51.863
記事の互換性情報では、クロームでは一以降、エッジでは十二以降、ファイアーフォックスでは一・五以降、

12
00:00:51.863 --> 00:00:56.587
サファリでは三以降で使えます。

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

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

15
00:01:05.444 --> 00:01:11.054
フォーイーチは古くからある基本的な機能で、現在の主要な環境では広く使えます。

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

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

18
00:01:22.126 --> 00:01:27.440
長く使われている機能なので、古い環境でも動かしやすい点も利点の一つです。

19
00:01:27.440 --> 00:01:29.244
書き方を確認します。

20
00:01:29.244 --> 00:01:37.180
対象の配列に続けてフォーイーチと書き、カッコの中に、実行したい処理を関数として渡します。

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

22
00:01:44.214 --> 00:01:49.986
この関数をコールバックと呼び、要素の数だけ自動で呼び出されます。

23
00:01:49.986 --> 00:01:57.201
第二引数として、処理の中で使うディスを指定する値も渡せますが、通常は省略します。

24
00:01:57.201 --> 00:02:02.973
そして戻り値はアンディファインドで、変換後の配列は作られません。

25
00:02:02.973 --> 00:02:09.647
まずは、処理を渡すことと、戻り値は使わないこと、この二つを押さえましょう。

26
00:02:09.647 --> 00:02:16.140
この書き方に慣れれば、ほかの配列メソッドも同じ形で読めるようになります。

27
00:02:16.140 --> 00:02:17.769
記事の基本例を見ます。

28
00:02:17.769 --> 00:02:21.174
葵と空という二つの名前が入った配列があります。

29
00:02:21.174 --> 00:02:26.800
この配列にフォーイーチを呼び、名前と位置を受け取って、番号付きで表示します。

30
00:02:26.800 --> 00:02:30.946
実行すると、一行目に一、葵、二行目に二、空と表示され、記事の期待出力と一致し、

31
00:02:30.946 --> 00:02:35.092
ノードの実機結果とも一致しました。

32
00:02:35.092 --> 00:02:40.274
位置はゼロから始まるので、表示では一を足して一始まりにそろえています。

33
00:02:40.274 --> 00:02:45.011
ポイントは、処理が要素の順番どおりに一件ずつ実行されることです。

34
00:02:45.011 --> 00:02:51.082
一覧の表示やログへの出力など、その場で実行したい処理に、この形がそのまま使えます。

35
00:02:51.082 --> 00:02:56.560
番号と中身がそろって表示される様子を、目で追いながら確かめてみてください。

36
00:02:56.560 --> 00:03:00.207
コールバックが受け取る引数を詳しく見ます。

37
00:03:00.207 --> 00:03:08.544
第一引数は今処理している要素の値、第二引数はゼロ始まりの位置、第三引数は対象の配列そのものです。

38
00:03:08.544 --> 00:03:15.665
スライドの例では、エーとビーの配列で、値と位置と長さを表示し、実機で確認しました。

39
00:03:15.665 --> 00:03:22.785
必要な引数だけを受け取ればよく、値だけ使う場合は第一引数だけを書くのが一般的です。

40
00:03:22.785 --> 00:03:32.859
また、第二引数のディス指定を使うと、アロー関数でない通常の関数では、処理の中で使うディスを差し替えることもできます。

41
00:03:32.859 --> 00:03:36.506
まずは値と位置の二つを使いこなしましょう。

42
00:03:36.506 --> 00:03:42.932
引数の順番は、値、位置、配列、と決まっているので、この順番で覚えましょう。

43
00:03:42.932 --> 00:03:47.097
実例として、金額の合計を求める処理を見ます。

44
00:03:47.097 --> 00:03:56.753
合計を入れる変数をゼロで用意し、百、二百五十、八十という三つの金額をフォーイーチで順に加えていきます。

45
00:03:56.753 --> 00:04:01.676
実行すると合計は四百三十になり、実機で確認しました。

46
00:04:01.676 --> 00:04:11.899
フォーイーチ自体は値を返しませんが、外側の変数を書き換えることで、このように結果を積み上げることができます。

47
00:04:11.899 --> 00:04:16.443
これを副作用を使った集計と考えることができます。

48
00:04:16.443 --> 00:04:21.839
画面への表示、外部への保存、集計変数の更新など、実行すること自体が成果になる場面で、

49
00:04:21.839 --> 00:04:27.235
フォーイーチは力を発揮します。

50
00:04:27.235 --> 00:04:33.672
件数が増えても書き方は変わらず、一件ずつ加える形がそのまま使えます。

51
00:04:33.672 --> 00:04:36.711
記事の境界例で、戻り値を確かめます。

52
00:04:36.711 --> 00:04:44.814
一と二の配列にフォーイーチを呼び、各要素を二倍にする処理を渡し、その結果を変数に入れて調べます。

53
00:04:44.814 --> 00:04:49.878
実行すると、結果がアンディファインドと等しいことを示すトゥルーが表示され、

54
00:04:49.878 --> 00:04:54.942
記事の期待出力と一致し、実機でも確認しました。

55
00:04:54.942 --> 00:05:00.682
コールバックの中で二倍を計算しても、その値はどこにも集められません。

56
00:05:00.682 --> 00:05:08.785
変換した結果を配列として受け取りたい場合は、フォーイーチではなく、次に紹介するマップを使います。

57
00:05:08.785 --> 00:05:13.343
戻り値は使わない、という前提を忘れないことが大切です。

58
00:05:13.343 --> 00:05:19.420
結果を受け取る変数を用意しても、中身は常にアンディファインドになります。

59
00:05:19.420 --> 00:05:22.179
よく似たマップとの違いを整理します。

60
00:05:22.179 --> 00:05:26.930
マップは、各要素を変換した結果を集めて、新しい配列を返します。

61
00:05:26.930 --> 00:05:34.133
スライドの例では、一、二、三を二倍にして、二、四、六という配列が返ることを実機で確認しました。

62
00:05:34.133 --> 00:05:40.570
一方、フォーイーチは同じ処理を渡しても、アンディファインドを返し、配列は作りません。

63
00:05:40.570 --> 00:05:46.853
記事でも、値の変換を結果として利用するならマップが適している、と説明されています。

64
00:05:46.853 --> 00:05:53.597
結果がほしいならマップ、その場で実行したいならフォーイーチ、と目的で使い分けてください。

65
00:05:53.597 --> 00:05:58.501
迷ったら、戻り値を使うかどうかで判断すると分かりやすくなります。

66
00:05:58.501 --> 00:06:02.792
二つを並べて実行すると、戻り値の違いが一目で分かります。

67
00:06:02.792 --> 00:06:06.031
注意点の第一は、途中で止められないことです。

68
00:06:06.031 --> 00:06:11.479
フォーイーチにはブレイクがなく、一度始めたら最後の要素まで処理が進みます。

69
00:06:11.479 --> 00:06:18.840
スライドの例では、二のときだけリターンでその回を飛ばし、一、三、四が集まることを実機で確認しました。

70
00:06:18.840 --> 00:06:23.699
リターンは、その要素の処理を終わらせるだけで、全体は止まりません。

71
00:06:23.699 --> 00:06:27.895
途中で打ち切りたい場合や、条件に合う要素を探したい場合は、通常のフォーループや、

72
00:06:27.895 --> 00:06:32.092
検索用のメソッドを選んでください。

73
00:06:32.092 --> 00:06:36.656
記事でも、ブレイクできないことが注意点として明記されています。

74
00:06:36.656 --> 00:06:41.220
止める前提の処理では、最初から別の書き方を選ぶことが大切です。

75
00:06:41.220 --> 00:06:43.240
注意点をもう二つ確認します。

76
00:06:43.240 --> 00:06:44.827
まず、非同期処理です。

77
00:06:44.827 --> 00:06:48.578
コールバックを非同期関数にしても、フォーイーチはその完了を待たずに次の要素へ進み、

78
00:06:48.578 --> 00:06:52.329
全体も先に終わります。

79
00:06:52.329 --> 00:06:58.245
順番に待って処理したい場合は、記事でも勧められているフォーオブ文を使ってください。

80
00:06:58.245 --> 00:07:00.120
次に、空きのある配列です。

81
00:07:00.120 --> 00:07:04.449
要素が入っていない空き位置では、コールバックは呼ばれません。

82
00:07:04.449 --> 00:07:10.508
スライドの例では、三件中、空きを除いた二件だけが数えられることを実機で確認しました。

83
00:07:10.508 --> 00:07:15.847
待つ必要があるか、空きがあるか、この二点を事前に確かめる習慣が役立ちます。

84
00:07:15.847 --> 00:07:20.752
どちらの仕様も、実際に実行してみると挙動の違いがはっきり分かります。

85
00:07:20.752 --> 00:07:21.671
まとめです。

86
00:07:21.671 --> 00:07:26.497
フォーイーチは、配列の各要素に対して処理を順番に実行するメソッドで、戻り値はアンディファインドであり、

87
00:07:26.497 --> 00:07:31.323
新しい配列は作りません。

88
00:07:31.323 --> 00:07:32.855
ポイントは三つです。

89
00:07:32.855 --> 00:07:38.677
まず、コールバックは値と位置と配列を受け取り、要素の数だけ呼び出されること。

90
00:07:38.677 --> 00:07:46.337
次に、表示や集計のような、その場で実行する処理に向いており、変換結果がほしいときはマップを使うこと。

91
00:07:46.337 --> 00:07:51.086
そして、途中で止められず、非同期処理の完了も待たないことです。

92
00:07:51.086 --> 00:07:58.286
まずは記事の基本例と境界例を実行し、表示される順番と戻り値を予測してから確かめてみてください。

93
00:07:58.286 --> 00:07:59.665
お疲れさまでした。

94
00:07:59.665 --> 00:08:03.419
実行することと結果を受け取ること、この区別を言葉で説明できるようになれば、

95
00:08:03.419 --> 00:08:07.172
理解が深まった証拠です。