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

生徒

「Bootstrapの古いバージョンを使っているんですが、最新のBootstrap5に移行するにはどうしたらいいですか？」

先生

「Bootstrap3や4から5へ移行するには、いきなり全部を変えるのではなく、段階的にリファクタリング（古い書き方を整理して新しい書き方に直すこと）を進めるのが安心ですよ。」

生徒

「段階的ってどういう手順なんですか？初心者でもできるんでしょうか？」

先生

「もちろんです。Bootstrapのバージョンごとの違いを理解しながら、一歩ずつ進めれば大丈夫です。順番に見ていきましょう！」

1. Bootstrap3から5に移行する必要性とは？

Bootstrapは、世界中で利用されている人気のあるCSSフレームワークです。Webサイトを作るときに、レイアウトやデザインを素早く整えることができます。ただし、古いバージョンをそのまま使い続けると、最新のブラウザに対応できなかったり、セキュリティリスクが増えたりする可能性があります。そのため、Bootstrap3からBootstrap5への移行はとても大切です。

例えば、スマートフォンのアプリを古いままにしておくと、最新の機能が使えなくなるのと同じです。Bootstrapも同じで、最新版にアップデートすることで、より便利で安全に使えるようになります。

2. 段階的リファクタリングとは？

リファクタリングとは、コードの見た目や動作を保ちながら中身を整理して書き直す作業のことです。段階的リファクタリングは、一気に全部を書き換えるのではなく、小さなステップに分けて少しずつ修正していく方法です。

例えば、大掃除をするときに一度に全部片付けるのは大変ですが、今日は机だけ、明日は本棚、と順番にやると楽になります。Bootstrapの移行も同じで、レイアウト、ボタン、フォームといった要素ごとに直していくとスムーズに進められます。

3. Bootstrap3から5に移行する手順

ここでは初心者向けに、具体的な移行の手順を紹介します。いきなり全ページを直さず、次の流れで少しずつリファクタリングしていきましょう。

CDNリンクの確認： まずはBootstrap5のCDNを準備します。
グリッドシステムの修正： col-xs-などBootstrap3独自のクラスを、Bootstrap5のcol-クラスに置き換えます。
ナビゲーションバー： navbar-defaultなど古いクラスを削除し、Bootstrap5の新しいクラスを使います。
フォーム： form-groupやinput-groupの構造が変わっているので、書き方を修正します。
JavaScript依存： jQueryが不要になったので、古いスクリプトを整理しましょう。

4. グリッドシステムの違いと修正例

Bootstrap3では、スマホ用にcol-xs-、タブレット用にcol-sm-といった指定が必要でした。しかしBootstrap5では、もっとシンプルにcol-だけで済む場合が多いです。


<!-- Bootstrap3の例 -->
<div class="row">
  <div class="col-xs-6 col-sm-4">左</div>
  <div class="col-xs-6 col-sm-8">右</div>
</div>


<!-- Bootstrap5の例 -->
<div class="row">
  <div class="col-6 col-sm-4">左</div>
  <div class="col-6 col-sm-8">右</div>
</div>

このように、クラス名が簡単になり、スマートフォン対応がより直感的になりました。

5. ナビゲーションバーの移行

Bootstrap3のナビゲーションバーでは、navbar-defaultやnavbar-toggleといったクラスを使っていました。しかしBootstrap5では、navbar-lightやnavbar-expand-lgといったクラスに変わっています。


<!-- Bootstrap3の例 -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ロゴ</a>
  </div>
</nav>


<!-- Bootstrap5の例 -->
<nav class="navbar navbar-light bg-light navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ロゴ</a>
  </div>
</nav>

構造は似ていますが、クラス名や展開方法が大きく変わっているので注意が必要です。

6. フォーム構造の違い

Bootstrap3ではform-groupを多用していましたが、Bootstrap5ではグリッドと組み合わせて柔軟にレイアウトを作るのが基本です。また、ラベルや入力欄のクラス指定もシンプルになりました。


<!-- Bootstrap3の例 -->
<div class="form-group">
  <label for="name">名前</label>
  <input type="text" class="form-control" id="name">
</div>


<!-- Bootstrap5の例 -->
<div class="mb-3">
  <label for="name" class="form-label">名前</label>
  <input type="text" class="form-control" id="name">
</div>

このように、Bootstrap5では見た目がより整い、コードもシンプルに書けるようになっています。

7. jQuery不要の世界へ

Bootstrap3や4では、動きをつけるためにjQuery（JavaScriptライブラリの一つ）が必要でした。しかしBootstrap5からは、JavaScriptだけで動くようになったため、jQueryを読み込む必要がなくなりました。これにより、ページの表示速度も向上し、余分な依存関係が減ります。

例えば、モーダル（ポップアップ画面）やドロップダウンメニューも、Bootstrap5では追加のjQueryなしで動作します。これにより、初心者でもより簡単に扱えるようになりました。