はじめに

こんにちは。フロントエンド開発センター(UIT) 岡崎です。

LINEはBootstrapを応援しており、2021年5月からはSponsorも行っています。また、OSS貢献の一環としてBootstrap日本語リファレンスの翻訳・運営も担当しています。

Bootstrap4正式公開から3年4ヶ月、2021年5月5日に待望のBootstrap5正式版がリリースされました！

今回はバージョン4からの変更点をチェック、公式Blog記事(英語)を日本語に翻訳して紹介していきます。

関連する過去の記事

• Bootstrap5 alpha1 vs beta1
• UIT Front-end Tooling Survey 2020
• UIT Front-end Tooling Survey 2019
• LINEはなぜデザインシステムを取り入れたのか？
• LINEのフロントエンド開発を支える「UIT」の仕事

バージョン4から5への変更点

v4とv5の比較

比較項目	v4.x	v5.x
RTL対応	非対応	対応
RFS(標準)	無効	有効
JSライブラリ	jQuery 3.x	なし
JSプラグイン	Popper 1.x	Popper 2.x
Sass	LibSass	Dart Sass

ユーザ視点で気になる変更点は以下の通りです。

• 脱jQuery
• RTL対応
• コンポーネントのスリム化
• サポートブラウザの刷新

脱jQuery

jQueryとの依存関係がなくなり、Bootstrap5ではjQueryなしで使用できるようになりました。VueやReactのコンポーネントも開発しやすくなりますね。

RTL対応

ヘブライ語やアラビア語などのRTL(Right To Left)対応が追加され、水平方向を示すクラス left/right は全て start/end に変更されました。かなり大きな変更です。

コンポーネントのスリム化

ユーティリティクラスだけで実現できる Jumbotron, Media object などのコンポーネントは削除されました。また、カスタム含めて2種類あったフォームのスタイルは1つに統合されました。

サポートブラウザの刷新

対象ブラウザからIEが外れ、Edgeへのサポートが薄くなりました。

デスクトップ

Browser	v4.x	v5.x
Chrome	45+	60+
Edge	12+	Latest
Firefox	38+	60+
Internet Explorer	10+	N/A

モバイル

Browser	v4.x	v5.x
Safari	Latest	Latest
Firefox	Latest	Latest
Edge	Latest	N/A
Android Browser & WebView	v5.0+	v6.0+
Android	Latest	Latest

より詳細な内容は公式ブログの記事にまとまっているので、日本語に翻訳して紹介していきます。

Bootstrap5公式Blog記事(日本語訳)

Bootstrap5を正式公開しました！3つのアルファ版、3つのベータ版、数か月の開発を経て、最初の安定版としてメジャーバージョンをリリースします。Bootstrapのユーザー及びコントリビューター、メンテナーとすばらしいコミュニティによって実現しました。ここに来るのを手伝ってくれたすべての人に感謝します！

• 新しいロゴ
• 新コンポーネント：Offcanvas
• 新しいアコーディオン
• 新しくなったフォーム
  • チェックボックスとラジオボタン
  • フローティングラベル
  • 新しいファイル入力
  • シンプルになったレイアウト
• RTL対応
• 刷新されたユーティリティ
  • 新しいユーティリティAPI
  • 新しいユーティリティ
  • スペーシングユーティリティ
• 新しいスニペット例
• グリッドとレイアウト
• その他コンポーネントの更新
• カスタマイズの改善
• Dart Sass導入
• ブラウザーサポート
• JavaScript
• 移行ガイド
• リリースの入手
• 今後の予定
• v5.1.0プレビュー
• チームのサポート

新しいロゴ

バージョン5では、ロゴとドキュメントがリデザインされました。Bootstrap Iconsの作業に触発された新しいロゴは、CSSの波括弧とお馴染みのBアイコンで構成されています。

新しいドキュメントは、コンテンツセクションが新たに整理されナビゲーションも改善されています。

新コンポーネント：Offcanvas

 新しいコンポートとしてOffcanvas(オフィキャンバス)を追加します。

Offcanvasコンポーネントは、モーダル同様にバックドロップ、画面のスクロール、ポジションが指定できます。Offcanvasは、表示領域の上部、右側、下部、左側に配置できます。これらのオプションは、data属性を使うか、JavaScript API経由で構成します。

新しいアコーディオン

.cardベースのアコーディオンコンポーネントを新しいアコーディオンコンポーネントに置き換え、いくつかのバグを解消しました。ロジックは以前と同じCollapse JavaScriptプラグインを使っていますが、アコーディオン用にカスタムされたHTML, CSSを使うことで、今まで以上に使いやすくなりました。

新しいアコーディオンには、クリッカブルと状態を示すBootstrap IconsのChevronアイコンが含まれています。外側の境界線を消すための.accordion-flushも用意しているので、他の要素配下にも設置可能です。

新しくなったフォーム

フォームのドキュメントとコンポーネントを刷新しました。すべてのフォームコンポーネントを新しいセクション(インプットグループ含む)に統合しました。

すべてのフォームコントロールからスタイルの重複を削除し再設計しました。バージョン4では、チェックボックス, ラジオボタン, スイッチ, ファイルなどブラウザがデフォルトで提供するスタイルと共にカスタムスタイルを提供していました。バージョン5では、すべてカスタムスタイルに統合しました。

<h41">チェックボックスとラジオボタン

バージョン4のマークアップとほとんど変わりません。フォームコントロールのセットと、疑似要素の生成を含む再設計した要素を使うことで、一貫性にあるルックアンドフィールを得ることができます。

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
 
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
 
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

すべてのチェックボックス, ラジオボタン, セレクト, ファイル, レンジなどの要素には、OSやブラウザに関わらず同じ動作と外観を提供するためのスタイルが定義されています。これらの新しいフォームコントロールは、余分なマークアップはなく完全にセマンティックです。

フローティングラベル

フローティングラベルは、テキスト, セレクト, テキストエリアをサポートします。テキストエリアの場合は、ラベルと複数行テキストが重なることがあります。現在、この問題の修正に取り組んでいます。アイデアがあればお寄せください。

新しいファイル入力

カスタムクラスの.form-fileを削除しました。これはファイル入力のためのJavaScriptが不要になったことを意味します。新しいフォームファイルはすべてCSSです。

シンプルになったレイアウト

新しいグリッドを使えば、フォームのレイアウトが更に簡単に実現できます。そのため、.form-group, .form-row, .form-inlineを削除しました。

RTL対応

BootstrapにRTLが追加されました！RLTアプローチのためにいくつかの変更があります。

• CSS distファイルの新しいRTLバージョン：これには、グリッド, リブート, ユーティリティ, 標準バンドルが含まれます。ファイルの完全なリストについては、目次ページを参照してください。
• 新しいRTLドキュメント：RTL対応を始めるのに役立ちます。
• 5つの新しいRTLの例：アルバム, チェックアウト, カルーセル, ブログ, ダッシュボードの新しいRTL例。
• 2つの新しいチートシートキッチンシンクページ：標準のCSSのデフォルトのチートシートとRTLチートシート。

私達のアプローチは、RTLCSSに基づいて構築されています。いくつかのバグが発生することを想定して、今はまだ実験的な機能として分類しています。残りのToDoや完成をサポートしてくれるコミュニティを探しています。

刷新されたユーティリティ

ユーティリティドリブンのフレームワークがここ数年主流となっていることを考慮して、Bootstrapプロジェクトにユーティリティを導入すると共に、それを全体的に管理する新しい方法に時間を費やしました。

新しいユーティリティAPI

Bootstrap5のユーティリティクラスを拡張する方法として、新しいユーティリティAPIを実装しました。:hoverや印刷などのように状態ベースのクラス生成をサポートするので、ユーティリティを簡単にカスタマイズおよび生成できます。

$utilities: () !default;
$utilities: map-merge(
  (
    // ...
    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    // ...
    "opacity": (
      property: o,
      class: opacity,
      state: hover,
      values: (
        0: 0,
        25: .25,
        50: .5,
        75: .75,
        100: 1,
      )
    )
    // ...
  ), $utilities);

ユーティリティのメンテナンスが容易になったので、私たちは、Bootstrapにユーティリティを実装するために制御とカスタマイズのバランスを見つけるために取り組んできました。バージョン4では、グローバル$enable-*クラスで行い、バージョン5でもそれを引き継いでいます。APIベースのアプローチによりSassで構文を作成するだけで、独自ユーティリティの作成・変更・削除することができます。

詳細については、新しいUtilities APIドキュメントを参照してください。

新しいユーティリティ

次のような新しいユーティリティを追加しました。

• ポジショニングユーティリティ: 上部, 右側, 下部, 左側 と 0, 50%, 100%
• 簡単なグリッドレイアウトのための.d-gridと新しいgapユーティリティ
• フォントサイズ用の.fsユーティリティ
• font-weightユーティリティは.fwに変更
• 角丸ユーティリティとして.rounded-1(小), .rounded-2(中), .rounded-3(大)
• .overflow-visible と .overflow-scrollユーティリティ

スペーシングユーティリティ

BootstrapにRTLを追加するためのアプローチは、Web全体にとって将来性のある方法で追加することでした。そのため、CSS論理的プロパティの精神を取り入れ、いくつかのクラスと変数の名前を変更しました。大規模な変更のため、リスクも高いですが総合的に評価して頂ければ幸いです。

新しいスニペット例

スニペットをふんだんに使う4つの新しい例を追加し、他の例も更新しました。これらの新しいスニペットの例は、一般的なコンポーネントのバリエーションを特徴としており、簡単にコピー＆ペーストで使用できます。

• ヘッダー
• ヒーローズ
• 特徴
• サイドバー

これらの新しいスニペットは成長し続け、Bootstrapの使用がいかに楽しく簡単であるかを示しています。

また、デザインを更新しリソースを増やし、スターターテンプレートを更新しました。

グリッドとレイアウト

グリッドシステムとレイアウトオプションは改善と合理化のためにいくつかの変更を行いました。

• カラムクラスは、paddingが.rowの外側に適用されなくなったため、widthユーティリティとして使えるようになりました(.col-6はwidth: 50%)。
• 新しいガターユーティリティは、水平および垂直グリッドガターをレスポンシブにカスタマイズできます。ガターのwidthも1.5remに縮小されました。
• カラムクラスからposition: relativeが削除されました
• .mediaユーティリティのコンポーネントを削除しました

その他コンポーネントの更新

多くのコンポーネントに機能強化と変更を行いました。

• Popper2採用にあたり、JavaScriptとドロップダウンの配置を見直しました。すべてのオプションは、ドキュメントの新しい例と、配置用の新CSSセレクターとデータ属性で確認できます。
• ドロップダウンメニューに新しい.dropdown-menu-darkクラスが追加されました。
• 同様に、カルーセルには.carousel-dark、コントロール、テキスト、およびインジケーターを反転するための新しいクラスがあります。
• ユーティリティを使用してBootstrapアイコン(または他のアイコンライブラリ)を追加するためのアイコン例をアラートコンポーネントに追加しました。
• 閉じるボタンは、background-imageのSVGに変更され、クロスブラウザーのスタイルが改善されました。
• .btn-blockユーティリティのクラスを削除しました。
• ナビゲーションバーを開いたときの垂直方向max-heightとスクロール用の.navbar-nav-scrollを更新しました。
• リストグループには、疑似要素の番号付きリストグループアイテムを作成する新しい.list-group-numberedクラスがあります。

カスタマイズの改善

ドキュメントを整理して改善し、より多くの明確な説明を追加し、Bootstrapを拡張するためのサポートを増やしました。新しいカスタマイズセクションから始まります。

バージョン5のカスタマイズドキュメントは、Sassファイルで構築するので、より多くのコンテンツとスニペットと共にバージョン4のテーマページを拡張します。スターターnpmプロジェクトの提供で簡単かつ迅速に開始できます。GitHubでテンプレートリポジトリとしても利用できるため、自由にフォークして開発できます。

バージョン5でもカラーパレットを拡張しました。豊富なカラーシステムでコードに触れることなく、ルックアンドフィールを簡単にカスタマイズできます。また、コントラスト改善を行いカラードキュメントでコントラスト指標を提供しました。

また、各コンポーネントを強化するSassコード紹介のため、ほとんどのページに新しいセクションを設けました。変数、ミックイン、ループ、マップはすべてレンダリングされ、各ページで最新情報を参照できるのでカスタマイズが容易になります。

Dart Sass導入

LibSassは非推奨になったため、DartSassに切り替えました。しばらく、DartSassでビルドテストしていましたが、数週間前にLibSassが非推奨になったことを受けて、切り替えを決定しました。今のところ、Sassモジュールを保持してます。互換性の問題とバージョン4からアップグレードの際のギャップを考慮して、まだ新しいモジュールシステムを使用していません。

ブラウザーサポート

以下の古いブラウザをサポートから外しました。

• Microsoft Edge レガシーバージョン
• Internet Explorer10 or 11
• Firefox 60未満
• Safari 10未満
• iOS Safari 10未満
• Chrome 60未満
• Android 6未満

ブラウザとデバイスのサポート詳細は.browserslistrc.を参照してください。

JavaScript

最大の変更点はjQueryの削除です。それ以外にも多くの機能強化を行いました。

• jQueryは不要になりました！
• すべてのプラグインは、第一引数としてCSSセレクターを受け入れることができるようになりました。
• Popper2にアップデートしました！
• すべてのプラグインのデータ属性は、bsで名前空間が付けられるようになりました。たとえば、data-toggleの代わりにdata-bs-toggleを使用します。
• Popper2の登場に伴い、ドロップダウン、ポップオーバー、ツールチップの配置を見直しました。
• トーストのポジショニングを見直し、新しいポジションユーティリティを活用できるようになりました。
• ツールチップとポップオーバーにカスタムクラスを使用する機能が追加されました。
• コンポーネント間でコードをより適切に共有するために、さまざまな最適化を行いました。
• ドロップダウンを変更して.dropdownの.dropdown-toggle代わりにイベントを発行するようにしました。
• _getInstance()のようなパブリック静的メソッドから、getInstance()のようにアンダースコアを削除しました。
• ポップオーバーとツールチップのwhiteListをallowListに名前を変更しました。

移行ガイド

今までのプレリリース6本すべての変更を一つに統合して、移行ガイドページを更新しました。アップグレードの際に起こりうる問題の注意喚起のために、Breacking changeラベルを随所に追加しました。

コードの変更に関するチュートリアルのようなガイダンス、依存関係の差分やコードスニペットなど、まだまだやるべきことがあると思います。提案やコントリビュートは、イシューを開くか、プルリクエストしてください。

リリースの入手

https://getbootstrap.com で新しいリリースを調べてください。また、npmでも公開しているので、何が新しくなったのか知りたい場合は、以下の方法で最新版を取得することができます。

$ npm i bootstrap

前回のプレリリース以降の変更の完全なリストについては、GitHubv5.0.0リリースの変更ログを確認してください。

今後の予定

Bootstrap5の安定版として最初のリリースを目指しています。その他にもいくつかのリリースを予定しています。

• Bootstrap v4.6.1
• Bootstrap Icons v1.5.0
• Bootstrap5をサポートするBootstrap npm starter v2.0.0
• 初期リリースからのフォローアップ・バグ修正 Bootstrap v5.0.1
• 最初のマイナー機能リリース Bootstrapv5.1.0

v5.1.0プレビュー

次のマイナーリリース v5.1.0 では以下を予定しています。

• オプトインCSSグリッドのサポート
• カラーパレット用Sassマップの拡張
• 新しいコンポーネント：スケルトンプレースホルダー
• 新しいユーティリティ：Opacity

チームのサポート

Open CollectiveまたはチームメンバーのGitHubプロファイルにアクセスして、Bootstrapに貢献しているメンテナをサポートしてください。

---

最後に

Bootstrap5は冗長なスタイルやクラスが排除され、ユーティリティ機能の強化と改善されたカスタマイズ性でBootstrap4よりも洗練された印象を受けました。

Bootstrap5-alpha1から1年、Bootstrap5正式版の登場でBoostrapVueやreact-bootstrapなどコンポーネントライブラリ5.0対応が予想されます。

LINEが翻訳・運営しているBootstrap日本語リファレンスも近日中に5.0対応しますのでぜひご活用ください！

LINEではフロントエンドエンジニアを募集しております。LINEのフロントエンド開発やOSS貢献に興味がある方はぜひご応募ください。

• フロントエンドに関する求人情報