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の大きな変更点

従来の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はこれまで以上にカスタマイズしやすくなったバージョンといえるでしょう。

SE

Bootstrap5でjQueryとの依存関係がなくなるのは大きいですね！

PL

そうですね。他にも、拡張カラーパレットやグリッドシステムの強化など、開発者がより使いやすいアップデートになっていますよ。

より使いやすくなったBootstrapを体験しよう

jQueryとの依存関係やIEのサポートを終了するなど、様々な面で大きく変化したBootstrap5。Webの開発プロジェクトに携わる方は、今後Bootstrap5を使用する可能性も考えられます。早い段階から情報収集や、実際に実行して拡張機能の確認を行うことをおすすめします。

>>>エンジニアの案件を探すならFEnet .NET Navi