BLOG

ホームページ制作・Wordpress構築やHTML5やUnity3Dでのアプリ開発など
WEBやアプリ開発に関する技術的な内容をお届けいたします。

Bootstrap 4 alpha発表!SASS、ECMAScript6などに刷新!

Bootstrap4

Bootstrap誕生4周年となる2015年8月19日に、Bootstrap 4 alpha が発表されました。
Bootstrap4ではBootstrap3でサポートしていたIE8のサポートを打ち切り、またCSS・Javascriptもかなり刷新されているようです。

主な変更点は、Bootstrap4 ブログで発表されています。
それでは変更点などを見て行きましょう。

1.CSSのビルドシステムをLESSからSASSに変更。

LESSからSASSに変更しより柔軟なCSS構築を目指すというところでしょうか。
さらにSASSのコンパイル速度を改善する「libSass」というライブラリを利用しているようです。

2.グリッドシステムの改善

これは主にブレークポイントの追加と変更が影響しているところでしょうか。
「ポートレートのスマホって何pxだっけ?」ということは考えないで、Bootstrapのデフォルトがそれにあたるということを述べているようです。
そして、それ以上の幅をを持つデバイスに対してはem指定で換算し、
タイプとしては、xs、sm、md、lg、xlを利用できるように変更されたようです。xlが追加になっていますね。
layout」のページを見るとよくわかります。

3.Flexboxベースのグリッドシステム

オプトインで、Flexboxベースのグリッドシステムとコンポーネントが利用できるとあります。_variables.scssの$enable-flexの値をtrueかfalseにするだけで変更ができるようです。
Flexboxの説明では、下記のように説明があります。

  • vertical alignment(縦位置)の調整が簡単になる。
  • メディアクエリを利用し、各デバイスや画面解像度間でコンテンツを簡単に並べ替え。
  • カラムの高さを揃えることが簡単になる。

私が考案している、Bootstrapのセンタリンググリッド拡張でも縦位置の調整は可能です。(IE8にも対応しています)

4.wells, thumbnails, and panelsといったコンポーネントが廃止され、cardが新設。

使い分けがしにくかったからでしょうか。
wells, thumbnails, and panelsといったがcardにまとめられたといった印象がありますが、今までのコンポーネントより美しいですね。

5.CSS ResetをNormalize.cssからRebootへ変更。

サードパーティのnormalize.cssを利用するのを止め、Rebootというモジュールを新たに作成したようです。ソースをダウンロードすると/scss/_reboot.scssがあり、そこに内容が記述されています。

box-sizing:border-box;がベースになっているのがうれしいところですね。

6.Javascriptの各プラグインをすべて書き直し、ES6(ECMA Script6)ベースに刷新。

すべてのプラグインをES6ベースに書き直すことによって、Javascriptの新しい部分の恩恵を受けられるとあります。
これにより、UMD (Universal Module Definition)やJavaやC#などでもあるジェネリクスメソッドなどが利用できるとあります。
各プラグインのJavascriptのソースを見ると、const(定数)やclassが使われています。

まとめ

上にまとめた6つの項目以外にも、いろいろと刷新されているようです。Bootstrap4になりIE8サポートは打ち切られましたが、より先進的なフレームワークへ向けてアップグレードしている感があります。

また、コンポーネントのページを覗いてみると、各コンポーネントのいずれもアクセシビリティを意識したコードになっており、説明の中にアクセシビリティの言及などもありました。
先進的な部分だけでなく、こういったコンテンツのベースになるところもしっかり抑えているところがBootstrapの素晴らしいところではないでしょうか。
また、有料ですがテーマも3つ用意されており利用すればよりスムーズなレスポンシブデザインのサイト制作が可能になりそうです。
今後もフロントエンドのフレームワークとしては、スタンダードのひとつで在り続けると思われます。

Bootstrap4の正式な公開が楽しみです。