実は私、少し前にCSSフレームワークはやっぱりBootstrapが良いかもと書いたし、そこに書いた事は「たくさんの機能を持つサイトでは」ブレていません。 ただ今回作ったサイトのように小さなサイトではBulmaも良さそうでした。 そこで今回は、サイトの大きさによってどのようにフレームワーク選びに違いが出るかを少しまとめてみたいと思います。
1. 小さなサイトではjQueryがボトルネックになる
高機能なサイトでも十分ボトルネックになりますが、BootstrapだとjQueryとJavaScriptのロードに少し時間が掛かります。 機能が少ない小さなサイトではあまり馬鹿にならない問題で、素のBootstrapはやや大き過ぎるのです。 CSSだけならUnCSSなどを使えばいくらでも切り詰められますが、JavaScriptはそう簡単には切り詰められません。ただボトルネックになったとしてもjQueryの資産というのは非常に大きく、高機能なUIを実現しようとするとまだまだ必要な事が多いです。 しかし将来どのようなライブラリが必要かを見切って、jQueryの出番がなさそうなら、Bulmaは十分に選択肢になり得ます。
2. BootstrapはJavaScriptなしではいくつか表示の問題がある
jQueryが遅いならJavaScriptをロードしなければ良いと思うかも知れません。 この時に一番のネックになるのが、アニメーション。 CSSオンリーのBootstrapだとアニメーションが動かない事で、例えばドロップダウンができなくなる。これによってアドホック実装が生まれてしまうのですが、実はこのコード、Bulmaで必要なJavaScriptコードとほぼ変わりません。 よく勘違いされてますが、BulmaでもJavaScriptコードは必須です。 だからよく言われる「BulmaはJavaScriptがないから軽量」というのはちょっと違うし、CSSのファイルサイズで言えばBootstrapのほうが小さいです。
ただ、だからと言ってこの部分を見てBootstrap推しという訳でもないです。 一番気になってるのは、non-jQueryなBootstrap 5でアニメーションがどうなるかというところ。 Animate.cssみたいな路線になるか、Bulma路線か、それともアニメーションを独自実装するか。現状ではあまりよくわかっていない。 色々な選択肢が考えられるけど実装スタイルは結構変わりそう。 どうせ実装が変わるなら今はどのCSSフレームワークを使っても大差ないかなとも思ったりする。
3. 小さなサイトならBootstrapほどのイベントフックはなくても良い
少し難しい事をしようとすると、コンポーネントがいくつかの状態を持つようになってくるので、どんなCSSフレームワークでもイベントフックが必要になります。 ただ小さなサイトなら複雑なイベントフックは起きません。せいぜい1-2の状態しか持たず、複雑な事をしないならBulmaで十分と、私は思います。イメージを掴んでもらうためにモーダルのON/OFFに何らかの追加処理を加えてみる例を考えてみましょう。 CSSのみで構築するのはBulmaでも無理です。 BulmaにはON/OFFのCSSは備わっているけど、実際の切替処理はJavaScriptを書く必要があります。 is-activeクラスのtoggleをJavaScriptで実行する事で選択状態を切り替える実装をし、そのイベントの監視を追加実装する事になると思われます。 タブの切り替えやパネルの切り替えでも同じような実装が必要になる。
Boostrapではshow.bs.modalなどのイベントが用意されているので、そこを監視して何らかの処理をすれば良い。 何が違うかというと、is-activeなどが隠蔽されている事、実装が若干簡素化される事、イベントの上書きのしやすさなどが異なってきます。 フックの数が増えれば増えるだけJavaScriptの実装は面倒になるので、リッチUIならBootstrapに軍配が上がるでしょう。 ただそんなにリッチにならないならBulmaの実装で十分です。
このような違いをどう考えるかで、どちらを選ぶか決めれば良いと思います。 今回は正直どっちでも良いかなという感じだったし、スマホの見た目を調整してさえくれれば十分だったので、Bulmaの感触を確かめてみようと思いました。
使ってみた印象としては、Bulmaはやや癖のあるフレームワークです。 そういうものなのだと思えば特に問題はないんですが、以下は注意点だと思いました。
- card-body のような閉じた命名規則ではないので、class 名が被りやすい (これが一番の注意点か)
- ul, liなどのリストはcontentクラス内に収めないとデフォルトではinline表示
- min-height, max-widthなどの指定がされているものが多くてPCサイトで凝った事をしようとすると割とプロパティの再指定が必要
- 要素の意味を持たせるためにはクラスを指定しないと良い感じに表示できない (ex: inputにはinputクラスといった要領)
ただ私の好みはやっぱりBootstrapかなあ…。 慣れの問題かどうかは何個かサイトを作ってみないとわからないけど、Bootstrapはサンプルベースでパパっと書いても、ほとんど変更の必要がないUIに仕上がってくれるんですよね。 デフォルトの margin, padding, width, height がかなりしっくり来るのと、以前書いたようにドキュメントの強さを感じる。
0 件のコメント:
コメントを投稿