個人用のアプリを作ってたところ「shadcn/ui」に出会ってテンション上がったので記事にまとめてみました、さざんかです
shadcn/ui とは？
公式サイトより
This is NOT a component library. It's a collection > of re-usable components that you can copy and paste > into your apps.What do you mean by not a component library?
I mean you do not install it as a dependency. It is >not available or distributed via npm.
ざっくり翻訳
これはコンポーネント・ライブラリではありません。あなたのアプリにコピー＆ペーストできる再利用可能なコンポーネントのコレクションです。
コンポーネント・ライブラリではないとは依存関係としてインストールしないという意味です。npm経由で利用することも配布することもできません。
すなわちMUIなどと違ってnpm installだけでは使えないみたいです
(この意味を理解して使えるようになるまでに2時間かかった...)
どんなUIが作れるのか？
公式サイトにデモが載ってるので一度触ってみることをお勧めします
html/cssを直に書く実装してしてこなくてReact初心者だった自分は感激しました
詰まったところ
1. components.jsonとはなんぞや
前述の通りshadcnはnpmだけで動くわけではないのでいろいろ設定してあげる必要があります
shadcn/uiではcomponents.jsonで諸々管理しています
(おそらくnodeのpackege.json的な位置どころ...?)
このファイルがないと何もできないので次のコマンドで作ってあげる必要があります
npx install shadcn-ui@latest init
いろいろ聞かれるので自分の環境に合わせて設定してください
2. プレフィックス...?
ERROR in ./src/components/ui/button.jsx 7:0-33
Module not found: Error: Can't resolve '@/lib/utils' in '/usr/src/app/frontend/src/components/ui'
ERROR in ./src/components/ui/input.jsx 5:0-33
Module not found: Error: Can't resolve '@/lib/utils' in '/usr/src/app/frontend/src/components/ui'
ERROR in ./src/components/ui/label.jsx 9:0-33
Module not found: Error: Can't resolve '@/lib/utils' in '/usr/src/app/frontend/src/components/ui'
ERROR in ./src/components/ui/sheet.jsx 10:0-33
Module not found: Error: Can't resolve '@/lib/utils' in '/usr/src/app/frontend/src/components/ui'
ご存じの方からすると「何言ってるんだこいつ...?」と思われるかもしれませんが、import文で使用されている「@/」を参照できるように設定が必要です
（Dockerから対象のERRORが出たときは泣きたくなりました）
{
"compilerOptions": {
"baseUrl": "./src"
}
}
pathsを設定する方法が一般的です
この方法では関連するファイルのimport文すべてからプレフィックスを取り除く必要があります
今回は個人用かつ動けばいいで開発したのでこのまま進めました
jsを使っている方は「jsconfig.json」、TypeScriptを使っている方は「tsconfig.json」で上記のように設定してあげる必要があります
終わりに
使い始めるまでにつまずいたところがありましたが使いこなせば手軽にセンスのいいUIが作れそうです
Dockerコンテナのビルドに時間がかかっていたのでマークダウンへの慣れもかねて記事を書いてみました
ここまでお付き合いいただきありがとうございました！