レイアウトをTailwind CSS中心にして、コンポーネントライブラリに依存させないようにすると、後々置き換えやすくなりそうだし、楽なケースがありそうだよという記事です。
なお、スタイリングとレイアウトを以下のように定義します。
- スタイリング: ボタンやチェックボックス、アイコンなどのUI要素。
- レイアウト: ページの中でのレイアウト。margin、padding、flex...など。その他、modalなども。
将来的に置き換えしやすいように作る。
新規開発を行う際に、独立したプロダクトであれば色々選ぶことができますが、様々な事情でそうもできない場合があります。例えば、私の場合、メインプロダクトのUIと揃えるためにsemantic-ui-reactを使うことになりました。ただ、中長期的にみると置き換え可能性もそれなりにありそうです。
メインプロダクトの開発メンバーもちょっと不満を持っていますし、私も、オプションが少ない点が気になっています。
例えばチェックボックスです。
https://react.semantic-ui.com/modules/checkbox/#types-checkbox
<Checkbox toggle /> と書くことで、トグルにできます。これはいいのですが、サイズをオプションで変えられないっぽいです...transformで小さくすることもできると思いますが、ちょっとトリッキーな感じがするので、自作しよっかなと思ってます。その他にも、いいサービスにしたくて色々凝ったことしようとすると、自作やオーバーライドするものがそれなりに出てきそうです。
そうすると、結局自作中心とするか、他のコンポーネントライブラリを使うかということになりそうです。移行の可能性がそれなりに高いので、semantic-ui-reactに依存しすぎないようにスタイリングだけ参考にして、レイアウトではTailwind CSSで作るという方針で進めることにしました。
semantic-ui-reactにもレイアウトができるコンポーネントがあります。
例えば、Gridです。
https://react.semantic-ui.com/collections/grid/
ただ、ここでGridを使ってしまうと、やっぱり他のコンポーネントライブラリを使いたいとか、すべて自作したいとなったときに、全面的にレイアウトをやり直す必要が出てきてしまいます。やってみたら以外とすぐかもしれないですが、追加開発もあるなかでその判断をチームがしやすいかというと、ちょっと難しい気がします。
一方、レイアウトをコンポーネントライブラリに依存しないようにすると、例えば、CheckBoxをコンポーネントライブラリを使わずに自作にするとか、影響範囲を限定しながら進めていくことができます。
Tailwind CSSが好きではない人の中で、クラス名が長くなることを指摘する人もいると思います。ただ、複雑なスタイリングであれば長くなりますが、レイアウトだけであればたいして長くなりません。
CardくらいであればTailwind CSSで簡単に作れるので、こちらもTailwind CSSで作って、その中の各要素をコンポーネントライブラリを使うのがいいと思っています。その他、modalはreact-modal使うとかもいいかもしれません。まあ、modalを作り直すくらいであれば工数たいしてかからなさそうなので、この点、コンポーネントライブラリにあったら使うのもありかもしれません。
ビルドサイズは気にしておこう。
スタイリングとレイアウトを分離する場合、それぞれのビルドサイズも気にしておきましょう。UIライブラリは何を選ぶか次第ですが、余分なものをとってこない書き方がそれぞれあると思います。
Tailwind CSSは、この記事がかなり参考になりそうです。Purgeオプションを使ってあげるとかなり小さくなりそうですね。