0Pricing
TypeScript Academy · レッスン

Vite / esbuild / SWC / Rollupの基本

代表的なバンドラー（Vite、esbuild、SWC、Rollup）と、TypeScriptプロジェクトとの連携方法を概観します

「Vite / esbuild / SWC / Rollupの基本」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全3レッスンが含まれています。

導入

目標：代表的なバンドラーであるVite、esbuild、SWC、Rollupについて学びます。それぞれに独自の速度と柔軟性があります。

Vite

Vite：ESMを使用した即時起動の開発サーバーで、高速なHMRを提供し、本番ビルドにはRollupを使用します。

// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

esbuild

esbuild：Goで実装された非常に高速なバンドラーです。プロトタイピングやJS/TSプロジェクトに適しています。

// Command
npx esbuild src/index.ts --bundle --outfile=out.js

SWC

SWC：RustベースのTS/JSコンパイラーです。速度を重視するNext.jsでよく使われます。

// swc config (.swcrc)
{
  "jsc": {
    "parser": { "syntax": "typescript" },
    "target": "es2020"
  }
}

Rollup

Rollup：柔軟なバンドラーで、ツリーシェイキングに強みがあります。Viteはビルド時に内部でRollupを使用します。

// rollup.config.js
import typescript from "@rollup/plugin-typescript";

export default {
  input: "src/index.ts",
  output: { file: "bundle.js", format: "cjs" },
  plugins: [typescript()]
};

バンドラーの選択

選択の目安：開発体験ならVite、速度ならesbuild、RustベースのコンパイルならSWC、細かな制御ならRollupを選びます。どれもTSと簡単に統合できます。

問題

クイックチェック：高速な開発サーバーのためにネイティブESモジュールを使用するバンドラーはどれでしょうか。

まとめ

まとめ：ViteはESMによる高速性、esbuildはGoによる速度、SWCはRustによる高速性、Rollupは柔軟性が特徴です。プロジェクトの要件に応じて使い分けます。

よくある質問

「Vite / esbuild / SWC / Rollupの基本」レッスンは無料ですか？

はい。「Vite / esbuild / SWC / Rollupの基本」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。

「Vite / esbuild / SWC / Rollupの基本」で何を学びますか？

代表的なバンドラー（Vite、esbuild、SWC、Rollup）と、TypeScriptプロジェクトとの連携方法を概観します ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。

「Vite / esbuild / SWC / Rollupの基本」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. tscのemitとnoEmit、バンドラー
  2. Vite / esbuild / SWC / Rollupの基本
  3. Declaration、ソースマップ、型のexport
← TypeScript Academyに戻る