shadcn/UIを用いたコンポーネント設計

今回は、フロントエンド開発でホットな話題となっているUIコンポーネントライブラリについて、特にshadcn/UIについて見ていきます。
経緯としては、所属する会社でアーキテクチャを行なっていくこととなり、フロントのコンポーネント設計を行うこととなったので、学んだことをメモとして残そうと思います。

そもそもUIライブラリってどんな種類があるの？

従来型のUIライブラリ

従来型のUIライブラリは提供されているコンポーネントに対して、コンポーネント内にスタイル情報とコンポーネントとしての振る舞いが管理されている。
そのため、コンポーネントをカスタマイズしようとすると、実装が複雑になり、依存関係が強く発生してしまう。

Headless UIライブラリ

従来のUIライブラリとは異なり、スタイルは持たず、機能やアクセシビリティのコンポーネントの振る舞いを持ったもの。
スタイルのカスタマイズは独自でスタイリングする必要がある。

CSSフレームワーク

shadcn/UIって何が新しいの？

• ライブラリをインストールせずに、提供されているコンポーネントをコピペして、プロジェクト内で管理することができる。
• nativeでtailwindwがサポートされており、必要なセットアップがされている。
  • Nextjs 15で初期のセットアップを実行すると、https://github.com/shadcn-ui/ui/issues/4951 に上がっているように、現状はエラーが出て手動で対応する必要がある。

どんな考え方でできてるの？

• 従来のUIコンポーネントライブラリとは正反対の考え方であり、コンポーネントのデザインとコンポーネントの振る舞いをは別物として実装が分けられている。
• 詳細
  • 構造と振る舞いのレイヤー
    • コンポーネントがHeadlessな状態(スタイルやマークアップを提供しない)で提供されている。

  • スタイルに関するレイヤー
    • variantsでスタイルを管理できる。
      • Class Variance Authority APIを使用することでスタイルの管理することができる

実際にコードをみてみよう

shadcn/UIのbuttonコンポーネント

下記のコンポーネントではスタイルを変数buttonVariantsにcvaを定義して、変数Buttonにコンポーネントを定義されています。
スタイルとコンポーネントの定義を個別で定義することでコードが完結で直感的に管理することができる。

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"

import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/src/lib/utils"

const buttonVariants = cva(

  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",

  {

    variants: {

      variant: {

        default:

          "bg-primary text-primary-foreground shadow hover:bg-primary/90",

        destructive:

          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",

        outline:

          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",

        secondary:

          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",

        ghost: "hover:bg-accent hover:text-accent-foreground",

        link: "text-primary underline-offset-4 hover:underline",

      },

      size: {

        default: "h-9 px-4 py-2",

        sm: "h-8 rounded-md px-3 text-xs",

        lg: "h-10 rounded-md px-8",

        icon: "h-9 w-9",

      },

    },

    defaultVariants: {

      variant: "default",

      size: "default",

    },

  }

)

export interface ButtonProps

  extends React.ButtonHTMLAttributes<HTMLButtonElement>,

    VariantProps<typeof buttonVariants> {

  asChild?: boolean

}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(

  ({ className, variant, size, asChild = false, ...props }, ref) => {

    const Comp = asChild ? Slot : "button"

    return (

      <Comp

        className={cn(buttonVariants({ variant, size, className }))}

        ref={ref}

        {...props}

      />

    )

  }

)

Button.displayName = "Button"

export { Button, buttonVariants }

まとめ

従来のUIコンポーネントライブラリを用いて、コンポーネントの実装をすると、コードが複雑性が発生してしまい、実装のコストが高いものとなる。
そのため、複雑性を取り除き、コンポーネントの振る舞いとスタイリングを個別で定義することで実装する際の機動力を高めることにつながります。

- [shadcn/UI公式ドキュメント](https://ui.shadcn.com/)

- [CVAの詳しい使い方](https://cva.style/docs)

実際に使ってみると、その便利さがもっとよく分かると思います。ぜひ試してみてください！