viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方はこちらまで。

概要

みなさんはshadcn/uiというUIコンポーネントライブラリを知っていますか？

個人的に色々UIライブラリを見て回るのが好きなのですが、去年こちらのshadcn/uiが少し話題に挙がっていました。

後から知ったのですが、JSライジングスター2023のReactエコシステム部門で一位になっていたらしい

当時はそのことを知らず、なんとなく公式サイトを見て

「めっちゃおしゃれやんけ！！！！！！！！しかもTailwindサポートだから全然実務での採用も検討できるじゃん、ちょっと試してみよ」

とウキウキしていたら

Nuxtが....ない....（遺言）

ここで記事は途切れているようだ。

Nuxt用が！！！！！ある！！！！！！！！

...となるはずだったのですが、先日インターネットの海を目的もなく漂っているとshadcn-vueという文字が目に飛び込んできました。

公式サイトを見てみると....

Nuxtがいる！！！！！！

念のため記載しておくと、こちらは有志による非公式のライブラリです。
shadcn/ui作者から許諾を得て開発されたとのことです。

ということで試していきます。

検証環境

nuxt v3.11.2
vue v3.4.21
tailwindcss v3.4.3

導入手順

冒頭でUIコンポーネントライブラリと紹介しましたが、shadcn/uiの考えである「実装とスタイルは分けるべき（互いに依存してはいけない）」を実現するため、実はコンポーネント自体はnpmパッケージ化されていません。

Why copy/paste and not packaged as a dependency?

The idea behind this is to give you ownership and control over the code, allowing you to decide how the components are built and styled.

Start with some sensible defaults, then customize the components to your needs.

One of the drawback of packaging the components in an npm package is that the style is coupled with the implementation. The design of your components should be separate from their implementation.

代わりに専用のCLIを導入し、そこからコマンドで指定したコンポーネントのコードをプロジェクト内に追加する形をとっています。もちろんshadcn-vueも同様の形になります。

今回はNuxtで検証するため、Nuxt用の導入手順に倣って進めていきます。

必要なモジュールの追加

今回すでにtailwindcss, typescriptが導入済みのNuxtプロジェクトで検証を行っているので、モジュールの追加から行います。

Nuxt3の場合デフォルトでTypeScriptをサポートしてくれていますが、shadcn-vueを使う際は依存関係にtypescriptが含まれている必要があります。
devDependenciesにtypescriptが含まれていることを確認してください。

$ npx nuxi@latest module add @nuxtjs/tailwindcss

その後CLIモジュールを追加します

$ npx nuxi@latest module add shadcn-nuxt

CLIモジュールが追加できたら、nuxt.config.tsにshadcnの設定を追記します。

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', 'shadcn-nuxt'],
  shadcn: {
    prefix: '', // 追加したコンポーネントに付与するプレフィックス
    componentDir: './components/shadcn' // デフォルトは'./components/ui'
  }
})

※ここで型エラーが出る方は一度vscodeを再起動するかnpm run devなどを実行すると解消されるかもしれません

CLIのセットアップ

ここまでで無事CLIモジュールが追加できたので、用意されてるinitコマンドでセットアップします。

$ npx shadcn-vue@latest init

Would you like to use TypeScript (recommended)? no / yes
Which framework are you using? Vite / Nuxt / Laravel
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate / Gray / Zinc / Neutral / Stone
Where is your tsconfig.json or jsconfig.json file? › ./tsconfig.json
Where is your global CSS file? › › src/index.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Write configuration to components.json. Proceed? > Y/n

カラーはtailwindのカスタムカラーのうち、暗色系の5つが選べるみたいです 🥰
今回は以下のように設定しました。

設定例

これで導入は一通り完了です！早速遊んでみましょう！！！！

実際に遊んでみた

この状態から色々コンポーネントを追加していきます。
まっさらなページだとスクショを貼ったときに意味が分からなかったので、とりあえず適当な言葉だけ置いておきました。

ひとまず使うコンポーネントを追加したいので、追加コマンドを叩きます。

$ npx shadcn-vue@latest add button

実行後、nuxt.config.tsで設定したディレクトリにコンポーネントが追加されるはずです。

ちなみに僕は設定がどこか抜けていたのか、デフォルトのcomponents/ui/ディレクトリに追加されていました。なぜ？？？

他にも公式の各コンポーネントページにそれぞれ追加コマンドが載っていますので、追加したいコンポーネントがあれば随時参照してください。

ということで、適当にコンポーネントを追加してみました(ButtonとTableだけですが)

ここで総菜ドラゴンの伏線を回収することになるとは思いませんでしたが、それよりキャプションが下にあるのが、日本語のテーブルだと違和感ありますね

そんなときは追加したコンポーネントファイルを直接いじればOKです！パッケージされたファイルではないので、気にせず好きなだけいじり放題です。

今回はTable.vue内のcaption-bottomの記述を消して、ついでにTableCaption.vue内のテキストクラスをちょろっといじりました。

このように、コンポーネントの機能自体を損なわずスタイルのみを気軽に・柔軟に変えられるのが最大の魅力ですね。

🥰 まとめ

今回shadcn-vueの導入検証を行ってみましたが、いかがでしたでしょうか？
個人的には、シックでモダンな見た目もそうですがなによりカスタマイズ性の高さ・柔軟さにかなり惹かれました。

みなさんもたまにはUIライブラリを眺めてみると、素敵な出会いがあるかもしれません。
それでは

一緒に二次元業界を盛り上げていきませんか

株式会社viviONでは、フロントエンドエンジニアを募集しています。

また、フロントエンドエンジニアに限らず、バックエンド・SRE・スマホアプリなど様々なエンジニア職を募集していますので、ぜひ採用情報をご覧ください。