TypeScriptがブラウザで実行されるまでの流れを5分で伝えたい

https://frontend-conf.osaka.jp/

Transcript

1. TypeScriptがブラウザで 実⾏されるまでの流れを5分で伝えたい ジン / #fec_kansai
2. 2年⽬フロントエンド ⼈⽣初のconf登壇👏 ⾃⼰紹介 ジン X: @Jin_pro_01 （齋藤仁 / じんじん）
3. TypeScriptはブラウザでは動かない 実はTypeScriptはブラウザで実⾏されるまでに裏でｺﾈｺﾈされている。 （開発始めて1年くらいはそんなこと知らなかった） じゃあ我々が書いたTypeScriptは、実際にはそのままユーザーのブラウザに 配信されて動いてないってこと...!? そんな裏のｺﾈｺﾈをビルドプロセスとして、ざっくり5分で喋りたい。
4. ざっくりビルドプロセス ブラウザランタイム aaa.ts bbb.ts ccc.ts aaa.js bbb.js ccc.js bundle.js bundle.min.js ①トランスパイル （TS→JS変換） ②バンドル （1つのファイルに） ③ミニファイ （なるべく小さく）
5. なぜビルドプロセスを経る必要があるか？ • ブラウザで実⾏するため ◦ 開発者が開発しやすい⾔語（TypeScript）から、 ブラウザで実⾏できる⾔語（JavaScript）へ変換する。 • モダンな機能を⽤いて開発を進めるため ◦ 最新のTypeScript / JavaScriptを書きながら、 古いブラウザでも動作するようにする。 • パフォーマンスを向上させるため ◦ 巨⼤なプロジェクトでも、 ファイルの統合‧分割‧圧縮を⾏うことで⾼速にブラウザへ配信する。
6. 1. トランスパイル 何をする？ • トランスパイル ＝ トランスレーション + コンパイル。 • ブラウザでそのまま実⾏できないTypeScript から （古いブラウザでも実⾏できる）JavaScriptへの変換を⾏う。 • (tsc), Babel, SWC, esbuildなどが使われる。
7. 1. トランスパイル // 入力 (main.ts) const greet = (name: string): string => { return `Hello, ${name}!`; }; $ npx tsc main.ts --target es5 // 出力 (main.js) var greet = function (name) { return "Hello, ".concat(name, "!"); }; // 型が消え、 // 古いブラウザでも動く関数表現に
8. 2. バンドル 何をする？ • 複数のJavaScriptファイルを1つにまとめる（分割することも）。 • →HTTPリクエスト数を減らすなどブラウザへの転送や読み込みを⾼速化。 • webpack, Rollup, esbuild, Rolldown, Turbopack, Rspackなどが使われる。
9. // 入力 // math.js export const add = (a, b) => a + b; // main.js import { add } from './math.js'; console.log(add(1, 2)); 2. バンドル $ npx esbuild main.js --bundle --outfile=bundle.js // 出力 (bundle.js) (() => { // math.js var add = (a, b) => a + b; // main.js console.log(add(1, 2)); })();
10. 3. ミニファイ 何をする？ • ファイルサイズを削減する。 ◦ 変数名の短縮 ◦ 不要な空⽩や改⾏、コメントの削除 ◦ 使われていないコードの削除 • →ブラウザがファイルを読み込む時間の⾼速化。 • Terser, esbuild, SWCなどが使われる。
11. // 入力 (bundle.js) (() => { // math.js var add = (a, b) => a + b; // main.js console.log(add(1, 2)); })(); 3. ミニファイ $ npx terser bundle.js --output bundle.min.js // 出力 (bundle.min.js) (()=>{var add=(a,b)=>a+b;consol e.log(add(1,2))})();
12. ざっくりビルドプロセス（再掲） ブラウザランタイム aaa.ts bbb.ts ccc.ts aaa.js bbb.js ccc.js bundle.js bundle.min.js ①トランスパイル （TS→JS変換） ②バンドル （1つのファイルに） ③ミニファイ （なるべく小さく）
13. ⽇頃のコーディングにおいてあまりビルドプロセスについて意識する瞬間は 多くないかもしれませんが、我々が書いたコードがユーザーの使うブラウザ にどのような形で届くのか、我々が乗っかっているそのツール群はどのよう なものなのか、そこまで⽬を向けることはサービスの作り⼿としてとても⼤ 事だと感じています。 5分なのでいろいろ端折っていた箇所は多いですが、 何かの気づきや学びにつながると嬉しいです！ありがとうございました。 おわり