WEBVTT

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

2
00:00:00.819 --> 00:00:04.506
今回のテーマは、タイプスクリプトのコンパイル方法です。

3
00:00:04.506 --> 00:00:12.016
タイプスクリプトのコンパイラ、ティーエスシーは、コードの型を検査し、設定に応じてジャバスクリプトを出力します。

4
00:00:12.016 --> 00:00:17.751
出力されたジャバスクリプトが、ノードジェイエスやブラウザーなどの実行環境で動きます。

5
00:00:17.751 --> 00:00:22.530
ここで大切なのは、型チェックとファイル出力は別の処理だということです。

6
00:00:22.530 --> 00:00:27.582
設定によっては、型エラーがあってもジャバスクリプトが出力されてしまいます。

7
00:00:27.582 --> 00:00:33.317
今回は、一つのファイルを指定する方法と、設定ファイルでプロジェクト全体を扱う方法の二通りを確認し、

8
00:00:33.317 --> 00:00:39.052
よく使うオプションと、成功を正しく判断するコツまでを順に学びましょう。

9
00:00:39.052 --> 00:00:41.962
まず、コンパイルするコードを用意します。

10
00:00:41.962 --> 00:00:45.382
エスアールシー配下のメイン・ティーエスに、数値を二つ受け取って数値を返す、

11
00:00:45.382 --> 00:00:48.801
アド関数を作ります。

12
00:00:48.801 --> 00:00:53.603
十と二十を渡した結果を、コンソールログで表示すると三十になります。

13
00:00:53.603 --> 00:01:01.315
引数や戻り値につけたコロン・ナンバーという型注釈は、開発時に、数値として使えるかを検査するための情報です。

14
00:01:01.315 --> 00:01:04.225
変換後のジャバスクリプトには残りません。

15
00:01:04.225 --> 00:01:10.482
実際にコンパイル後のファイルを見ると、型注釈が消えていることを、後の画面で確認します。

16
00:01:10.482 --> 00:01:14.120
この小さな例で、変換の前と後を比べていきましょう。

17
00:01:14.120 --> 00:01:18.617
一つ目の方法は、ファイル名を指定してコンパイルすることです。

18
00:01:18.617 --> 00:01:23.963
プロジェクトのルートで、エヌピーエックス・ティーエスシーにメイン・ティーエスを渡し、

19
00:01:23.963 --> 00:01:29.309
ストリクト、ターゲット・イーエス二千二十、モジュール・ノードネクスト、アウトディーアール・ディスト、

20
00:01:29.309 --> 00:01:34.655
エラー時出力なしを指定します。

21
00:01:34.655 --> 00:01:40.650
出力先はディスト内のメイン・ジェイエスで、ノードで実行すると三十と表示されます。

22
00:01:40.650 --> 00:01:49.494
ターゲットは出力するジャバスクリプトの構文の水準、モジュールはノードジェイエスに合わせたモジュールの扱いを指定します。

23
00:01:49.494 --> 00:01:57.588
注意点として、コマンドに入力ファイル名を直接指定すると、ティーエスコンフィグ・ジェイソンは読み込まれません。

24
00:01:57.588 --> 00:02:00.793
二つ目の方法は、設定ファイルで管理することです。

25
00:02:00.793 --> 00:02:05.021
プロジェクトのルートにティーエスコンフィグ・ジェイソンを置き、ターゲット、

26
00:02:05.021 --> 00:02:09.249
モジュールとモジュール解決方式、入力のルートと出力先、ストリクトとエラー時出力なし、

27
00:02:09.249 --> 00:02:13.477
そしてソースマップをまとめます。

28
00:02:13.477 --> 00:02:20.421
インクルードでエスアールシー内のティーエスファイルを対象にし、エクスクルードでテストファイルを外します。

29
00:02:20.421 --> 00:02:31.770
この設定では、元のディレクトリ構成に沿ってディストへ出力され、ソースマップによって生成されたジャバスクリプトと元のタイプスクリプトの対応を示すマップファイルも作られます。

30
00:02:31.770 --> 00:02:35.776
設定ファイルがあるプロジェクトでは、こちらの方法が基本です。

31
00:02:35.776 --> 00:02:43.161
設定ファイルを使うときは、エヌピーエックス・ティーエスシーにプロジェクトオプションを付けて実行します。

32
00:02:43.161 --> 00:02:49.532
生成されたディスト内のメイン・ジェイエスをノードで実行すると、やはり三十と表示されます。

33
00:02:49.532 --> 00:02:55.469
ディストには、ジェイエス本体に加えて、ソースマップのファイルも生成されていました。

34
00:02:55.469 --> 00:03:03.288
生成後のジャバスクリプトを確認すると、アド関数の型注釈は消え、通常のジャバスクリプトの関数になっていました。

35
00:03:03.288 --> 00:03:08.646
なお、プロジェクトオプションと、入力ファイル名の直接指定は併用できません。

36
00:03:08.646 --> 00:03:12.121
ファイル群を設定で管理するか、一つのファイルにコマンドラインで設定を渡すか、

37
00:03:12.121 --> 00:03:15.596
どちらかを選びます。

38
00:03:15.596 --> 00:03:19.747
よく使うオプションを、前半と後半に分けて整理します。

39
00:03:19.747 --> 00:03:22.302
前半は出力形式に関するものです。

40
00:03:22.302 --> 00:03:28.848
ターゲットは、出力するジャバスクリプトの構文の水準で、実行環境の対応に合わせます。

41
00:03:28.848 --> 00:03:36.352
モジュールとモジュール解決方式は、モジュールの出力や解釈と、読み込み先の解決方法を指定します。

42
00:03:36.352 --> 00:03:39.545
アウトディーアールは生成物の出力先です。

43
00:03:39.545 --> 00:03:45.772
既定値は、コンパイラのバージョンや関連オプションによって変わることがあります。

44
00:03:45.772 --> 00:03:49.923
出力形式を安定させたい設定は、明示しておきましょう。

45
00:03:49.923 --> 00:03:58.704
特に、ターゲットを下げても、新しい標準エーピーアイの実装が自動で追加されるわけではない点にも注意してください。

46
00:03:58.704 --> 00:04:02.228
後半は、型チェックの厳しさに関するものです。

47
00:04:02.228 --> 00:04:10.558
ストリクトは、厳密な型チェックの一群を有効にする設定で、その中にはノーインプリシットエニーも含まれます。

48
00:04:10.558 --> 00:04:16.485
これは、型を推論できず、暗黙のエニーになってしまう箇所を診断する設定です。

49
00:04:16.485 --> 00:04:20.970
例えば、引数に型を付けていないショウ関数をストリクトでコンパイルすると、

50
00:04:20.970 --> 00:04:25.456
ティーエス七千六番のエラーになりました。

51
00:04:25.456 --> 00:04:31.543
ただし、正常に型推論できるコードまで、型注釈を必須にする設定ではありません。

52
00:04:31.543 --> 00:04:34.747
推論で十分な箇所は、そのままにできます。

53
00:04:34.747 --> 00:04:42.436
ソースマップも後半の仲間で、デバッガーで元のタイプスクリプトと対応付けるための情報を出力します。

54
00:04:42.436 --> 00:04:45.409
出力を止める二つの設定の違いを押さえます。

55
00:04:45.409 --> 00:04:50.646
ノーエミットは、型チェックなどの検査だけを行い、生成物を一切出力しません。

56
00:04:50.646 --> 00:04:57.440
一方、ノーエミットオンエラーは、コンパイラのエラーがある場合にだけ、新しい生成物を出力しません。

57
00:04:57.440 --> 00:04:59.422
違いは実機でも確認しました。

58
00:04:59.422 --> 00:05:05.225
文字列を数値の引数へ渡すコードは、ティーエス二千三百四十五番の型エラーになります。

59
00:05:05.225 --> 00:05:10.392
このとき、エラー時出力なしを指定すると出力フォルダーは作られませんでしたが、

60
00:05:10.392 --> 00:05:15.559
指定しない場合は、エラーが出てもジャバスクリプトが生成されていました。

61
00:05:15.559 --> 00:05:18.248
意図に合った設定を選ぶことが大切です。

62
00:05:18.248 --> 00:05:20.716
日常の使い方を二つ紹介します。

63
00:05:20.716 --> 00:05:26.311
一つ目は、ジャバスクリプトを出力せず、型チェックだけを行う方法です。

64
00:05:26.311 --> 00:05:30.919
プロジェクトオプションにノーエミットを付けて実行します。

65
00:05:30.919 --> 00:05:36.350
変更を取り込む前の確認や、自動化の手順に組み込むのに向いています。

66
00:05:36.350 --> 00:05:39.147
二つ目は、ウォッチによる監視です。

67
00:05:39.147 --> 00:05:46.552
プロジェクトオプションにウォッチを付けると、ファイルの変更を監視してコンパイルし続けます。

68
00:05:46.552 --> 00:05:54.451
監視コマンドは終了するまで動き続けるので、止めるときはターミナルでコントロール・シーを押します。

69
00:05:54.451 --> 00:06:00.540
この二つのコマンドは、それぞれ別の用途で実行するものとして覚えてください。

70
00:06:00.540 --> 00:06:03.178
対象ファイルと出力形式の注意点です。

71
00:06:03.178 --> 00:06:09.775
まずエクスクルードは、探索対象を絞るものですが、完全な読み込み禁止の仕組みではありません。

72
00:06:09.775 --> 00:06:13.952
対象のコードからインポートされたファイルは、エクスクルードに一致していても、

73
00:06:13.952 --> 00:06:18.130
型チェックの対象に入る場合があります。

74
00:06:18.130 --> 00:06:23.553
次にアウトファイルは、どのモジュール形式でも使える結合機能ではありません。

75
00:06:23.553 --> 00:06:28.610
実機でも、ノードネクストとの組み合わせでは、エーエムディーとシステム形式だけが対応するという、

76
00:06:28.610 --> 00:06:33.668
ティーエス六千八十二番のエラーになりました。

77
00:06:33.668 --> 00:06:40.117
また、ネクストジェイエスなどのフレームワークは、変換や出力を独自のビルド処理で行います。

78
00:06:40.117 --> 00:06:44.368
学習用の設定をそのまま上書きせず、役割を確認してください。

79
00:06:44.368 --> 00:06:45.333
まとめです。

80
00:06:45.333 --> 00:06:57.080
コンパイルには、ファイル名を指定してコマンドラインで設定を渡す方法と、ティーエスコンフィグ・ジェイソンでプロジェクト全体を管理する方法があります。

81
00:06:57.080 --> 00:07:02.390
型チェックと出力は別の処理なので、ビルドが成功したかは、出力ファイルの有無ではなく、

82
00:07:02.390 --> 00:07:07.699
コンパイラの終了コードと診断で判断してください。

83
00:07:07.699 --> 00:07:13.975
エラー時出力なしを指定しても、前回までに出力した古いファイルは削除されません。

84
00:07:13.975 --> 00:07:20.894
失敗後に古いディストを実行して、新しいコードが動いたと勘違いしないよう注意しましょう。

85
00:07:20.894 --> 00:07:28.617
練習として、変更を取り込む前にティーエスシー・ノーエミットを実行する手順を用意してみてください。

86
00:07:28.617 --> 00:07:33.123
計算結果を確かめるテストと合わせて使えば、より安心です。

87
00:07:33.123 --> 00:07:36.180
タイプスクリプト編は今回が最終回です。

88
00:07:36.180 --> 00:07:37.628
お疲れさまでした。