windyakinってなんて読む

うぃんぢゃきんではない

Bootstrap v4.0.0-alpha.2を触ってみたよレポート

Bootstrap

f:id:windyakin:20151225222804p:plain

この記事は Bootstrap Advent Calendar 2015 25日目の記事です。

2015年8月に Bootstrap v4.0.0-alpha.1 がリリースされ、コリスなんかでも取り上げられて話題になっていました。先日12月8日には Bootstrap v4.0.0-alpha.2 がリリースされています。この Advent Calendar でも幾度と無く紹介されている Honoka についてもv4には対応しようと思っているのでこの機会に触ってみることにしました。

おおまかな変更点

LESSからSassになった

およそ3年半ぶりになるメジャーアップデートということで、本当に様々な変更が行われています。中でも一番大きいのはLESSをやめてSassに移行したことではないでしょうか。もともとBootstrapでもSass対応はしていましたが、メインはLESSであり、Sassはその変更に付随する形でのサポートでした。Honokaは（私の都合で）Sassで開発されていたので、Sassのコードをつかっていたのですが、v4からは一元的に管理できるというわけですね。素直に歓迎したいと思います。

単位系がpx/emからremに

CSSの標準単位系がpxやemからremになりました。remはフォントの基本サイズを1remとした単位で、フォントサイズが16pxならば16px==1remとなります。これによりIE8が切り捨てられることになります。ちなみにIE8のサポートは2016年1月12日までだそうです。というわけで皆様、Modern.IEの仮想マシン環境を投げ捨てる準備をしましょう。

対応しようとしてわかったこと

ここまではリリースノートやブログでも書いてあるような話でしたが、ここからはHonokaのv4対応の際やv3用に作ったHTMLからv4に変更しよとした時に気づいた点です。

フォントサイズが16pxになった

いままでBootstrapはデフォルトのフォントサイズは14pxでしたがv4からは16pxになるようです。この「フォントサイズが16px」という点は、Honokaの重要なアイデンティティーの一つだったのですが、今回の変更でデフォルトのBootstrapでもそれなりに表示されるようになるようです（ただし当然ながらfont-familyに日本語フォントの指定はない）。

f:id:windyakin:20151225214817p:plain

s/img-responsive/img-fluid/g;

Bootstrapにおいて画像のレスポンシブ化を行ってくれる.img-responsive。おそらくBootstrapでグリッド・システムの次にお世話になっているクラスかと思います。ですが、v4では.img-fluidに変更されました。v3用に作ったHTMLから対応させようとすると、画像ごとにやらないといけないので地味に面倒くさかったです。というわけで皆様sedコマンドをご用意ください。

さらば Panel/Thumbnails。こんにちは Card。

f:id:windyakin:20151225215542p:plain

コンポーネントとして提供されている Panel や Thumbnails 。ウェブサイトっぽさをでっち上げる際に結構便利なのでよく使っていたのですが、両者ともv4から新しくできたCardというコンポーネントに集約されます。とはいえCardでも今までどおり画像の表示やパネル表示はもちろんのこと、は画像を背景に埋め込むこともできるようになったりと、便利さは増しているように思います。

default じゃないよ secondary だよ

Bootstrapっぽさが出てしまうと言っても過言ではないコンポーネントのボタン。今まで標準の白色のボタンであればクラスに.btn-defaultを指定していましたが、v4からは.btn-secondaryになります。何が2番目なのかよくわかりませんが、これも移行の際には、.img-responsiveと共に要注意点だなと思います。

Headingの上部マージンはなくなりました

f:id:windyakin:20151225221931p:plain

<h1>とか<h2>などのHeading系のタグ。今まで何も指定しなければ、上部に1emほど余白が追加されていたのですが、v4からはなくなりました。ページの最上部に付けるとなると必要ない余白だったのですが、いざなくなると今度はページの中間にあるHeadingがくっつくようになってたりします。最初は気づかなかったのですが、よくよく見比べると「あれ？余白少なくね？」ってなったときに気づいた原因は半分以上がこれです。

Spacingを使いこなせるものがv4を制す！

f:id:windyakin:20151225220156p:plain

Bootstrap v4では余白を作る用にSpacingというユーテリティ系クラスが追加されました。今まで別途CSSで指定するしかなかったpaddingやmarginといった余白についての指定がHTML側のクラス指定で柔軟に行えるようになります。

クラスの命名規則としては .{property}-{sides}-{size} ということらしく、propretyには margin であればmを、padding であれば p を指定し、sodesはその余白を付ける方向、sizeで1remを基本とした倍数を指定します。これを使いこなせればいちいち独自のクラスを付けてCSSに余白を指定するといった手間も省けるので、強くなれそうですね。

navbarはまだ開発中

サイトに欠かせないナビゲーションバーですが、現段階ではかなり劣化しています。まずレスポンシブ対応が滅茶苦茶です。

これについてはIssueが立っていて、小学生以下の英語力で読んでみたのですが、一応直そうという気はあるっぽいです。

Navbar-nav isn't exactly mobile friendly · Issue #17250 · twbs/bootstrap · GitHub

あまりにひどいのでNavbarに関する部分のソースコードを読んでみたのですが、まだ各所にマジックナンバーがあり、かなり苦労している感じが伺えました。

まとめ

というわけでざっくりでしたが Bootstrap v4.0.0-alpha.2 を触ってみて気づいた点を列挙してみました。Bootstrap v3系からの移行はそれなりの工数が必要になりそうです。また私はよくオリジナルのCSSを書く際にも、Bootstrapの変数が格納されたファイル _variables.scss から値を引っ張ってくるのですが、これを使っているとなるともはや手のつけようがないぐらいには激変しています。単位がremになっただけでも、対応が大変ですが、$padding-base-horizontal(水平余白の基本単位) や $line-height-computed(1行の高さをpxで取得できるやつ) は無くなってしまいました。その穴埋めは結構大変だと思います。

まあいずれにせよまだアルファ版ですし、じっくり動向を見守っていきたいと思います。

Bootstrap Advent Calendar 2015 ありがとうございました

Bootstrap Advent Calendar。流石にニッチ過ぎたため、全日程埋めることはできませんでしたが、購読していただいた方々、また記事を書いていただいた皆様ありがとうございました。来年は「CSS」とかぐらいにもうちょっと幅の広いAdvent Calendarにしたいと思います。というわけでまたお会いしましょう！では！