WEBVTT

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

2
00:00:00.984 --> 00:00:03.115
今回はマップを紹介します。

3
00:00:03.115 --> 00:00:08.199
これは、配列の各要素を変換して、新しい配列を作るメソッドです。

4
00:00:08.199 --> 00:00:15.086
すべての要素を一つずつ変換関数に渡し、その戻り値を順番に並べた配列が結果になります。

5
00:00:15.086 --> 00:00:21.645
たとえば、価格の一覧を税込み価格に換算したり、数値の一覧を二倍にしたりできます。

6
00:00:21.645 --> 00:00:27.220
この動画では、書き方と引数、戻り値、記事の基本例、変換関数の引数、波括弧とリターンの注意点、

7
00:00:27.220 --> 00:00:32.795
そして応用例まで、実行結果と一緒に学びます。

8
00:00:32.795 --> 00:00:37.878
元の配列を書き換えずに変換できる点が、マップの大きな特長です。

9
00:00:37.878 --> 00:00:44.109
要素の数は変わらないため、変換前と変換後を対応付けて考えやすいメソッドです。

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

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

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

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

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

15
00:01:02.558 --> 00:01:07.944
マップは非常に古くから使えるメソッドで、現在の主要な環境では広く対応しています。

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

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

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

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

20
00:01:24.725 --> 00:01:29.732
対象の配列に続けてマップと書き、カッコの中に変換関数を渡します。

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

22
00:01:35.833 --> 00:01:42.874
変換関数は各要素に対して先頭から順番に呼ばれ、その戻り値が新しい配列の同じ位置に入ります。

23
00:01:42.874 --> 00:01:47.254
変換関数には、今の要素、その位置、配列自体が渡されます。

24
00:01:47.254 --> 00:01:53.512
第二引数にディスアーグを指定すると、変換関数の中で使うディスの値を決められます。

25
00:01:53.512 --> 00:02:01.022
戻り値は変換結果を並べた新しい配列で、長さは元の配列と同じになり、元の配列自体は変更されません。

26
00:02:01.022 --> 00:02:06.341
まずは、この基本の形と、戻り値が常に配列になることを押さえましょう。

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

28
00:02:08.237 --> 00:02:11.858
百、二百、三百という価格の配列があります。

29
00:02:11.858 --> 00:02:18.064
この配列にマップを呼び、各価格に一・一を掛けて税込みの金額へ変換します。

30
00:02:18.064 --> 00:02:21.857
さらに、小数になる場合に備えて、結果にもう一度マップでラウンドを適用し、

31
00:02:21.857 --> 00:02:25.650
四捨五入します。

32
00:02:25.650 --> 00:02:30.650
実行すると、百十、二百二十、三百三十という配列が表示され、記事の期待出力と一致し、

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

34
00:02:35.650 --> 00:02:39.960
元の価格の配列は百、二百、三百のまま変わりません。

35
00:02:39.960 --> 00:02:46.511
一つの要素をどう変えるかだけを書けば、配列全体へ適用される点がポイントです。

36
00:02:46.511 --> 00:02:50.649
まずはこの形を、変換の基本として覚えてください。

37
00:02:50.649 --> 00:02:53.918
変換関数に渡される引数を詳しく見ます。

38
00:02:53.918 --> 00:02:57.015
変換関数は三つの引数を受け取ります。

39
00:02:57.015 --> 00:03:04.240
一つ目は今変換している要素の値、二つ目はその要素の位置、三つ目は対象の配列自体です。

40
00:03:04.240 --> 00:03:10.692
スライドの例では、エー、ビー、シーという配列について、位置と値を連結した文字列へ変換し、

41
00:03:10.692 --> 00:03:17.144
結果はゼロコロンエー、一コロンビー、二コロンシーになりました。

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

43
00:03:19.208 --> 00:03:27.294
通常は値だけを使うことが多いのですが、番号付きの表示を作りたい場合に二つ目の引数が役立ちます。

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

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

46
00:03:36.757 --> 00:03:39.268
実例として、数値の変換を見ます。

47
00:03:39.268 --> 00:03:43.350
一、二、三の配列について、各要素を二倍にする変換をマップで適用すると、二、

48
00:03:43.350 --> 00:03:47.431
四、六という配列が得られます。

49
00:03:47.431 --> 00:03:49.315
実機でも同じ結果でした。

50
00:03:49.315 --> 00:03:54.652
別の例では、十と二十を文字列へ変換し、文字列の十と二十が返りました。

51
00:03:54.652 --> 00:04:00.146
このように、計算結果だけでなく、型を変える変換も同じ書き方で表せます。

52
00:04:00.146 --> 00:04:03.913
マップの結果は必ず元の配列と同じ長さになります。

53
00:04:03.913 --> 00:04:11.448
要素を減らしたい場合はフィルター、要素をまとめたい場合はリデュースと、目的で使い分けてください。

54
00:04:11.448 --> 00:04:16.785
変換の式を短く書くほど、読み返したときに意図が伝わりやすくなります。

55
00:04:16.785 --> 00:04:20.101
オブジェクトとディスアーグの例を見ます。

56
00:04:20.101 --> 00:04:24.909
まず、価格を持つオブジェクトの配列から、各オブジェクトの価格を二倍にした数値だけを取り出すと、

57
00:04:24.909 --> 00:04:29.716
二百と四百が返ります。

58
00:04:29.716 --> 00:04:31.706
実機でも同じ結果でした。

59
00:04:31.706 --> 00:04:38.503
元のオブジェクトから表示に必要な値だけを抜き出す整形は、実務で特によく使う形です。

60
00:04:38.503 --> 00:04:43.808
次に、加算値五を持つオブジェクトをディスアーグとして渡す例です。

61
00:04:43.808 --> 00:04:50.772
通常の関数で書いた変換関数の中でディスを参照すると、その加算値を使って変換できます。

62
00:04:50.772 --> 00:04:53.590
結果は十五、二十五、三十五でした。

63
00:04:53.590 --> 00:05:02.211
アロー関数ではディスが外側の値になるため、ディスアーグを使いたいときは通常の関数で書く点がポイントです。

64
00:05:02.211 --> 00:05:06.568
記事の境界例で、波括弧とリターンの仕様を確かめます。

65
00:05:06.568 --> 00:05:13.103
一と二の配列に、波括弧で書いた変換関数を渡し、中で二倍の計算だけをしています。

66
00:05:13.103 --> 00:05:20.309
しかし、波括弧で本体を書いた場合は、値を返すためにリターンを明示しなければなりません。

67
00:05:20.309 --> 00:05:25.922
リターンがないため、変換結果はアンディファインドが二つ並んだ配列になり、

68
00:05:25.922 --> 00:05:31.536
すべてアンディファインドかどうかを調べるとトゥルーが返ります。

69
00:05:31.536 --> 00:05:35.725
実機でも同じ結果で、記事の期待出力と一致しました。

70
00:05:35.725 --> 00:05:44.271
短い式なら波括弧なしでそのまま値が返りますが、複数行で書くときはリターンの書き忘れに注意してください。

71
00:05:44.271 --> 00:05:47.623
これは初心者が最もつまずきやすい点です。

72
00:05:47.623 --> 00:05:49.809
注意する仕様を確認します。

73
00:05:49.809 --> 00:05:54.939
まず、元の配列に穴、つまり要素が存在しない位置がある場合、その位置では変換関数は呼ばれず、

74
00:05:54.939 --> 00:06:00.068
結果の配列でも穴のまま残ります。

75
00:06:00.068 --> 00:06:05.450
スライドの例では長さは三のままで、位置一には要素が存在しません。

76
00:06:05.450 --> 00:06:07.468
実機でも同じ結果でした。

77
00:06:07.468 --> 00:06:13.354
次に、空の配列にマップを使うと、空の配列が返り、エラーにはなりません。

78
00:06:13.354 --> 00:06:20.081
また、非同期関数を渡すと、戻り値は値そのものではなく、プロミスの配列になります。

79
00:06:20.081 --> 00:06:24.454
完了を待つ処理が別途必要になる点に注意してください。

80
00:06:24.454 --> 00:06:30.592
さらに、変換関数の中で元のオブジェクト自体を書き換えると、その変更は元の配列側にも及ぶため、

81
00:06:30.592 --> 00:06:36.731
書き換えではなく新しい値を返す書き方を心がけましょう。

82
00:06:36.731 --> 00:06:39.807
応用例として、メソッドチェーンを見ます。

83
00:06:39.807 --> 00:06:45.266
一から四までの配列に、まずフィルターで二以上の要素だけを残し、続けてマップで各要素を十倍に変換すると、

84
00:06:45.266 --> 00:06:50.725
二十、三十、四十という配列が得られます。

85
00:06:50.725 --> 00:06:52.571
実機でも同じ結果でした。

86
00:06:52.571 --> 00:06:58.568
絞ってから変換するという流れは、データ処理で最もよく使う組み合わせの一つです。

87
00:06:58.568 --> 00:07:01.490
似たメソッドとの違いも整理しましょう。

88
00:07:01.490 --> 00:07:05.720
フォーイーチは各要素に処理を実行するだけで戻り値はアンディファインドですが、

89
00:07:05.720 --> 00:07:09.949
マップは変換結果の配列を返します。

90
00:07:09.949 --> 00:07:13.486
結果の配列が必要かどうかで使い分けてください。

91
00:07:13.486 --> 00:07:19.791
処理の順番を言葉で説明できるようになると、チェーンの読み書きで迷いにくくなります。

92
00:07:19.791 --> 00:07:20.803
まとめです。

93
00:07:20.803 --> 00:07:28.904
マップは、配列の要素を変換関数で一つずつ変換し、その戻り値を並べた新しい配列を作るメソッドです。

94
00:07:28.904 --> 00:07:30.592
ポイントは三つです。

95
00:07:30.592 --> 00:07:37.342
まず、変換関数には値と位置と配列が渡され、戻り値がそのまま結果の要素になること。

96
00:07:37.342 --> 00:07:44.092
次に、結果の長さは元の配列と同じで、元の配列は変更されず、穴は穴として残ること。

97
00:07:44.092 --> 00:07:51.349
そして、波括弧で書く場合はリターンを忘れるとアンディファインドが並んでしまうことです。

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

99
00:07:57.762 --> 00:08:01.812
これで配列の変換が一通り使えるようになりました。

100
00:08:01.812 --> 00:08:03.331
お疲れさまでした。