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

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

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をバンドルする手順

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だけ使いたい場合

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

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

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

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

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

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

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

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

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

まとめ

まとめ

今回はViteとwebpackを使ってBootstrap5をバンドルする方法について、基礎から実践まで丁寧に整理しました。フロントエンド開発において、CSSフレームワークであるBootstrap5を効率よく扱うことは、開発スピードの向上やコードの保守性に大きく関わってきます。特にViteのような高速なビルドツールと組み合わせることで、開発体験は大きく改善されます。

Viteを利用する場合は、npmでプロジェクトを作成し、BootstrapをインストールしてからJavaScriptファイル内でCSSとJavaScriptをインポートするだけという非常にシンプルな手順で導入できます。このシンプルさが、近年Viteが注目されている大きな理由のひとつです。設定ファイルもほとんど不要で、初心者でもすぐに環境構築ができる点は大きな魅力です。

一方でwebpackは、より細かい設定が可能なビルドツールとして長く使われてきました。設定ファイルであるwebpack.config.jsを用意し、CSSローダーやスタイルローダーを設定することで、Bootstrapのスタイルを適切に読み込むことができます。最初は少し複雑に感じるかもしれませんが、仕組みを理解すると柔軟なカスタマイズができるようになります。

また、BootstrapのJavaScript機能を使わず、レイアウトやデザインのみを利用したい場合はCSSだけを読み込む方法も有効です。これにより不要なJavaScriptを省略でき、ページの表示速度の向上にもつながります。プロジェクトの要件に応じて、必要な機能だけを取り入れることが重要です。

エラー対処についても重要なポイントです。Bootstrapが読み込まれない、スタイルが適用されないといった問題は、インストール漏れやパスの指定ミスが原因であることが多いです。開発環境ではキャッシュの影響もあるため、サーバーの再起動を試すことも有効です。こうしたトラブル対応を経験することで、開発スキルは確実に向上していきます。

フロントエンド開発では、ViteやwebpackといったビルドツールとBootstrapのようなCSSフレームワークを組み合わせることで、効率的かつ高品質なWebページ制作が可能になります。今回学んだ手順をベースに、自分の開発環境に合わせた最適な構成を見つけていきましょう。

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

<!-- index.html -->
<div class="container mt-5">
    <h1 class="text-primary">Bootstrap導入確認</h1>
    <button class="btn btn-success">ボタン</button>
</div>

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

Bootstrap 5をViteで使う方法がわかりません。初心者向けに教えてください。

Bootstrap 5をViteで使うには、Node.jsをインストール後、Viteのプロジェクトを作成してnpmでBootstrapを追加し、main.jsでCSSとJSを読み込むだけです。高速な開発環境が整います。

Viteとは何ですか？Bootstrapとどう関係がありますか？

Viteはフロントエンドの開発を高速化するビルドツールです。Bootstrapと組み合わせて使うと、すばやくスタイルやデザインを確認しながら開発ができます。

webpackでBootstrap 5を使うにはどうすればいいですか？

webpackではnpmでBootstrapをインストールし、webpack.config.jsでCSSの読み込みルールを設定し、JavaScriptでCSSとJSをimportすることでBootstrap 5が使えます。