WEBVTT

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

2
00:00:00.867 --> 00:00:05.636
今回はネクストジェイエスの関数・プロップス・エーピーアイ一覧です。

3
00:00:05.636 --> 00:00:11.031
この記事は、ネクストジェイエスの主要な機能を一テーマずつ学ぶためのリファレンスで、

4
00:00:11.031 --> 00:00:16.425
データ取得、ユーアールエル操作、ページのプロップス、エイチティーティーピー・エーピーアイから、

5
00:00:16.425 --> 00:00:21.820
必要な機能の個別記事へ進めるようになっています。

6
00:00:21.820 --> 00:00:26.589
個別記事は関数が十三本、プロップスが三本、エーピーアイが四本です。

7
00:00:26.589 --> 00:00:31.285
この動画では、記事を選ぶ前の確認点、機能の分類の見方、目的別の学習順、静的配信とサーバー実行の境界を、

8
00:00:31.285 --> 00:00:35.982
初心者向けに順に整理します。

9
00:00:35.982 --> 00:00:42.340
分からない機能に出会ったら、まずこの一覧に戻って分類を確認する、という使い方もできます。

10
00:00:42.340 --> 00:00:45.439
記事を選ぶ前に、まずルーターを確認します。

11
00:00:45.439 --> 00:00:50.604
アプリというフォルダーを使うアップルーターと、ページズというフォルダーを使うページズルーターでは、

12
00:00:50.604 --> 00:00:55.770
関数の配置とデータ取得の規約が異なります。

13
00:00:55.770 --> 00:01:02.484
アップルーターの記事は、ネクストジェイエス十五以降の非同期のリクエスト・エーピーアイを前提とし、

14
00:01:02.484 --> 00:01:09.199
ネクストジェイエス十六ではキャッシュ・コンポーネントを有効にしない基本構成を扱います。

15
00:01:09.199 --> 00:01:15.693
古いプロジェクトへコードをコピーする場合は、バージョンと対応機能を必ず確認してください。

16
00:01:15.693 --> 00:01:20.120
ここを飛ばすと、動かないコードを写してしまう原因になります。

17
00:01:20.120 --> 00:01:22.698
次に、三つの言葉の違いです。

18
00:01:22.698 --> 00:01:27.485
関数は、データ取得や画面遷移などの処理そのものです。

19
00:01:27.485 --> 00:01:32.087
プロップスは、コンポーネントへ値を渡す仕組みです。

20
00:01:32.087 --> 00:01:40.188
エイチティーティーピー・エーピーアイは、リクエストを受け取り、レスポンスを返す入口です。

21
00:01:40.188 --> 00:01:51.051
注意点として、ネクストリクエストなどはクラスを含むエーピーアイであり、すべてを通常の関数として呼ぶわけではありません。

22
00:01:51.051 --> 00:01:55.470
各記事では、引数、戻り値、実行場所を確認します。

23
00:01:55.470 --> 00:02:00.441
リアクトのプロップスやユースステートと、ネクストジェイエス固有のエーピーアイは、

24
00:02:00.441 --> 00:02:05.412
役割を分けて理解しましょう。

25
00:02:05.412 --> 00:02:08.445
関数の個別記事を、ルーター別に見ます。

26
00:02:08.445 --> 00:02:10.520
まずページズルーターです。

27
00:02:10.520 --> 00:02:16.905
ゲットスタティックプロップスは、ビルド時にデータを取得してページへ渡す関数です。

28
00:02:16.905 --> 00:02:24.087
ゲットスタティックパスは、動的なユーアールエルのうち、どのページを生成するかを列挙します。

29
00:02:24.087 --> 00:02:29.674
ゲットサーバーサイドプロップスは、リクエストごとにページを生成します。

30
00:02:29.674 --> 00:02:35.261
つまり、事前に作っておくのか、アクセスのたびに作るのかが分かれ目です。

31
00:02:35.261 --> 00:02:39.091
更新頻度と、誰のためのデータを出すかで選びます。

32
00:02:39.091 --> 00:02:43.720
詳しい書き方と型は、それぞれの個別記事で確認してください。

33
00:02:43.720 --> 00:02:50.584
三つの関数の名前が似ていても、実行されるタイミングがまったく違う点を押さえてください。

34
00:02:50.584 --> 00:02:52.035
アップルーター側です。

35
00:02:52.035 --> 00:02:58.628
ジェネレートスタティックパラムスは、動的ルートの値を列挙して、ページを静的に生成するための関数です。

36
00:02:58.628 --> 00:03:04.034
スライドのように、スラッグの配列から、スラッグを持つオブジェクトの配列を返します。

37
00:03:04.034 --> 00:03:07.463
ジェネレートメタデータは、記事や商品のデータから、ページごとのタイトル、

38
00:03:07.463 --> 00:03:10.891
説明、オージーピーを生成します。

39
00:03:10.891 --> 00:03:13.792
どちらもサーバー側で実行される点が共通です。

40
00:03:13.792 --> 00:03:17.814
ページズルーターのゲットスタティックパスと役割は似ていますが、書き方は互換ではないため、

41
00:03:17.814 --> 00:03:21.836
ルーターをそろえて読んでください。

42
00:03:21.836 --> 00:03:23.675
画面側のフックも整理します。

43
00:03:23.675 --> 00:03:28.798
ユースパスネームは現在のパスを読み、選択中のナビゲーション表示などに使います。

44
00:03:28.798 --> 00:03:34.184
ユースパラムスは、動的ルートのスラッグなどをクライアントコンポーネントで読みます。

45
00:03:34.184 --> 00:03:38.519
ユースサーチパラムスは、ユーアールエルの検索条件を読み書きします。

46
00:03:38.519 --> 00:03:45.349
ユースルーターは、ボタンから画面を切り替えたり、履歴を戻したり、リフレッシュしたりするためのフックです。

47
00:03:45.349 --> 00:03:49.159
読む対象が、パスか、動的部分か、検索条件かで使い分けます。

48
00:03:49.159 --> 00:03:55.464
なお、これらは認証や認可の代わりにはならないため、アクセス権はデータ取得側でも検証してください。

49
00:03:55.464 --> 00:03:57.185
サーバー側の制御です。

50
00:03:57.185 --> 00:04:01.723
リダイレクトは、サーバー側の条件で移動先を決める関数です。

51
00:04:01.723 --> 00:04:07.042
ノットファウンドは、存在しない記事や商品を、専用画面へ切り替えます。

52
00:04:07.042 --> 00:04:11.267
クッキーズはサーバーでクッキーを読み取り、更新します。

53
00:04:11.267 --> 00:04:15.491
ヘッダーズは、リクエストヘッダーをサーバーで読みます。

54
00:04:15.491 --> 00:04:22.689
これらは、ブラウザー側の表示操作ではなく、サーバーでの判断や情報取得に使う点がポイントです。

55
00:04:22.689 --> 00:04:30.668
存在しないデータと、通信障害は区別して扱い、エイチティーティーピー応答でも確認する習慣を付けましょう。

56
00:04:30.668 --> 00:04:37.396
実行場所がサーバーかどうかを先に確認すると、使える機能かどうかを判断しやすくなります。

57
00:04:37.396 --> 00:04:39.969
プロップスの個別記事は三本です。

58
00:04:39.969 --> 00:04:47.526
一本目は、サーバーコンポーネントからクライアントコンポーネントへ、安全に値を渡す境界の話です。

59
00:04:47.526 --> 00:04:54.280
二本目はページのプロップスで、パラムスとサーチパラムスの違いと、入力検証を扱います。

60
00:04:54.280 --> 00:04:58.702
スライドのように、アップルーターではパラムスがプロミスとして渡されるため、

61
00:04:58.702 --> 00:05:03.123
エイウェイトで解決してから使います。

62
00:05:03.123 --> 00:05:09.555
三本目はレイアウトのプロップスで、チルドレンとパラムスで共通画面を組み立てます。

63
00:05:09.555 --> 00:05:15.344
誰が、どの値を、いつ渡すのかを意識すると、型エラーで迷いにくくなります。

64
00:05:15.344 --> 00:05:17.763
エーピーアイの個別記事は四本です。

65
00:05:17.763 --> 00:05:22.245
アップルーターでは、ルートハンドラーズで、アプリ配下のエーピーアイにルート・ティーエスを置き、

66
00:05:22.245 --> 00:05:26.727
ゲットやポストの処理を作ります。

67
00:05:26.727 --> 00:05:32.845
ネクストリクエストは、ユーアールエル、クッキー、本文から入力を取り出すためのものです。

68
00:05:32.845 --> 00:05:38.394
ネクストレスポンスは、ジェイソン、クッキー、リダイレクトなどの応答を返します。

69
00:05:38.394 --> 00:05:45.508
ページズルーターのエイチティーティーピー・エーピーアイは、エーピーアイ・ルーツ入門の記事で扱います。

70
00:05:45.508 --> 00:05:50.132
入力の形、メソッド、コンテンツタイプ、ステータスを確認し、必要に応じて認証やレート制限、

71
00:05:50.132 --> 00:05:54.756
シーエスアールエフ対策も設計してください。

72
00:05:54.756 --> 00:05:57.095
目的から選ぶ学習順も紹介します。

73
00:05:57.095 --> 00:06:04.405
記事サイトを静的生成するなら、最初にゲットスタティックプロップスとゲットスタティックパス、

74
00:06:04.405 --> 00:06:11.715
またはジェネレートスタティックパラムスを学び、アップルーターではジェネレートメタデータでタイトルも設定します。

75
00:06:11.715 --> 00:06:17.124
シーエムエス取得が失敗した場合の動作も設計し、生成件数を確認してください。

76
00:06:17.124 --> 00:06:22.972
検索や画面遷移を作るなら、ユーアールエル系のフックとリンク、ユースルーターです。

77
00:06:22.972 --> 00:06:31.305
サーバーへデータを送るなら、アップルーターはルートハンドラーズ、ページズルーターはエーピーアイ・ルーツを使います。

78
00:06:31.305 --> 00:06:39.784
サンプルのエコー・エーピーアイは保存機能を持たず、テーマのクッキーはログインセッションではない点にも注意しましょう。

79
00:06:39.784 --> 00:06:43.135
最後に、静的配信とサーバー実行の境界です。

80
00:06:43.135 --> 00:06:49.039
ゲットサーバーサイドプロップス、リクエストごとのクッキーやヘッダー処理、

81
00:06:49.039 --> 00:06:54.943
ポストのエーピーアイなどは、ネクストジェイエスのサーバー実行環境が必要です。

82
00:06:54.943 --> 00:06:58.453
アウトと呼ばれる静的出力だけでは動きません。

83
00:06:58.453 --> 00:07:03.559
この一覧を掲載しているサイトの配信方式と、サンプルアプリを実行する方式は別であり、

84
00:07:03.559 --> 00:07:08.665
記事を読むためにサーバー移行は必要ありません。

85
00:07:08.665 --> 00:07:17.761
サンプルを試すときは、コードに書かれたパスへファイルを置き、対象ルーターのプロジェクトで開発サーバーを起動します。

86
00:07:17.761 --> 00:07:23.505
正常な値、欠けた値、不正な値を試した後、本番ビルドでも確認してください。

87
00:07:23.505 --> 00:07:26.856
これでリファレンスの使い方はつかめました。

88
00:07:26.856 --> 00:07:28.292
お疲れさまでした。