SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

TypeScriptの環境構築：インストールから最初のコンパイル・実行までの解説動画

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

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

  1. 0:00こんにちは。
  2. 0:00タイプスクリプト入門、第二回は環境構築です。
  3. 0:04前回はタイプスクリプトとは何かを学びました。
  4. 0:07今回は実際に手を動かして、インストールから最初のコンパイルと実行までを進めます。
  5. 0:12ゴールは小さく一つだけです。
  6. 0:14挨拶を表示する関数をタイプスクリプトで書き、型チェックを通して、ジャバスクリプトに変換し、
  7. 0:19ノード・ジェイエスで実行するところまでを確認します。
  8. 0:25途中で使う設定ファイルの役割や、チームで環境を揃えるためのポイントも合わせて押さえます。
  9. 0:31ノード・ジェイエスとエヌピーエムの基本操作を知っている方向けの内容です。
  10. 0:36最初に、ノード・ジェイエスとエヌピーエムが使えるかを確認します。
  11. 0:41ターミナルで、ノードのバージョンを表示するコマンドと、エヌピーエムのバージョンを表示するコマンドを実行してください。
  12. 0:49両方のバージョン番号が表示されれば準備は完了です。
  13. 0:53まだ入っていない場合は、ノード・ジェイエスの公式サイトで、お使いのオーエス向けの導入方法を確認し、
  14. 0:58サポート期間中のエルティーエス版を選んでください。
  15. 1:04記事の確認時点では、ノード二十四系がエルティーエスです。
  16. 1:08なお、タイプスクリプトを入れるために、エヌピーエムを必ずグローバルに更新する必要はありません。
  17. 1:14まずはこの二つの表示が最初の関門です。
  18. 1:17次に、学習用のプロジェクトを作ります。
  19. 1:20既存のアプリとは別の場所に、タイプスクリプト・プラクティスというフォルダーを作り、
  20. 1:23その中へ移動します。
  21. 1:27続いて、エヌピーエム・イニットにワイを付けて実行すると、パッケージ・ジェイソンという設定ファイルが自動で作られます。
  22. 1:35さらに、エヌピーエム・パッケージ・セットで、タイプをコモンジェイエスに設定しておきます。
  23. 1:41この設定は、後で生成されるジャバスクリプトの形式に関わる大切な指定です。
  24. 1:46最後に、ソースコードを入れるエスアールシーというフォルダーを作ります。
  25. 1:51作業はすべて、このプロジェクトのフォルダーの中で進めていきます。
  26. 1:56プロジェクトの準備ができたら、タイプスクリプトをインストールします。
  27. 2:00エヌピーエム・インストールに、セーブ・デブというオプションを付けて実行してください。
  28. 2:06すると、タイプスクリプトが開発用依存関係として、パッケージ・ジェイソンのデブ・ディペンデンシーズに登録されます。
  29. 2:13あわせて、パッケージ・ロック・ジェイソンに、解決済みの依存関係が記録されます。
  30. 2:18この二つのファイルは、チームで共有する大切な記録です。
  31. 2:22インストール後は、エヌピーエックス・ティーエスシーでバージョンを確認します。
  32. 2:27プロジェクト内にインストールしておくと、プロジェクトごとに異なるバージョンのコンパイラを使い分けられます。
  33. 2:34グローバルの環境に依存しない点が、この方法の長所です。
  34. 2:38次に、コンパイラの設定ファイルを用意します。
  35. 2:41プロジェクトのルートに、ティーエス・コンフィグ・ジェイソンというファイルを作成し、
  36. 2:44スライドの設定を書き込みます。
  37. 2:48ターゲットはイーエス二千二十、モジュールとモジュール・レゾリューションはノード・ネクスト、
  38. 2:53ルート・ディレクトリはエスアールシー、アウト・ディレクトリはディストです。
  39. 2:59さらに、ストリクトをトゥルーにして厳密な型チェックを有効にし、ノー・エミット・オン・エラーをトゥルーにします。
  40. 3:06最後に、インクルードで、エスアールシー配下のタイプスクリプト・ファイルを対象に指定します。
  41. 3:11なお、この設定はノード・ジェイエス上の学習用です。
  42. 3:15既存のアプリの設定を、そのまま上書きするものではありません。
  43. 3:19設定の意味を、もう少しだけ掘り下げます。
  44. 3:21ストリクトは、厳しめの型チェックをまとめて有効にするスイッチです。
  45. 3:26ノー・エミット・オン・エラーは、型エラーがあるときにジャバスクリプトを出力しない指定で、
  46. 3:30間違ったコードの実行を防ぎます。
  47. 3:35アウト・ディレクトリのディストは、生成物の置き場所です。
  48. 3:39モジュールのノード・ネクストは、ノード・ジェイエスのモジュール規則に合わせて処理する指定です。
  49. 3:46先ほどパッケージ・ジェイソンでタイプをコモンジェイエスにしたため、通常のティーエスファイルからは、
  50. 3:51コモンジェイエス形式のジェイエスファイルが生成されます。
  51. 3:57設定と実際に出力される形式は、セットで理解しておきましょう。
  52. 4:01設定ができたら、最初のコードを書きます。
  53. 4:04エスアールシー・フォルダーの中に、メイン・ティーエスというファイルを作成します。
  54. 4:09内容は、名前を受け取って挨拶の文章を返す、グリートという関数です。
  55. 4:13引数のネームにはストリング型、戻り値にもストリング型を指定しています。
  56. 4:18スライドでは文字列の連結で文章を組み立てていますが、結果は記事の書き方と同じで、
  57. 4:22タイプスクリプトさんへの挨拶が表示されます。
  58. 4:26ファイルの先頭にあるエクスポートの記述は、このファイルをモジュールとして扱うためのものです。
  59. 4:32引数に数値など、型に合わない値を渡すと、型チェックで間違いを検出できます。
  60. 4:37その様子は、後のセクションで実際に確認します。
  61. 4:40いよいよ、コンパイルと実行です。
  62. 4:42プロジェクトのルートで、エヌピーエックス・ティーエスシーに、プロジェクト・オプションで設定ファイルを指定して実行します。
  63. 4:52型チェックが通り、ディスト・フォルダーにメイン・ジェイエスが生成されます。
  64. 4:57続いて、そのファイルをノードで実行すると、こんにちは、タイプスクリプトさん、
  65. 5:01と表示されます。
  66. 5:04これで成功です。
  67. 5:06元のソースはエスアールシーのメイン・ティーエス、実行するのは生成物のディストのメイン・ジェイエス、
  68. 5:11この対応を意識してください。
  69. 5:15実機でも、まったく同じ出力になることを確認済みです。
  70. 5:19型チェック、変換、実行の三段階が、ここで初めて一つの流れとしてつながります。
  71. 5:25成功を確認したら、失敗の体験もしておきましょう。
  72. 5:29グリート関数に、文字列の代わりに数値の百二十三を渡してコンパイルしてみます。
  73. 5:35すると、ナンバー型はストリング型の引数に渡せない、というエラーが表示され、
  74. 5:40エラーコードはティーエス二三四五でした。
  75. 5:45実機でも同じエラーを確認済みです。
  76. 5:47ノー・エミット・オン・エラーのおかげで、このときディストにはファイルが出力されません。
  77. 5:54型チェックだけを行いたいときは、ノー・エミットというオプションを付けます。
  78. 6:00出力せずに、間違いの有無だけを素早く確認できます。
  79. 6:04成功と失敗の両方を再現できることが、環境構築できた証拠です。
  80. 6:09うまく動かない場合の切り分けも押さえます。
  81. 6:12ノードが見つからない場合は、ノード・ジェイエスの導入と、ターミナルの再起動を確認してください。
  82. 6:19ティーエスシーのバージョンが意図と違う場合は、パッケージ・ジェイソンのあるフォルダーで作業しているかを確認し、
  83. 6:26エヌピーエム・エルエス・タイプスクリプトで、実際にインストールされたバージョンを表示します。
  84. 6:33ディストにメイン・ジェイエスがない場合は、まずコンパイル時のエラーを解消し、
  85. 6:38メイン・ティーエスの配置がエスアールシー配下かどうかを確認してください。
  86. 6:43既存のプロジェクトでは、依存関係やモジュール設定を変える前に、そのプロジェクトの実行手順を確認することが大切です。
  87. 6:51最後に、チームで環境を再現するポイントとまとめです。
  88. 6:54再現のためには、パッケージ・ジェイソンとパッケージ・ロック・ジェイソンを共有し、
  89. 6:59使うノード・ジェイエスのバージョンも記録しておきます。
  90. 7:04環境を再現するときは、エヌピーエム・シーアイを使うと、ロックファイルの内容どおりにインストールできます。
  91. 7:12エディターでも、プロジェクト内のタイプスクリプトを選ぶと、コマンドとの診断の違いを調べやすくなります。
  92. 7:20今回の流れは、バージョン確認、インストール、設定、コンパイル、実行、そして型エラーの確認でした。
  93. 7:27まず一つの関数でこの流れを再現できる状態を作ることが、環境構築のゴールです。
  94. 7:33次回は第三回として、基本型の一覧と型推論を学びます。
  95. 7:36お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

TypeScriptをプロジェクトへインストールし、型チェック・JavaScriptへのコンパイル・Node.jsでの実行まで確認します。ロックファイルと設定の役割も解説します。

解説記事・サンプルコードを読む：TypeScriptの環境構築：インストールから最初のコンパイル・実行まで →