WEBVTT

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

2
00:00:00.954 --> 00:00:07.795
今回のテーマは、タイプスクリプトの設定ファイル、ティーエスコンフィグ・ジェイソンです。

3
00:00:07.795 --> 00:00:15.590
型チェックの条件と、ジャバスクリプトの生成方法をまとめるファイルで、プロジェクトの土台になります。

4
00:00:15.590 --> 00:00:21.634
この動画では、小さなノード・ジェイエス用プロジェクトを作り、ストリクトと、

5
00:00:21.634 --> 00:00:27.679
二つの追加の型チェックがそれぞれ何を検査するのかを、実行できる例で確認します。

6
00:00:27.679 --> 00:00:32.134
対象は、関数や配列、オブジェクト型の基礎が分かる方です。

7
00:00:32.134 --> 00:00:39.292
設定をコピーして終わりにせず、なぜその検査が必要なのかまで、一歩ずつ理解していきましょう。

8
00:00:39.292 --> 00:00:42.513
まず、空のフォルダで実習用プロジェクトを準備します。

9
00:00:42.513 --> 00:00:46.354
コマンドでフォルダを作り、エヌピーエムで初期化して、タイプスクリプトと、

10
00:00:46.354 --> 00:00:50.195
アットタイプス・ノードを開発用にインストールします。

11
00:00:50.195 --> 00:00:56.266
アットタイプス・ノードは、ノード・ジェイエスのエーピーアイをタイプスクリプトに知らせる型定義です。

12
00:00:56.266 --> 00:01:00.231
使うノードのメジャーバージョンと型定義の対応も確認してください。

13
00:01:00.231 --> 00:01:09.399
さらに、パッケージ・ジェイソンへタイプ・イコール・モジュールを設定し、生成したジャバスクリプトをイーエス・モジュールズとして実行できるようにします。

14
00:01:09.399 --> 00:01:12.992
パッケージロックも残すと、依存関係を再現しやすくなります。

15
00:01:12.992 --> 00:01:16.669
次に、ティーエスコンフィグ・ジェイソンを配置します。

16
00:01:16.669 --> 00:01:21.901
コンパイラオプションの中に、ターゲットやモジュール方式、ストリクト、追加の二つのチェック、

17
00:01:21.901 --> 00:01:27.134
エラー時に出力を作らないノーエミットオンエラーを並べます。

18
00:01:27.134 --> 00:01:31.447
インクルードは最初に読み込むファイルの範囲、ルートディレクトリは出力へ構造を反映する基準、

19
00:01:31.447 --> 00:01:35.760
アウトディレクトリは出力先です。

20
00:01:35.760 --> 00:01:43.963
ただし、対象ファイルが参照するファイルは読み込まれるため、インクルードをセキュリティの境界として扱わないでください。

21
00:01:43.963 --> 00:01:50.327
リブは標準ジャバスクリプトのエーピーアイ、タイプスはノードのグローバルな型を読み込みます。

22
00:01:50.327 --> 00:01:54.852
型定義を足しても、実行環境へ機能が追加されるわけではありません。

23
00:01:54.852 --> 00:01:58.110
ここで、ストリクトの意味を押さえます。

24
00:01:58.110 --> 00:02:03.427
ストリクト・トゥルーは、暗黙的なエニーや、ヌルとアンディファインドの扱いなど、

25
00:02:03.427 --> 00:02:08.743
複数の厳密な検査をまとめて有効にする設定です。

26
00:02:08.743 --> 00:02:16.117
一つずつ有効にするより漏れが少なく、新しいプロジェクトではまず有効にするのが基本です。

27
00:02:16.117 --> 00:02:19.375
個別の検査は明示的に上書きもできます。

28
00:02:19.375 --> 00:02:29.665
ただし、タイプスクリプトの更新で検査が強化される場合もあるため、バージョンアップ時には型チェックを通して確認しましょう。

29
00:02:29.665 --> 00:02:35.839
なお、ストリクトを有効にしても実行時エラーがなくなるわけではありません。

30
00:02:35.839 --> 00:02:42.184
外部データや通信の失敗は、実行時の検証やテストでも確かめる必要があります。

31
00:02:42.184 --> 00:02:49.185
注意したいのは、今回使う二つの追加設定は、ストリクトだけでは有効にならないことです。

32
00:02:49.185 --> 00:02:54.186
一つ目は、ノーアンチェックト・インデックスト・アクセスです。

33
00:02:54.186 --> 00:03:02.187
配列の添字アクセスなど、値の存在が保証できない読み取りに、アンディファインドの可能性を加えます。

34
00:03:02.187 --> 00:03:07.355
二つ目は、イグザクト・オプショナル・プロパティ・タイプスです。

35
00:03:07.355 --> 00:03:14.189
任意項目を省略することと、その項目へアンディファインドを代入することを区別します。

36
00:03:14.189 --> 00:03:20.857
この実習では、配列と任意項目の扱いを確認するため、両方を明示的に指定しています。

37
00:03:20.857 --> 00:03:24.524
次の二つの章で、それぞれコードで確かめます。

38
00:03:24.524 --> 00:03:27.250
一つ目の追加設定を、配列の例で見ます。

39
00:03:27.250 --> 00:03:32.270
空の配列では、添字ゼロの要素は存在せず、アンディファインドになります。

40
00:03:32.270 --> 00:03:38.510
ノーアンチェックト・インデックスト・アクセスを有効にすると、読み取った値の型にアンディファインドの可能性が含まれるため、

41
00:03:38.510 --> 00:03:44.750
そのまま大文字化のメソッドを呼ぶと型エラーになります。

42
00:03:44.750 --> 00:03:50.775
画面のように、まずアンディファインドかどうかを確認してから呼ぶのが正しい書き方です。

43
00:03:50.775 --> 00:03:54.935
実際に、判定を外した版では、ファーストがアンディファインドかもしれない、

44
00:03:54.935 --> 00:03:59.095
というエラーが出ることを実機で確認しました。

45
00:03:59.095 --> 00:04:07.272
ただし、タプルの既知の位置など、存在が型で保証されるアクセスまで一律にアンディファインドになるわけではありません。

46
00:04:07.272 --> 00:04:09.820
二つ目の追加設定は、任意項目の扱いです。

47
00:04:09.820 --> 00:04:14.535
ニックネームの後ろにクエスチョンマークを付けると、その項目は省略できます。

48
00:04:14.535 --> 00:04:19.419
しかし、イグザクト・オプショナル・プロパティ・タイプスを有効にした今回の設定では、

49
00:04:19.419 --> 00:04:24.303
省略することと、アンディファインドを明示的に代入することは別として扱われ、

50
00:04:24.303 --> 00:04:29.188
ニックネーム・イコール・アンディファインドのオブジェクトは代入できません。

51
00:04:29.188 --> 00:04:32.501
実機でも、その旨の型エラーになることを確認しました。

52
00:04:32.501 --> 00:04:38.871
値としてもアンディファインドを許したい場合は、ストリング・オア・アンディファインドと型に明記します。

53
00:04:38.871 --> 00:04:44.860
読み取るときは、項目が存在しない可能性があるので、ヌル合体演算子などで既定値を用意しましょう。

54
00:04:44.860 --> 00:04:50.504
作ったコードは、型チェック、ビルド、実行の三段階に分けて確認します。

55
00:04:50.504 --> 00:04:56.315
最初のコマンドは、ノーエミット付きで、出力を作らず型だけを確認します。

56
00:04:56.315 --> 00:05:01.544
次のコマンドでジャバスクリプトを生成し、最後にノードで実行すると、未設定、

57
00:05:01.544 --> 00:05:06.773
タイプスクリプトの大文字、ゲストの順に表示されます。

58
00:05:06.773 --> 00:05:13.579
この出力は、実機でコンパイルして実行し、記事の期待どおりであることを確認済みです。

59
00:05:13.579 --> 00:05:15.903
ここで大切な注意があります。

60
00:05:15.903 --> 00:05:23.706
ティーエスシーへ入力ファイルを直接渡すと、ティーエスコンフィグ・ジェイソンは読み込まれません。

61
00:05:23.706 --> 00:05:30.512
設定を使って検査したいときは、必ずマイナス・ピーで設定ファイルを指定してください。

62
00:05:30.512 --> 00:05:32.647
モジュール設定も確認します。

63
00:05:32.647 --> 00:05:37.832
ノードネクストは、ノード・ジェイエスのモジュール規則を扱う設定です。

64
00:05:37.832 --> 00:05:44.543
この実習のようにイーエス・モジュールズで自作ファイルを相対パスから読み込む場合、

65
00:05:44.543 --> 00:05:51.253
生成後のジャバスクリプトに合わせて、インポート文にはドット・ジェイエスという拡張子を指定します。

66
00:05:51.253 --> 00:05:56.438
入力ファイルがヘルパー・ティーエスでも、書くのは出力時の拡張子です。

67
00:05:56.438 --> 00:06:04.978
一方、バンドラーがまとめるブラウザ向けアプリでは推奨設定が異なるため、環境が生成した設定を出発点にしてください。

68
00:06:04.978 --> 00:06:14.434
また、ターゲットは主にジャバスクリプトの構文水準を決めるもので、古い環境へ不足するエーピーアイを追加する設定ではありません。

69
00:06:14.434 --> 00:06:17.484
実際の実行環境でも動作を確認しましょう。

70
00:06:17.484 --> 00:06:21.178
最後に、設定が反映されないときの確認点です。

71
00:06:21.178 --> 00:06:29.743
エディターの表示とコマンドの結果が違うときは、実行した場所と、対象にしている設定ファイルを確認します。

72
00:06:29.743 --> 00:06:37.803
ショーコンフィグ付きで実行すると、継承した項目やインクルードを含めた最終的な設定を表示できます。

73
00:06:37.803 --> 00:06:44.101
また、練習として、未設定判定を外して型エラーが出ることや、任意項目へアンディファインドを代入して省略との違いが出ることを、

74
00:06:44.101 --> 00:06:50.398
自分でも試してみてください。

75
00:06:50.398 --> 00:06:57.955
型エラーを、理由のないアズや非ヌルアサーションで消すと、値が存在しないケースを見逃します。

76
00:06:57.955 --> 00:07:03.832
まず欠けた値をどう扱うかを決め、その処理をコードに表すことが大切です。

77
00:07:03.832 --> 00:07:04.692
まとめです。

78
00:07:04.692 --> 00:07:08.850
ティーエスコンフィグ・ジェイソンは、型チェックの条件とジャバスクリプトの生成方法をまとめる、

79
00:07:08.850 --> 00:07:13.007
プロジェクトの土台です。

80
00:07:13.007 --> 00:07:20.247
ストリクトで厳密な検査をまとめて有効にし、さらにノーアンチェックト・インデックスト・アクセスで配列の読み取りを、

81
00:07:20.247 --> 00:07:27.486
イグザクト・オプショナル・プロパティ・タイプスで任意項目の扱いを、それぞれ厳密にできます。

82
00:07:27.486 --> 00:07:35.085
確認は、型チェック、ビルド、実行を分けて行い、設定を使うときはマイナス・ピーを忘れないことがポイントです。

83
00:07:35.085 --> 00:07:39.887
既存の大きなプロジェクトでは、まず出力しない型チェックで影響を把握し、欠けたデータを扱う分岐を足しながら、

84
00:07:39.887 --> 00:07:44.690
段階的に導入してみましょう。

85
00:07:44.690 --> 00:07:45.980
お疲れさまでした。