WEBVTT

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

2
00:00:00.875 --> 00:00:03.794
今回はネクストジェイエス入門ガイドです。

3
00:00:03.794 --> 00:00:09.557
ネクストジェイエスは、リアクトで作る画面に、ユーアールエルとページの対応、

4
00:00:09.557 --> 00:00:15.320
エイチティーエムエルの生成、データ取得、ビルドなどを組み合わせるフレームワークです。

5
00:00:15.320 --> 00:00:20.281
ブログや企業サイトから、ログイン後のウェブアプリまで幅広く使えます。

6
00:00:20.281 --> 00:00:25.096
この動画では、リアクトとの違い、二つのルーター、エスエスアールとエスエスジー、

7
00:00:25.096 --> 00:00:29.911
始め方、よくあるエラーを、初心者向けに順に整理します。

8
00:00:29.911 --> 00:00:34.288
全体像をつかんでから個別の記事へ進むと、迷いにくくなります。

9
00:00:34.288 --> 00:00:40.708
初めての方は全体像と始め方から、実装で困っている方はエラーの章を重点的に聞いてください。

10
00:00:40.708 --> 00:00:42.091
まず役割の違いです。

11
00:00:42.091 --> 00:00:48.040
リアクトは、コンポーネントを組み合わせてユーザーインターフェースを作るライブラリです。

12
00:00:48.040 --> 00:00:53.712
一方ネクストジェイエスは、そのリアクトを使いながら、ページとユーアールエルの対応、

13
00:00:53.712 --> 00:00:59.384
サーバーでの処理、配信ファイルの生成といった、アプリを組み立てる機能を提供します。

14
00:00:59.384 --> 00:01:09.621
たとえば記事カードの見た目やクリック動作はリアクトで作り、記事ごとのユーアールエルや公開時のエイチティーエムエル生成はネクストジェイエスが担います。

15
00:01:09.621 --> 00:01:16.400
プロップスやステートの考え方はそのまま使えるので、担当を分けて考えると不具合の調査範囲が絞れます。

16
00:01:16.400 --> 00:01:22.496
ネクストジェイエスが向いているのは、公開ページと操作する画面を組み合わせるウェブサービス、

17
00:01:22.496 --> 00:01:28.591
シーエムエスの記事を配信するサイト、共通レイアウトを持つアプリなどです。

18
00:01:28.591 --> 00:01:34.912
ただし、導入すれば自動で速くなったり、内容の品質が上がったりするわけではありません。

19
00:01:34.912 --> 00:01:38.976
小さな静的ページでは、機能が過剰になることもあります。

20
00:01:38.976 --> 00:01:42.739
判断の出発点は、必要なユーアールエル、更新頻度、ログインの有無、通信先、

21
00:01:42.739 --> 00:01:46.501
配信環境を書き出すことです。

22
00:01:46.501 --> 00:01:51.468
必要な機能が見えてから構成を選ぶと、後からの作り直しを減らせます。

23
00:01:51.468 --> 00:01:52.820
次に二つのルーターです。

24
00:01:52.820 --> 00:01:57.383
アップルーターではアプリ配下のページ・ティーエスエックスやレイアウトを使い、

25
00:01:57.383 --> 00:02:01.946
ページズルーターではページズ配下のインデックスやアンダースコアエーピーピーを使います。

26
00:02:01.946 --> 00:02:07.467
どちらもリアクトのコンポーネントを使いますが、データ取得やメタデータの書き方は同じではありません。

27
00:02:07.467 --> 00:02:13.551
ページズルーターのゲットスタティックプロップスを、アップルーターのページにそのまま追加することはできません。

28
00:02:13.551 --> 00:02:18.283
検索したサンプルがどちらのルーターと、どのバージョン向けかを確認する習慣が大切です。

29
00:02:18.283 --> 00:02:23.128
このサイトの既存十二記事はページズルーター中心なので、実習前に構成をそろえてください。

30
00:02:23.128 --> 00:02:24.052
始め方です。

31
00:02:24.052 --> 00:02:33.291
開発にはノードジェイエスとパッケージ管理ツールが必要で、記事が確認した時点の最低要件はノードジェイエス二十・九以上です。

32
00:02:33.291 --> 00:02:38.373
作成コマンドはエヌピーエックス、クリエイト・ネクスト・アップです。

33
00:02:38.373 --> 00:02:46.689
選択肢ではタイプスクリプトを有効にし、アップルーターとエスアールシーを使う構成を選ぶ例を記事は示しています。

34
00:02:46.689 --> 00:02:49.153
スライドは最初のページの例です。

35
00:02:49.153 --> 00:02:57.006
見出しと本文を持つシンプルなコンポーネントで、保存後にブラウザーで表示されれば編集が反映されています。

36
00:02:57.006 --> 00:03:02.396
開発表示だけでなく、本番ビルドが成功するかも合わせて確認してください。

37
00:03:02.396 --> 00:03:04.137
コンポーネントの基本です。

38
00:03:04.137 --> 00:03:09.090
プロップスは親から子へ渡す値、ステートはコンポーネントが記憶する状態です。

39
00:03:09.090 --> 00:03:14.446
配列やオブジェクトを更新するときは、元の値を直接書き換えず、新しい値を作ります。

40
00:03:14.446 --> 00:03:21.274
アップルーターでクリック処理やユースステートを使う部品は、クライアントコンポーネントの境界に置きます。

41
00:03:21.274 --> 00:03:27.433
スライドのカウンターは、先頭にユースクライアントと書き、ボタンのクリックで回数を増やします。

42
00:03:27.433 --> 00:03:32.119
操作する部分だけを部品に分ければ、ページ全体に境界を広げずに済みます。

43
00:03:32.119 --> 00:03:37.608
なおユースクライアントは、初回表示をブラウザーだけで描くという意味ではありません。

44
00:03:37.608 --> 00:03:39.467
描画方式を整理します。

45
00:03:39.467 --> 00:03:49.779
エスエスジーは事前にエイチティーエムエルを生成する方法で、公開記事のように多くの人へ同じ内容を見せるページに向いています。

46
00:03:49.779 --> 00:03:58.062
エスエスアールはリクエストに応じてサーバーで生成する方法で、要求ごとの情報が必要な場合の候補です。

47
00:03:58.062 --> 00:04:03.978
シーエスアールはブラウザー側でデータを取得して画面を更新する方法です。

48
00:04:03.978 --> 00:04:07.528
一つのアプリで組み合わせることもできます。

49
00:04:07.528 --> 00:04:12.937
選ぶ基準は名称ではなく、いつ、誰のためのデータを表示するかです。

50
00:04:12.937 --> 00:04:21.220
更新頻度に加えて、初回表示に必要な内容、通信失敗時の表示、キャッシュの共有範囲まで考えてください。

51
00:04:21.220 --> 00:04:26.145
記事を更新しても表示が変わらないときは、原因を一つに決めつけません。

52
00:04:26.145 --> 00:04:30.925
シーエムエス側のデータ、ビルド時点のデータ、ネクストジェイエスのキャッシュ、

53
00:04:30.925 --> 00:04:35.705
シーディーエヌ、ブラウザーのキャッシュを順に確認します。

54
00:04:35.705 --> 00:04:40.919
静的に書き出したサイトでは、通常は再ビルドとファイルの再配置が必要です。

55
00:04:40.919 --> 00:04:48.161
アイエスアールのような再生成の仕組みは便利ですが、実行環境と構成が対応しているかを確認して使います。

56
00:04:48.161 --> 00:04:53.521
アップルーターのキャッシュ設定はバージョンや方式で異なるため、古い記事の既定動作をそのまま前提にせず、

57
00:04:53.521 --> 00:04:58.880
公式資料とプロジェクト設定を照合してください。

58
00:04:58.880 --> 00:05:01.038
エスイーオーと配信はセットです。

59
00:05:01.038 --> 00:05:04.478
ページタイトル、内容を要約した説明、正規ユーアールエルはページごとに設定し、

60
00:05:04.478 --> 00:05:07.917
見出しの階層もそろえます。

61
00:05:07.917 --> 00:05:13.987
アップルーターではメタデータエーピーアイ、ページズルーターではネクスト・ヘッドなど、

62
00:05:13.987 --> 00:05:20.057
構成に合う方法を選び、同じ情報を重複して出さないよう生成されたエイチティーエムエルで確認します。

63
00:05:20.057 --> 00:05:24.599
配信では、アウトプット・エクスポートによる静的出力はファイルを置くだけで配信できますが、

64
00:05:24.599 --> 00:05:29.140
エスエスアールやページズルーターのエーピーアイ・ルーツのようにサーバー実行が必要な機能は、

65
00:05:29.140 --> 00:05:33.681
そのままでは動きません。

66
00:05:33.681 --> 00:05:37.188
公開先が実行できる機能を、実装前に確認してください。

67
00:05:37.188 --> 00:05:38.610
よくあるエラーです。

68
00:05:38.610 --> 00:05:44.726
ウィンドウやドキュメントが見つからないのは、サーバーにブラウザーの機能がないためです。

69
00:05:44.726 --> 00:05:50.842
描画中に直接参照せず、クライアントコンポーネントのエフェクトやイベントの中に置きます。

70
00:05:50.842 --> 00:05:58.523
ハイドレーションの不一致は、サーバー生成のエイチティーエムエルとブラウザーの最初の描画が違うときに起きます。

71
00:05:58.523 --> 00:06:03.359
時刻、乱数、保存済み設定、不正な入れ子を確認し、初期値をそろえます。

72
00:06:03.359 --> 00:06:07.768
四百四やシーエスエス未適用ではルーターと配置場所を、ビルド失敗では外部エーピーアイへの到達、

73
00:06:07.768 --> 00:06:12.177
環境変数、型エラーを確認します。

74
00:06:12.177 --> 00:06:17.440
警告を消す設定を先に入れるより、どの値が違うのかを特定することが近道です。

75
00:06:17.440 --> 00:06:19.102
最後に学習の進め方です。

76
00:06:19.102 --> 00:06:24.641
まず環境構築とディレクトリ構成を確認し、コンポーネントとシーエスエスへ進みます。

77
00:06:24.641 --> 00:06:30.873
自分で作った部品をページに表示し、プロップスを変えて表示が変われば基礎がつながっています。

78
00:06:30.873 --> 00:06:35.767
次にユースステート、ユースエフェクト、ユースコンテキストで状態と外部環境を扱い、

79
00:06:35.767 --> 00:06:40.660
その後エスエスジー、エスエスアール、エーピーアイ・ルーツで、データをいつ取得し、

80
00:06:40.660 --> 00:06:45.553
どのサーバーで動かすかを説明できる状態を目指します。

81
00:06:45.553 --> 00:06:50.401
正常な操作だけでなく、空データ、通信失敗、再読み込みも試してください。

82
00:06:50.401 --> 00:06:59.818
リアクトを学んでから始める必要はなく、並行して学べますが、コンポーネントとプロップスとステートの基礎は先に押さえると理解が速くなります。

83
00:06:59.818 --> 00:07:03.142
これでネクストジェイエスの全体像はつかめました。

84
00:07:03.142 --> 00:07:04.388
お疲れさまでした。