WEBVTT

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

2
00:00:00.860 --> 00:00:04.011
タイプスクリプト入門、第二回は環境構築です。

3
00:00:04.011 --> 00:00:07.163
前回はタイプスクリプトとは何かを学びました。

4
00:00:07.163 --> 00:00:12.894
今回は実際に手を動かして、インストールから最初のコンパイルと実行までを進めます。

5
00:00:12.894 --> 00:00:14.899
ゴールは小さく一つだけです。

6
00:00:14.899 --> 00:00:19.985
挨拶を表示する関数をタイプスクリプトで書き、型チェックを通して、ジャバスクリプトに変換し、

7
00:00:19.985 --> 00:00:25.071
ノード・ジェイエスで実行するところまでを確認します。

8
00:00:25.071 --> 00:00:31.375
途中で使う設定ファイルの役割や、チームで環境を揃えるためのポイントも合わせて押さえます。

9
00:00:31.375 --> 00:00:36.532
ノード・ジェイエスとエヌピーエムの基本操作を知っている方向けの内容です。

10
00:00:36.532 --> 00:00:41.189
最初に、ノード・ジェイエスとエヌピーエムが使えるかを確認します。

11
00:00:41.189 --> 00:00:49.631
ターミナルで、ノードのバージョンを表示するコマンドと、エヌピーエムのバージョンを表示するコマンドを実行してください。

12
00:00:49.631 --> 00:00:53.269
両方のバージョン番号が表示されれば準備は完了です。

13
00:00:53.269 --> 00:00:58.654
まだ入っていない場合は、ノード・ジェイエスの公式サイトで、お使いのオーエス向けの導入方法を確認し、

14
00:00:58.654 --> 00:01:04.039
サポート期間中のエルティーエス版を選んでください。

15
00:01:04.039 --> 00:01:08.114
記事の確認時点では、ノード二十四系がエルティーエスです。

16
00:01:08.114 --> 00:01:14.955
なお、タイプスクリプトを入れるために、エヌピーエムを必ずグローバルに更新する必要はありません。

17
00:01:14.955 --> 00:01:17.720
まずはこの二つの表示が最初の関門です。

18
00:01:17.720 --> 00:01:20.377
次に、学習用のプロジェクトを作ります。

19
00:01:20.377 --> 00:01:23.942
既存のアプリとは別の場所に、タイプスクリプト・プラクティスというフォルダーを作り、

20
00:01:23.942 --> 00:01:27.508
その中へ移動します。

21
00:01:27.508 --> 00:01:35.618
続いて、エヌピーエム・イニットにワイを付けて実行すると、パッケージ・ジェイソンという設定ファイルが自動で作られます。

22
00:01:35.618 --> 00:01:41.770
さらに、エヌピーエム・パッケージ・セットで、タイプをコモンジェイエスに設定しておきます。

23
00:01:41.770 --> 00:01:46.804
この設定は、後で生成されるジャバスクリプトの形式に関わる大切な指定です。

24
00:01:46.804 --> 00:01:51.698
最後に、ソースコードを入れるエスアールシーというフォルダーを作ります。

25
00:01:51.698 --> 00:01:56.172
作業はすべて、このプロジェクトのフォルダーの中で進めていきます。

26
00:01:56.172 --> 00:02:00.709
プロジェクトの準備ができたら、タイプスクリプトをインストールします。

27
00:02:00.709 --> 00:02:06.315
エヌピーエム・インストールに、セーブ・デブというオプションを付けて実行してください。

28
00:02:06.315 --> 00:02:13.788
すると、タイプスクリプトが開発用依存関係として、パッケージ・ジェイソンのデブ・ディペンデンシーズに登録されます。

29
00:02:13.788 --> 00:02:18.993
あわせて、パッケージ・ロック・ジェイソンに、解決済みの依存関係が記録されます。

30
00:02:18.993 --> 00:02:22.596
この二つのファイルは、チームで共有する大切な記録です。

31
00:02:22.596 --> 00:02:27.668
インストール後は、エヌピーエックス・ティーエスシーでバージョンを確認します。

32
00:02:27.668 --> 00:02:34.741
プロジェクト内にインストールしておくと、プロジェクトごとに異なるバージョンのコンパイラを使い分けられます。

33
00:02:34.741 --> 00:02:38.344
グローバルの環境に依存しない点が、この方法の長所です。

34
00:02:38.344 --> 00:02:41.187
次に、コンパイラの設定ファイルを用意します。

35
00:02:41.187 --> 00:02:44.806
プロジェクトのルートに、ティーエス・コンフィグ・ジェイソンというファイルを作成し、

36
00:02:44.806 --> 00:02:48.424
スライドの設定を書き込みます。

37
00:02:48.424 --> 00:02:53.723
ターゲットはイーエス二千二十、モジュールとモジュール・レゾリューションはノード・ネクスト、

38
00:02:53.723 --> 00:02:59.021
ルート・ディレクトリはエスアールシー、アウト・ディレクトリはディストです。

39
00:02:59.021 --> 00:03:06.129
さらに、ストリクトをトゥルーにして厳密な型チェックを有効にし、ノー・エミット・オン・エラーをトゥルーにします。

40
00:03:06.129 --> 00:03:11.944
最後に、インクルードで、エスアールシー配下のタイプスクリプト・ファイルを対象に指定します。

41
00:03:11.944 --> 00:03:15.175
なお、この設定はノード・ジェイエス上の学習用です。

42
00:03:15.175 --> 00:03:19.052
既存のアプリの設定を、そのまま上書きするものではありません。

43
00:03:19.052 --> 00:03:21.926
設定の意味を、もう少しだけ掘り下げます。

44
00:03:21.926 --> 00:03:26.667
ストリクトは、厳しめの型チェックをまとめて有効にするスイッチです。

45
00:03:26.667 --> 00:03:30.978
ノー・エミット・オン・エラーは、型エラーがあるときにジャバスクリプトを出力しない指定で、

46
00:03:30.978 --> 00:03:35.289
間違ったコードの実行を防ぎます。

47
00:03:35.289 --> 00:03:39.312
アウト・ディレクトリのディストは、生成物の置き場所です。

48
00:03:39.312 --> 00:03:46.065
モジュールのノード・ネクストは、ノード・ジェイエスのモジュール規則に合わせて処理する指定です。

49
00:03:46.065 --> 00:03:51.597
先ほどパッケージ・ジェイソンでタイプをコモンジェイエスにしたため、通常のティーエスファイルからは、

50
00:03:51.597 --> 00:03:57.129
コモンジェイエス形式のジェイエスファイルが生成されます。

51
00:03:57.129 --> 00:04:01.440
設定と実際に出力される形式は、セットで理解しておきましょう。

52
00:04:01.440 --> 00:04:04.069
設定ができたら、最初のコードを書きます。

53
00:04:04.069 --> 00:04:09.327
エスアールシー・フォルダーの中に、メイン・ティーエスというファイルを作成します。

54
00:04:09.327 --> 00:04:13.664
内容は、名前を受け取って挨拶の文章を返す、グリートという関数です。

55
00:04:13.664 --> 00:04:18.265
引数のネームにはストリング型、戻り値にもストリング型を指定しています。

56
00:04:18.265 --> 00:04:22.340
スライドでは文字列の連結で文章を組み立てていますが、結果は記事の書き方と同じで、

57
00:04:22.340 --> 00:04:26.415
タイプスクリプトさんへの挨拶が表示されます。

58
00:04:26.415 --> 00:04:32.461
ファイルの先頭にあるエクスポートの記述は、このファイルをモジュールとして扱うためのものです。

59
00:04:32.461 --> 00:04:37.325
引数に数値など、型に合わない値を渡すと、型チェックで間違いを検出できます。

60
00:04:37.325 --> 00:04:40.348
その様子は、後のセクションで実際に確認します。

61
00:04:40.348 --> 00:04:42.819
いよいよ、コンパイルと実行です。

62
00:04:42.819 --> 00:04:52.087
プロジェクトのルートで、エヌピーエックス・ティーエスシーに、プロジェクト・オプションで設定ファイルを指定して実行します。

63
00:04:52.087 --> 00:04:57.802
型チェックが通り、ディスト・フォルダーにメイン・ジェイエスが生成されます。

64
00:04:57.802 --> 00:05:01.355
続いて、そのファイルをノードで実行すると、こんにちは、タイプスクリプトさん、

65
00:05:01.355 --> 00:05:04.908
と表示されます。

66
00:05:04.908 --> 00:05:06.143
これで成功です。

67
00:05:06.143 --> 00:05:11.009
元のソースはエスアールシーのメイン・ティーエス、実行するのは生成物のディストのメイン・ジェイエス、

68
00:05:11.009 --> 00:05:15.874
この対応を意識してください。

69
00:05:15.874 --> 00:05:19.890
実機でも、まったく同じ出力になることを確認済みです。

70
00:05:19.890 --> 00:05:25.760
型チェック、変換、実行の三段階が、ここで初めて一つの流れとしてつながります。

71
00:05:25.760 --> 00:05:29.663
成功を確認したら、失敗の体験もしておきましょう。

72
00:05:29.663 --> 00:05:35.842
グリート関数に、文字列の代わりに数値の百二十三を渡してコンパイルしてみます。

73
00:05:35.842 --> 00:05:40.476
すると、ナンバー型はストリング型の引数に渡せない、というエラーが表示され、

74
00:05:40.476 --> 00:05:45.111
エラーコードはティーエス二三四五でした。

75
00:05:45.111 --> 00:05:47.875
実機でも同じエラーを確認済みです。

76
00:05:47.875 --> 00:05:54.868
ノー・エミット・オン・エラーのおかげで、このときディストにはファイルが出力されません。

77
00:05:54.868 --> 00:06:00.884
型チェックだけを行いたいときは、ノー・エミットというオプションを付けます。

78
00:06:00.884 --> 00:06:04.950
出力せずに、間違いの有無だけを素早く確認できます。

79
00:06:04.950 --> 00:06:09.828
成功と失敗の両方を再現できることが、環境構築できた証拠です。

80
00:06:09.828 --> 00:06:12.711
うまく動かない場合の切り分けも押さえます。

81
00:06:12.711 --> 00:06:19.164
ノードが見つからない場合は、ノード・ジェイエスの導入と、ターミナルの再起動を確認してください。

82
00:06:19.164 --> 00:06:26.097
ティーエスシーのバージョンが意図と違う場合は、パッケージ・ジェイソンのあるフォルダーで作業しているかを確認し、

83
00:06:26.097 --> 00:06:33.031
エヌピーエム・エルエス・タイプスクリプトで、実際にインストールされたバージョンを表示します。

84
00:06:33.031 --> 00:06:38.110
ディストにメイン・ジェイエスがない場合は、まずコンパイル時のエラーを解消し、

85
00:06:38.110 --> 00:06:43.190
メイン・ティーエスの配置がエスアールシー配下かどうかを確認してください。

86
00:06:43.190 --> 00:06:51.016
既存のプロジェクトでは、依存関係やモジュール設定を変える前に、そのプロジェクトの実行手順を確認することが大切です。

87
00:06:51.016 --> 00:06:54.892
最後に、チームで環境を再現するポイントとまとめです。

88
00:06:54.892 --> 00:06:59.887
再現のためには、パッケージ・ジェイソンとパッケージ・ロック・ジェイソンを共有し、

89
00:06:59.887 --> 00:07:04.881
使うノード・ジェイエスのバージョンも記録しておきます。

90
00:07:04.881 --> 00:07:12.633
環境を再現するときは、エヌピーエム・シーアイを使うと、ロックファイルの内容どおりにインストールできます。

91
00:07:12.633 --> 00:07:20.237
エディターでも、プロジェクト内のタイプスクリプトを選ぶと、コマンドとの診断の違いを調べやすくなります。

92
00:07:20.237 --> 00:07:27.393
今回の流れは、バージョン確認、インストール、設定、コンパイル、実行、そして型エラーの確認でした。

93
00:07:27.393 --> 00:07:33.058
まず一つの関数でこの流れを再現できる状態を作ることが、環境構築のゴールです。

94
00:07:33.058 --> 00:07:36.934
次回は第三回として、基本型の一覧と型推論を学びます。

95
00:07:36.934 --> 00:07:38.276
お疲れさまでした。