[vc_row][vc_column][vc_column_text]Bootstrap誕生4周年となる2015年8月19日に、Bootstrap 4 alpha が発表されました。
Bootstrap4ではBootstrap3でサポートしていたIE8のサポートを打ち切り、またCSS・Javascriptもかなり刷新されているようです。
主な変更点は、Bootstrap4 ブログで発表されています。
それでは変更点などを見て行きましょう。[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]
1.CSSのビルドシステムをLESSからSASSに変更。
LESSからSASSに変更しより柔軟なCSS構築を目指すというところでしょうか。
さらにSASSのコンパイル速度を改善する「libSass」というライブラリを利用しているようです。[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]
2.グリッドシステムの改善
これは主にブレークポイントの追加と変更が影響しているところでしょうか。
「ポートレートのスマホって何pxだっけ？」ということは考えないで、Bootstrapのデフォルトがそれにあたるということを述べているようです。
そして、それ以上の幅をを持つデバイスに対してはem指定で換算し、
タイプとしては、xs、sm、md、lg、xlを利用できるように変更されたようです。xlが追加になっていますね。
「layout」のページを見るとよくわかります。[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]
3.Flexboxベースのグリッドシステム
オプトインで、Flexboxベースのグリッドシステムとコンポーネントが利用できるとあります。_variables.scssの$enable-flexの値をtrueかfalseにするだけで変更ができるようです。
Flexboxの説明では、下記のように説明があります。
- vertical alignment（縦位置）の調整が簡単になる。
- メディアクエリを利用し、各デバイスや画面解像度間でコンテンツを簡単に並べ替え。
- カラムの高さを揃えることが簡単になる。
私が考案している、Bootstrapのセンタリンググリッド拡張でも縦位置の調整は可能です。（IE8にも対応しています）[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text][vc_separator type=”invisible”][vc_separator type=”invisible”][vc_column_text]
4.wells, thumbnails, and panelsといったコンポーネントが廃止され、cardが新設。
使い分けがしにくかったからでしょうか。
wells, thumbnails, and panelsといったがcardにまとめられたといった印象がありますが、今までのコンポーネントより美しいですね。[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text][vc_separator type=”invisible”][vc_separator type=”invisible”][vc_column_text]
5.CSS ResetをNormalize.cssからRebootへ変更。
サードパーティのnormalize.cssを利用するのを止め、Rebootというモジュールを新たに作成したようです。ソースをダウンロードすると/scss/_reboot.scssがあり、そこに内容が記述されています。
box-sizing:border-box;がベースになっているのがうれしいところですね。[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text][vc_separator type=”invisible”][vc_separator type=”invisible”][vc_column_text]
6.Javascriptの各プラグインをすべて書き直し、ES6（ECMA Script6）ベースに刷新。
すべてのプラグインをES6ベースに書き直すことによって、Javascriptの新しい部分の恩恵を受けられるとあります。
これにより、UMD (Universal Module Definition)やJavaやC#などでもあるジェネリクスメソッドなどが利用できるとあります。
各プラグインのJavascriptのソースを見ると、const（定数）やclassが使われています。[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text][vc_separator type=”invisible”][vc_separator type=”invisible”][vc_column_text]
まとめ
上にまとめた6つの項目以外にも、いろいろと刷新されているようです。Bootstrap4になりIE8サポートは打ち切られましたが、より先進的なフレームワークへ向けてアップグレードしている感があります。
また、コンポーネントのページを覗いてみると、各コンポーネントのいずれもアクセシビリティを意識したコードになっており、説明の中にアクセシビリティの言及などもありました。
先進的な部分だけでなく、こういったコンテンツのベースになるところもしっかり抑えているところがBootstrapの素晴らしいところではないでしょうか。
また、有料ですがテーマも3つ用意されており利用すればよりスムーズなレスポンシブデザインのサイト制作が可能になりそうです。
今後もフロントエンドのフレームワークとしては、スタンダードのひとつで在り続けると思われます。
Bootstrap4の正式な公開が楽しみです。
[/vc_column_text][/vc_column][/vc_row]
