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