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

Bootstrap

HTML・CSS

公開日時: 2020-10-13 　更新日時: 2022-06-01

この記事でわかること

最新情報や関心のある情報を毎日お届け。 FEnetメールマガジンメルマガ登録はこちらから>>

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

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

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

システム エンジニア: Bootstrap5でjQueryとの依存関係がなくなるのは大きいですね！

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

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

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

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

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

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

Bootstrapの概要