投稿日:2024/11/06 最終更新日:2024/11/06
shadcn/uiを使ってみての個人的所感
shadcn/ui（シャドシーエヌ・ユーアイ）とは？
React開発でカスタマイズ性の高いUIコンポーネント群のことです。
Radix UIとTailwindCSSを使って書かれていることもあり、柔軟性が非常に優れているのが特徴です。
導入するメリット
Radix UI✖️Tailwind CSS
特筆すべきは優れたアクセシビリティ性とカスタマイズ性の高いRadix UIと柔軟で高い人気を誇るCSSフレームワークであるTailwind CSSを基盤としている点です。
shadcn/uiのコンセプトとして必要なものを必要なときに使えるようにするものなので、導入障壁が高くなく割とサクッと反映ができます。
また、自前で実装する手間も省け、加えてTailwind CSSを直接記述出来るため、カスタマイズの幅も割と広い点が特徴です。
コンポーネントの取捨選択
必要なものを必要なときに使えるように出来るので捨てるのも容易です。
YAGNI原則の面では相性が高いと考えられます。
デザインシステムの面
MUIも同じくデザインシステムの統合を社内で図る面では良いです。
その点を比較するとやり過ぎずちょうど使い勝手がいい！と言う感じがshadcn/uiには感じられるので、ある程度自由なカスタマイズをしたい場合にはshadcn/uiの導入が良さそうに思えます。
導入する上でのデメリット
管理保守の面
それを言ったらMUIも同じですが、カスタマイズ性に優れている分、デザインの統一性を保つためのルール化が必要になってくると思えます。
この点はあまり直に感じてない部分なので何かあれば追記したいと思います。
学習コスト
shadcn/uiはTailwindCSSの利用が前提となっている面があるため、TailwindCSSを使わないプロジェクトなり、そもそも使った事がない場合に学習コストが発生します。
正直、ある程度知っている状態でも使えてしまう部分がありますが、ある意味大規模化した場合の統一性を図るためにはTailwindCSSの理解度も必要になりそうなので、そこが自分としても課題になりそうです。
日本語資料が少ない
最近は盛り上がりを見せているshadcn/uiですが、まだMUIの方が日本語記事が多いように思えます。
個人的には公式ドキュメントも読みづらさを感じないため、あまり不都合には感じてないです。
今後
今のところはshadcn/uiを使って何かしら作ってみているので、気づきがあれば書いてみたいと思います。
