WEBVTT

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

2
00:00:00.857 --> 00:00:07.424
今回は、ネクストジェイエスの環境構築を、ページズルーターでインストールから起動まで進めます。

3
00:00:07.424 --> 00:00:11.492
公式のクリエイト・ネクスト・アプリを使うと、リアクトやタイプスクリプト、

4
00:00:11.492 --> 00:00:15.561
開発用コマンドなどをまとめて準備できます。

5
00:00:15.561 --> 00:00:21.200
この動画では、ノードジェイエスの確認からプロジェクトの作成、作成時の選択、

6
00:00:21.200 --> 00:00:26.839
最初のページの編集、開発サーバーの起動、そして本番ビルドの確認までを順番に追います。

7
00:00:26.839 --> 00:00:32.692
アプリルーターとはファイルの構成が異なるので、途中で両方を混ぜないことが大切です。

8
00:00:32.692 --> 00:00:36.188
まず、ノードジェイエスとエヌピーエムを確認します。

9
00:00:36.188 --> 00:00:40.802
二千二十六年九月の確認時点で、最新のネクストジェイエス公式インストールガイドは、

10
00:00:40.802 --> 00:00:45.416
ノードジェイエス二十・九以上を最低要件としています。

11
00:00:45.416 --> 00:00:51.988
ターミナルで、ノード・バージョン、エヌピーエム・バージョンの二つのコマンドを実行してください。

12
00:00:51.988 --> 00:00:54.785
先頭にドル記号を付ける必要はありません。

13
00:00:54.785 --> 00:01:01.217
コマンドが見つからなければ、ノードジェイエス公式サイトから導入し、ターミナルを開き直します。

14
00:01:01.217 --> 00:01:06.810
最低要件を満たすだけでなく、サポートされているエルティーエスを選ぶのが安全です。

15
00:01:06.810 --> 00:01:11.984
古い記事にある十四・六という要件は、現在の導入条件には使わないでください。

16
00:01:11.984 --> 00:01:13.652
プロジェクトを作成します。

17
00:01:13.652 --> 00:01:17.630
保存したい親ディレクトリで、画面のコマンドを実行してください。

18
00:01:17.630 --> 00:01:26.227
エヌピーエックス・クリエイト・ネクスト・アプリ・アット・レーテストで、マイネクストアプリという名前の新しいディレクトリが作成されます。

19
00:01:26.227 --> 00:01:30.590
その中へ移動し、エヌピーエム・ラン・デブで開発サーバーを起動します。

20
00:01:30.590 --> 00:01:34.439
ターミナルに表示されたユーアールエルへアクセスしてください。

21
00:01:34.439 --> 00:01:39.058
通常はローカルホスト三千番ですが、使用中のポートなどによって変わります。

22
00:01:39.058 --> 00:01:42.780
停止する場合は、ターミナルでコントロール・シーを押します。

23
00:01:42.780 --> 00:01:49.452
アット・レーテストは実行時点の最新版を取得する指定で、特定の古いバージョンを再現するものではありません。

24
00:01:49.452 --> 00:01:56.213
作成の途中で設定を選択する画面が出たら、推奨設定を一括で選ばず、カスタマイズを選びます。

25
00:01:56.213 --> 00:01:59.286
この記事に合わせる主要な選択は三つです。

26
00:01:59.286 --> 00:02:01.591
タイプスクリプトは有効にする。

27
00:02:01.591 --> 00:02:04.664
エスアールシー・ディレクトリは使用する。

28
00:02:04.664 --> 00:02:07.429
そして、アプリルーターは使用しない。

29
00:02:07.429 --> 00:02:10.195
これでページズルーターが選ばれます。

30
00:02:10.195 --> 00:02:16.956
スタイルの基礎を学ぶ段階では、テイルウィンド・シーエスエスを使用しなくてもかまいません。

31
00:02:16.956 --> 00:02:21.873
リンターはイーエスリントなどを選択し、生成された設定を使います。

32
00:02:21.873 --> 00:02:28.480
質問の順番や表記は、シーエルアイのバージョンで変わることがある点も覚えておきましょう。

33
00:02:28.480 --> 00:02:30.526
最初のページを編集します。

34
00:02:30.526 --> 00:02:35.561
ページズルーターを選んだことを確認して、エスアールシー・ページズ・インデックス・ティーエスエックスを、

35
00:02:35.561 --> 00:02:40.597
画面の内容に置き換えます。

36
00:02:40.597 --> 00:02:46.262
既存のサンプルが使っていたシーエスエスの読み込みは、この例には不要です。

37
00:02:46.262 --> 00:02:51.376
コードでは、フィーチャーという型を定義し、タイプスクリプトとルーティングの二つの項目を配列に入れて、

38
00:02:51.376 --> 00:02:56.490
キー付きで一覧表示しています。

39
00:02:56.490 --> 00:03:02.312
ヘッドでは、ページのタイトルと、メタ・ディスクリプションも設定しています。

40
00:03:02.312 --> 00:03:07.820
見出しや一覧の文言を変えながら、型と表示の対応を確認してみてください。

41
00:03:07.820 --> 00:03:12.130
ファイルを保存すると、開発サーバーが変更を反映します。

42
00:03:12.130 --> 00:03:16.121
ここで確認したいのは、編集したファイルの場所です。

43
00:03:16.121 --> 00:03:20.352
エスアールシー・アプリ・ページ・ティーエスエックスしか存在しない場合は、

44
00:03:20.352 --> 00:03:24.582
アプリルーターのプロジェクトです。

45
00:03:24.582 --> 00:03:30.489
その場合は、この例をそのまま追加せず、ルーターの選択から確認してください。

46
00:03:30.489 --> 00:03:37.673
また、タイプスクリプトは、たとえばラベルへ数値を入れるような間違いを編集時に検出できます。

47
00:03:37.673 --> 00:03:46.453
ただし、外部エーピーアイの実データを自動で検証するわけではなく、すべての実行時エラーを防ぐものでもありません。

48
00:03:46.453 --> 00:03:52.200
型は、コードの書き間違いを早く見つけるための仕組みとして理解しましょう。

49
00:03:52.200 --> 00:03:55.256
ジャバスクリプトやヤーンを使いたい場合です。

50
00:03:55.256 --> 00:04:00.536
ジャバスクリプトのプロジェクトは、ジェイエス・オプションを指定して作れます。

51
00:04:00.536 --> 00:04:07.621
ただし、これは別の新規プロジェクトを作るコマンドなので、先ほど作ったプロジェクトの中では実行しません。

52
00:04:07.621 --> 00:04:12.137
画面のファイルは、タイプスクリプトではティーエスエックス、ジャバスクリプトではジェイエスエックスなどを使い、

53
00:04:12.137 --> 00:04:16.652
型の定義は書けません。

54
00:04:16.652 --> 00:04:22.904
ヤーンをすでに利用している場合は、画面のようにヤーンからも公式シーエルアイを呼び出せます。

55
00:04:22.904 --> 00:04:27.558
大切なのは、ひとつのプロジェクトでエヌピーエムとヤーンのロックファイルを混在させず、

56
00:04:27.558 --> 00:04:32.212
チームでパッケージマネージャーを統一することです。

57
00:04:32.212 --> 00:04:34.087
本番向けのビルドを確認します。

58
00:04:34.087 --> 00:04:40.588
開発サーバーを停止してから、エヌピーエム・ラン・ビルド、続けてエヌピーエム・ラン・スタートを実行します。

59
00:04:40.588 --> 00:04:45.338
ここでは、ノードジェイエスのサーバーで公開する通常の構成を前提にしています。

60
00:04:45.338 --> 00:04:49.339
ビルドは、型エラーやページ生成の問題を確認する機会にもなります。

61
00:04:49.339 --> 00:04:52.839
スタートは、作成済みの本番ビルドを起動するコマンドです。

62
00:04:52.839 --> 00:04:55.964
そのため、先にビルドが成功している必要があります。

63
00:04:55.964 --> 00:04:59.402
開発サーバーで表示できたからといって、本番ビルドも成功するとは限らないので、

64
00:04:59.402 --> 00:05:02.840
両方を確認する習慣を付けましょう。

65
00:05:02.840 --> 00:05:05.608
公開方法の違いと、環境の記録です。

66
00:05:05.608 --> 00:05:10.167
アウトプット・エクスポートで静的エイチティーエムエルを出力する構成では、

67
00:05:10.167 --> 00:05:14.726
公開するのはアウトフォルダーの内容です。

68
00:05:14.726 --> 00:05:19.611
その場合は、ネクスト・スタートでの起動とは手順が異なります。

69
00:05:19.611 --> 00:05:24.822
作成した環境を再現できるように、使用バージョンも記録しましょう。

70
00:05:24.822 --> 00:05:30.521
エヌピーエム・エルエスで、ネクスト、リアクト、タイプスクリプトの導入バージョンを確認し、

71
00:05:30.521 --> 00:05:36.220
パッケージ・ジェイソンとロックファイルを保存します。

72
00:05:36.220 --> 00:05:41.267
ロックファイルがあることで、同じ依存関係を後から復元できます。

73
00:05:41.267 --> 00:05:47.292
記事の検証環境と異なる場合は、設定項目の違いを公式資料で確認してください。

74
00:05:47.292 --> 00:05:49.365
よくあるつまずきを整理します。

75
00:05:49.365 --> 00:05:55.721
ノードやエヌピーエムが見つからない場合は、インストールとターミナルのパスを確認してください。

76
00:05:55.721 --> 00:06:03.735
ページが変わらない場合は、開いているユーアールエルと、起動したプロジェクトのディレクトリが合っているかを確認します。

77
00:06:03.735 --> 00:06:08.502
インデックス・ティーエスエックスが見つからない場合は、アプリルーターや、

78
00:06:08.502 --> 00:06:13.269
エスアールシーを使用しない設定で生成していないかを確認しましょう。

79
00:06:13.269 --> 00:06:18.450
そして、既存プロジェクトを引き継いだ場合は、新規作成コマンドを再実行せず、

80
00:06:18.450 --> 00:06:23.632
付属の説明とロックファイルに従って、依存関係を復元するのが正しい進め方です。

81
00:06:23.632 --> 00:06:24.564
まとめです。

82
00:06:24.564 --> 00:06:31.163
環境構築の流れは、ノードジェイエスの要件確認、クリエイト・ネクスト・アプリでの作成、

83
00:06:31.163 --> 00:06:37.762
作成時の選択、ページの編集、開発サーバーでの確認、本番ビルドの確認、という順番でした。

84
00:06:37.762 --> 00:06:39.314
ポイントは二つです。

85
00:06:39.314 --> 00:06:42.730
作成時に選んだルーターを途中で混ぜないこと。

86
00:06:42.730 --> 00:06:48.320
そして、開発サーバーでの表示と本番ビルドの成功は別々に確認することです。

87
00:06:48.320 --> 00:06:56.704
環境ができたら、次はディレクトリ構成の記事で各ファイルの役割を理解し、コンポーネントの基礎へ進んでください。

88
00:06:56.704 --> 00:07:01.052
これで、ネクストジェイエスの環境構築の解説を終わります。