【脱jQuery】Bootstrap5と4の変更点を簡単に解説【Bootstrap5】

bootstrap5と4の変更点を解説

Bootstrap5がリリースされたらしいんだけど、前回の4とは何が違うの?
簡単にでいいので変更点を教えてほしいです!

悩んでる人

ゆうが

こういった疑問に答えます!

記事を読むメリット

  • Bootstrap5とはなにかわかります
  • Bootstrap5と4の変更点がざっくりわかります

ついに、Bootstrap5(ベータ版)が実装されましたね。まちどうしかった人もいるのじゃないでしょうか。

ぼくはBootstrap3や4を使っていて、「いや、5とか覚えられんわ」と思っていました(笑)ですが調べてみた結果、そこまで爆発的な変更はないので安心してください。

本記事のもくじ
  • Bootstrap5と4の変更点
  • 変更点①:脱jQuery
  • 変更点②:Internet Explorerのサポート終了
  • 変更点③:CSSカスタムプロパティ追加

記事の信頼性として、ぼくはエンジニアとしてweb制作をしたり勉強をしているので信頼性はあると思います。

それでは前置きはこれくらいにして、さっそくいきましょう!

スポンサーリンク

Bootstrap5と4の変更点

Bootstrap5と4の変更点

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

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

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

スポンサーリンク

変更点①:脱jQuery

変更点①:脱jQuery

Bootstrap5ではついにjQueryを削除しました。

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

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

jQueryはプログラミング初心者の方ならかならず通る道ですよね。初心者でも簡単にできるものがなくなってしまうのは少しさびしい気がしますね。

とはいえ、jQueryは現在ではあまり使うことがない(Vue.jsなどがメイン)ので、「まあいいでしょう」って感じですね。

スポンサーリンク

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

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

続いて、Internet Explorerのサポートを終了しました。

これは考察ですが、やはりInternet Explorerは、

  • 世界でのシェアが2%ほどしかなく、ほぼ使っている人がいない
  • CSSなどのデザイン調整が大変

こういったのがサポート終了をした理由かと思います。
※参考WebブラウザシェアランキングTOP10(日本国内・世界)

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

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

Bootstrap Blog

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

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

変更点③:CSSカスタムプロパティ

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

CSSカスタムプロパティとは、箱みたいなもので、いちいち同じものを何回も記入しなくていいようにすることです。

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

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

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

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

またBootstrap5では、色だけでなくレイアウトオプションなども追加されました。

それでは今回は以上です!
最後までみてくださり、ありがとうございました!