2019年1月21日月曜日

CSSフレームワーク比較: やはりBootstrapが良いかも

普段は Bootstrap を使っているのですが、 いつか別のものにする事もあるかも知れないので、仕様を比較したり、考え方をまとめてみました。 Bootstrap 以外では、Semantic UI, Materialize, Bulma, Foundation あたりが有名みたいですね。
そもそもなぜ CSS フレームワークを使うかというと、面倒を減らすためはもちろんだけど、 JavaScript で操作する時に style で操作するより className で操作するほうがパフォーマンスが良いところに源流があります。 だから className ベースの記法が主流になった訳だけど、Tailwind CSS みたく小さな単位の className だけで構成すると、 CSS を二度覚えているのと変わりません。 あと何となく俺々コンポーネントを自作するのと、アクセシビリティをきちんとしたコンポーネントを作るのは、ぜんぜん違います。 ほとんどの人はボタンや navbar といった利用頻度の高いコンポーネントベースのものを使ったほうが良いと思ってます。

そして CSS in JS lover な人や、完全なコンポーネントベース指向な人は Web Components ベースを推してきますが、 JavaScript のパースより CSS のパースのほうが圧倒的に早いので、それらは基本的にレンダリングが遅くなります。 また Shadow DOM を経由するとJavaScript の操作が面倒になる。 そして完璧な動作を目指すほど CSS が膨らみやすい。 このへんの問題を考えていくと、Web Components ベースの CSS フレームワークは必ずしも最善の選択肢ではなく、 現状では従来の CSS Framework が良い選択肢になることが多いと思う。 私はまだ普通のコンポーネントベースの CSS 派ですね (2020/12/23)。 Chakra UI とか MUI とか興味はありますが、まだ私が使うことはなさそう。

コンポーネントベースなら CSSフレームワークは何を使っても良いと思ってるのですが、先に述べたように普段はBootstrap を使っています。 Bootstrap が良いなと思う一番の理由は、ドキュメントが凄く読みやすいところ。 なぜ Bootstrap のドキュメントがこんなに読みやすいか考えてみると、 頻出コンポーネントだけ使う事を意識しているからと、実際によく使い込まれているからと思っている。



もう少し定量的に比較してみます。

機能比較

その他の様々なCSSフレームワークのドキュメントをサラッと眺めた感じでは、 機能的に Bootstrap を大きく上回ってるのは Semantic UI, UIkit の2つに見える。 Foundation, Bulma, Materialize は同等くらいかな。 私が現状で Bootstrap 以外のCSSフレームワークを選ぶとしたらこの中のどれかだと思う。
他のCSSフレームワークはちょっと機能不足を感じました。 例えばNavigationすらなかったりすると、面倒臭そうだなと感じてしまう。 Bootstrapの様々な機能を他のCSSフレームワークはどうやって実装するのかなと考えながらドキュメントを読んでいると感じるのですが、Bootstrapのドキュメントは突出してわかりやすいです。


テーマ比較

お金を掛けないでも多様なテーマがあるのは、たぶん Bootstrap と Semantic UI、Bulma だけです。 以下のサイトで色々なテーマが選べます。テーマは他のフレームワークもだいぶ進化してきて、だいぶ自由度が出てきましたが、この記事を最初に書いた時は Bootstrap 以外はなかなか使いにくかった。 お金を掛ければテーマを買えるフレームワークもあるのですが、あまりお金は掛けたくない。 テーマも色々あって、ガラッと中身を変えているタイプのものは、意外と使いにくかったりします。 細かなユーザビリティやアクセシビリティが重視される昨今、自分で弄ると結構な時間が掛かってしまう。 UI は格好良く作るのも大変ですが、アクセシビリティ対応も大変なんです。

初期テーマの使いやすさも重要と思ってます。 Bootstrap は平凡だけど凄く使いやすいテーマです。 その他のフレームワークは白基調のフラットテーマが多いんだけど、そういうのは意外と使いにくいと思ってる。 平凡なサイトなら確かに格好良くて良いけど、アプリに使おうとすると見にくくなりがち。 あと TailWind CSS のようにコンポーネントを別売りにするケースも出てきているのだけど、そこまでは使い込みたくない気持ちもあります。 たくさんアプリを作ってると、コンポーネントの統一性もほしいので…。 テーマがたくさんあって、Bootstrap の代替になり得そうなのは Semantic UI と Bulma かなあ。


ファイルサイズ比較

最小化したJavaScript/CSSのファイルサイズはレスポンスに影響があるので重要です。 重いと思っていたBootstrap が健闘している。 かなり意外な結果でした。 ちなみに Bulma はCSSのみで実現しているCSSフレームワークのようで、そうなるとイベント管理が難しい。 おそらく Bootstrap とサイズ的に大差はないと思います。 UIkit は高機能さから考えるとコスパの良いサイズになってる。

  • Semantic UI (2.4.1): 894KB
  • Materialize (1.0.0): 316KB
  • Foundation (6.5.1): 291KB
  • Bootstrap (4.2.1): 188KB
  • Bulma (0.7.2): 166KB
  • UIkit (2.27.5): 159KB

ところでCSSのファイルサイズに関しては、UnCSS, Criticalなどのツールで軽減できます。 これらを利用すれば不要なCSSを削除でき、レスポンス向上を目指す事ができる。 カスタムビルドに対応していると楽なのですが、そんなに提供されてないですからね。

Bootstrap に関して言えば私は 1/10 くらいのサイズで利用できています。 より重いCSSフレームワークは不要な CSS がもっと多いはずなので、効果はさらに大きいと思う。 CSS in JS でコテコテにするよりは、最初はこちらの方向性を目指したほうが、だいたい早くなるかと思います。 テクニックについてはこちらにまとめておきました。


まとめ

この3つの比較で、私はBootstrap を今後も使おうと思いました。 次に良さそうなのは UIkit ですが、もう少しテーマが増えて欲しい気もします。 ただ実際に使ってみた事はない仕様面からの感想なので、使ってみると意外と良いかも知れません。 ファイルサイズを減らせれば Semantic UI も良いと思う。

追記 2021-07-25: この記事を最初に書いたときからは Bulma のテーマが進化してきて、Bootstrap 並に使いやすくなってきました。 Semantic UI の更新が止まってしまったので、今なら Bootstrap と Bulma のどちらか。 そんなに書き味は変わらないので、好みに分けて使えば良いと思ってます。 私は慣れの問題で Bootstrap を使ってます。 v5 でさらに軽量＆高機能にもなったので、離れる理由がない感じ。



その他細々とした比較の追記:

追記 2019-02-09: Bootstrapがなぜこんなにコンパクトなのかと思っていたのですが、設計が素晴らしいからのようです。上記のファイルサイズの比較表ではわかりにくいですが、JavaScript部分が他ライブラリと比較して凄く小さい。コードをちょっと眺めてみれば、なぜ全体のサイズがこれだけ小さくなるのか、また他より小さくなる理由がすぐにわかるんじゃないかと思います。

追記 2019-03-08: Bulma を使ってみる機会があったので、non-JavaScriptなBootstrap と比較してみました。 non-JavaScriptなBootstrap はアニメーションが動かない事で色々と動かない機能が出てきます。 その動かない機能を動かすためにはclassのtoggleなどを実装する必要があるのですが、これはBulma で書くべきJavaScriptコードとほぼ一緒だったりします。 つまりnon-JavaScriptな Bootstrap と Bulma は仕様やCSS、コンポーネントの差くらいしかない事になります。 私は Bootstrap を Vanilla JS で動かすことのほうが多いので、正直あまり差がない…。

0 件のコメント:

コメントを投稿