株式会社クインテット デザイナーの小貫です。
折角サービスを作った事だし自分でも活用してみよう…という訳で、何を書くか考えたのですが、「Pando”パンドゥ”開発秘話」として主にフロント側で使っているライブラリの紹介や苦労した点などを、お伝えできる範囲で記事として書いていきたいと思っています。
第一弾となる記念すべき記事は、CSSフレームワーク「Pure」の紹介から。
当サイトPando”パンドゥ”では、サイトコーディング時にBootstrapではなくPureというCSSフレームワークを採用しています。
なぜ流行りのBootstrapではなくあまり見慣れないこのフレームワークを選んだのか……それには数か月前のミーティングまでさかのぼる必要があります。
将来を見据えて軽く、最小限のものを
Pando”パンドゥ”コーディング前のミーティングにて、土台になるCSSフレームワークは必要だよねという話に。
そこで提示されたのは……
- レスポンシブではないのでその辺の機能は不要(レスポンシブ機能を分離できるものにしたい)
- できれば採用実績があったほうがいい
- Bootstrap以外で模索したい
- SASSの利用を大前提とする
- 運用しやすいこと
- 軽量であること
という条件でした。
当初自分は「Bootstrapでいいんじゃない?」という思考停止に陥っていたのですが、せっかくの真新しいサイトなので考えを改め、要件にあうものを探すことに。
検討したものの一部
Foundation
- 利用者数の多さには秀でる
- 多機能だがBootstrapと同程度には重い
- リファレンスに日本語のものが少ない
Semantic UI
- 記述方法は分かりやすそう
- ただ重い
- クラス名が冗長になりやすい
UIkit
- アイコンが豊富
- クラス名の付け方はBootstrapより良い
- レスポンシブ関連機能がウリだけど今のところ不要
Pure
- 軽量(gzip時で3.5KB)
- グリッド、フォーム、ボタン、テーブルといった基本的なものは揃ってる
- 開発はYahoo! YUIを作っていたチーム
結論:Pureにしよう!
上記のフレームワークをはじめ、様々なものを検討した結果、要件にあうのはPureではないかなと考えました。
もちろんカスタマイズしてサイズは肥大化していくとは思いますが、ベースが軽い事はいい事です。早速使ってみようと思ったのですが、思わぬ罠が…
問題発生:SASS対応版がない!
Pureは軽量なためか、そもそもCSSのみでSASSやLESSなどのCSSプリプロセッサ対応ファイルが存在しません。
そこでコードを修正する必要がでてきました。
主に個別に16進数で色指定がされていた箇所やmargin,padding関連の変数化、入れ子になっているプロパティの記述方法をSASS準拠に…等の調整を行い、拡張子を.scssへ変更してあります。
対応してから知ったのですが、Pure-SassなるSASS変換版も存在するようなので、お手軽に使うならそちらでもよかったかもしれません。
SASSに対応させた事で、弊社で使用している独自のフレームワークの変数やクラスを併用することが可能になりました。こうしておくことで、他人がコーディングを行う際も割とスムーズにコードに慣れることができるのではないかと思います。
Pureのココがいい!
使って分かったPureのいいところ。
24 or 5グリッドはかなり細かい調整がきく
Bootstrapのグリッドシステムは全体で12になるようにグリッドの幅を考える必要がありましたが、Pureは倍の24 or 5。
細かい調整が効くので、微調整も容易です。
余計な事をあまりしない
基本的に最低限の装飾のみしか実装していないので、カスタマイズしやすいというのも気に入っています。
Pureのココがちょっと…
使ってみてつまづいたり、改めてここはどうにかしたいと思っているところ。
CSSを自作する部分が結構増えていく
基本がシンプルがゆえに自分で追加するCSSが増えます。
それでもコンパイル後の容量はクインテット他サービスのものより軽量なのですが、将来を考えると整理はしていきたいところです。
Bootstrap付属のjsは似ているものを独自に入れる必要あり
jsは付いてないので、用途に応じて入れるjsを見極めて導入する必要があります。
今後の活用法など
そもそもPureとは「軽量のCSSモジュールで、どんなWebプロジェクトにも導入できる」を目標に作られているようです。
レンダリング速度を最優先したい商材系のブランチサイトなどにも向いているかと思いますので、脱Bootstrapで高速・軽量なサイトを作る際の候補の一つとして活用していきたいと思います。