WEBVTT

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

2
00:00:00.905 --> 00:00:07.696
今回は、ネクストジェイエスとは何か、リアクトとの違いとページズルーターの基本を解説します。

3
00:00:07.696 --> 00:00:11.469
リアクトは、画面の部品を作るためのライブラリです。

4
00:00:11.469 --> 00:00:17.656
一方ネクストジェイエスは、その画面に、ユーアールエルに応じたページ表示、

5
00:00:17.656 --> 00:00:23.843
エイチティーエムエルの事前生成、データ取得、ビルドといった仕組みを加えるフレームワークです。

6
00:00:23.843 --> 00:00:28.672
画面だけか、アプリ全体か、という役割の違いが最初のポイントです。

7
00:00:28.672 --> 00:00:34.708
この記事はページズルーターを前提に、タイプスクリプトのコードで確認していきます。

8
00:00:34.708 --> 00:00:38.396
ネクストジェイエスでできることを並べてみます。

9
00:00:38.396 --> 00:00:45.532
ファイルの配置からユーアールエルを決めるルーティング、リアクトの画面をあらかじめ描く事前レンダリング、

10
00:00:45.532 --> 00:00:52.667
ページ間の移動、シーエスエス・モジュールズ、タイプスクリプトの支援などです。

11
00:00:52.667 --> 00:01:01.166
サーバーを動かす構成では、エーピーアイ・ルーツでエイチティーティーピーリクエストを処理することもできます。

12
00:01:01.166 --> 00:01:08.863
つまり、画面作りだけでなく、公開に必要な周辺の仕組みまでを一つの枠組みで揃えられるのが特徴です。

13
00:01:08.863 --> 00:01:13.994
ただし、使える機能は公開方法によって変わる点に注意してください。

14
00:01:13.994 --> 00:01:18.965
学習の進め方としては、まずページの作り方と生成方式を押さえ、次にデータ取得や公開方法へ進むと、

15
00:01:18.965 --> 00:01:23.936
全体像を見失いにくくなります。

16
00:01:23.936 --> 00:01:25.932
ページズルーターの基本です。

17
00:01:25.932 --> 00:01:31.776
エスアールシー・ページズ・インデックス・ティーエスエックスがトップページ、

18
00:01:31.776 --> 00:01:37.621
エスアールシー・ページズ・アバウト・ティーエスエックスがスラッシュ・アバウトに対応します。

19
00:01:37.621 --> 00:01:43.608
再利用する部品は、エスアールシー・コンポーネンツなどへ置いてページから読み込みます。

20
00:01:43.608 --> 00:01:46.316
この部品用フォルダーの名前は自由です。

21
00:01:46.316 --> 00:01:52.303
画面の例はアバウトページで、見出しと説明文、そしてトップへ戻るリンクを置いています。

22
00:01:52.303 --> 00:01:56.794
リンクに使うリンクはネクストジェイエスの部品で、ネクスト13以降の通常の書き方では、

23
00:01:56.794 --> 00:02:01.284
子要素にエータグを重ねる必要はありません。

24
00:02:01.284 --> 00:02:04.078
エイチティーエムエルの生成方式を見ます。

25
00:02:04.078 --> 00:02:06.732
まずエスエスジー、静的サイト生成です。

26
00:02:06.732 --> 00:02:11.342
ビルド時にページのエイチティーエムエルを作っておく方法を指します。

27
00:02:11.342 --> 00:02:17.768
似た言葉の静的サイトジェネレーターは生成ツールそのものを指すので、方式とは区別してください。

28
00:02:17.768 --> 00:02:25.870
公開記事、製品の説明、会社案内など、あらかじめ内容を取得でき、多くの利用者へ同じ情報を配信するページに向いています。

29
00:02:25.870 --> 00:02:31.458
リクエストのたびに取得し直す必要がなく、生成物をキャッシュしやすい点が利点です。

30
00:02:31.458 --> 00:02:36.487
一方、本文を更新するには、静的出力では再ビルドと再配置が必要になります。

31
00:02:36.487 --> 00:02:43.192
大量のページを一度に生成する場合は、取得先の負荷や生成にかかる時間も計画に入れておくと安心です。

32
00:02:43.192 --> 00:02:45.076
エスエスジーのコード例です。

33
00:02:45.076 --> 00:02:48.844
ビルドインフォというページで、生成した日時を表示します。

34
00:02:48.844 --> 00:02:55.841
ゲットスタティックプロップスがビルド環境で実行され、返した値を使ってエイチティーエムエルが生成されます。

35
00:02:55.841 --> 00:03:02.838
開発サーバーでは確認のためにリクエスト時に再実行されるので、本番と同じタイミングだと思わないでください。

36
00:03:02.838 --> 00:03:07.144
アイエスアールを使うサーバー構成では、公開後の再生成も可能です。

37
00:03:07.144 --> 00:03:11.989
また、エスエスジーでもフォーム操作やブラウザからのデータ取得はできます。

38
00:03:11.989 --> 00:03:18.044
ただし、大量のページや遅い外部エーピーアイは、ビルド時間に影響する点も覚えておきましょう。

39
00:03:18.044 --> 00:03:21.815
次はエスエスアール、サーバーサイドレンダリングです。

40
00:03:21.815 --> 00:03:30.371
ページズルーターではゲットサーバーサイドプロップスを使い、リクエストに応じたデータからエイチティーエムエルを作れます。

41
00:03:30.371 --> 00:03:37.188
ログイン状態などのリクエスト情報が必要なページや、その時点の情報を返したいページで検討します。

42
00:03:37.188 --> 00:03:38.928
ただし注意点もあります。

43
00:03:38.928 --> 00:03:45.599
エスエスアールでは、外部エーピーアイの応答待ちやサーバー処理の時間もレスポンスに含まれます。

44
00:03:45.599 --> 00:03:50.820
導入すれば必ずエスエスジーやブラウザ描画より速くなるわけではありません。

45
00:03:50.820 --> 00:03:55.896
取得するデータ量、キャッシュ、配信環境を含めて測定することが大切です。

46
00:03:55.896 --> 00:03:58.003
エスエスアールのコード例です。

47
00:03:58.003 --> 00:04:02.919
リクエストインフォというページで、サーバーが処理した日時を表示します。

48
00:04:02.919 --> 00:04:08.468
ゲットサーバーサイドプロップスの中で、レスポンスヘッダーにキャッシュコントロール、

49
00:04:08.468 --> 00:04:14.016
プライベート・ノーストアを指定し、共有キャッシュへ残さないようにしています。

50
00:04:14.016 --> 00:04:22.304
このページはネクストジェイエスのサーバーが必要で、後で説明する静的出力のアウトプット・エクスポートとは併用できません。

51
00:04:22.304 --> 00:04:27.150
エスエスジーの例と並べると、ビルド時に一度だけ実行されるのか、リクエストごとに実行されるのか、

52
00:04:27.150 --> 00:04:31.996
という実行タイミングの違いがはっきりします。

53
00:04:31.996 --> 00:04:34.023
ブラウザ側の処理との関係です。

54
00:04:34.023 --> 00:04:41.997
サーバーやビルド環境が作ったエイチティーエムエルを受け取った後、リアクトがブラウザ上でイベント処理などを結び付けます。

55
00:04:41.997 --> 00:04:44.565
この処理をハイドレーションと呼びます。

56
00:04:44.565 --> 00:04:52.134
エスエスジーやエスエスアールのページでも、ボタンの操作や入力欄の更新にはブラウザ側のジャバスクリプトが必要です。

57
00:04:52.134 --> 00:04:57.135
ウィンドウ、ドキュメント、ローカルストレージはブラウザのエーピーアイです。

58
00:04:57.135 --> 00:05:02.406
描画する関数の中で無条件に読み取ると、サーバー側でエラーになることがあります。

59
00:05:02.406 --> 00:05:08.082
ブラウザとの同期にはユーズエフェクトを使い、最初の表示が一致するよう設計しましょう。

60
00:05:08.082 --> 00:05:12.745
サーバーで作る画面とブラウザで作る画面がずれてしまうと、表示のちらつきや警告の原因にもなるため、

61
00:05:12.745 --> 00:05:17.408
この一致は実務でも大切な確認ポイントです。

62
00:05:17.408 --> 00:05:21.956
エイチティーエムエル、シーエスエス、ジャバスクリプトだけをウェブサーバーへ置きたい場合は、

63
00:05:21.956 --> 00:05:26.505
ネクストコンフィグで静的出力を有効にします。

64
00:05:26.505 --> 00:05:32.072
画面の設定は、アウトプットにエクスポート、トレイリングスラッシュを真にする例です。

65
00:05:32.072 --> 00:05:37.367
この設定でビルドを実行すると、アウトフォルダーへ配信用ファイルが出力されます。

66
00:05:37.367 --> 00:05:41.847
ただし、先ほどのエスエスアールのページはこの構成に含められません。

67
00:05:41.847 --> 00:05:49.315
ページズルーターのエーピーアイ・ルーツ、アイエスアール、既定の画像最適化サーバーも静的出力では利用できません。

68
00:05:49.315 --> 00:05:53.388
必要なら外部エーピーアイや画像配信サービスを組み合わせます。

69
00:05:53.388 --> 00:05:57.599
エスイーオーや安全性について、誤解しやすい点を整理します。

70
00:05:57.599 --> 00:06:03.843
エスエスジーとエスエスアールは、初期エイチティーエムエルに主要な文章を含める手段です。

71
00:06:03.843 --> 00:06:08.199
検索順位やエーアイ検索への掲載を保証する機能ではありません。

72
00:06:08.199 --> 00:06:16.475
記事の正確さ、読みやすい見出し、ページ固有のタイトル、正しいリンク、クロールできる配信状態も整える必要があります。

73
00:06:16.475 --> 00:06:22.573
また、エスエスアールがクロスサイトスクリプティングを自動的に防ぐわけでもありません。

74
00:06:22.573 --> 00:06:27.002
ゲットスタティックプロップスなどの内部で秘密のエーピーキーを使うことはできますが、

75
00:06:27.002 --> 00:06:31.431
返したプロップスはブラウザへ送られます。

76
00:06:31.431 --> 00:06:34.480
秘密情報を返す値に含めないことが大切です。

77
00:06:34.480 --> 00:06:36.702
最後に、導入前の確認とまとめです。

78
00:06:36.702 --> 00:06:41.538
公開するページ、利用者ごとの表示、更新頻度、公開先を先に整理してください。

79
00:06:41.538 --> 00:06:45.590
エスエスアールやエーピーアイが必要かどうかによって配信環境が変わるため、

80
00:06:45.590 --> 00:06:49.643
画面のコードだけで導入方法を決めないことが大切です。

81
00:06:49.643 --> 00:06:53.302
また、この記事はページズルーターを中心に説明しています。

82
00:06:53.302 --> 00:06:57.877
アプリルーターのアプリ・ページ・ティーエスエックスを使うプロジェクトでは、

83
00:06:57.877 --> 00:07:02.452
データ取得やメタデータの書き方も対応する資料へ切り替えてください。

84
00:07:02.452 --> 00:07:05.916
リアクトに土台を足すのがネクストジェイエス、生成方式と公開方法をセットで選ぶ、

85
00:07:05.916 --> 00:07:09.380
というのが今回のまとめです。