Radix で、FAQ アコーディオンメニューを実装する

Radix で、FAQ アコーディオンメニューを実装する

Radix を使って FAQ アコーディオンメニューを React アプリに実装する方法を解説します。シンプルでアクセシブルなコンポーネントを少ないコード量で構築できます。コアとなる UI コンポーネントの実装を Radix に任せることで、デザインに集中できるのもポイントです。

完成イメージはこちら:

Radix の特徴

Radix は、React で使えるオープンソースの UI コンポーネントライブラリで、アクセシビリティや柔軟性を重視しています。@radix-ui/react-accordion はその中でも特に便利なコンポーネントで、FAQ などのアコーディオン形式の表示を簡単に実装できます。

比較: HeadlessUI や Framer Motion

• HeadlessUI: アクセシブルなコンポーネントを提供しますが、スタイルを一からカスタマイズする必要があります。
• Framer Motion: アニメーションに特化していますが、UI ロジックは自前で組む必要があります。
• Radix: デフォルトでアクセシブルな UI コンポーネントが揃っていて、カスタマイズも簡単です。多くのプロジェクトにフィットします。

Radix のドキュメントはこちら:

インストール

まずは必要なパッケージをインストールします。

実装環境

• React 18+
• Radix UI (Accordion)

アコーディオンメニューの実装

以下のコードでは、Radix のアコーディオンコンポーネントを使って、FAQ のアコーディオンメニューを作成しています。

このコードを使うことで、質問をクリックすると回答が表示されるシンプルな FAQ アコーディオンメニューを作成できます。

各コンポーネントの説明

• Accordion: 複数のアコーディオンアイテムをラップするためのコンテナです。type="single" を指定することで、一度に一つのアイテムだけを展開できます。

• AccordionItem: 個別のアコーディオン項目を定義するコンポーネントです。FAQ の各質問と回答がこの中に入ります。

• AccordionTrigger: 質問部分のトリガーとなるコンポーネントです。ユーザーがクリックすると回答が表示されます。

• AccordionContent: トリガーがクリックされた際に表示されるコンテンツ部分です。ここに回答を記述します。

スタイリング

以下は CSS コードです。

まとめ

Radix のアコーディオンコンポーネントを使うことで、アクセシブルかつ使いやすい FAQ メニューを簡単に実装できます。このように、Radix のコンポーネントはヘッドレスで、必要なスタイルを自由にカスタマイズできるため、デザインとアクセシビリティのバランスをとりつつ、直感的に使用することができます。