一休.com Developers Blog

一休のエンジニア、デザイナー、ディレクターが情報を発信していきます

CSSフレームワークBulmaについて

フロントエンドエンジニアのid:ninjinkunです。この記事は一休.comアドベントカレンダーの1日目の記事です。

一休.comレストランの管理画面リニューアルプロジェクトにおいて、CSSフレームワークのBulmaを導入しました。結論としては、採用して良かったと思っています。

このエントリではBulmaを選定した理由と、採用後に見えたPros / Consについて述べたいと思います。

なお今回リニューアルした一休.comレストランの管理画面の概要は以下の通りです。

  • レストラン店舗向けの管理画面
    • 店舗の方と一休スタッフの両方が使う
    • DAUは数千の規模
  • 主な用途は在庫の管理と、プラン(コース)や席の管理
  • 現在は店舗を限定してリリース済み

具体的には以下のような画面で構成されています。

f:id:ninjinkun:20191201171421p:plain

f:id:ninjinkun:20191201171439p:plain

UIフレームワークは必要か?

まずそもそもUIフレームワークは必要かという議論があります。

今回のプロジェクトにはデザイナーがおらず、エンジニアの自分がUIデザインを担当していたので、ゼロからきちんとしたビジュアルデザインを設計するのが荷が重かったというのが1つ目の理由。

また、作る画面も20画面弱というそこそこのボリュームで、担当するエンジニアそれぞれがマークアップを行っていたため、スタイルの統一が必要だったというのが二つ目の理由です。

なぜBulmaなのか?

Bulmaの特徴は以下の通りです。

  • CSSのみ、JSなし
  • Flexboxベースのグリッドシステム
  • レスポンシブデザイン対応
  • SCSSでカスタマイズ可能

今回のプロジェクトではVue.jsとサーバーサイドテンプレートのJinja2を適材適所で使うハイブリッド構成だったため、Vueベースのフレームワークはまず選択肢から外れました。

そうなるとCSSベースのフレームワークがターゲットになります。Bulma以外にもBootstrap、UIKit、Materializeなどを検討しましたが、それぞれ以下の理由で見送りました。

  • Bootstrap
    • jQuery依存
    • アップデートで苦しんでいる人を多数観測
  • UIKit
    • JSを含んではいるがサイト自体がVueで作られていたりして親和性が高そうなのはGood
    • コンポーネントが多く、分厚い印象
    • ちょっとお洒落すぎる
  • Materialize
    • マテリアルデザインは既存の管理画面のテイストと全く違うので、移行した人が混乱する可能性を懸念

また、CSSのみで実装されているフレームワークとしてはTailwindCSS、Pureなどがありますが、以下の理由で採用を見送りました。

  • TailwindCSS
    • 細かすぎる
      • マークアップが得意なら良さそうだが、サーバーサイドエンジニアには辛そう
  • Pure
    • 簡素すぎる

そして最終的には以下の理由でBulmaを選びました。

  • 必要なパーツがそこそこ揃っている
  • コードもそこそこ薄くて読みやすい
    • フレームワークは使っていくと結局コードを読む羽目になる
      • であれば極力薄いフレームワークが良い
  • Flexboxベースのレイアウトは挙動が理解しやすい
  • カスタマイズすればテイストを旧管理画面に近づけられそう

Bulmaを使った感想

4ヶ月ほどBulmaを使ってきましたが、総評としては採用して良かったと思っています。

以下に細かいPros/Consを書き出してみました。

Pros

  • VueとJijna2両方でスタイルを統一するという用途にはとても合っていた
  • ビジュアルが良い案配で成立する
    • めちゃくちゃお洒落という感じにはならないが、管理画面には合っている
  • ドキュメントが読みやすい
  • フレームワークのコードが読みやすい
  • 実装中にレイアウトが崩れても、DOMインスペクタでCSSクラスを見れば何が悪かったすぐ分かる
    • マジックがないのが良い
  • カスタマイズが容易
  • 今回の要件ではiPadからPCまでの画面サイズをカバーしたが、問題無く使える

Cons

  • コンポーネントにツールチップがない
    • 管理画面ではツールチップを使いたいところが多いので、地味に困るところ。自前で実装している
  • モーダルなどの実装は自分でJSを書いて動きを付ける必要がある
    • Vueで実装するときは全てJSなのでこっちの方が良いのだが、Jinja2で実装しているときはJSを書き出すのが億劫…
  • これはどんなUIフレームワークでもそうだが、「エンジニアが作ったUI」感がどうしても出てしまう
  • ドロップダウンがIE11対応されていない
    • 他のコンポーネントは問題無く動くので、最近追加された実装で壊れた模様

まとめ

BulmaはCSSのみで構成され、適度に薄く、適度にレイアウトが揃うので、今回の管理画面リニューアルの用途には合っていました。

管理画面リニューアルプロジェクトはまだまだ進行中なので、今後もBulmaを活用していく予定です。