記事内に商品プロモーションが含まれる場合がございます。本サイトはステマ規制への対応をしてます。
ついに、Bootstrap5(ベータ版)が実装されましたね。まちどうしかった人もいるのじゃないでしょうか。
私はBootstrap3や4を使っていて「いや、5とか覚えられんわ」と思っていました。ですが、調べてみた結果そこまで爆発的な変更はないので安心してください。
Bootstrap5と4の変更点は3つ
結論として、下記が大きく変更された点です。
- 脱jQuery
- Internet Explorerのサポート終了
- CSSカスタムプロパティ追加
いろいろショッキングなものもありますが、それぞれ解説します。
変更点①：脱jQuery
Bootstrap5ではついにjQueryを削除しました。
理由としては、「Veu.js」や「React」などのJavaScriptフレームワークが登場し、より使いやすくするためにjQueryを削除して依存関係をなくしました。
そのため現在ではbuttonがなくなり、ラジオボタンやチェックボックスを使用しています。
とはいえ、今はVue.jsなどがメインですので「まあいいでしょう」って感じですね笑。
変更点②：Internet Explorerのサポート終了
続いて、Internet Explorerのサポートを終了しました。これは考察ですが、やはりInternet Explorerは、
- 世界でのシェアが2%ほどしかなく、ほぼ使っている人がいない
- CSSなどのデザイン調整が大変
こういったのがサポート終了をした理由かと思います。
なので、その代わりに公式ではこう言っています。
CSS変数、 より高速なJavaScript、より少ない依存関係、より優れたAPIの約束は確かに私たちにとって正しいと感じています。
と上記のようにアップグレードしました。
変更点③：CSSカスタムプロパティ追加
先程のIEサポート終了により、CSSカスタムプロパティの使用が開始されました。
たとえば、JavaScriptなどはこの変数を使いますよね。
let name = "man" ;
document.write(name); こんな感じで、nameという箱を作る感じです。
具体的なCSSカスタムプロパティはこちらに記載しているので読んでみてください。
CSS variables (CSS変数) · Bootstrap v5.0
以上！Bootstrap5と4の違いを、めちゃくちゃざっくりですが解説しました！
他にもBootstrap5では、レイアウトオプションなども追加されているので気になる方は公式サイトを覗いてみて下さいね。
