TypeScriptはそのままではブラウザで動かない

\\\ じゃあ俺らが書いたTypeScriptってどうなってるんだよ //

TypeScriptはビルドプロセスを経て、初めてブラウザで実行できる形になります。今回はTypeScriptがユーザーのブラウザに届くまでの過程をビルドプロセスとして、ざっくり5分で理解できるように解説します。

※こちらは先日11/30に開催されたフロントエンドカンファレンス関西 2025での発表内容を基にした記事となります。

ビルドプロセスについて

本記事では 「①トランスパイル」「②バンドル」「③ミニファイ」 の3つの工程に分けて話を進めます。

なぜビルドプロセスが必要なのか？

そもそも、なぜビルドプロセスを経る必要があるのでしょうか？
大きく分けて3つの以下のような理由があると考えています。

1. ブラウザで実行するため
開発者が開発しやすい言語（TypeScript）から、ブラウザで実行できる言語（JavaScript）へ変換する。

2. モダンな機能を使って開発するため
最新のECMAScriptでTypeScript / JavaScriptを書き、ビルドプロセスの中でユーザーの使うそれぞれのブラウザが対応しているECMAScriptのJavaScriptに変換することで古いブラウザでも動作するようにする。

3. パフォーマンスを向上させるため
無数のファイルに分割された巨大なプロジェクトでも、ファイルの統合・分割・圧縮を行うことで高速にブラウザへ配信する。

① トランスパイル (Transpile)

トランスパイルでは、ブラウザでそのまま実行できないTypeScript から（古いブラウザでも実行できる）JavaScriptへの変換を行います。昨今使われるツールとしてtsc, Babel, SWC, esbuildが挙げられます。
※tscはビルドプロセスではあまり使われておらず、型チェックのためだけに利用されることが多い

tscを用い、ECMAScript5のJavaScriptファイルに変換する例

$ npx tsc main.ts --target es5

入力

main.ts

const greet = (name: string): string => {
  return `Hello, ${name}!`;
};

出力

main.js

var greet = function (name) { // 型情報が消え、古いブラウザでも動く関数表現に変換
  return "Hello, ".concat(name, "!"); // テンプレートリテラルがconcat関数に変換
};

② バンドル (Bundle)

バンドルでは、依存関係を解決しながら複数のJavaScriptファイルを1つにまとめます。逆にバンドルファイルの肥大化を防ぐため、コードの分割を行い複数のバンドルファイルを作成する場合もあります。

開発時はファイルを細かく分けて書くことが一般的ですが、これによりブラウザが少数のファイルのみをリクエストをするだけで良くなります。昨今使われるツールとしてwebpack, Rollup, esbuild, Turbopackが挙げられます。

esbuildを用い、依存関係を含むファイルを1つのファイルにバンドルする例

$ npx esbuild main.js --bundle --outfile=bundle.js

入力

math.js

export const add = (a, b) => a + b;

main.js

import { add } from './math.js';
console.log(add(1, 2));

出力

bundle.js

(() => {
 var add = (a, b) => a + b; // math.jsの内容
 console.log(add(1, 2)); // main.jsの内容
})();

③ ミニファイ (Minify)

変数名の短縮、不要な空白や改行、コメントの削除、使われていないコードの削除などを行うことでファイルサイズを最小限にまで削減します。これによりブラウザがファイルを読み込む時間を短縮することが可能です。昨今使われるツールとしてTerser, esbuild, SWCが挙げられます。

terserを用い、先ほどのバンドルファイルをミニファイする例

$ npx terser bundle.js --output bundle.min.js

入力

bundle.js

(() => {
 var add = (a, b) => a + b;
 console.log(add(1, 2));
})();

出力

bundle.min.js

(()=>{var add=(a,b)=>a+b;console.log(add(1,2))})(); // 空白や改行などが削除されている

まとめ

私たちが書いたTypeScriptは、以下の流れを経てユーザーの元へ届きます。

トランスパイル: TSをJSに翻訳し、古いブラウザ上でも実行可能にする
バンドル: それぞれのファイルを1つにまとめてリクエストを減らす
ミニファイ: 無駄を削ぎ落としてファイルサイズを軽くする

日頃のコーディングにおいてあまりビルドプロセスについて意識する瞬間は多くないかもしれませんが、我々が書いたコードがユーザーの使うブラウザにどのような形で届くのか、我々が乗っかっているそのツール群はどのようなものなのか、そこまで目を向けることはサービスの作り手としてとても大事だと感じています。

この記事が何かの気づきや学びにつながると嬉しいです！ありがとうございました。