Ruby on Rails（以下、Rails）は非常に人気のあるWebフレームワークですが、フロントエンドのデザインにも多くの選択肢があります。
この記事では、Railsでよく使われるCSSフレームワークのメリットとデメリットについて詳しく解説します。
目次
前提
この記事で話す内容は、cssbundling-railsというgemで導入できるCSSフレームワークに限っています。
詳しくは、cssbundling-railsをチェックしてみてください。
具体的には、以下のライブラリについて調べてみました。
- Tailwind CSS
- Bulma
- Bootstrap
- PostCSS
- Dart Sass
cssbunding-railsについて
RailsでCSSをバンドルおよび処理するためのgemです。
このgemは、新しいRailsアプリケーションで選択したバンドラーを簡単にセットアップできるインストーラーを提供しています。
CSSフレームワークの調査
Tailwind CSS
メリット
公式サイトから
- HTMLだけで完結できる(デザインにあまりこだわらなければ)
- クラス名を考えなくても使用できる
- 使わないCSSを排出しない
- 本番用にビルドする際に、未使用のCSSをすべて自動的に削除するため
- 使っていないCSSはビルドしないためパフォーマンス良くなる
- レスポンシブ対応できる
- tailwind.config.jsファイルを使って独自のデザインシステムを構築できる
- 色やフォントなど…
私の見解
- githubを見る限りメンテナンスはされてそう
- ユーザー数、ドキュメント多い
- たくさんの人に使われているため、Qiita等のブログ記事もたくさんある
@applyや@screenなどによってCSSの文法も拡張できる
デメリット
私が実際に使ったことがあるため、共感できる部分を列挙しました
- クラスの長いリストで混乱することがある
- 下記のようなコードはHTMLだけで、どのようなスタイルが適用されているのか、分かりずらい
- ※CSSだと、CSSファイルを見れば大体どのようなスタイリングか理解できる
<a href="#" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Log in</a> - 下記のようなコードはHTMLだけで、どのようなスタイルが適用されているのか、分かりずらい
- クラス名やスタイルを調べるのが面倒
- クラスをある程度覚える必要あるかも
- かなりの量があるので、覚えるのは厳しそう
- 私的考え: 1つのタグにつき大体4つくらいのクラス名が必要になりそう
- クラスをある程度覚える必要あるかも
- CSS の基本的な使用方法を理解してないと難しい
参考
bootstrap
メリット
- クラス名を考えなくても使用できる
- マークアップが苦手な人でも使用可能
- 多く開発テンプレートの配布されている ref
- 管理画面などすばやく作りたい画面に向いている
- 開発においてデザイナーがいないような案件
- メンテナンスされている
デメリット
私が実際に使って感じたデメリットを書きました。
- デザインが複雑な Web サイト開発には不向き
- Bootstrapのjs使うにはjsの読み込みが必要
- サイトが重くなる
- Bootstrapみのあるサイトになる
- クラス名やスタイルを調べるのが面倒
- スタイルのオーバーライドが難しい
- !importantを使っている部分があるので、難解になった(jQuery→JavaScriptのアップデートで変わっているかも？)
- デザインのカスタマイズ性が低い
- ボタンのスタイルなどあらかじめ用意されたものを使っていく
- デザインにこだわりがなければ使っても良さそう
- tailwindの方が細かくスタイルを指定できる
参考
https://knowledge.cpi.ad.jp/cms/bootstrap/
https://github.com/twbs/bootstrap
bulma
bulmaは使用経験がないため、この記事を参考にメリット、デメリットを列挙しました。
メリット
- CSS Onlyなフレームワーク (JSの読み込み不要)
- デザインがシンプル
- メンテナンスされている
- クラス名がわかりやすい
- クラス名の先頭に
is-やhas-が付いていたり、セクションなら.section、タイトルなら.title
- クラス名の先頭に
デメリット
- CSSのみで軽量と印象付けられるが、あまり他のライブラリと変わらない
- クラス名は単純だが、グローバルスコープで定義されている ref
- スタイルが競合する場合がある
- ドキュメント&サポートが不十分
- 他のフレームワークに比べたら不十分
参考
https://github.com/jgthms/bulma
postcss
プラグインアーキテクチャーなCSSを変換するために書かれたnode.js製のパーサー
postcssは使用経験がないため、この記事を参考にメリット、デメリットを列挙しました。
PostCSS 自体は、CSS を加工しやすいようにパースし、結果を CSS として出力する機能のみ提供する。
メリット
公式サイトより
- 必要な機能(プラグイン)を自分で選んで組み合わせられる。
- Sass にはない便利な機能を追加できる。
- カスタマイズできる
- パフォーマンス良い
- stylelintが使えてエラーを確認できる
- モダンなCSS使える
- メンテナンスされている PostCSS Preset Env, lets you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments, using cssdb. PostCSS Preset Envは、cssdbを利用して、対象となるブラウザや実行環境に応じて必要なポリフィルを決定し、モダンなCSSを多くのブラウザが理解できるように変換することができます。
デメリット
- プラグインを選定する必要があるため、環境構築コストがかかる。
- 周りに知っている人が少ない。
- チームで利用する場合、自由に何んでもできるためルールづくりが必要。
- 日本語のリソースがSCSSよりも少ない
- プラグイン導入しすぎると読みにくくなりそう
参考
https://github.com/postcss/postcss
sass
メリット
このサイトを参考に記載しました。
- ドキュメント・ユーザー多い
- メンテナンスされている
- 変数やmixinの使用ができ、効率よくCSSを記述することができる - CSS記述量を減らせる
- 入れ子で書けるため
私の見解
- デザインを再現できる
- 0ベースで書いていくため独自のカスタマイズが可能
デメリット
フレームワークと比べれば自力でコードを全部書かないといけなくなるため、慣れていない人であれば時間がかかってしまう
- スタイルの修正が時間かかる可能性がある
- デベロッパーツールで修正したいところのスタイル名を探して、SCSSファイルの編集になってしまう
- 学習コスト高い
- マークアップの知識が必要になる
- クラス名をつける手間がかかる
参考
まとめ
この記事では、Railsでよく使用されるCSSフレームワーク—Tailwind CSS、Bootstrap、Bulma、PostCSS、Dart Sass—のメリットとデメリットを詳細に解説しました。
最終的に、どのフレームワークを選ぶかはプロジェクトのニーズ、開発速度、そしてメンテナンス性を総合的に考慮する必要があります。
この記事が、その選択をする上での参考になれば幸いです。