Bootstrap 5がαリリースされました！

アプリ開発時のUIフレームワークとして、Bootstrapを使っているケースはとても多いです。スマホアプリ的なUIはできないものの、業務で使うようなUIを仮想DOMのような技術を使わなくとも作れるのが魅力的です。

そんなBootstrapが、最新版となるバージョン5のαリリースを行いました。この記事ではこれまでのBootstrap4との相違点を含め、Bootstrap 5の魅力を紹介します。

Bootstrap · The most popular HTML, CSS, and JS library in the world.

jQuery依存がなくなりました

これまでに予告されていた通り、Bootstrap 5はjQuery依存をなくしました。また、IEサポートを止めました。IEについてはスマホアプリでは関係がないので問題ないでしょう。jQueryについても、使わないプロジェクトは増えていますし、VueやReactのような仮想DOMを使ったプロジェクトでのBootstrapの採用をしやすくする可能性があります。

例えばモーダルの表示方法は、次のように異なります。v5は素のJavaScriptで記述できるようになりました。これによってBootstrapプロジェクトが大幅にサイズ軽減されます。

// v4
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

// v5
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})

jQuery依存がなくなったからといって、モーダルやカルーセル、トースト、ツールチップのようなコンポーネントは変わらず提供されます。Bootstrapで動かすライブラリなどは変更が必要になると思われますが、公式提供されているライブラリについては、v5でも同様に提供されるでしょう。

CSSカスタムプロパティの追加

IEをサポート対象外としたことで、CSSのカスタムプロパティが存分に活かせるようになりました。v4ではルートのフォント、色くらいでしたが、v5では大幅に拡張されています。例えばテーブルは次のように拡張可能です。

.table {
  --bs-table-bg: #{$table-bg};
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #{$table-striped-color};
  --bs-table-striped-bg: #{$table-striped-bg};
  --bs-table-active-color: #{$table-active-color};
  --bs-table-active-bg: #{$table-active-bg};
  --bs-table-hover-color: #{$table-hover-color};
  --bs-table-hover-bg: #{$table-hover-bg};
}

よりカスタマイズしやすく

v5のドキュメントではカスタマイズに関するページが追加されています。ここではSass、CSS変数、色、コンポーネント、オプションなど様々なセクションに分かれてBootstrapのカスタマイズ法に触れています。つまり、これまで以上にカスタマイズを強く意識し、デザインや表現の柔軟性を持たせているということです。いわゆるBootstrap臭を感じさせないWebサイト構築を行う上でも重要になるでしょう。

グリッドシステムの拡張

レスポンシブWebデザインを行う上で重要になるグリッドシステムですが、通常の組み方であればv4とv5で大きく変わらないようです。v4の時と同じクラス名が使えます。

しかし、例えば .gutter が追加されており、カラム同士の隙間を空けて表示できる仕組みが追加されています。これは水平だけでなく、垂直方向でも利用できます。

v4との表現力の違い

実際に作られるWebサイトのデザインとしては、v4とv5で大きくは違いません。例としては、次のようなデザインが上がっています。

こちらは v4.5です。

こちらはv5です。文字のサイズやバッジのサイズが多少変わった程度です。

ナビゲーションバー。こちらは v4.5 です。

v5。中央に寄せる表現ができています。

テーブルの書き方は同じです。

フォームの書き方は多少変わっています。

その他

他にもRTLCSS（アラビア文字のように右から左へ記述する言語に対応するスタイルシート）であったり、Offcanvasへの対応などが予定されています。他にもロゴが変わっています。

使い方

現時点ではαリリースであり、バージョンアップによって破壊的更新も行われます。実際のテストはβ版まで待った方がいいでしょう。とはいえ、いち早く試してみたい方は次のようなHTMLで利用できます。

<!-- CSSのみ -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<!-- JavaScriptと依存ライブラリ -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

すでにBootstrapを採用しているサイトなどで試してみて、デザインが崩れるようであれば対応が必要でしょう。また、jQueryに依存した部分があれば、その部分も修正が必要になると思われます。

まとめ

Bootstrap 5はv4と比べて、（v3 → v4に比べれば）そこまで大きな破壊的変更はなさそうな印象です。一番大きな変更はjQuery依存からの脱却でしょう。Bootstrapはモダンなデザインや機能をふんだんに盛り込んでいますので、今風のWebサイトやアプリのUIを実現する際にはぜひ使っていきたいフレームワークとなっています。

Bootstrap · The most popular HTML, CSS, and JS library in the world.