### shadcn が便利な理由私が便利だと思うのは「コンポーネントを作る必要がない」ということですね。他にも以下のような特徴があります。 - 必要なコンポーネントだけを追加できる - 冗長なコード生成を避け、プロジェクトを軽量に保てる - 手軽に最新のコンポーネントコードを取得できる https://ui.shadcn.com/ shadcn は「必要なコンポーネントを必要な時に追加する」というシンプルな哲学に基づいて設計されているため、効率的に UI を構築するのに非常に便利です。 ### 実装環境 - Next.js 14.2.1 - shadcn/ui ### パッケージを直接実行一時的に、`npx` でパッケージを実行すると、Accordion コンポーネントが作成されます。プロジェクトに必要なコンポーネントだけを追加する形なので効率的ですね！ ```bash npx shadcn@latest add accordion ``` ### accordion ファイル生成 `components/ui/accordion.tsx` というファイルが生成されます。内容は以下。Radix UI がインストールされているようです。 ```tsx "use client"; import * as React from "react"; import * as AccordionPrimitive from "@radix-ui/react-accordion"; import { ChevronDown } from "lucide-react"; import { cn } from "@/lib/utils"; const Accordion = AccordionPrimitive.Root; const AccordionItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); AccordionItem.displayName = "AccordionItem"; const AccordionTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( svg]:rotate-180", className )} {...props} > {children} )); AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName; const AccordionContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => (

{children}

)); AccordionContent.displayName = AccordionPrimitive.Content.displayName; export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; ``` ### accordion.tsx の解説 `accordion.tsx` ファイルは、アコーディオンコンポーネントの各要素を定義しています。このファイルでは、`@radix-ui/react-accordion` を利用して基本的なアコーディオン機能を実装しています。 - **Accordion**: ルートコンポーネントで、全体のアコーディオンのコンテナです。 - **AccordionItem**: アコーディオン内の各項目を定義するコンポーネントです。各項目は `AccordionPrimitive.Item` を使用して作成されており、`border-b` クラスで下部に境界線が追加されています。 - **AccordionTrigger**: アコーディオン項目のトリガー部分です。クリックすることで項目の開閉が可能になります。`ChevronDown` アイコンが使われており、項目が開くとアイコンが回転します。 - **AccordionContent**: アコーディオン項目が開かれた際に表示される内容部分です。`data-[state=closed]:animate-accordion-up` や `data-[state=open]:animate-accordion-down` クラスを使用して、開閉時のアニメーションが設定されています。各コンポーネントは `forwardRef` を使用しており、外部から `ref` を参照できるようにしているため、柔軟なカスタマイズが可能です。また、`cn` 関数を使って、クラス名を動的に設定しています。 ### 呼び出し後は、以下のようにして、Accordion コンポーネントを呼び出すことができます。 ```tsx "use client"; import { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from "@/components/ui/accordion"; const MyAccordion = () => { return (

Item 1 This is the content of Item 1. You can put any content here. Item 2 This is the content of Item 2. You can put any content here as well.

); }; export default MyAccordion; ``` ### 解説このように shadcn/ui を使えば、シンプルかつ効率的にアコーディオンを実装できます。Accordion コンポーネントは使いやすく、必要な UI コンポーネントのみを取り入れることができるので、プロジェクト全体の軽量化にもつながります。特に、複雑な UI を構築したいが最小限のカスタマイズ性を保ちたいと考えている場合に最適です。ぜひ試してみてください！

shadcn/ui で、アコーディオンを実装する