コンパイルの違い

Transcript

1. TypeScriptのコンパイルは他の言語と少し違う 1
2. コンパイル方式とインタプリタ方式 2
3. 低水準言語 コンピュータが理解しやすい言語 機械語やアセンブリ言語がこれにあたる。 機械語の例: 01001000 11000111 11000000 00000001 00000000 00000000 00000000 アセンブリ言語の例（C言語の add 関数をコンパイル後に変換したもの）: add: mov eax, edi ; 第1 引数 edi add eax, esi ; 第2 引数 esi ret 3
4. 高水準言語 人が理解しやすい自然言語に近い言語 C言語やJavaScriptなど。 例: int add(int a, int b) { return a + b; } 読みやすく、操作も簡単。普段私たちが使う言語はほとんど高水準言語。 4
5. 翻訳の方法 高水準言語を低水準言語に翻訳する方法には大きく2種類ある。 5
6. コンパイル方式 プログラム全体を事前に翻訳 → 実行ファイルを作る。 翻訳を行うのが「コンパイラ」 。 特徴: 実行は速いが、ビルドに時間がかかる。 6
7. インタプリタ方式 1行ずつ翻訳しながら実行。 特徴: 実行前のビルドが不要、修正後すぐ実行できる。ただし速度は遅め。 7
8. 例: PHP <?php for ($i = 1; $i <= 5; $i++) { if ($i % 2 == 0) { echo "$i: hoge"; } else { echo "$i: huga"; } } ?> php sample.php 8
9. TypeScript のコンパイルと実行 TypeScript。 特徴的なのは「高水準言語 → 高水準言語」に変換している点。 9
10. コンパイルの流れ 1. TS ファイル作成 function greet(name: string) { console.log("Hello, " + name); } 2. コンパイル実行 tsc src/greet.ts このとき ①型チェック と ②JavaScript への変換 が行われる。 10
11. ① 型チェック greet(123); // $ tsc sample.ts // error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'. 11
12. ② JavaScript への変換 function greet(name) { console.log("Hello, " + name); } 12
13. 図解 一般的な「コンパイル」は、低水準言語に翻訳 TypeScriptコンパイルの変わっているのは、JavaScriptなのでまだ「高水準→高水 準」となっている 13
14. 最後に 通常の「コンパイル」は 高水準 → 低水準。 TypeScript のコンパイルは「高水準 → 高水準（TS → JS） 」 。 実行時は JavaScript エンジン（V8など）が JIT コンパイルを使って処理。 ビルドとランタイムは分離しているため、 型チェックは tsc 変換は esbuild など別ツール を組み合わせて使うことも可能。 tsgo で「コンパイル速度を10倍速くする」こともできる 14