syncfusion-react-accordion

Syncfusion React Accordion の実装

React Accordion コンポーネントは、折りたたみ可能なパネルでコンテンツをすっきりと整理して表示できます。最小限のコードで、展開可能なコンテンツセクション、FAQ、複数ステップのフォーム、ナビゲーションメニューを作成するのに最適です。

コンポーネントの概要

Accordion コンポーネントは、折りたたみ可能なパネルを積み重ねて表示します。

• 各パネルには、クリックして切り替えられるヘッダーとコンテンツ領域があります。
• ヘッダーには、シンプルなテキストまたはカスタムテンプレートを使用できます。
• コンテンツには、静的コンテンツ、動的コンテンツ、またはほかの React コンポーネントをレンダリングしたコンテンツを使用できます。
• 単一展開モード（常に一度に1つのパネルのみを展開）と複数展開モード（複数のパネルを同時に展開）に対応しています。
• 展開／折りたたみの切り替えをスムーズにするアニメーションが組み込まれています。
• キーボード操作によるナビゲーションとアクセシビリティを完全にサポートしています。

ドキュメントとナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

読むタイミング: Accordion コンポーネントを初めてセットアップするとき

• パッケージのインストール（@syncfusion/ej2-react-navigations）
• CSS のインポートとテーマの設定（Tailwind、Bootstrap）
• 2つの初期化方法（Items API と HTML マークアップ）
• アイテムの設定（header、content、cssClass、disabled、expanded）
• 例を使った基本的なコンポーネントのセットアップ
• 初回のレンダリングと最小限の動作例

展開モード

📄 参照: references/expand-modes.md

読むタイミング: 同時に展開するパネルを制御するとき

• 単一展開モード（一度に開けるパネルは1つのみ）
• 複数展開モード（デフォルト。複数のパネルを開けます）
• expandedIndices プロパティを使った初期展開状態の設定
• ヘッダーをクリックしたときの切り替え動作
• 各モードを選ぶ際のユースケース
• 常に単一のパネルを開いた状態に保つパターン

アニメーション効果

📄 参照: references/animation-effects.md

読むタイミング: パネルの切り替えと視覚効果をカスタマイズするとき

• デフォルトのアニメーション（展開時は SlideDown、折りたたみ時は SlideUp）
• 使用可能なアニメーション効果からの選択（FadeIn、ZoomIn など）
• イージングと duration プロパティの設定
• 展開／折りたたみのアニメーションを個別に制御
• アニメーションを完全に無効化
• パフォーマンスに関する考慮事項

コンテンツの読み込み

📄 参照: references/content-loading.md

読むタイミング: コンテンツを動的に、または外部ソースから読み込むとき

• addItem() メソッドを使った Accordion アイテムの動的な読み込み
• データソースからのコンテンツの読み込み（dataSource プロパティ）
• HTTP リクエストと POST によるコンテンツの取得
• テンプレートを使ったレンダリング（headerTemplate、itemTemplate）
• パネル内でのほかの React コンポーネントのレンダリング
• 遅延読み込みとコンテンツの遅延表示のパターン

イベントとライフサイクル

📄 参照: references/events-lifecycle.md

読むタイミング: ユーザー操作とコンポーネントのライフサイクルを処理するとき

• コンポーネントのライフサイクルイベント（created、destroyed）
• 展開／折りたたみイベント（expanding、expanded）
• クリックイベントの処理（clicked）
• イベント引数とプロパティ
• event.cancel を使ったデフォルト動作の防止
• 実用的なイベント処理パターンと例

スタイル設定とカスタマイズ

📄 参照: references/styling-customization.md

読むタイミング: 外観をカスタマイズし、デザインシステムに統合するとき

• スタイル設定用の CSS クラス（ヘッダー、パネル、コンテンツ領域）
• 組み込みテーマのオプションとテーマの切り替え
• CSS とユーティリティ（Tailwind、Bootstrap）を使ったカスタムスタイル設定
• RTL（右から左）への対応
• レスポンシブデザインのパターン
• カスタムスタイル設定に cssClass プロパティを使用

高度な機能

📄 読む： references/advanced-features.md

読むタイミング： 複雑なレイアウトの構築やパフォーマンスの最適化を行うとき

• コンポーネントのメソッド（expandItem、enableItem、hideItem など）
• ネストされたアコーディオンと階層構造
• React フックとの統合（useState、useRef、useEffect）
• キーボードナビゲーションの動作
• アクセシビリティ機能（ARIA 属性、スクリーンリーダー）
• 大規模なアコーディオンリストのパフォーマンス最適化
• カスタムの展開／折りたたみアクションパターン

---

クイックスタートの例

3 つの折りたたみ可能なパネルを含む基本的なアコーディオン：

import React from 'react';
import { AccordionComponent, AccordionItemDirective, AccordionItemsDirective } from '@syncfusion/ej2-react-navigations';
import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-buttons/styles/tailwind3.css';
import '@syncfusion/ej2-popups/styles/tailwind3.css';
import '@syncfusion/ej2-react-navigations/styles/tailwind3.css';

export default function App() {
  return (
    <AccordionComponent expandMode='Multiple'>
      <AccordionItemsDirective>
        <AccordionItemDirective 
          header='HTML' 
          content='HTML is a markup language used to create web pages.' 
        />
        <AccordionItemDirective 
          header='CSS' 
          content='CSS is used to style HTML elements and create layouts.' 
        />
        <AccordionItemDirective 
          header='JavaScript' 
          content='JavaScript adds interactivity to web applications.' 
        />
      </AccordionItemsDirective>
    </AccordionComponent>
  );
}

よくあるパターン

パターン 1：FAQ セクション（単一展開モード）

新しい項目を開くと、開いていた質問は自動的に折りたたまれます：

<AccordionComponent expandMode='Single'>
  <AccordionItemsDirective>
    <AccordionItemDirective header='What is React?' content='React is a JavaScript library for building UIs with components.' />
    <AccordionItemDirective header='What is JSX?' content='JSX is a syntax extension for writing HTML-like code in JavaScript.' />
  </AccordionItemsDirective>
</AccordionComponent>

パターン 2：展開状態を維持（複数展開モード）

すべてのパネルを同時に展開したままにできます：

<AccordionComponent expandMode='Multiple'>
  <AccordionItemsDirective>
    <AccordionItemDirective expanded={true} header='Features' content='...' />
    <AccordionItemDirective expanded={true} header='Installation' content='...' />
  </AccordionItemsDirective>
</AccordionComponent>

パターン 3：デフォルトの展開状態

読み込み時に特定のパネルをあらかじめ展開します：

<AccordionItemDirective 
  expanded={true}
  header='Quick Start' 
  content='This section opens by default.' 
/>

---

主なプロパティとメソッド

コンポーネントのプロパティ

プロパティ	型	目的	デフォルト
expandMode	'Single' | 'Multiple'	パネルを単一または複数展開するかを制御します	'Multiple'
expandedIndices	number[]	初期状態で展開する項目のインデックス配列です	[]
animation	AnimationSettings	展開／折りたたみアニメーションの設定です	SlideDown/SlideUp
dataSource	Object[]	データバインディングに使用する項目の配列です	[]
headerTemplate	string | function	すべての項目に適用するカスタムヘッダーテンプレートです	null
itemTemplate	string | function	表示に使用するカスタム項目テンプレートです	null
height	string | number	コンポーネントの高さ（px／%）です	'auto'
width	string | number	コンポーネントの幅（px／%）です	'100%'
enableHtmlSanitizer	boolean	信頼できない HTML コンテンツをサニタイズします	true
enablePersistence	boolean	再読み込み後も展開状態を保持します	false
enableRtl	boolean	右から左へのレイアウトを有効にします	false
locale	string	国際化に使用するロケールコードです	''

項目のプロパティ

プロパティ	型	目的	デフォルト
header	string	項目のヘッダーテキストです（HTML を使用できます）	-
content	string	項目のコンテンツテキストです（HTML を使用できます）	-
expanded	boolean	項目の初期展開状態を設定します	false
disabled	boolean	特定のアコーディオン項目を無効にします	false
cssClass	string	項目に適用するカスタム CSS クラスです	-

コンポーネントのメソッド

メソッド	パラメーター	目的
addItem()	item, index (optional)	新しいアコーディオン項目を追加します
removeItem()	index	指定したインデックスの項目を削除します
enableItem()	index, isEnable	特定の項目を有効／無効にします
hideItem()	index, isHidden	特定の項目を表示／非表示にします
expandItem()	isExpand, index (optional)	項目を展開／折りたたみます
select()	index	項目ヘッダーにフォーカスを設定します
destroy()	none	コンポーネントを DOM から削除します

---

よくある使用例

使用例	モード	主な機能
FAQ セクション	Single	一度に表示される質問は 1 つだけです
設定パネル	Multiple	複数のオプションを同時に確認できます
マルチステップフォーム	Single	ステップを順番に進めるようユーザーを誘導します
コンテンツ整理	Multiple	複数のトピックを一度に閲覧できます
ナビゲーションメニュー	Single	ツリー状の階層ナビゲーションです
データダッシュボード	Multiple	複数のデータセクションをまとめて表示できます

---

次のステップ

1. 「Getting Started」から始めて、最初の Accordion をセットアップします
2. 展開モードを選択して、使用例に合わせます
3. アニメーションを追加して、仕上がりとユーザーへのフィードバックを向上させます
4. データソースを使用する場合は、コンテンツを動的に読み込みます
5. スタイルをカスタマイズして、デザインシステムに合わせます
6. 高度な機能を確認して、複雑なケースに対応します

お困りですか？作成したい内容に合わせて、上記の該当するリファレンスファイルをご確認ください！