トランスパイルとポリフィル

なぜ変換が必要か

[[JavaScript]] の仕様は毎年更新されますが、利用者のブラウザがすべて最新とは限りません。「開発者は新しい記法で書きたい、しかし古い環境でも動かしたい」— このギャップを埋めるのがトランスパイルとポリフィルです。

トランスパイル — 構文の変換

トランスパイルは、新しい構文を、同じ意味の古い構文に書き換えることです。代表的なツールに Babel や esbuild があります。

// 書いたコード(アロー関数・テンプレートリテラル)
const greet = (name) => `Hello, ${name}`;

// トランスパイル後(古い構文)
var greet = function (name) {
  return 'Hello, ' + name;
};

[[TypeScript]] の型注釈を取り除いてJSにする処理も、トランスパイルの一種です。あくまでソースコードからソースコードへの変換であり、機械語に変換するコンパイルとは区別されます(広義にはコンパイルの一種です)。

ポリフィル — 機能の補充

構文の書き換えでは解決できないものがあります。たとえば Array.prototype.at のような新しい組み込み関数は、書き換えではなく「その関数自体が存在しない」ことが問題です。

ポリフィルは、存在しない機能をJSで実装して補うコードです。

// 簡略化したポリフィルの例
if (!Array.prototype.at) {
  Array.prototype.at = function (i) {
    return i >= 0 ? this[i] : this[this.length + i];
  };
}

初学者向けポイント

• どこまで古い環境をサポートするかは browserslist という設定で宣言し、ツールが必要な変換だけを行います。サポート範囲を広げるほど出力は大きく・遅くなるため、[[Webパフォーマンス最適化]] とのトレードオフです
• [[Vite]] などの現代のビルドツールは、トランスパイルを [[ESモジュールとバンドラ]] の処理と一括で行うため、個別設定を意識する場面は減っています
• 「動かないのは構文エラーか、関数が無いエラーか」を見分けると、トランスパイル不足かポリフィル不足かを切り分けられます

関連技術とのつながり

• [[JavaScript]] — 変換の対象となる言語
• [[TypeScript]] — 型を取り除くトランスパイルを経てJSになる
• [[ESモジュールとバンドラ]] — 変換とバンドルはビルドパイプラインでセットで行われる
• [[Vite]] — これらを内蔵した現代のビルドツール

Q: トランスパイルの説明として正しいのはどれ?
- [x] 新しい構文を同じ意味の古い構文に書き換えること
- [ ] JavaScriptを機械語に変換すること
- [ ] コードを圧縮してファイルサイズを減らすこと
解説: トランスパイルはソースコードからソースコードへの変換で、アロー関数を古いfunction構文に直すなどが典型です。

Q: ポリフィルが解決する問題はどれ?
- [ ] 新しい構文が古いブラウザで文法エラーになる問題
- [x] 新しい組み込み関数やAPIが古い環境に存在しない問題
- [ ] 画像ファイルが大きすぎる問題
解説: 構文はトランスパイルで、存在しない機能はポリフィル(実行時に実装を注入)で補います。

Q: サポートするブラウザ範囲を宣言する設定はどれ?
- [ ] package-lock.json
- [ ] .gitignore
- [x] browserslist
- 解説: browserslistでサポート範囲を宣言し、ツールがそれに必要な変換・ポリフィルだけを適用します。
解説: browserslistでサポート範囲を宣言し、ツールが必要な変換だけを行います。