WEBVTT

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

2
00:00:00.983 --> 00:00:04.587
ジャバスクリプト入門、実践連載の第三回です。

3
00:00:04.587 --> 00:00:07.864
今回のテーマは、配列とオブジェクトです。

4
00:00:07.864 --> 00:00:14.417
一件の商品をオブジェクト、その一覧を配列として扱い、買い物のデータを処理します。

5
00:00:14.417 --> 00:00:22.937
中心になるのは、条件で残すフィルター、形を変えるマップ、ひとつにまとめるリデュースという三つの方法です。

6
00:00:22.937 --> 00:00:30.637
あわせて、探すファインド、並べ替えるソート、そして元のデータを壊さないコピーの方法も学びます。

7
00:00:30.637 --> 00:00:36.535
データをどう表し、どう変えるかは、画面を作る次の回でもそのまま使います。

8
00:00:36.535 --> 00:00:43.416
最後まで進めると、明細を作って合計まで出す一連の流れが、自分で書けるようになります。

9
00:00:43.416 --> 00:00:50.788
一つひとつの操作は、結果だけでなく、元のデータがどうなったかも一緒に確かめながら進めます。

10
00:00:50.788 --> 00:00:52.544
まずオブジェクトです。

11
00:00:52.544 --> 00:00:57.811
オブジェクトは、関係する値を名前付きでひとまとめにする入れ物です。

12
00:00:57.811 --> 00:01:05.153
画面の例では、ペンという商品に、アイディー、名前、単価、個数という四つの情報を入れています。

13
00:01:05.153 --> 00:01:08.984
名前の部分をキー、入っている内容を値と呼びます。

14
00:01:08.984 --> 00:01:12.974
値を取り出すときは、ドットに続けてキーを書きます。

15
00:01:12.974 --> 00:01:17.124
アイディーを表示名とは別に用意するのがポイントです。

16
00:01:17.124 --> 00:01:23.189
名前が同じ商品が二つあっても、アイディーが違えば別の商品として区別できます。

17
00:01:23.189 --> 00:01:28.456
金額は円単位の整数として扱う前提で、この先の計算を進めていきます。

18
00:01:28.456 --> 00:01:35.000
最初は、値の取り出し方と、キーを使ってデータを整理する感覚をつかむことが目標です。

19
00:01:35.000 --> 00:01:36.095
次に配列です。

20
00:01:36.095 --> 00:01:38.756
配列は、値を順番に並べた一覧です。

21
00:01:38.756 --> 00:01:46.267
今回の買い物データでは、商品のオブジェクトを三つ並べたものを、アイテムズという名前で用意します。

22
00:01:46.267 --> 00:01:48.771
ノート、ペン、消しゴムの順です。

23
00:01:48.771 --> 00:01:55.500
要素を取り出す番号はゼロから始まるので、先頭のノートはゼロ番、二番目のペンは一番です。

24
00:01:55.500 --> 00:01:59.726
個数がゼロの消しゴムも、まだ一覧の中には残っています。

25
00:01:59.726 --> 00:02:02.855
買うものだけに絞るのは次のステップです。

26
00:02:02.855 --> 00:02:11.149
配列とオブジェクトを組み合わせるこの形は、商品一覧に限らず、実際のアプリで最もよく出てくるデータの形です。

27
00:02:11.149 --> 00:02:18.348
要素の順番と番号の対応を押さえておくと、このあとの絞り込みや変換の結果も読みやすくなります。

28
00:02:18.348 --> 00:02:21.320
ここから配列メソッドの使い分けです。

29
00:02:21.320 --> 00:02:23.137
最初はフィルターです。

30
00:02:23.137 --> 00:02:28.421
フィルターは、条件に合う要素だけを残して、新しい配列を作ります。

31
00:02:28.421 --> 00:02:32.055
今回の条件は、個数がゼロより大きいことです。

32
00:02:32.055 --> 00:02:36.348
ノートとペンは残り、個数がゼロの消しゴムは外れます。

33
00:02:36.348 --> 00:02:38.330
結果の要素数は二つです。

34
00:02:38.330 --> 00:02:42.293
大切なのは、元のアイテムズは変わらないことです。

35
00:02:42.293 --> 00:02:49.064
フィルターは取り除くのではなく、残すものを集めた新しい一覧を返すと考えてください。

36
00:02:49.064 --> 00:02:56.000
条件を変えれば、たとえば百円以上の商品だけ、といった絞り込みも同じ書き方でできます。

37
00:02:56.000 --> 00:03:02.440
戻り値を使わずに表示だけしたい場面では、無理に別の方法を選ぶ必要はありません。

38
00:03:02.440 --> 00:03:03.719
次はマップです。

39
00:03:03.719 --> 00:03:08.837
マップは、配列の各要素を別の値に変換して、新しい配列を作ります。

40
00:03:08.837 --> 00:03:14.754
ここでは、買う商品の一つひとつを、名前と小計だけを持つ明細の形に変えます。

41
00:03:14.754 --> 00:03:20.832
ノートは二百円かける二個で四百円、ペンは百二十円かける三個で三百六十円です。

42
00:03:20.832 --> 00:03:26.909
引数の波括弧で、名前、単価、個数だけを取り出す書き方を、分割代入と呼びます。

43
00:03:26.909 --> 00:03:32.186
オブジェクトから必要な値だけを、その場で受け取れる便利な方法です。

44
00:03:32.186 --> 00:03:39.063
フィルターが数を減らすのに対し、マップは数を変えずに形を変える、と対で覚えてください。

45
00:03:39.063 --> 00:03:46.100
フィルターとマップをつなげると、絞ってから変える、という読みやすい処理の流れが作れます。

46
00:03:46.100 --> 00:03:48.169
三つ目はリデュースです。

47
00:03:48.169 --> 00:03:53.860
リデュースは、配列の中身をたたみ込むように、一つの値にまとめます。

48
00:03:53.860 --> 00:03:58.861
明細の小計を順に足していくと、合計は七百六十円になります。

49
00:03:58.861 --> 00:04:02.999
書き方で大切なのが、最後に置く初期値のゼロです。

50
00:04:02.999 --> 00:04:07.482
足し算はゼロから始める、という開始の値を明示します。

51
00:04:07.482 --> 00:04:14.208
この初期値があるおかげで、対象が空の配列でも、合計はゼロとして正しく返ります。

52
00:04:14.208 --> 00:04:19.208
初期値を省略すると、空の配列ではエラーになってしまいます。

53
00:04:19.208 --> 00:04:23.692
集計では、開始の値を必ず書く、と習慣にしてください。

54
00:04:23.692 --> 00:04:30.072
合計だけでなく、個数の合計や、最も高い値なども、同じ考え方で集計できます。

55
00:04:30.072 --> 00:04:33.629
ファインドは、条件に合う最初の一個を探す方法です。

56
00:04:33.629 --> 00:04:38.894
ここでは、アイディーがペンと一致する商品を探し、その名前を表示しています。

57
00:04:38.894 --> 00:04:45.440
見つからなかった場合、ファインドはアンディファインドという、値がないことを表す値を返します。

58
00:04:45.440 --> 00:04:49.780
そのまま名前を取り出そうとするとエラーになるので、クエスチョンマークとドットを使う書き方で、

59
00:04:49.780 --> 00:04:54.120
値がないときの参照を避けます。

60
00:04:54.120 --> 00:05:00.238
さらに、ヌルかアンディファインドのときだけ代わりの文を使う合体の記号を組み合わせます。

61
00:05:00.238 --> 00:05:06.072
ゼロや空の文字まで置き換えてしまう、縦線二つの書き方とは違う点に注意してください。

62
00:05:06.072 --> 00:05:11.764
見つかる場合と見つからない場合の両方を試すことで、想定外の動きを早めに防げます。

63
00:05:11.764 --> 00:05:15.012
並べ替えのソートには注意点があります。

64
00:05:15.012 --> 00:05:22.022
ソートは新しい配列を返すのではなく、元の配列そのものの順番を書き換えてしまいます。

65
00:05:22.022 --> 00:05:30.228
そこで、ドット三つのスプレッドという書き方で、まず配列のコピーを作り、そのコピーを並べ替えます。

66
00:05:30.228 --> 00:05:34.331
こうすれば、元のアイテムズの順番は変わりません。

67
00:05:34.331 --> 00:05:40.485
また、数値を並べるときは、前の値から次の値を引く比較の関数を指定します。

68
00:05:40.485 --> 00:05:46.811
これがないと、数値が文字として扱われ、思った順番にならないことがあります。

69
00:05:46.811 --> 00:05:51.085
結果は安い順に、消しゴム、ペン、ノートとなります。

70
00:05:51.085 --> 00:05:57.752
コピーを作るひと手間が、あとから順番が変わって困る事故を未然に防いでくれます。

71
00:05:57.752 --> 00:06:02.173
データの更新でも、元のデータを守る方法を使います。

72
00:06:02.173 --> 00:06:06.418
ペンの個数を一つ増やした新しい一覧を作る例です。

73
00:06:06.418 --> 00:06:16.145
マップの中で、アイディーがペンの商品だけを、スプレッドでコピーし、個数を上書きした新しいオブジェクトにします。

74
00:06:16.145 --> 00:06:19.328
それ以外の商品は、そのまま使います。

75
00:06:19.328 --> 00:06:25.164
結果として、元のペンの個数は三のまま、新しい一覧では四になります。

76
00:06:25.164 --> 00:06:29.409
ただし、スプレッドによるコピーは浅いコピーです。

77
00:06:29.409 --> 00:06:34.007
配列やオブジェクトの中身までは自動で複製されません。

78
00:06:34.007 --> 00:06:40.020
深い階層を変えたいときは、その階層でも同じようにコピーしてください。

79
00:06:40.020 --> 00:06:46.740
変更しないものはそのまま、変更するものだけ新しくする、という区別が大切です。

80
00:06:46.740 --> 00:06:50.577
最後に、マップとセットという二つの入れ物を紹介します。

81
00:06:50.577 --> 00:06:56.546
大文字で始まるマップは、アイディーをキーにして商品を引ける、辞書のような仕組みです。

82
00:06:56.546 --> 00:07:00.526
一覧を何度も探すより、素早く目的の商品にたどり着けます。

83
00:07:00.526 --> 00:07:03.084
セットは、重複のない値の集まりです。

84
00:07:03.084 --> 00:07:06.708
ペン、ペン、ノートという希望の一覧をセットに入れると、重複したペンは一つになり、

85
00:07:06.708 --> 00:07:10.332
結果は二件になります。

86
00:07:10.332 --> 00:07:15.164
注意点として、マップに同じキーを登録すると、後の値で上書きされます。

87
00:07:15.164 --> 00:07:21.418
外部のデータを取り込むときは、重複を許すのか、エラーにするのかを先に決めておきましょう。

88
00:07:21.418 --> 00:07:26.392
探す回数が多いデータほど、この二つの入れ物を使う効果が大きくなります。

89
00:07:26.392 --> 00:07:27.389
まとめです。

90
00:07:27.389 --> 00:07:32.537
商品はオブジェクト、一覧は配列で表し、アイディーで区別します。

91
00:07:32.537 --> 00:07:37.769
処理の使い分けは、条件で残すならフィルター、形を変えるならマップ、一つに集計するならリデュース、

92
00:07:37.769 --> 00:07:43.000
一個を探すならファインドです。

93
00:07:43.000 --> 00:07:48.647
並べ替えや更新では、コピーを作ってから操作し、元のデータを守ります。

94
00:07:48.647 --> 00:07:55.540
練習として、個数をすべてゼロにして合計がゼロになること、存在しないアイディーを探して代替の表示が出ること、

95
00:07:55.540 --> 00:08:02.432
並べ替えても元の順番が変わらないことを確かめてみてください。

96
00:08:02.432 --> 00:08:07.747
結果と元データを比べる習慣は、この先のどの処理でも役に立ちます。

97
00:08:07.747 --> 00:08:11.733
次回はドムとイベントで、画面に一覧を追加します。

98
00:08:11.733 --> 00:08:13.892
これで第三回を終わります。