WEBVTT

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

2
00:00:00.900 --> 00:00:04.650
今回のテーマは、タイプスクリプトのモジュールです。

3
00:00:04.650 --> 00:00:09.750
プログラムが大きくなると、一つのファイルにすべてを書くのは大変です。

4
00:00:09.750 --> 00:00:16.649
そこで、関数や型をファイルごとに分け、必要なものだけをエクスポートとインポートで共有します。

5
00:00:16.649 --> 00:00:18.299
これがモジュールです。

6
00:00:18.299 --> 00:00:25.949
分けることで役割と依存関係が明確になり、同じ名前の変数が別ファイルへ影響する問題も避けやすくなります。

7
00:00:25.949 --> 00:00:33.148
今回は、ノードジェイエスで動く小さなプログラムを三つのファイルに分けて、

8
00:00:33.148 --> 00:00:40.348
名前付きとデフォルトの二種類の公開方法、型だけのインポート、そして実行環境に合わせた設定までを順に確認していきましょう。

9
00:00:40.348 --> 00:00:41.724
まず言葉の整理です。

10
00:00:41.724 --> 00:00:48.603
ファイルのトップレベルでインポートやエクスポートを使うと、そのファイルはモジュールとして扱われます。

11
00:00:48.603 --> 00:00:53.418
エクスポートしていない宣言は、そのモジュールの内部だけで使うものです。

12
00:00:53.418 --> 00:00:59.058
古い資料で内部モジュールと呼ばれていた仕組みは、現在のネームスペースにあたります。

13
00:00:59.058 --> 00:01:04.080
新しいノードジェイエスのアプリや、フロントエンドのコード分割では、通常はファイル単位のモジュールを使い、

14
00:01:04.080 --> 00:01:09.101
ネームスペースで包み直す必要はありません。

15
00:01:09.101 --> 00:01:17.906
なお、モジュールに分割しただけで、必ずビルド時間が短くなったり、配信するジャバスクリプトが小さくなったりするわけではありません。

16
00:01:17.906 --> 00:01:21.896
それらはビルドツールや依存関係、最適化の設定にもよります。

17
00:01:21.896 --> 00:01:24.102
実行環境とコンパイラ設定を合わせます。

18
00:01:24.102 --> 00:01:28.631
学習用プロジェクトのパッケージジェイソンは、タイプをコモンジェイエスとします。

19
00:01:28.631 --> 00:01:34.379
ティーエスコンフィグでは、ターゲットをイーエス二千二十、モジュールとモジュール解決方式をどちらもノードネクストにし、

20
00:01:34.379 --> 00:01:40.127
入力はエスアールシー、出力はディスト、ストリクトとエラー時出力なしを有効にします。

21
00:01:40.127 --> 00:01:43.843
この組み合わせでは、ティーエスファイルに書いたインポートとエクスポートが、

22
00:01:43.843 --> 00:01:47.558
コモンジェイエス形式のジャバスクリプトへ変換されます。

23
00:01:47.558 --> 00:01:53.248
生成されたジェイエスファイルをノードがどう解釈するかは、パッケージジェイソンのタイプで決まります。

24
00:01:53.248 --> 00:01:56.964
ソースの記法、出力形式、実行環境の三つをそろえることが大切です。

25
00:01:56.964 --> 00:02:01.437
一つ目のファイル、アーティクル・ティーエスを作ります。

26
00:02:01.437 --> 00:02:05.413
ここでは二つを名前付きエクスポートで公開します。

27
00:02:05.413 --> 00:02:12.536
一つは、タイトルと閲覧数を持つアーティクルというインターフェース、もう一つは、

28
00:02:12.536 --> 00:02:19.660
記事を受け取って、タイトル、コロン、回数を付けた文字列を返すフォーマットアーティクル関数です。

29
00:02:19.660 --> 00:02:24.133
アーティクルは型の情報、関数は実行時に存在する値です。

30
00:02:24.133 --> 00:02:29.269
名前付きエクスポートは、一つのファイルから複数を公開できます。

31
00:02:29.269 --> 00:02:39.043
画面表示用に、戻り値は文字列連結で書いていますが、記事のテンプレート文字列版と同じ結果になることを実機で確認済みです。

32
00:02:39.043 --> 00:02:44.344
公開したい宣言の前にエクスポートと書く、それだけが基本の形です。

33
00:02:44.344 --> 00:02:50.719
二つ目のファイル、クリエイトヘディング・ティーエスでは、デフォルトエクスポートを使います。

34
00:02:50.719 --> 00:02:57.093
ラベルを受け取り、カギ括弧で囲んで返す関数を、そのファイルの代表として一つだけ公開します。

35
00:02:57.093 --> 00:03:02.901
名前付きが複数公開できるのに対し、デフォルトは一つのモジュールにつき一つだけです。

36
00:03:02.901 --> 00:03:05.876
どちらが優れているという話ではありません。

37
00:03:05.876 --> 00:03:10.338
そのファイルの主な役割が一つならデフォルト、複数なら名前付き、といった方針をプロジェクト内で統一すると、

38
00:03:10.338 --> 00:03:14.800
管理しやすくなります。

39
00:03:14.800 --> 00:03:17.067
読み込む側の書き方も変わります。

40
00:03:17.067 --> 00:03:21.033
デフォルトの方は、波括弧なしで好きな名前で受け取れます。

41
00:03:21.033 --> 00:03:24.716
次の画面で、二つの読み込み方を並べて確認しましょう。

42
00:03:24.716 --> 00:03:28.806
三つ目のファイル、メイン・ティーエスで組み合わせます。

43
00:03:28.806 --> 00:03:36.228
名前付きの関数は波括弧付きで、型はインポートタイプで、デフォルトの関数は波括弧なしで読み込みます。

44
00:03:36.228 --> 00:03:43.195
そして、タイトルがモジュール入門、閲覧数が四十二の記事データを作り、二つの関数で表示します。

45
00:03:43.195 --> 00:03:47.057
実行結果は、カギ括弧付きのタイプスクリプトと、モジュール入門コロン四十二回で、

46
00:03:47.057 --> 00:03:50.920
記事の期待どおりでした。

47
00:03:50.920 --> 00:03:57.130
今回の検証でも、記事の設定ファイルのままコンパイルでき、同じ出力が得られています。

48
00:03:57.130 --> 00:04:02.431
読み込む名前と、公開されている名前が一致していないとエラーになります。

49
00:04:02.431 --> 00:04:09.096
存在しない名前を読み込むと、ティーエス二千三百五のエラーになることも実機で確認しました。

50
00:04:09.096 --> 00:04:10.780
二つの細部を押さえます。

51
00:04:10.780 --> 00:04:12.884
一つ目はインポートタイプです。

52
00:04:12.884 --> 00:04:18.637
型だけを読み込むことを明示する書き方で、生成されるジャバスクリプトには残りません。

53
00:04:18.637 --> 00:04:22.846
実際に、コンパイル後のメイン・ジェイエスを確認すると、残っているのは関数の読み込みだけで、

54
00:04:22.846 --> 00:04:27.055
型の読み込みは消えていました。

55
00:04:27.055 --> 00:04:29.300
二つ目は、相対パスの拡張子です。

56
00:04:29.300 --> 00:04:33.930
この設定では、実行時の出力ファイルに合わせてジェイエスと書きます。

57
00:04:33.930 --> 00:04:39.682
タイプスクリプトは、それに対応するティーエスファイルを見つけて型チェックできます。

58
00:04:39.682 --> 00:04:44.803
ノードのイーエスモジュールでも相対インポートの拡張子が必要になるため、出力先との対応を意識しておくと、

59
00:04:44.803 --> 00:04:49.924
形式を移行するときにも理解しやすくなります。

60
00:04:49.924 --> 00:04:50.942
ビルドと実行です。

61
00:04:50.942 --> 00:04:54.903
エヌピーエックス・ティーエスシーにプロジェクトオプションを付けてコンパイルし、

62
00:04:54.903 --> 00:04:58.863
生成されたディスト内のメイン・ジェイエスをノードで実行します。

63
00:04:58.863 --> 00:05:01.805
ディストには三つのジェイエスファイルが生成されます。

64
00:05:01.805 --> 00:05:07.576
実行時にも依存するファイルが必要なので、メイン・ジェイエスだけを別の場所へ移すと読み込めなくなります。

65
00:05:07.576 --> 00:05:13.460
実際にメインだけをコピーして実行すると、モジュールが見つからないエラーになることを実機でも確認しました。

66
00:05:13.460 --> 00:05:17.195
分割したプログラムは、ファイルの集まり全体で一つのプログラムです。

67
00:05:17.195 --> 00:05:20.702
配るときも動かすときも、依存するファイルを一緒に保ちましょう。

68
00:05:20.702 --> 00:05:24.776
エラー時は出力しない設定なので、古い生成物との混同にも注意してください。

69
00:05:24.776 --> 00:05:27.855
外部ライブラリもモジュールとして読み込めます。

70
00:05:27.855 --> 00:05:32.675
例えばローダッシュを使う場合は、まず実行用パッケージ本体をインストールし、

71
00:05:32.675 --> 00:05:37.494
必要に応じて型定義のアットタイプス・ローダッシュを開発用に追加します。

72
00:05:37.494 --> 00:05:43.519
ただし、型定義がパッケージに同梱されている場合は、別のアットタイプスパッケージは不要です。

73
00:05:43.519 --> 00:05:48.874
ライブラリごとに、名前付きかデフォルトかなどの対応を公式資料で確認してください。

74
00:05:48.874 --> 00:05:50.347
注意点が二つあります。

75
00:05:50.347 --> 00:05:55.702
型定義を入れても、実行用のライブラリ自体がインストールされるわけではありません。

76
00:05:55.702 --> 00:06:00.522
また、型定義は、外部から受け取る値を自動で検証する仕組みでもありません。

77
00:06:00.522 --> 00:06:04.404
今回の三ファイルのサンプルには、外部ライブラリは不要です。

78
00:06:04.404 --> 00:06:07.821
モジュールが見つからないときの切り分けです。

79
00:06:07.821 --> 00:06:13.256
ポイントは、型が解決することと、実行できることを分けて考えることです。

80
00:06:13.256 --> 00:06:19.934
エディターで参照先へ移動できても、出力後のジャバスクリプトで読み込めるとは限りません。

81
00:06:19.934 --> 00:06:23.894
相対パスの拡張子、ファイル名の大文字と小文字、パッケージジェイソンのタイプ、

82
00:06:23.894 --> 00:06:27.855
出力先の位置を確認します。

83
00:06:27.855 --> 00:06:39.968
実機では、パスを一文字間違えるとティーエス二千三百七、デフォルト公開がない相手をデフォルトで読み込むとティーエス千百九十二のエラーになることを確認しました。

84
00:06:39.968 --> 00:06:43.074
設計面では、依存を一方向に保ちましょう。

85
00:06:43.074 --> 00:06:47.888
画面、通信、計算を分けると、計算だけをテストしやすくなります。

86
00:06:47.888 --> 00:06:52.392
循環参照で初期化の順番が問題になる場合は、共通の型や関数を下位のモジュールへ移し、

87
00:06:52.392 --> 00:06:56.896
互いの読み込みを減らしてください。

88
00:06:56.896 --> 00:06:57.800
まとめです。

89
00:06:57.800 --> 00:07:01.564
モジュールでは、ファイルごとに役割を分け、公開したいものをエクスポートし、

90
00:07:01.564 --> 00:07:05.329
使う側がインポートします。

91
00:07:05.329 --> 00:07:13.762
公開には、複数を出せる名前付きと、一つだけのデフォルトがあり、型だけの読み込みはインポートタイプで明示できます。

92
00:07:13.762 --> 00:07:19.861
相対パスは出力されるジェイエスファイルに合わせ、パッケージジェイソンのタイプ、

93
00:07:19.861 --> 00:07:25.960
ティーエスコンフィグのモジュール設定、実行環境をそろえることが、動くための土台です。

94
00:07:25.960 --> 00:07:33.790
練習として、四つ目のファイル、例えば要約を作る関数を名前付きで公開し、メインから読み込んでみてください。

95
00:07:33.790 --> 00:07:39.513
公開、読み込み、設定の三点がそろえば、分割したプログラムはきちんと動きます。

96
00:07:39.513 --> 00:07:40.868
お疲れさまでした。