簡単にでいいので変更点を教えてほしいです!
悩んでる人
ゆうが
記事を読むメリット
- Bootstrap5とはなにかわかります
- Bootstrap5と4の変更点がざっくりわかります
ついに、Bootstrap5(ベータ版)が実装されましたね。まちどうしかった人もいるのじゃないでしょうか。
ぼくはBootstrap3や4を使っていて、「いや、5とか覚えられんわ」と思っていました(笑)ですが調べてみた結果、そこまで爆発的な変更はないので安心してください。
- Bootstrap5と4の変更点
- 変更点①:脱jQuery
- 変更点②:Internet Explorerのサポート終了
- 変更点③:CSSカスタムプロパティ追加
記事の信頼性として、ぼくはエンジニアとしてweb制作をしたり勉強をしているので信頼性はあると思います。
それでは前置きはこれくらいにして、さっそくいきましょう!
スポンサーリンク
Bootstrap5と4の変更点
結論として、下記が大きく変更された点です。
- 脱jQuery
- Internet Explorerのサポート終了
- CSSカスタムプロパティ追加
いろいろショッキングなものもありますが、それぞれ解説します。
スポンサーリンク
変更点①:脱jQuery
Bootstrap5ではついにjQueryを削除しました。
理由としては、「Veu.js」や「React」などのJavaScriptフレームワークが登場し、より使いやすくするために、jQueryを削除して依存関係をなくしました。
そのため現在ではbutton
がなくなり、ラジオボタンやチェックボックスを使用しています。
jQueryはプログラミング初心者の方ならかならず通る道ですよね。初心者でも簡単にできるものがなくなってしまうのは少しさびしい気がしますね。
スポンサーリンク
変更点②:Internet Explorerのサポート終了
続いて、Internet Explorerのサポートを終了しました。
これは考察ですが、やはりInternet Explorerは、
- 世界でのシェアが2%ほどしかなく、ほぼ使っている人がいない
- CSSなどのデザイン調整が大変
こういったのがサポート終了をした理由かと思います。
※参考WebブラウザシェアランキングTOP10(日本国内・世界)
なので、その代わりに公式ではこう言っています。
CSS変数、 より高速なJavaScript、より少ない依存関係、より優れたAPIの約束は確かに私たちにとって正しいと感じています。
と上記のようにアップグレードしました。
変更点③:CSSカスタムプロパティ追加
先程のIEサポート終了により、CSSカスタムプロパティの使用が開始されました。
たとえば、JavaScriptなどはこの変数を使いますよね。
let name = "man" ;
document.write(name);
こんな感じで、name
という箱を作る感じです。
具体的なCSSカスタムプロパティはこちらに記載しているので読んでみてください。
CSS variables (CSS変数) · Bootstrap v5.0
またBootstrap5では、色だけでなくレイアウトオプションなども追加されました。
それでは今回は以上です!
最後までみてくださり、ありがとうございました!
Bootstrap
世界で最も人気のあるフロントエンドフレームワーク