WEBVTT

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

2
00:00:00.941 --> 00:00:04.860
今回は、ネクストジェイエスのディレクトリ構成です。

3
00:00:04.860 --> 00:00:12.855
プロジェクトの中のどのフォルダーへ何を置くのかを、ページズルーターとタイプスクリプトの構成で学びます。

4
00:00:12.855 --> 00:00:21.007
ポイントは、ファイル名や配置場所そのものに意味がある場所と、開発者が整理のために作る場所があることです。

5
00:00:21.007 --> 00:00:31.040
この違いを押さえると、部品を追加したつもりでページが増えてしまったり、設定ファイルを誤った場所へ置いたりする間違いを減らせます。

6
00:00:31.040 --> 00:00:37.468
今回はソースをエスアールシーへ置く構成を例に、全体像から順に確認していきましょう。

7
00:00:37.468 --> 00:00:38.622
まず全体像です。

8
00:00:38.622 --> 00:00:42.807
パブリックと設定ファイルはプロジェクトのルートへ置きます。

9
00:00:42.807 --> 00:00:46.847
パブリックをエスアールシーの中へ移す構成ではありません。

10
00:00:46.847 --> 00:00:52.475
ソース側には、ページズ、コンポーネンツ、リブ、タイプス、スタイルズが並びます。

11
00:00:52.475 --> 00:00:57.958
ツリーのファイルは役割を示す例で、すべてを最初から用意する必要はありません。

12
00:00:57.958 --> 00:01:03.658
エスアールシーを使わずルートにページズを置く構成も可能ですが、ルートのページズとエスアールシー・ページズを併設して、

13
00:01:03.658 --> 00:01:09.358
両方を同じように使うことは避けてください。

14
00:01:09.358 --> 00:01:14.120
置き場所が二重になると、どちらが使われるのか分かりにくくなります。

15
00:01:14.120 --> 00:01:19.245
ページズルーターでは、通常のページファイルの位置がユーアールエルになります。

16
00:01:19.245 --> 00:01:27.338
インデックス・ティーエスエックスはルートのスラッシュに、アバウト・ティーエスエックスはスラッシュ・アバウトに対応します。

17
00:01:27.338 --> 00:01:32.598
ポスツの中の角括弧アイディーは、記事アイディーを含む動的なユーアールエルです。

18
00:01:32.598 --> 00:01:41.500
フォーオーフォーは見つからないページの表示を変えるためのファイルで、エーピーアイの中のファイルは画面ではなくリクエストを処理します。

19
00:01:41.500 --> 00:01:48.648
注意点は、ページズへ一般的な部品や補助ファイルを置くと、意図しないページとして扱われることがあることです。

20
00:01:48.648 --> 00:01:52.020
再利用する部品はコンポーネンツなどへ分けましょう。

21
00:01:52.020 --> 00:01:54.607
共通設定を担う特殊ファイルを見ます。

22
00:01:54.607 --> 00:01:58.488
アンダースコア・エーピーピー・ティーエスエックスです。

23
00:01:58.488 --> 00:02:04.813
コンポーネントには現在のページが渡され、ページプロップスにはページ用のデータが入ります。

24
00:02:04.813 --> 00:02:10.131
全ページ共通のプロバイダーやレイアウトも、必要な範囲でここへ配置できます。

25
00:02:10.131 --> 00:02:16.025
ページズルーターの通常のグローバル・シーエスエスは、このファイルから読み込みます。

26
00:02:16.025 --> 00:02:20.481
部品に閉じたスタイルにはシーエスエス・モジュールズを使えます。

27
00:02:20.481 --> 00:02:26.374
既にあるファイルへ変更を加えるときは、ほかの共通処理を残したまま編集してください。

28
00:02:26.374 --> 00:02:29.680
共通の入り口なので、影響は全ページに及びます。

29
00:02:29.680 --> 00:02:35.061
もう一つの特殊ファイル、アンダースコア・ドキュメント・ティーエスエックスです。

30
00:02:35.061 --> 00:02:40.304
これはサーバー側で使われる、エイチティーエムエル文書全体の骨組みを扱います。

31
00:02:40.304 --> 00:02:44.167
ページの状態やクリック処理を管理する場所ではありません。

32
00:02:44.167 --> 00:02:50.789
各ページのタイトルや説明文は、ページズルーターではネクスト・ヘッドなどでページごとに設定します。

33
00:02:50.789 --> 00:02:57.550
ここで使うヘッドはネクスト・ドキュメントから読み込む部品で、ネクスト・ヘッドとは役割が異なります。

34
00:02:57.550 --> 00:03:03.069
アプリルーターのレイアウト・ティーエスエックスとも混同しないようにしてください。

35
00:03:03.069 --> 00:03:05.828
骨組みと中身の担当を分けて覚えましょう。

36
00:03:05.828 --> 00:03:07.892
整理のためのフォルダーを見ます。

37
00:03:07.892 --> 00:03:11.503
コンポーネンツにはカードやヘッダー、リブには共通関数、タイプスには共有する型を置くと、

38
00:03:11.503 --> 00:03:15.115
役割を追いやすくなります。

39
00:03:15.115 --> 00:03:18.210
例は日付表示の補助関数、フォーマットデートです。

40
00:03:18.210 --> 00:03:24.143
文字列を受け取り、日時として解釈できなければエラーを投げ、できれば日本向けの形式へ整えます。

41
00:03:24.143 --> 00:03:30.076
実行環境のタイムゾーンに任せず、アジア・トウキョウと表示基準を指定している点がポイントです。

42
00:03:30.076 --> 00:03:34.526
検証では、二千二十六年九月十九日の日時が二千二十六年九月十九日と表示され、

43
00:03:34.526 --> 00:03:38.976
無効な文字列では記事のエラーメッセージになることを確認しました。

44
00:03:38.976 --> 00:03:42.082
タイプスへ置く型と、ページでの利用例です。

45
00:03:42.082 --> 00:03:47.259
アーティクル型は、アイディー、タイトル、公開日時を文字列で持つ形です。

46
00:03:47.259 --> 00:03:51.326
アバウトページは、リブからフォーマットデートを、タイプスからアーティクル型を読み込み、

47
00:03:51.326 --> 00:03:55.393
記事データを表示します。

48
00:03:55.393 --> 00:04:01.753
開発サーバーでスラッシュ・アバウトを開くと、型と補助関数を使ったページを確認できます。

49
00:04:01.753 --> 00:04:03.824
ただし注意点が二つあります。

50
00:04:03.824 --> 00:04:09.888
タイプスへ型を置いても、外部エーピーアイのジェイソンを検証したことにはなりません。

51
00:04:09.888 --> 00:04:15.952
また、ネクストが生成するネクスト・エンブ・ディー・ティーエスは通常手編集しません。

52
00:04:15.952 --> 00:04:22.756
置いただけで自動実行されるわけではなく、参照されたコードが処理される点も覚えておきましょう。

53
00:04:22.756 --> 00:04:24.302
パブリックの役割です。

54
00:04:24.302 --> 00:04:30.206
パブリック・ロゴ・エスブイジーは、スラッシュ・ロゴ・エスブイジーとして参照できます。

55
00:04:30.206 --> 00:04:33.721
ユーアールエルにパブリックという文字は含めません。

56
00:04:33.721 --> 00:04:36.110
検証でも、この対応を確認しました。

57
00:04:36.110 --> 00:04:39.765
逆に言えば、ここへ置いたものはそのまま公開されます。

58
00:04:39.765 --> 00:04:45.669
秘密の設定ファイルやエーピーキーなど、公開したくないものは絶対に置かないでください。

59
00:04:45.669 --> 00:04:49.887
画像はネクスト・イメージなどで表示できますが、静的出力では既定の画像最適化サーバーが使えないため、

60
00:04:49.887 --> 00:04:54.104
設定の調整が必要です。

61
00:04:54.104 --> 00:05:00.430
また、パブリックのジャバスクリプトやシーエスエスは置いただけではページへ読み込まれません。

62
00:05:00.430 --> 00:05:03.944
通常のシーエスエスはソース側からインポートします。

63
00:05:03.944 --> 00:05:06.759
エーピーアイと生成物の境界を理解します。

64
00:05:06.759 --> 00:05:15.626
ページズ・エーピーアイではエーピーアイ・ルーツを定義できますが、データベースへの接続や入力検証は自分で実装する必要があります。

65
00:05:15.626 --> 00:05:19.990
ファイルを置くだけで保存の仕組みが作られるわけではありません。

66
00:05:19.990 --> 00:05:26.464
静的出力ではエーピーアイ・ルーツ自体が動かせないため、外部エーピーアイなどを別に用意します。

67
00:05:26.464 --> 00:05:27.590
次に生成物です。

68
00:05:27.590 --> 00:05:33.220
ノード・モジュールズはインストールされた依存パッケージ、ドット・ネクストはビルドや開発用の生成物で、

69
00:05:33.220 --> 00:05:38.850
どちらも直接編集してソースの代わりに使う場所ではありません。

70
00:05:38.850 --> 00:05:43.213
依存関係はパッケージ・ジェイソンとロックファイルで管理します。

71
00:05:43.213 --> 00:05:47.436
静的出力の成果物はアウトへ出て、再生成して公開するものです。

72
00:05:47.436 --> 00:05:50.299
アプリルーターの構成を読むときの注意です。

73
00:05:50.299 --> 00:05:56.433
アプリルーターでは、アプリ・ページ・ティーエスエックス、アプリ・レイアウト・ティーエスエックス、

74
00:05:56.433 --> 00:06:02.566
アプリ・ノットファウンド、そしてエーピーアイ配下のルート・ティーエスなどを使います。

75
00:06:02.566 --> 00:06:07.678
ページズルーターのアンダースコア・エーピーピーやアンダースコア・ドキュメント、

76
00:06:07.678 --> 00:06:12.790
ページズ・エーピーアイを、そのまま同じ意味で配置するものではありません。

77
00:06:12.790 --> 00:06:20.423
移行のために両ルーターを併用する構成もありますが、同じユーアールエルを両方で定義しないことなどの制約があります。

78
00:06:20.423 --> 00:06:27.784
新しい記事や公式サンプルを読むときは、どちらのルーターを対象にしているかを最初に確認する習慣を付けましょう。

79
00:06:27.784 --> 00:06:31.098
最後に、配置の間違いを見つける確認手順とまとめです。

80
00:06:31.098 --> 00:06:33.774
一つ目はルーティングされる場所の確認です。

81
00:06:33.774 --> 00:06:41.422
表示されるユーアールエルはルーターの規則で決まるため、共有部品をページズ配下へ置くとページとして扱われる場合があります。

82
00:06:41.422 --> 00:06:45.246
部品や共通処理を置く場所と、公開するページを分けてください。

83
00:06:45.246 --> 00:06:47.922
二つ目は公開ファイルと秘密情報の区別です。

84
00:06:47.922 --> 00:06:50.599
パブリックへ置いたファイルは配信対象です。

85
00:06:50.599 --> 00:06:53.785
環境変数も、名前と読み込む場所によってクライアントへ渡る可能性があるため、

86
00:06:53.785 --> 00:06:56.972
生成物を確認してください。

87
00:06:56.972 --> 00:06:59.138
意味のある配置と整理のための配置。

88
00:06:59.138 --> 00:07:04.364
この物差しでフォルダーを見分けられるようになれば、構成で迷う場面は大きく減ります。