【ざっくりと】Bootstrap5と4の変更点を簡単に解説

ついに、Bootstrap5(ベータ版)が実装されましたね。まちどうしかった人もいるのじゃないでしょうか。
私はBootstrap3や4を使っていて「いや、5とか覚えられんわ」と思っていました。ですが、調べてみた結果そこまで爆発的な変更はないので安心してください。

[box class=”box30″ title=”本記事のもくじ”]

1. Bootstrap5と4の変更点は3つ
2. 変更点①：脱jQuery
3. 変更点②：Internet Explorerのサポート終了
4. 変更点③：CSSカスタムプロパティ追加

[/box]

この記事を書いた人

滝田裕雅

ゆうがブログ運営者・ブロガー

「正しい知識を正しく届ける。」を理念にサイトを運営しています。その分野の専門家の記事や論文、私の実体験をもとに情報に誤りのない記事を作成しています。プロフィールの詳細＆記事編集ポリシーはこちら

Bootstrap5と4の変更点は3つ

結論として、下記が大きく変更された点です。

[box class=”box28″ title=”Bootstrap5と4の変更点”]

1. 脱jQuery
2. Internet Explorerのサポート終了
3. CSSカスタムプロパティ追加

[/box]

いろいろショッキングなものもありますが、それぞれ解説します。

変更点①：脱jQuery

Bootstrap5ではついにjQueryを削除しました。
理由としては、「Veu.js」や「React」などのJavaScriptフレームワークが登場し、より使いやすくするためにjQueryを削除して依存関係をなくしました。

そのため現在ではbuttonがなくなり、ラジオボタンやチェックボックスを使用しています。

とはいえ、今はVue.jsなどがメインですので「まあいいでしょう」って感じですね笑。

変更点②：Internet Explorerのサポート終了

続いて、Internet Explorerのサポートを終了しました。これは考察ですが、やはりInternet Explorerは、

こういったのがサポート終了をした理由かと思います。

なので、その代わりに公式ではこう言っています。

CSS変数、 より高速なJavaScript、より少ない依存関係、より優れたAPIの約束は確かに私たちにとって正しいと感じています。

Bootstrap Blog

と上記のようにアップグレードしました。

変更点③：CSSカスタムプロパティ追加

先程のIEサポート終了により、CSSカスタムプロパティの使用が開始されました。

たとえば、JavaScriptなどはこの変数を使いますよね。

[codebox title=”JavaScript”]

let name = "man" ;
    document.write(name);

[/codebox]

こんな感じで、nameという箱を作る感じです。

具体的なCSSカスタムプロパティはこちらに記載しているので読んでみてください。
CSS variables (CSS変数) · Bootstrap v5.0

以上！Bootstrap5と4の違いを、めちゃくちゃざっくりですが解説しました！

他にもBootstrap5では、レイアウトオプションなども追加されているので気になる方は公式サイトを覗いてみて下さいね。

Bootstrap5公式サイト

[sen]