WEBVTT

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

2
00:00:00.716 --> 00:00:03.817
今回は、ネクストジェイエスのコンポーネント入門です。

3
00:00:03.817 --> 00:00:09.303
画面を部品に分けて組み立てる仕組みを、タイプスクリプトとページズルーターのコードで学びます。

4
00:00:09.303 --> 00:00:10.496
ポイントは三つです。

5
00:00:10.496 --> 00:00:13.955
親から受け取る入力であるプロップス、部品の中で操作によって変わるステート、

6
00:00:13.955 --> 00:00:17.414
そして内側の内容を受け取るチルドレンです。

7
00:00:17.414 --> 00:00:24.808
リアクトは画面部品のライブラリーで、ネクストジェイエスはルーティングやエイチティーエムエルの生成を加えるフレームワークです。

8
00:00:24.808 --> 00:00:29.460
この違いを押さえて、挨拶カード、保存ボタン、枠の部品を順に作っていきましょう。

9
00:00:29.460 --> 00:00:34.708
コード例はすべて実物に沿って用意しましたので、手元で写しながら進めると理解が深まります。

10
00:00:34.708 --> 00:00:37.202
まず、関数から画面を返す基本形です。

11
00:00:37.202 --> 00:00:44.405
コンポーネント名は大文字で始め、エイチティーエムエルに似たジェイエスエックスを返す関数として定義します。

12
00:00:44.405 --> 00:00:48.977
ジェイエスエックスを含むファイルの拡張子はティーエスエックスです。

13
00:00:48.977 --> 00:00:52.856
グリーティングプロップスは、この部品に渡せる値の型です。

14
00:00:52.856 --> 00:00:58.259
ネームは必須の文字列、メッセージはクエスチョンマークを付けて省略可能にします。

15
00:00:58.259 --> 00:01:05.324
メッセージを省略するかアンディファインドを渡すと、引数の既定値、今日も一緒に学びましょうが使われます。

16
00:01:05.324 --> 00:01:09.896
波括弧でジャバスクリプトの値を埋め込む書き方にも注目してください。

17
00:01:09.896 --> 00:01:13.155
次に、同じ部品を使い回すページを作ります。

18
00:01:13.155 --> 00:01:17.267
エスアールシー・ページズ・グリーティングス・ティーエスエックスからグリーティングを読み込み、

19
00:01:17.267 --> 00:01:21.379
二回使います。

20
00:01:21.379 --> 00:01:25.569
一つ目は名前だけを渡し、メッセージは既定値のままです。

21
00:01:25.569 --> 00:01:28.828
二つ目は名前とメッセージの両方を渡します。

22
00:01:28.828 --> 00:01:35.655
開発サーバーでスラッシュ・グリーティングスを開くと、同じ部品で異なる内容を表示できます。

23
00:01:35.655 --> 00:01:43.104
もしネームへ数値を渡したり、必須のネームを省略したりすると、型チェックで間違いを見つけられます。

24
00:01:43.104 --> 00:01:45.742
渡す値を変えるだけで表示が変わる。

25
00:01:45.742 --> 00:01:47.604
これが再利用の基本です。

26
00:01:47.604 --> 00:01:49.918
プロップスの扱い方を確認します。

27
00:01:49.918 --> 00:01:53.533
プロップスは、子コンポーネントが読み取る入力です。

28
00:01:53.533 --> 00:01:57.582
受け取ったオブジェクトを子から直接変更してはいけません。

29
00:01:57.582 --> 00:02:03.511
更新が必要なときは、親が渡すコールバックなどを呼んで、親側で値を変えてもらいます。

30
00:02:03.511 --> 00:02:09.874
また、ジェイエスエックスに埋め込んだ通常の文字列は、リアクトがエスケープして表示します。

31
00:02:09.874 --> 00:02:19.418
外部のエイチティーエムエルを直接差し込む処理とは別物なので、エイチティーエムエル文字列をそのまま安全に使えるとは考えないでください。

32
00:02:19.418 --> 00:02:26.938
型定義はエーピーアイ応答を自動で検証するものではないため、外部データを渡す前には実行時の検証も必要です。

33
00:02:26.938 --> 00:02:34.024
入力は親から子へ一方向に流れる、という原則を覚えておくと、値がどこで決まるのか追いやすくなります。

34
00:02:34.024 --> 00:02:36.806
操作で変わる値はステートにします。

35
00:02:36.806 --> 00:02:38.607
ライクボタンの例です。

36
00:02:38.607 --> 00:02:44.499
ラベルは親から受け取るプロップス、ライクトはこの部品が持つステートです。

37
00:02:44.499 --> 00:02:51.373
ユースステートの初期値がフォルスなので、状態はブーリアン、真偽値の型と推論されます。

38
00:02:51.373 --> 00:02:56.120
すべてのユースステートに型引数を明記する必要はありません。

39
00:02:56.120 --> 00:03:05.121
クリックされたら、セットライクトへ次の値を計算する関数を渡し、現在の値を反転させてリアクトへ更新を依頼します。

40
00:03:05.121 --> 00:03:08.559
状態変数へ直接代入する方法ではありません。

41
00:03:08.559 --> 00:03:13.796
ボタンにはアリア・プレストで押された状態を支援技術にも伝えます。

42
00:03:13.796 --> 00:03:16.305
ステートの性質も押さえましょう。

43
00:03:16.305 --> 00:03:19.441
この例が変えるのは画面内の状態だけです。

44
00:03:19.441 --> 00:03:23.518
データベースやブラウザーの保存領域には記録しません。

45
00:03:23.518 --> 00:03:27.751
そのため、ページを再読み込みすると初期状態へ戻ります。

46
00:03:27.751 --> 00:03:32.612
永続化したい場合は、保存の仕組みを別に用意する必要があります。

47
00:03:32.612 --> 00:03:35.121
もう一つのポイントは独立性です。

48
00:03:35.121 --> 00:03:42.491
先ほどのページへライクボタンを読み込んで二つ配置すると、各インスタンスは別々の状態を持ちます。

49
00:03:42.491 --> 00:03:46.568
片方を保存済みにしても、もう片方は未保存のままです。

50
00:03:46.568 --> 00:03:52.213
同じ部品でも、置かれた場所ごとに状態が分かれることを覚えておきましょう。

51
00:03:52.213 --> 00:03:59.112
フォームの入力値なども同じ考え方で、変わる値だからステートにする、という判断ができます。

52
00:03:59.112 --> 00:04:05.717
共通の余白や見出し枠を部品にまとめたい場合は、チルドレンで内側の要素を受け取ります。

53
00:04:05.717 --> 00:04:07.604
ノートフレームの例です。

54
00:04:07.604 --> 00:04:13.265
タイトルは通常のプロップス、チルドレンはリアクトノード型で受け取ります。

55
00:04:13.265 --> 00:04:19.712
チルドレンとは、ノートフレームの開始タグと終了タグの内側に書いた内容そのものです。

56
00:04:19.712 --> 00:04:26.316
リアクトノードには、文字列やリアクト要素など、子要素として描画できる値が含まれます。

57
00:04:26.316 --> 00:04:30.405
この例ではチルドレンを必須項目として宣言しています。

58
00:04:30.405 --> 00:04:34.179
枠の構造は部品側が持ち、中身は利用側が差し込む。

59
00:04:34.179 --> 00:04:37.324
この分担が、レイアウト部品の考え方です。

60
00:04:37.324 --> 00:04:39.793
チルドレンの使い方を整理します。

61
00:04:39.793 --> 00:04:46.429
使う側は、ノートフレームにタイトルを渡し、タグの内側に表示したい文章や要素を書きます。

62
00:04:46.429 --> 00:04:52.603
部品側は見出しと枠を表示し、受け取ったチルドレンを決められた場所へ差し込みます。

63
00:04:52.603 --> 00:05:00.628
こうすると、ページごとに枠の構造を書き直さずに済み、見出しの階層や余白のルールを一か所でそろえられます。

64
00:05:00.628 --> 00:05:05.103
中身が変わっても枠は共通、枠が変わっても中身には触れない。

65
00:05:05.103 --> 00:05:07.727
この独立性がチルドレンの利点です。

66
00:05:07.727 --> 00:05:15.752
プロップスが値の受け渡しなら、チルドレンは画面の部品そのものの受け渡しだと考えると分かりやすいでしょう。

67
00:05:15.752 --> 00:05:18.912
ページ、部品、レイアウトの違いを整理します。

68
00:05:18.912 --> 00:05:25.519
ページズルーターのページは、エスアールシー・ページズへ置き、既定のエクスポートを用意します。

69
00:05:25.519 --> 00:05:29.541
通常のページファイルの位置がユーアールエルに対応します。

70
00:05:29.541 --> 00:05:34.137
再利用する部品は、エスアールシー・コンポーネンツなどへ置きます。

71
00:05:34.137 --> 00:05:37.727
ここへ置いただけではユーアールエルは作られません。

72
00:05:37.727 --> 00:05:44.334
部品用のディレクトリー名は開発者が決めるもので、ネクストジェイエスの必須規則ではありません。

73
00:05:44.334 --> 00:05:47.351
レイアウトもリアクトのコンポーネントです。

74
00:05:47.351 --> 00:05:54.101
ページズルーターではページやアンダースコア・エーピーピー・ティーエスエックスから読み込みます。

75
00:05:54.101 --> 00:06:00.852
ページが部品を組み立て、レイアウトが共通の枠を提供する、という階層で全体像をつかんでください。

76
00:06:00.852 --> 00:06:04.787
アプリルーターで同じ部品を使う場合の注意です。

77
00:06:04.787 --> 00:06:11.118
アプリルーターでは、ページやレイアウトは標準でサーバーコンポーネントです。

78
00:06:11.118 --> 00:06:18.475
状態やクリック処理を使うライクボタンは、クライアントコンポーネントの境界内へ置きます。

79
00:06:18.475 --> 00:06:27.372
部品のファイルを境界にするなら、先頭のインポートより前へユース・クライアントという指示を一行追加します。

80
00:06:27.372 --> 00:06:35.414
ただし、表示だけを担当する部品まで一律にクライアントコンポーネントへ変更する必要はありません。

81
00:06:35.414 --> 00:06:40.119
ルーターによって配置と境界が変わるため、ページズルーターのコードを移すときは、

82
00:06:40.119 --> 00:06:44.824
その違いを先に確認してください。

83
00:06:44.824 --> 00:06:48.080
最後に、部品を分ける判断基準とまとめです。

84
00:06:48.080 --> 00:06:53.661
見た目が似ているだけでなく、同じ種類のデータと操作を扱うかを確認します。

85
00:06:53.661 --> 00:07:00.793
巨大な部品へ多数の条件を追加するより、変更する理由ごとに役割を分けると理解しやすくなります。

86
00:07:00.793 --> 00:07:02.808
状態を置く場所も大切です。

87
00:07:02.808 --> 00:07:08.079
複数の部品で同じ値を使う場合は、共通の親が管理する方法を検討します。

88
00:07:08.079 --> 00:07:14.901
プロップスを各部品のステートへ無条件にコピーすると、元の値と表示がずれることがあります。

89
00:07:14.901 --> 00:07:20.637
プロップスで入力を受け、ステートで変化を持ち、チルドレンで中身を差し込む。

90
00:07:20.637 --> 00:07:24.823
この三つの役割分担が、コンポーネント入門のゴールです。

91
00:07:24.823 --> 00:07:28.544
小さな部品から始めて、必要になったときに分ける。

92
00:07:28.544 --> 00:07:32.420
その積み重ねが読みやすい画面づくりにつながります。