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分なのでいろいろ端折っていた箇所は多いですが、 何かの気づきや学びにつながると嬉しいです!ありがとうございました。 おわり