CSSのライブラリやフレームワークを導入する際に考えたいことをまとめました。
これから技術選定をする人にとってヒントになればと思います！
【この記事を読んでほしい人】
・現在CSSのライブラリやフレームワークの導入を検討している人
CSSライブラリとフレームワークの導入時に考えたいこと
ライブラリやフレームワークの導入は労力と時間がかかります。
選定する際の観点として参考にしてください。
- 継続的に開発できる人材をプロジェクトに配置できるか？
- ライブラリやフレームワークの導入で何を解決したいことは？
- 他のライブラリやフレームワークへの乗り換えが容易か？
人員の状況によってはライブラリやフレームワークの導入を見送ることも決断の一つかもしれません。
チームの状況に応じて左右されるところだと思います。
CSSライブラリやフレームワークの導入で何を解決したいのか？
まずは要件の定義から行います。
技術選定に慣れてない人の失敗としては先にライブラリやフレームワークの特徴を調べ始めてしまい、少し回り道になる恐れがあります…（無駄にはなりません）
ライブラリやフレームワークの導入意図は下記のような点を解決したいことが多いと思います。
- 現在運用しているサイトのCSSの詳細度がバラバラでスタイルを実装するのに時間がかかっている
- 開発者の技術レベルにバラつきがあることで記述方法の一貫性が保ちにくい
現在ならどんな選択ができるか？
現時点でたくさんのライブラリやフレームワークがありますが、ざっくり選び方のポイントをこちらもリストにしてみました！
- 学習コストはどれくらいかかるか
- 利用するJSフレームワークは何か
- ライブラリやフレームワークのメンテナンス状況や将来性
- パフォーマンスは良いか
- 状態に応じたスタイリングはしやすいか
- デザイナーはどれだけプロジェクトに関われるか
- 静的解析ツールなどのデバッグ機能を利用できるか
- デザインの自由度はどこまで許容するか
- サイト規模に対して見合うライブラリ・フレームワークであるか
上記のような項目に当てはめてみると利用するCSSライブラリやフレームワークは絞られていくと思います！
具体的な例をいくつか紹介します！
例えば、「学習コスト」に言及すると…
チームはJavaScriptの知見が浅い状況ではあるが、これまでのコーディング経験が豊富ということであれば、「CSS Modules」や「Emotion」のような比較的書き心地がCSSに近いものを選ぶのが良い
のような考え方です。
デザインの自由度に言及すると…
CSSに近い書き心地のものは、どんなデザインでも表現可能で柔軟に対応できます。
しかし、フレームワークである「TailwindCSSや「Chakra UI」などはデザインに一定制限を受けます
サイト規模に対して見合うかどうかに言及すると…
小規模のスタートアップで開発者が少数のサイトであれば、「CSS Modules」のように自由度の高いものを選んでもCSS詳細度や記述方法は統一されることになるので問題はないと思います。
しかし、大規模でたくさんの開発者を抱えるサイトであれば自由度の高すぎる技術を選定してしまうと、技術的な知識な偏りによって変更容易性はすぐに保たれなくなると思います。
なので制限を一定設けやすいフレームワークを選ぶのが良い
のようにそれぞれの特徴と実現させたいことに照らし合わせて絞り込んでいきます。
【CSSライブラリやフレームワークを導入する時に考えたいこと】まとめ
挙げた例は一例です。
技術選定はチームの状況や会社の状況、市場の変化に左右されるのが常です。
なので1年前の選択は良くなかったと評価されることもあります…
結果として仕方ない部分もあると思います…
ただ、その時に何を考えて何を検討したのかを記録として残すADRというものがあります。
プロジェクトのリポジトリに残して後の開発者にとって知見になるようにしておけることが良いのではと考えています。