WEBVTT

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

2
00:00:00.879 --> 00:00:02.785
リアクト入門の第一回です。

3
00:00:02.785 --> 00:00:07.182
今回は、コンポーネント、プロップス、ステートという、リアクトの土台になる三つの考え方を、

4
00:00:07.182 --> 00:00:11.580
読書リストを作りながら学びます。

5
00:00:11.580 --> 00:00:19.934
リアクトは、画面をコンポーネントという部品に分け、データに応じて表示を組み立てるジャバスクリプトのライブラリです。

6
00:00:19.934 --> 00:00:23.672
題材は、タイトルで検索でき、未読だけを表示でき、チェックで読了を切り替えられる、

7
00:00:23.672 --> 00:00:27.410
小さな読書リストです。

8
00:00:27.410 --> 00:00:33.713
部品の分け方から、値の渡し方、画面の更新までを、動くコードで順に確認していきましょう。

9
00:00:33.713 --> 00:00:38.989
コードが初めての方も、画面とデータの対応を追いながら進めれば大丈夫です。

10
00:00:38.989 --> 00:00:41.188
一つずつ確かめていきましょう。

11
00:00:41.188 --> 00:00:43.321
まず、プロジェクトを作成します。

12
00:00:43.321 --> 00:00:49.052
サポート中のノードジェイエスのエルティーエスを用意し、別の作業用ディレクトリーで、

13
00:00:49.052 --> 00:00:54.783
エヌピーエム・クリエイト・バイトを実行して、リアクト・ティーエスのテンプレートを選びます。

14
00:00:54.783 --> 00:01:01.048
インストール後に開発サーバーを起動し、ターミナルに表示されるローカルユーアールエルを開きます。

15
00:01:01.048 --> 00:01:05.180
編集するファイルは、エスアールシー配下のアプリ、ブックロウ、リーディングリスト、

16
00:01:05.180 --> 00:01:09.311
そしてインデックス・シーエスエスの四つです。

17
00:01:09.311 --> 00:01:15.976
メイン・ティーエスエックスはそのまま使い、生成されたパッケージ情報はプロジェクトで管理してください。

18
00:01:15.976 --> 00:01:22.640
テンプレートの依存バージョンは作成した時点で変わるため、表示された内容を確認しながら進めてください。

19
00:01:22.640 --> 00:01:26.387
次に、本一冊分の行を表示するブックロウを作ります。

20
00:01:26.387 --> 00:01:29.086
コンポーネント名は大文字で始めます。

21
00:01:29.086 --> 00:01:34.332
ブック型は、識別子、タイトル、読了かどうかという、本のデータの形です。

22
00:01:34.332 --> 00:01:41.827
ブックロウプロップスは、親から受け取る値の型で、本のデータと、切り替えを知らせる関数を受け取ります。

23
00:01:41.827 --> 00:01:45.425
これがプロップス、つまり親から子へ渡す入力です。

24
00:01:45.425 --> 00:01:49.921
行の中では、チェックボックスのチェック状態に本の読了状態を表示し、変更されたらオン・トグルを呼んで、

25
00:01:49.921 --> 00:01:54.418
操作を親に伝えます。

26
00:01:54.418 --> 00:02:00.564
ラベルで文字とチェックボックスを関連付けるので、文字をクリックしても操作できます。

27
00:02:00.564 --> 00:02:05.511
型を書いておくと、渡す値の間違いを早い段階で見つけやすくなります。

28
00:02:05.511 --> 00:02:09.708
初めての方は、まずデータの形から読むと理解しやすいです。

29
00:02:09.708 --> 00:02:12.131
ここで大切なルールがあります。

30
00:02:12.131 --> 00:02:20.530
プロップスは親から渡される入力なので、子の中でブック・リードに直接値を代入するような書き換えはしません。

31
00:02:20.530 --> 00:02:26.022
代わりに、オン・トグルに本の識別子を渡して呼び、更新を親に任せます。

32
00:02:26.022 --> 00:02:34.259
この分担では、読書リスト全体のデータを親が管理し、子は表示と、操作があったことの通知だけを担当します。

33
00:02:34.259 --> 00:02:40.882
データの置き場所が一か所に決まるので、画面のどこが変わるのかを追いやすくなります。

34
00:02:40.882 --> 00:02:44.920
次の画面からは、その親の側の仕組みを見ていきます。

35
00:02:44.920 --> 00:02:51.723
親のリーディングリストでは、ユーズステートで三つのステートだけを保持します。

36
00:02:51.723 --> 00:02:56.915
本の配列、検索語、そして未読だけを表示するかの真偽値です。

37
00:02:56.915 --> 00:03:02.107
ステートは、コンポーネントが次の描画でも覚えておく値で、更新用の関数を呼ぶことで、

38
00:03:02.107 --> 00:03:07.299
新しい値を使った表示が作られます。

39
00:03:07.299 --> 00:03:14.281
検索結果や未読数は、この三つから計算できるので、別のステートには保存しません。

40
00:03:14.281 --> 00:03:18.578
初期データは三冊で、読了は一冊、未読は二冊です。

41
00:03:18.578 --> 00:03:23.949
保持する値を絞ることが、後の更新ミスを防ぐ第一歩になります。

42
00:03:23.949 --> 00:03:30.394
入力欄の値は、そのまま検索や表示に使うため、親の近くに置くのが自然です。

43
00:03:30.394 --> 00:03:35.228
どの操作でどの値が変わるか、最初に決めておきましょう。

44
00:03:35.228 --> 00:03:40.528
読了の切り替えでは、配列を直接変更せず、新しい配列を渡します。

45
00:03:40.528 --> 00:03:46.340
セットブックスに更新関数を渡し、前の配列をマップで変換して、識別子が一致する本だけを、

46
00:03:46.340 --> 00:03:52.152
スプレッド構文でコピーして読了状態を反転させます。

47
00:03:52.152 --> 00:03:54.375
他の本はそのまま使います。

48
00:03:54.375 --> 00:03:59.845
元の配列やオブジェクトを書き換えないので、処理を純粋に保てます。

49
00:03:59.845 --> 00:04:06.000
また、ステートの更新は、その場で今の変数を書き換える操作ではありません。

50
00:04:06.000 --> 00:04:12.325
更新が反映された次の描画で、新しい本の配列を使って画面が組み立てられます。

51
00:04:12.325 --> 00:04:17.625
前の状態から次を作るときに、この更新関数の書き方が役立ちます。

52
00:04:17.625 --> 00:04:24.463
実機でも、元の配列が書き換わらず、対象の一冊だけが切り替わることを確認しました。

53
00:04:24.463 --> 00:04:26.856
安心して使える更新の形です。

54
00:04:26.856 --> 00:04:30.723
一覧を表示するときは、キーに本の識別子を指定します。

55
00:04:30.723 --> 00:04:35.631
キーは、リアクトが兄弟要素の中で同じ本を追跡するための識別子です。

56
00:04:35.631 --> 00:04:43.216
絞り込みや並び替えがある一覧で、配列の位置をキーにすると、行の対応が変わって問題になることがあります。

57
00:04:43.216 --> 00:04:48.868
描画のたびに乱数を作る方法も避け、本に紐づく安定した識別子を使ってください。

58
00:04:48.868 --> 00:04:55.115
なお、キーはリアクト専用の特別な値なので、通常のプロップスとしては子に渡されません。

59
00:04:55.115 --> 00:04:59.428
子が必要な識別子は、ブックのデータそのものから取得します。

60
00:04:59.428 --> 00:05:03.009
検索と絞り込みは、描画のたびに計算します。

61
00:05:03.009 --> 00:05:08.638
検索語は前後の空白を取り除き、日本語ロケールに合わせて小文字化し、本のタイトルも同じ方法で小文字化して、

62
00:05:08.638 --> 00:05:14.266
含まれるかどうかを調べます。

63
00:05:14.266 --> 00:05:19.894
そこへ、未読だけの条件を組み合わせたものが、表示用の本の配列です。

64
00:05:19.894 --> 00:05:22.622
未読数も、本の配列から数えます。

65
00:05:22.622 --> 00:05:28.250
表示件数がゼロのときは、条件に合う本がないという案内を表示します。

66
00:05:28.250 --> 00:05:33.708
計算で求められる値は、ステートに重ねて持たないのがポイントです。

67
00:05:33.708 --> 00:05:40.530
件数の表示も、この計算結果から作るので、検索や切り替えとずれることがありません。

68
00:05:40.530 --> 00:05:43.088
表示とデータが常に対応します。

69
00:05:43.088 --> 00:05:46.893
この絞り込みに、ユーズエフェクトは必要ありません。

70
00:05:46.893 --> 00:05:52.525
画面を描くために、手元のデータを絞り込むだけなら、描画中の計算で足ります。

71
00:05:52.525 --> 00:05:59.221
エフェクトは、ブラウザーのイベント監視や通信など、外部の仕組みと同期するためのものです。

72
00:05:59.221 --> 00:06:05.918
計算できる値を別のステートへ転記するために追加すると、同期の処理が増えて複雑になります。

73
00:06:05.918 --> 00:06:12.920
また、今回のデータはブラウザー上のメモリーだけに保持し、再読み込みすると初期状態に戻ります。

74
00:06:12.920 --> 00:06:19.312
保存先が必要になったら、読み込み中や失敗時の表示も合わせて考える段階へ進みましょう。

75
00:06:19.312 --> 00:06:25.096
まずは、計算で済むのか、外部との同期なのかを分けて考える習慣を付けましょう。

76
00:06:25.096 --> 00:06:28.140
この判断は、後の回でも繰り返し使います。

77
00:06:28.140 --> 00:06:31.711
最後に、アプリに組み込んで動作を確認します。

78
00:06:31.711 --> 00:06:40.477
アプリ・ティーエスエックスでリーディングリストを表示し、開発サーバーとは別のターミナルでビルドも確認します。

79
00:06:40.477 --> 00:06:44.048
初期状態は、全三冊、未読二冊、表示三冊です。

80
00:06:44.048 --> 00:06:48.188
リアクトで検索すると一冊になり、未読フィルターを有効にしたままその本を読了にすると、

81
00:06:48.188 --> 00:06:52.327
一覧から消えます。

82
00:06:52.327 --> 00:06:58.009
これはデータが削除されたのではなく、今の条件に合わなくなったためです。

83
00:06:58.009 --> 00:07:03.852
検索語を消せば再び表示され、存在しないタイトルではゼロ件の案内が出ます。

84
00:07:03.852 --> 00:07:08.560
タブキーとスペースキーで操作できることも確かめてください。

85
00:07:08.560 --> 00:07:09.511
まとめです。

86
00:07:09.511 --> 00:07:16.803
コンポーネントに表示を分け、プロップスで値と操作を渡し、ステートの更新から画面を組み立てる。

87
00:07:16.803 --> 00:07:21.241
この流れを動くコードで確かめることが、今回のゴールです。

88
00:07:21.241 --> 00:07:29.167
検索結果のように計算できる値はステートにせず、配列は新しい値で更新し、キーには安定した識別子を使う。

89
00:07:29.167 --> 00:07:35.825
この三つの判断ができれば、機能を増やすときも、データの置き場所に迷いにくくなります。

90
00:07:35.825 --> 00:07:41.373
次回は、ユーズステート、ユーズエフェクトなどの基本フックスを学びます。

91
00:07:41.373 --> 00:07:42.800
お疲れさまでした。

92
00:07:42.800 --> 00:07:47.714
練習として、初期データの本を一冊変えたり、検索語の初期値を変えたりして、

93
00:07:47.714 --> 00:07:52.628
表示がどう変わるか予想してから実行してみてください。