2022/5/20の勉強会で発表されたものです。

1. 執筆者：トビウオ 発表日：2022/05/20
Bootstrap5が
Bootstrap4から
変わったところ

2. Bootstrapとは？
• 世界的に有名なWebアプリケーションフレームワーク
• 最初のバージョンは、Twitterの開発者であるMark Otto氏とJacob
Thornton氏によって開発された
• 様々なWebブラウザで動作する互換性、グリッドシステムによる
柔軟なレイアウトなどが持ち味
• カスタムせず使うと「Bootstrapっぽさ」が目立つという声も

3. Bootstrapの歴史（ざっくり）
バージョン 出た時期 前バージョンからの主な変更点
1.x 2011年 8月
元々は、「Twitter Blueprint」と呼ばれる、Twitterの社内で使うための
フレームワークだった。それから「Bootstrap」と改名してOSS化。
2.x 2012年 1月
Glyphicons (組み込みのアイコンセット)を搭載し、コンポーネントの修正
と追加が行われた。レスポンシブデザイン対応もここから。
3.x 2013年 8月
フラットデザインを志向し、モバイルファーストになるようにCSSを再設計
した。Internet Explorer 7とFirefox 3.6のサポート終了。
4.x 2014年 10月
ソースコードが大幅に書き直され、LessだったものがSassになった。
Flexboxなど新機能にも対応した。IE9までのサポート終了。
5.x 2021年 ５月
jQueryへの依存が無くなり、IE11へのサポートも終了した。既存の
グリッドシステムに改良が施され、RTL表記にも対応した。

4. Bootstrap4→5までがだいぶ空いた？
• 実に7年近くも経っている
• 中身のギャップとしては Bootstrap3→4 の方が大きいが……
• この間に起きたこと：
• Internet Explorer11 の終了時期が告知される
• レンダリングが EdgeHTML な、旧 Microsoft Edge の終了
• Windows10 のリリース、 WSL による Linux との融和
• Android4.4 (KitKat) から Android11 (R) に
• ヱヴァンゲリヲン新劇場版 が完結
• 涼宮ハルヒシリーズ の新刊が出る
• etc…

5. Bootstrap4→5の主な変更点
• jQuery に依存しなくなった
• Internet Exploer のサポートが完全に終了した
• RTL対応で「右から左に書く文字」を表示しやすく
• 各種ユーティリティが改良/変更された
• コンポーネントのデザインの修正、Sass対応の強化、etc…

6. ①jQueryに依存しなくなった
jQueryが出た当時、素のJavaScriptが貧弱で辛かった
⇒jQueryは救世主
現在では素のJavaScriptが進歩し、挙動も安定してきた
⇒jQueryは容量を食うだけで邪魔
前提知識
IEサポート終了と合わせ、モダンなJavaScriptで
「動き」を表現できるようになった
ゆえに

7. ②Internet Explorerのサポートが終了
Windowsに標準バンドルされているので高シェアだった
⇒とりあえずサポートさせないといけなかった
現在基準だと規格準拠度が低く、サポートが大変
⇒IE6は当然として、IE11もかなり遅れている
前提知識
IE11のサポートが終了するので、IE11を
考慮せずWebサイトを設計できる時代へ
ゆえに

8. ③RTL対応でアラビア文字などが表示しやすく
• アラビア語などでは、文章は「左から右(LTR)」ではなく「右から
左(RTL)」に記述する
• HTML5でも標準機能としてサポートされているが、Bootstrapだと
追加の修正が必要だった
• 今回の正式対応により、わずかな修正で対応できるようになった

9. ④ユーティリティの改良
• 多くの修正が入ったので、幾つかのみ挙げる
• RTL対応に伴い、「right」「left」が含まれるCSSクラスは、「
start」「end」表記に変更された
• 「各コンポーネント間に間隔を設ける」という定番の用途向けの
Gapユーティリティーが登場
• テキストの行間を調整するためのLine Heightユーティリティ
※Bootstrapで使用するレイアウト用CSSクラスのこと