Bootstrap5のアルファ版がリリース。変更点のまとめ

.NET開発者のためのブログメディア

Bootstrap5のアルファ版がついにリリースされました。ここでは、Bootstrap5の新機能や従来のBootstrap4との違いについて解説していきます。大きく変更されている機能もあるため、今までのプロジェクトを更新する場合や、新しくBootstrapでプロジェクトを作成しようと思っている方は、ぜひ参考にしてみてください。

SE: ついにBootstrap5のアルファ版がリリースされましたね！どんな機能が使えるのか楽しみです。

PL: 従来のBootstrapとは大きく異なるため、サイト制作にBootstrapを使っている場合はアップデートする際は気をつけてくださいね。

Bootstrapの概要

Bootstrapとは、WebサイトやWebアプリケーションなどのフロントエンド（見た目）を作成するためのフレームワークです。Twitter社のエンジニアが開発し、現在はオープンソースにて開発が進められています。
Bootstrapを用いることで、CSSやJavaScriptの深い知識がなくても、簡単にデザイン性の高いWebサイトを作成することが可能です。
2011年にリリースされ当初は「Twitter Bootstrap」と呼ばれていました。現在の最新バージョンは4.5.2となっています。

Bootstrap5の大きな変更点

Internet Explorer

従来のBootstrapから大きく変わったBootstrap5ですが、ここでは主な変更点3つを取り挙げます。

Internet Explorerのサポートが終了

まず、対応するブラウザに変更があります。マイクロソフトがMicrosoft Edgeに力を入れて以降、シェアが急速に縮小しているInternet Explorerですが、これまでInternet Explorer 10や11はサポートされていました。しかしIEの表示対応に苦慮していたエンジニアもいるのではないでしょうか。

Bootstrap5では、Internet Exploerのサポートが終了します。代わりに、より高速なJavaScriptやより優れたAPI機能など、開発者が使いやすくなるような新機能に力を入れることができるようになりました。

jQueryとの依存関係を削除

従来のBootstrapでは、ドロップダウンやメニュー拡張などの動的な機能を提供するために、JavaScriptフレームワークの代表格であるjQueryを依存関係として使用してきました。

しかし、最近では「React」や「Vue.js」などの新しいJavaScriptフレームワークも登場しています。開発者がどのJavaScriptフレームワークを使いたい場合にも対応できるよう、Bootstrap5ではjQueryとの依存関係がなくなっています。

SVGアイコンの追加

Bootstrap5では、コードで簡単に組み込める1,000以上のSVGアイコンが追加されました。
特にカレンダーアイコンには、日付が表示されているアイコンや予定が埋まっていることが分かるアイコンなど、様々なパターンで用意されており、カレンダーを表すアイコンだけで47個もあります。新しいアイコンライブラリの登場で、より細かな表現ができるようになっています。

カスタマイズがより柔軟に

Bootstrap5では上記の3点以外にも細かい変更点があります。まず、Internet Explorerのサポート終了によりCSSカスタムプロパティが大幅に拡充されました。これまで色やフォントの対応にとどまっていましたが、Bootstrap5では要素やレイアウトオプションの一部も変数によって指定することが可能になりました。

また、カラーパレットの拡充や、「g*ユーティリティー」の導入によりグリッドシステムの柔軟性が上がったこと、フォームのデザインをBootstrap側で操作できるようになったことなど、細かい変更点は多岐にわたります。Bootstrap5はこれまで以上にカスタマイズしやすくなったバージョンといえるでしょう。