こんにちは。LEXIAの齋藤です。
最近、Web制作の現場やSNSで「shadcn/ui」という名前をよく耳にします。
新しいライブラリが出るたびに「また覚えることが増えるのか…」と、少し身構えている僕ですが。
実際に触ってみると「これは今までのものとはちょっと違うかも？」と思えるポイントがいくつかありました。今回は、難しい技術的な話は一旦置いておいて、shadcn/uiの「何がそんなにいいの？」という疑問を、現場の目線で噛み砕いてお話しします。
この記事でわかること
- shadcn/uiと従来のUIライブラリは何が違うのか
- なぜ「インストール」ではなく「コピー」するのか
- 初心者がshadcn/uiを選ぶメリット・デメリット
最初は何がすごいのかよくわかんなかった
正直に言うと、最初は「Material UIやChakra UIみたいに、たくさんのパーツが入ったパッケージなんだろうな」と思っていました。
でも、実はこれ、ライブラリというよりは「自分たちのプロジェクトの中にコンポーネントを配置して管理するもの」なんですよね。[参考：shadcn/uiとは?インストール方法や使い方をわかりやすく解説 - Udemy メディア]
従来のUIライブラリは、インストールするとnode_modulesという、普段あまり中身を触らない場所にパーツが格納されることがほとんどでした。でも、shadcn/uiは違います。必要なボタンやカードのコードを、自分のプロジェクトフォルダ内に「ペタッ」と配置して使うイメージです。[参考：【初心者向け】shacn/uiを初めて使うときに知りたいことまとめ - らくらくエンジニア]
.webp)
最初は「自分でコードを置くなんて手間じゃない？」とも思ったんですが、逆に言うと「自分の環境で自由にコードを書き換えられる」ということでもあります。
自由度が高いから、カスタマイズで迷子にならない
UIライブラリを使っていると、「ここの余白をあと少しだけ変えたいのに、ライブラリの制限でどうしても変えられない…！」と頭を抱えることがよくあります。
その点、shadcn/uiは自分のプロジェクト内にコードが存在するので、CSS（Tailwind CSS）を使って、自分の思い通りに調整できます。これは、細かいデザイン調整が必要な現場には本当にありがたいです。
あと、個人的にいいなと思ったのが、「必要なものだけ選んで入れられる」ところです。
ボタンが1つ欲しいだけなのに、大量のライブラリをインストールしなくていい。プロジェクトが軽量になるのは、Webサイトのパフォーマンスを考える上でも、嬉しい。[参考：Not コンポーネントライブラリを謳う shadcn/ui というコンポーネント集について - Zenn]
shadcn/uiを使うときの注意点
ただ、もちろん「これさえあれば完璧！」というわけでもない。
実は、カスタマイズにはTailwind CSSの知識が少し必要です。でも、逆に言えばCSSの学習にもなるので、初心者のステップアップにはちょうどいい練習台かもしれませんね。[参考：]shadcn/uiを使ってみての個人的所感 - WEBの寺子屋]
もし「CSSはあまり触りたくない、全部自動でいい感じにしてほしい」という場合には、もう少し伝統的なUIライブラリの方が楽かもしれません。
もちろん、最初から全てを使いこなす必要はありません。僕も、最初は必要なボタンを1つコピーするだけで15分くらい格闘していました（笑）でも、その「自分の手で組み立てる」過程こそが、shadcn/uiが多くの人に選ばれている理由なのかもしれません。
ちょっと話が逸れますが、最近はAI（v0など）がコードを書いてくれることも増えましたよね。shadcn/uiはプロジェクト内にコードがある分、AIが中身を読み取って提案してくれやすいので、AIとの相性がすごくいいと感じています。[参考：shadcn/uiはなぜAIと相性が良いのか？MUIと比較して見えた違い - Qiita]
まとめ
- shadcn/uiはコンポーネントをプロジェクト内にコピーして使う形式
- だからこそ、デザインのカスタマイズがめちゃくちゃ自由
- 必要なパーツだけ選べるから軽量
最初は「コードをコピーするなんて面倒じゃない？」と思っていたんですが、実際に触ってみると、自分のプロジェクトに馴染ませやすくて、とても使い心地がいいツールだと感じています。
もし、今「どのUIライブラリを使おうかな」と迷っているなら、一度試してみる価値はあるかもしれません。
shadcn/ui 公式サイト を眺めてみるだけでも、綺麗なコンポーネントがたくさんあるのでワクワクすると思いますよ。
あまり肩肘張らずに、まずはボタン1つから試してみるのがいいかもしれませんね。
まずは公式サイトの「Button」コンポーネントを1つコピーして、色を自分のサイトに合わせて変えるところから始めてみてください。それだけで「あ、自分でも操作できた！」という達成感が味わえるはずです。
