TypeScript のコンパイル

Transcript

1. TypeScript のコンパイル
2. 職業 自己紹介 韓国人です。大学時代にはげしくアニメ オタクをやってて日本語が上手くなりま した。 フロントエンドエンジニア（2020/11 ~） React、Typescript メインでやってます
3. CONTENTS 1. コンピューターの言語、人の言語 2. TypeScript のコンパイル 3. ビルドとランタイムの疎結合 4. TSGO 出るってよ 5. まとめ
4. 1. コンピューターの言語、人の言語
5. 🖥 コンピューターにはコンピューターの言語がある
6. 低水準言語（low-level language） コンピュータが理解しやすいように作られた言語で、一般的に機械語とアセンブリ言語を指す
7. 低水準言語（low-level language） 機械語（machine language） CPU が直接理解し実行することができる命令からなる言語（機械向け、人が読むことは配慮していない） 2進数（昔のエンジニアはこれを書いてた）
8. 低水準言語（low-level language） アセンブリ言語（assembly language） 機械語を多少は人が読めるようにした言語 アセンブリ言語に変換した例 mov(move)、add、ret(return)などの 自然言語が入って機械語よりはちょっとわかる 2進数
9. 人がもっと効率的にプログラミングするために高水準言語が登場
10. 高水準言語（High-level language） 人が理解しやすい自然言語に近づけて作られた言語 C言語の例（偶数と奇数をトータルで10回出力するプログラム）
11. 高水準言語（High-level language） 人が理解しやすい自然言語に近づけて作られた言語 C言語の例（偶数と奇数をトータルで10回出力するプログラム） 高水準言語は読みやすく、操作が簡単 現代はほとんど高水準言語で開発している
12. 高水準言語（High-level language） 人が理解しやすい自然言語に近づけて作られた言語 高水準言語は読みやすく、操作が簡単 現代はほとんど高水準言語で開発している ただプログラムを実行する主体は機械なので、 人が書いた高水準言語を機械がわかるように 低水準言語に翻訳してあげる必要がある C言語の例（偶数と奇数をトータルで10回出力するプログラム）
13. 「高水準言語 → 低水準言語」の翻訳のやり方について
14. コンパイル（Compile） プログラム全体を事前に翻訳して実行ファイルを作成する方式 この翻訳を行うプログラムをコンパイラと呼ぶ
15. コンパイル（Compile） コンパイル方式で翻訳する言語は C/C++、Rust、Go などがある C言語で書いたプログラム コンパイラが翻訳してから実行する
16. コンパイル（Compile） コンパイル方式で翻訳する言語は C/C++、Rust、Go などがある 実行のタイミングではすべてのコードが 機械語に翻訳済みで、実行速度が速い 実行前にコンパイル必要だから初回実行 まで時間かかる（+ ビルド時間かかる） C言語で書いたプログラム コンパイラが翻訳してから実行する
17. インタプリタ（Interpreter） プログラムを1行/1ブロックずつ翻訳しながら実行する方式 この翻訳と実行を同時に行うプログラムをインタプリタと呼ぶ
18. インタプリタ（Interpreter） インタプリタ方式で翻訳する言語は Python、Ruby、PHP などがある Python で書いたプログラム すぐ実行できる
19. インタプリタ（Interpreter） インタプリタ方式で翻訳する言語は Python、Ruby、PHP などがある 実行前の翻訳過程が不要なので、 コードを修正してもすぐ実行できる 実行と翻訳を同時に行われるので、コンパイル 方式と比べたら実行に時間がかかることがある Python で書いたプログラム すぐ実行できる
20. 2. TypeScript のコンパイル
21. とりあえず TypeScript を書いてみよう 挨拶を出力するプログラム
22. コンパイルしてみよう 公式の TypeScript コンパイラー（tsc）でコンパイルする TS ファイルをコンパイル
23. 公式の TypeScript コンパイラー（tsc）でコンパイルする この子の仕事は大きく2つある 「型チェック」 → 「JSへの変換」 コンパイルしてみよう TS ファイルをコンパイル
24. TypeScript コンパイラー（tsc）の仕事 確認のために型エラー出してみた (1) 型チェック まずはエンジニアが書いたコードに型エラーがないか検査する
25. TypeScript コンパイラー（tsc）の仕事 (1) 型チェック まずはエンジニアが書いたコードに型エラーがないか検査する 確認のために型エラー出してみた この状態で tsc を実行するとエラーを出力される
26. TypeScript コンパイラー（tsc）の仕事 (2) JSへの変換 TypeScript ファイルを JavaScript ファイルに変換する
27. ❗大事なことなので２回言う❗ TypeScript コンパイラは TypeScript ファイルを JavaScript ファイルに変換する TypeScript コンパイラー（tsc）の仕事 (2) JSへの変換 TypeScript ファイルを JavaScript ファイルに変換する
28. TypeScript ファイルを JavaScript ファイルに変換する TypeScript コンパイラー（tsc）の仕事 (2) JSへの変換
29. TypeScript コンパイラー（tsc）の仕事 (2) JSへの変換 TypeScript ファイルを JavaScript ファイルに変換する コンパイルって「高水準」→「低水準」が一般的だけど、 TypeScript のコンパイル結果はまだ高水準だよ…？
30. TypeScript コンパイラー（tsc）の仕事 (2) JSへの変換 TypeScript で言うコンパイルは「型チェック」＋「JSへの変換」（高水準 → 低水準ではない） ChatGPT-5 に TS のコンパイルについて聞くと頑なにトランスパイルって言ってるのが面白い ＊トランスパイル：プログラミング言語 → 別のプログラミング言語
31. 󰢨 じゃなんで「コンパイル」って言ってるんですか？ TypeScript の公式ドキュメント わかりません。 TypeScript 公式がコンパイルって言ってるのでそうなってる気がします。
32. コンパイル結果を実行してみよう TS ファイルをコンパイルしたら JS ファイルが生成されたので、それを実行する node.js で実行
33. 󰢨 JavaScript はインタプリタ言語ですか？ 現代の JavaScript はインタプリタ＆コンパイル両方やります。 元々 JavaScript はインタプリタ言語 WEBの進化が激しく、どんどんリッチなUIが登場 インタプリタだけだと実行が遅い！ インタプリタで即実行しつつ、よく走る箇所は JITコンパイル（実行中にコンパイル）して性能改善 ＊JIT = Just in Time の略
34. こうやって TypeScript はコンパイル・実行される
35. +) 実行されるのは JS ファイルということに気をつけろ 実行時は型情報が全部消えるので、想定してた型と実際の型が違う場合もすぐ気付けないことがある API返り値に型をつける 現実世界の型は違った そして予期せぬ動きになる
36. +) 実行されるのは JS ファイルということに気をつけろ 実行時は型情報が全部消えるので、想定してた型と実際の型が違う場合もすぐ気付けないことがある API返り値に型をつける 現実世界の型は違った そして予期せぬ動きになる Rust、Kotlinなど他の言語は期待してた型と違う 時点でエラーをスローするからすぐ気づくらしい ＊）TS でもスキーマ検証すれば同じことはできる
37. 3. ビルドとランタイムの疎結合
38. 順番を考えてみよう BuildTime RunTime (1) 開発する (2) ビルドする (3) 実行する ＊ビルド：コードを実行可能な形式に変換する作業
39. 特異点がある BuildTime RunTime (1) 開発する (2) ビルドする (3) 実行する ＊ビルド：コードを実行可能な形式に変換する作業 実行時は JS ファイルさえあれはOK! TypeScript とか型とかそんなの知らない ビルドの時に何が起きようがどうでもいい
40. 特異点がある BuildTime RunTime (1) 開発する (2) ビルドする (3) 実行する ＊ビルド：コードを実行可能な形式に変換する作業 実行時は JS ファイルさえあれはOK! TypeScript とか型とかそんなの知らない ビルドの時に何が起きようがどうでもいい この場合ビルドタイムとランタイムが 疎結合（Loose Coupling）だと言える ＊）疎結合：部品同士の依存が弱く独立している状態
41. ツールを入れ替え可能 トランスパイル（TS→JS）段階では最終的に JS が作られればOKなので、 公式のコンパイラー（tsc）使わずに別のツール使うことができる ビルドタイムとランタイムの疎結合で何が起きるのか この段階で tsc を使っても、他のツール（SWC、esbuildなど）使っても ランタイムは JS ファイルさえあれば気にしない
42. トランスパイル（TS→JS）段階では最終的に JS が作られればOKなので、 公式のコンパイラー（tsc）使わずに別のツール使うことができる ツールを入れ替え可能 ビルドタイムとランタイムの疎結合で何が起きるのか なぜ公式じゃない他のツールを使うのか、 その大きな理由の一つは tsc が遅い
43. トランスパイル（TS→JS）段階では最終的に JS が作られればOKなので、 公式のコンパイラー（tsc）使わずに別のツール使うことができる ツールを入れ替え可能 ビルドタイムとランタイムの疎結合で何が起きるのか しかし、正確な型チェックができるのは tsc だけ …なのでツールが混在し、使い勝手が微妙になる 「型チェック（tsc）」+「トランスパイル（別のツール）」 なぜ公式じゃない他のツールを使うのか、 その大きな理由の一つは tsc が遅い
44. 4. TSGO 出るってよ
45. tsc は遅い TypeScript 公式のコンパイラー（tsc）は TypeScript で書かれている。そいつが遅い。 Compiler （TypeScript 制）
46. 2025年3月11日 Microsoft が TypeScript のコンパイラを GO に移植して10倍早くすると発表 （ムネアツ）
47. Compiler （TypeScript 制） →（Go 制） ここが10倍早くなる
48. 正式リリースはまだ でも2025年5月22日にプレビューが公開されたので、それで試せる
49. TSGO がリリースされたら嬉しいこと (1) 型チェック＆トランスパイルが爆速 開発が快適・CI時間もへる（大規模プロジェクトほど嬉しい） (2) 言語サービスも高速化 エディタの赤波線・補完・ジャンプ・リネーム等のレスポンス改善 (3) 公式だけで完結しやすい 「型チェックは tsc、JS変換は別ツール」の二段構えを一本化できる
50. TSGO がリリースされたら嬉しいこと (1) 型チェック＆トランスパイルが爆速 開発が快適・CI時間もへる（大規模プロジェクトほど嬉しい） (2) 言語サービスも高速化 エディタの赤波線・補完・ジャンプ・リネーム等のレスポンス改善 (3) 公式だけで完結しやすい 「型チェックは tsc、JS変換は別ツール」の二段構えを一本化できる まじで早く正式リリースしてほしい、、（切実）
51. 5. まとめ
52. ➔ コンピューターは低水準言語を使うが、人は高水準言語で開発する ➔ 高水準言語 → 低水準言語の変換方法にはコンパイル方式、インタプリタ方式がある ➔ TypeScript のコンパイラは「型チェック」と「JSへの変換」をする ➔ TypeScript はビルドタイムとランタイムが疎結合 ➔ tsc （TypeScript 制のコンパイラ）は遅いが、TSGOが出るらしいので楽しみ まとめ
53. ご清聴ありがとうございました