この記事はニーリーアドベントカレンダー2024の10日目の記事です。
はじめまして、Nealleのデザイナー音部です。
アドカレでデザインチームのことを書くつもりが、全然思いつかずにフロントエンドの話をします。 タイトルにある通り、shadcn/uiというモノの紹介と、実際に使ってみたレポートです。
shadcn/uiとはそもそも何なのか?
shadcn/uiは、2023年のJavaScript rising starで総合1位に輝いたReactエコシステム(?)です。
2位は2022年王者のBunでしたが、10k以上の差をつけて1位に輝いていて、アツいといっても過言ではなさそうです。 最初はMaterial UIやChakuraなどと同じようなUIライブラリかと思っていましたが、どうやら「コピペで使えるUIコンポーネント集」のようです。
アプリにコピペできる、アクセシブルでカスタマイズ性の高いコンポーネント。
と記載があります。
一般的なUIライブラリでは、npmからパッケージを追加し、それを使いたい場所でimportすることで任意のUIを使うことが出来ます。
shadcn/uiでは基本的に コードをコピペしてコンポーネントを作る→それを読み込む、というような使い方が提供されています。
依存はTailwindcssと、一部のコンポーネントではRadix UIだけと、かなりシンプルな構成です。(TypeScriptが基本だが、JavaScriptでのコードも提供されているらしい）
何が良くて何が良くないか等は後で話すとして、まずは実際に使う方法を紹介します。
※そもそもどういうモチベーションでコレが作られているのか、詳しい内部の設計や実装はどうなっているのか等は、トテツモナク詳しく解説している人がいたので気になるったら読んでもよいかもです。（読み物として面白かった）
shadcn/uiの使い方
shadcn/uiは、Typescript+tailwindcssが導入されているプロジェクトであれば、CLI（npx）経由でコンポーネントを追加していくことが出来ます。 React周りの有名どころフレームワークには公式でそれぞれのインストールの詳細方法が用意されていますが、そんなに特別な用意は必要なさそうです。
- (初回のみ) 設定ファイルを作成するために
npx shadcn@latest initを実行する。（スタイルや色のベースを選べるっぽいです）
初期化の実行結果 - 利用したいコンポーネントをそれぞれ追加するために
npx shadcn@latest add buttonを実行する（これでcomponentsフォルダ内にbuttonコンポーネントが出来上がります）
ボタンコンポーネントを追加したところ 
追加されたボタンコンポーネント
あとは作成されたコンポーネントを、自分で作ったものと同じノリで別の場所から呼び出してあげるだけで簡単に使えます！
まあ簡単！
ちなみに npx shadcn@latest add コマンドで複数のコンポーネントを選択して一気に追加することもできるみたいです。
導入や利用の方法にはクセがなく、紹介も一瞬で終わってしまったのでココからはshadcn/uiのイイところを紹介していきます。
shadcn/uiのイイところ
まずは前述のとおり導入も利用も簡単な所です
TypeScriptなんて何処にでも入っているでしょうし（過激）、Tailwindも最近では多くの環境が採用している（入れたとしても他のライブラリなどと競合はしない）のではないでしょうか。面倒な依存関係の解決等を行わなくてよいのはとてもGoodポイントです（自分はVuetifyの恐ろしすぎる依存を解決するために3日を消し去ったことがあります）。
また利用においても、TypeScriptが使われているので基本的に型を見に行けば使い方がわかりますし、公式のDocsにも使われ方が例示されています。
そして何と言ってもカスタマイズの容易性
コンポーネントのファイルが生成されるため、見た目や機能のカスタマイズは自由自在です。
UIライブラリの機能で提供されていなかったから無理やりラッパーをつくったり、!ImportantでunscopedなCSSを記述したり、なんかこのコンポーネントだけ「違う」のでスクラッチで書き直したり、はたまた内部実装を読みに行ってほぼパクリ若干機能違うコンポーネントなんかをつくったりは一切不要になります。
気に食わなければ直せばよいだけです。最高です。かなり。
（開発者の意図とはおそらく違うが）見た目があまりにも良い
自分がshadcnを大推ししている理由の7割ぐらいがコレです。
shadcnは、デザインシステムのコード化などを行う際に重宝するシステムを目指して作られたものかと思います。そのカスタマイズ性の高さからも見えるように、基本的に自由にカスタムして使ってくれ、というような意思を感じるのですが、デフォルト状態でもshadcnの見た目はめちゃめちゃに良いです
もちろんほかのUIライブラリたちもデザインはしっかりしており、有名どころのライブラリではUIデザイン文脈におけるデザインの完成度はとても高いと言えるでしょう。
しかし！ダサいのです！！！
Material UIなどのMaterial Designに準拠したライブラリ群は、基本的に一目見て、あ～マテリアルやな、、、とわかるように、デザインにおける意匠の部分はほぼ無く、使い古されデザインであることが殆どです（というか全部同じような見た目をしている気がする）。
もちろんマテリアルデザインは悪いものではないのですが、本来それはデザインの手法です。
ライブラリ化された「マテリアルデザインを踏襲したUI群」はUIとしての機能的なデザインには特化しているものの、意匠はほとんど含まれていない（もしくは少し古い）のです。（Material3などはイイと思いますが、それが反映されているライブラリも多くはない Adopt Material Design 3 / Material You · Issue #29345 · mui/material-ui · GitHub ）
しかし簡単に使えるUIライブラリとして流行った結果、個人開発やデザインにリソースを多くかけられないアプリケーションは全部（言い過ぎ）！同じ！見た目に！なってしまいました。
（もちろん管理画面などでは意匠なんかよりUIとしてちゃんとしていればそれでイイことも多いのでそういう使い方はアリだと思います）
そんな中！shadcnではデフォルトで、もちろんUIデザインが必要としている中核的な部分は維持しつつもある程度近代的でおしゃれ（かなり主観）なUIが提供されています。 （好みもありそうですがデザイナーがオシャレだと思うのでオシャレってことにしておいてください）
かなり最高です。自分はこれだけで個人開発を最近全部shadcn/uiで行っています。
以下は自分の個人開発で、ほぼカスタマイズしていない状態のshadcn/uiを利用して作ったモーダルです。かなりまともな見た目をしていますが実装は十数分です。
最後、世界で注目されたという事。
最後はプロダクトの本質的なイイポイントではありません。
shadcn/uiは世界中で注目されて利用者も急増したことにより、本体のアップデートや周辺のエコシステムに大きな推進力を得ることが出来ました。
その最たる例としてv0.devなどがあります。
これは、Vercelの提供する生成AIで、ReactベースのUIを、tailwindやshadcn/ui を用いて生成することが出来ます。 ChatGPTなどのAIと同様に、チャット形式で実現したいUIを伝えると、コードが生成されてプレビューまで見ることが出来ます。（どうやらFigmaのインポートなんかもできるようです）
もう日本語を完成されたUIのコードへ変換できる未来が現実のものとなっています。
詳しく書いている記事があったので紹介
このように「流行った」というのも、関連情報やエコシステムの進化においてかなりGoodなポイントになっているのではないかなと思います。
shadcn/uiの微妙な所
イイところは色々紹介できたので最後に微妙なところも少し紹介します。といってもあまり無いのが正直な感想です。
まだまだ発展途上
コンポーネント数などは、成熟しきったライブラリと比べるとまだまだ少なく、コレ無いんだ～となることもたまにあります。 ただ、活発に議論や開発は進んでいるようなので今後に期待（暇あったらコントリビュートもしていきたい）といった感じです。
名前が覚えられない
一生名前が覚えられません。何度も使っているのですが、そもそも読み方が良く分からないので毎回Googleにschdaneuiだのscadnuiだのchadnuiだの入れています...（出てくるけど）
読み方知ってる人がいたら教えてください。
最後に
使うの超簡単でおしゃれなので個人開発では絶対に使いましょう。特にデザインにこだわりのないエンジニア。
そしてデザインシステムのコード化という本来の目的で使ってみたさもあるので、、、どうですか...? （to Nealle アーキテクチャチーム）
あとデザイナー採用中です！！！！気になる方は是非ご応募ください！
