SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

TypeScriptのモジュール入門：import・exportとNode.jsの設定を理解するの解説動画

再生時間 7:41動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00今回のテーマは、タイプスクリプトのモジュールです。
  3. 0:04プログラムが大きくなると、一つのファイルにすべてを書くのは大変です。
  4. 0:09そこで、関数や型をファイルごとに分け、必要なものだけをエクスポートとインポートで共有します。
  5. 0:16これがモジュールです。
  6. 0:18分けることで役割と依存関係が明確になり、同じ名前の変数が別ファイルへ影響する問題も避けやすくなります。
  7. 0:25今回は、ノードジェイエスで動く小さなプログラムを三つのファイルに分けて、
  8. 0:33名前付きとデフォルトの二種類の公開方法、型だけのインポート、そして実行環境に合わせた設定までを順に確認していきましょう。
  9. 0:40まず言葉の整理です。
  10. 0:41ファイルのトップレベルでインポートやエクスポートを使うと、そのファイルはモジュールとして扱われます。
  11. 0:48エクスポートしていない宣言は、そのモジュールの内部だけで使うものです。
  12. 0:53古い資料で内部モジュールと呼ばれていた仕組みは、現在のネームスペースにあたります。
  13. 0:59新しいノードジェイエスのアプリや、フロントエンドのコード分割では、通常はファイル単位のモジュールを使い、
  14. 1:04ネームスペースで包み直す必要はありません。
  15. 1:09なお、モジュールに分割しただけで、必ずビルド時間が短くなったり、配信するジャバスクリプトが小さくなったりするわけではありません。
  16. 1:17それらはビルドツールや依存関係、最適化の設定にもよります。
  17. 1:21実行環境とコンパイラ設定を合わせます。
  18. 1:24学習用プロジェクトのパッケージジェイソンは、タイプをコモンジェイエスとします。
  19. 1:28ティーエスコンフィグでは、ターゲットをイーエス二千二十、モジュールとモジュール解決方式をどちらもノードネクストにし、
  20. 1:34入力はエスアールシー、出力はディスト、ストリクトとエラー時出力なしを有効にします。
  21. 1:40この組み合わせでは、ティーエスファイルに書いたインポートとエクスポートが、
  22. 1:43コモンジェイエス形式のジャバスクリプトへ変換されます。
  23. 1:47生成されたジェイエスファイルをノードがどう解釈するかは、パッケージジェイソンのタイプで決まります。
  24. 1:53ソースの記法、出力形式、実行環境の三つをそろえることが大切です。
  25. 1:56一つ目のファイル、アーティクル・ティーエスを作ります。
  26. 2:01ここでは二つを名前付きエクスポートで公開します。
  27. 2:05一つは、タイトルと閲覧数を持つアーティクルというインターフェース、もう一つは、
  28. 2:12記事を受け取って、タイトル、コロン、回数を付けた文字列を返すフォーマットアーティクル関数です。
  29. 2:19アーティクルは型の情報、関数は実行時に存在する値です。
  30. 2:24名前付きエクスポートは、一つのファイルから複数を公開できます。
  31. 2:29画面表示用に、戻り値は文字列連結で書いていますが、記事のテンプレート文字列版と同じ結果になることを実機で確認済みです。
  32. 2:39公開したい宣言の前にエクスポートと書く、それだけが基本の形です。
  33. 2:44二つ目のファイル、クリエイトヘディング・ティーエスでは、デフォルトエクスポートを使います。
  34. 2:50ラベルを受け取り、カギ括弧で囲んで返す関数を、そのファイルの代表として一つだけ公開します。
  35. 2:57名前付きが複数公開できるのに対し、デフォルトは一つのモジュールにつき一つだけです。
  36. 3:02どちらが優れているという話ではありません。
  37. 3:05そのファイルの主な役割が一つならデフォルト、複数なら名前付き、といった方針をプロジェクト内で統一すると、
  38. 3:10管理しやすくなります。
  39. 3:14読み込む側の書き方も変わります。
  40. 3:17デフォルトの方は、波括弧なしで好きな名前で受け取れます。
  41. 3:21次の画面で、二つの読み込み方を並べて確認しましょう。
  42. 3:24三つ目のファイル、メイン・ティーエスで組み合わせます。
  43. 3:28名前付きの関数は波括弧付きで、型はインポートタイプで、デフォルトの関数は波括弧なしで読み込みます。
  44. 3:36そして、タイトルがモジュール入門、閲覧数が四十二の記事データを作り、二つの関数で表示します。
  45. 3:43実行結果は、カギ括弧付きのタイプスクリプトと、モジュール入門コロン四十二回で、
  46. 3:47記事の期待どおりでした。
  47. 3:50今回の検証でも、記事の設定ファイルのままコンパイルでき、同じ出力が得られています。
  48. 3:57読み込む名前と、公開されている名前が一致していないとエラーになります。
  49. 4:02存在しない名前を読み込むと、ティーエス二千三百五のエラーになることも実機で確認しました。
  50. 4:09二つの細部を押さえます。
  51. 4:10一つ目はインポートタイプです。
  52. 4:12型だけを読み込むことを明示する書き方で、生成されるジャバスクリプトには残りません。
  53. 4:18実際に、コンパイル後のメイン・ジェイエスを確認すると、残っているのは関数の読み込みだけで、
  54. 4:22型の読み込みは消えていました。
  55. 4:27二つ目は、相対パスの拡張子です。
  56. 4:29この設定では、実行時の出力ファイルに合わせてジェイエスと書きます。
  57. 4:33タイプスクリプトは、それに対応するティーエスファイルを見つけて型チェックできます。
  58. 4:39ノードのイーエスモジュールでも相対インポートの拡張子が必要になるため、出力先との対応を意識しておくと、
  59. 4:44形式を移行するときにも理解しやすくなります。
  60. 4:49ビルドと実行です。
  61. 4:50エヌピーエックス・ティーエスシーにプロジェクトオプションを付けてコンパイルし、
  62. 4:54生成されたディスト内のメイン・ジェイエスをノードで実行します。
  63. 4:58ディストには三つのジェイエスファイルが生成されます。
  64. 5:01実行時にも依存するファイルが必要なので、メイン・ジェイエスだけを別の場所へ移すと読み込めなくなります。
  65. 5:07実際にメインだけをコピーして実行すると、モジュールが見つからないエラーになることを実機でも確認しました。
  66. 5:13分割したプログラムは、ファイルの集まり全体で一つのプログラムです。
  67. 5:17配るときも動かすときも、依存するファイルを一緒に保ちましょう。
  68. 5:20エラー時は出力しない設定なので、古い生成物との混同にも注意してください。
  69. 5:24外部ライブラリもモジュールとして読み込めます。
  70. 5:27例えばローダッシュを使う場合は、まず実行用パッケージ本体をインストールし、
  71. 5:32必要に応じて型定義のアットタイプス・ローダッシュを開発用に追加します。
  72. 5:37ただし、型定義がパッケージに同梱されている場合は、別のアットタイプスパッケージは不要です。
  73. 5:43ライブラリごとに、名前付きかデフォルトかなどの対応を公式資料で確認してください。
  74. 5:48注意点が二つあります。
  75. 5:50型定義を入れても、実行用のライブラリ自体がインストールされるわけではありません。
  76. 5:55また、型定義は、外部から受け取る値を自動で検証する仕組みでもありません。
  77. 6:00今回の三ファイルのサンプルには、外部ライブラリは不要です。
  78. 6:04モジュールが見つからないときの切り分けです。
  79. 6:07ポイントは、型が解決することと、実行できることを分けて考えることです。
  80. 6:13エディターで参照先へ移動できても、出力後のジャバスクリプトで読み込めるとは限りません。
  81. 6:19相対パスの拡張子、ファイル名の大文字と小文字、パッケージジェイソンのタイプ、
  82. 6:23出力先の位置を確認します。
  83. 6:27実機では、パスを一文字間違えるとティーエス二千三百七、デフォルト公開がない相手をデフォルトで読み込むとティーエス千百九十二のエラーになることを確認しました。
  84. 6:39設計面では、依存を一方向に保ちましょう。
  85. 6:43画面、通信、計算を分けると、計算だけをテストしやすくなります。
  86. 6:47循環参照で初期化の順番が問題になる場合は、共通の型や関数を下位のモジュールへ移し、
  87. 6:52互いの読み込みを減らしてください。
  88. 6:56まとめです。
  89. 6:57モジュールでは、ファイルごとに役割を分け、公開したいものをエクスポートし、
  90. 7:01使う側がインポートします。
  91. 7:05公開には、複数を出せる名前付きと、一つだけのデフォルトがあり、型だけの読み込みはインポートタイプで明示できます。
  92. 7:13相対パスは出力されるジェイエスファイルに合わせ、パッケージジェイソンのタイプ、
  93. 7:19ティーエスコンフィグのモジュール設定、実行環境をそろえることが、動くための土台です。
  94. 7:25練習として、四つ目のファイル、例えば要約を作る関数を名前付きで公開し、メインから読み込んでみてください。
  95. 7:33公開、読み込み、設定の三点がそろえば、分割したプログラムはきちんと動きます。
  96. 7:39お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

TypeScriptのモジュールをファイル別のコードで解説。名前付きとデフォルトのexport、import type、相対パス、NodeNextとJavaScript出力の対応を学べます。

解説記事・サンプルコードを読む：TypeScriptのモジュール入門：import・exportとNode.jsの設定を理解する →