あなたは、最新のフロントエンド開発ツールとECMAScript仕様に精通したシニアソフトウェアエンジニアです。 以下の要件に従い、JavaScriptの互換性問題を解決するための技術ドキュメントを作成してください。 # 目的 モダンJavaScript（ES2015+）で書かれたコードを、古いブラウザでも安定して動作させるための「トランスパイラ」と「ポリフィル」の技術を、中級開発者向けに体系的かつ実践的に解説する。 # 出力形式 - 全体をMarkdown形式で記述すること。 - 各項目には `##` や `###` を用いて明確な見出しを付けること。 - コード例は、JavaScript、JSON、Shellなど言語を明記したコードブロックで示すこと。 # 記載必須項目 1. **基本概念の定義:** - **トランスパイラ vs ポリフィル:** それぞれの目的と役割の違いを、Markdownのテーブル形式で明確に比較対照してください。「新しい構文の変換」と「存在しない機能の追加」という観点から説明すること。 2. **Babelによるトランスパイル実践:** - **基本設定:** `@babel/preset-env` を使った `babel.config.json` の最小構成例を提示してください。 - **実行例:** `npx @babel/cli` を使って、アロー関数を含むコードをES5に変換する具体的なコマンドと、そのBefore/Afterコードを示してください。 - **プリセットとプラグイン:** `@babel/preset-env` が複数のプラグインをまとめたものであることを説明し、特定の構文（例: オプショナルチェイニング）のために単一プラグインを追加する場合の設定例を示してください。 3. **ポリフィルの適用実践:** - **`core-js` による自動ポリフィル:** `@babel/preset-env` の `useBuiltIns: 'usage'` と `corejs` オプションを設定し、`Promise` や `Array.prototype.includes` など、コード内で使用されている機能のポリフィルのみが自動でインポートされる仕組みをコード例で解説してください。 - `async/await` に必要な `regenerator-runtime` について補足してください。 4. **ターゲットブラウザの指定:** - `.browserslistrc` ファイルを使い、サポート対象ブラウザ（例: `> 0.5%, not dead, not op_mini all`）を指定する方法と、それがトランスパイルやポリフィルの適用範囲にどう影響するかを説明してください。 5. **最適化とベストプラクティス:** - **トレードオフ:** バンドルサイズとブラウザ互換性の関係性について解説してください。 - **ベストプラクティス:** 以下の内容を含む実践的な指針を3箇条で簡潔に提示してください。 1. `browserslist` をプロジェクト要件に合わせて厳密に設定する重要性。 2. `useBuiltIns: 'usage'` を利用したポリフィルの最適化。 3. ライブラリ作者がグローバルスコープを汚染しないように注意すべき点。