Vite・webpackでBootstrap 5をバンドルする方法をやさしく解説！ESM対応の最短手順

Vite/webpackでBootstrap 5をバンドルする最短手順【ESM対応】

先生と生徒の会話形式で理解しよう

生徒

「Bootstrap 5をViteやwebpackで使いたいんですけど、どうやればいいのか全然わかりません……」

先生

「安心してください。Bootstrap 5は最新の書き方で簡単にバンドルできますよ。今回はESM（モジュール形式）に対応したやり方を、初心者向けに解説していきますね。」

生徒

「ESMってなんですか？」

先生

「ESMは “ECMAScript Modules” の略で、JavaScriptを機能ごとにわけて読み込む仕組みです。今の主流のやり方ですね。」

1. Bootstrap 5をViteで使う最短手順

まずは最新のフロントエンド開発環境「Vite（ビート）」を使って、Bootstrap 5を読み込む手順を紹介します。Viteは超高速な開発サーバーで、初心者でも使いやすいのが特徴です。

Viteを使ってBootstrap 5をバンドルするには、以下のステップでOKです。

Node.jsをインストール（インターネットで「Node.js ダウンロード」と検索すればOK）
プロジェクトフォルダを作成し、ターミナルでViteをインストール
Bootstrapをnpmで追加
CSSとJavaScriptを読み込む

以下がその設定例です。


// ターミナルで実行
npm create vite@latest my-bootstrap-app --template vanilla
cd my-bootstrap-app
npm install
npm install bootstrap


// main.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';

この状態でViteの開発サーバーを起動すると、Bootstrapが効いた状態でHTMLを確認できます。


<!-- index.html -->
<h1 class="text-primary">こんにちは Bootstrap！</h1>

ブラウザ表示

2. webpackでBootstrap 5をバンドルする手順

今度は、少し昔からあるビルドツール「webpack（ウェブパック）」でBootstrapを使う方法です。Viteよりは設定が多いですが、今でも多くのプロジェクトで使われています。

まず、webpackの基本セットアップをして、Bootstrapを読み込む流れです。


// ターミナルで実行
npm init -y
npm install webpack webpack-cli style-loader css-loader --save-dev
npm install bootstrap

次に、webpack.config.js ファイルを作って設定します。


// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

JavaScript側では、BootstrapのCSSとJavaScriptを読み込みます。


// src/index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';

最後にHTMLファイルを用意して、ビルドされたbundle.jsを読み込みましょう。


<!-- dist/index.html -->
<h1 class="text-success">WebpackでBootstrap</h1>
<script src="bundle.js"></script>

ブラウザ表示

3. BootstrapのCSSだけ使いたい場合

「JavaScript機能は使わない」「レイアウトや色だけでいい」という人は、BootstrapのCSSだけを使えばOKです。npmでBootstrapをインストールし、CSSだけ読み込みましょう。


// main.js もしくは index.js
import 'bootstrap/dist/css/bootstrap.min.css';

これだけでも、.btn や .container などの基本レイアウトは使えるようになります。

4. よくあるエラーとその対処方法

初心者の方がハマりやすいポイントも、先に知っておくと安心です。

「bootstrapが見つかりません」エラー：
npmでインストールされていない可能性があるので、npm install bootstrapをもう一度実行しましょう。
CSSが反映されない：
読み込むファイルの順番や、開発サーバーの再起動が必要なこともあります。
webpack.config.jsのミス：
スペルミスやパスの指定間違いに注意してください。

最初はうまくいかないこともありますが、失敗するたびに理解が深まります。あせらずに少しずつ試していきましょう。