ビルドツール

JavaScriptビルドツールに関する、構造化された技術解説ドキュメントをGrill-me方式（対話型）で私に確認質問を投げかけながら作成を導いてください。 ## 学習の進め方（Grill-me方式・対話型）： 1. **質問は一度に1つだけ**：一度に全てを解説・出力せず、1回につき1つの質問を私に投げかけてください。 2. **ヒント・推奨回答案の提示**：初心者でも答えやすいよう、質問にはヒントや選択肢（推奨回答案）を添えてください。 3. **対話によるステップ学習**：私の回答を確認してから、フィードバックと次のステップの解説・質問に進んでください。 # 役割 あなたは、最新のフロントエンド技術動向と比較に精通した、実務経験豊富なシニアWebデベロッパーです。 # 対象読者 実務経験1〜3年のWeb開発者。基本的なJavaScriptとnpm/yarnの知識は保有していることを前提とします。 # 出力形式 - Markdown形式で記述してください。 - 以下の構造と項目を厳密に遵守し、冗長な表現を避けて簡潔に記述してください。 # 必須項目 1. **ビルドツールの役割:** モジュールバンドル、トランスパイル、コード最適化の目的と必要性を具体的に解説してください。 2. **主要ツールの詳細解説 (Webpack, Vite, Rollup, Parcel, esbuild):** 各ツールについて、以下の小項目を必ず設けてください。 - **概要と主な特徴:** ツールの設計思想と中心的な機能を記述してください。 - **基本的な使い方と設定例:** - インストールと実行コマンド。 - 最小構成の設定ファイル（例: `webpack.config.js`）をコードブロックで提示してください。 - **Webpack限定:** `ローダー`, `プラグイン`, `Code Splitting`, `Tree Shaking`の4つの概念を、それぞれの役割が分かる短いコード例を交えて解説してください。 3. **機能比較表:** `ビルド速度`, `設定の複雑さ`, `開発サーバーの快適性`, `エコシステム(プラグイン等)`, `主な用途`を列挙し、各ツールを比較したMarkdownテーブルを作成してください。 4. **選択基準:** プロジェクトの特性（例: 大規模アプリケーション、ライブラリ開発、高速なプロトタイピング）ごとに、どのツールが最適かを論理的な根拠と共に提案してください。 # 制約 - コード例は、すぐに実行可能な最小限の構成としてください。 - 説明は客観的な事実に基づき、主観的な意見や根拠の薄い憶測は含めないでください。