syncfusion-react-menu

Syncfusion React Menu コンポーネントの実装

Syncfusion React Menu コンポーネントは、アイコン、区切り線、アニメーション、アクセシビリティ、ハンバーガーモード、スクロール、イベント処理、項目の状態管理に対応した、柔軟で多機能なナビゲーションコントロールです。ナビゲーションバー、ドロップダウンメニュー、コンテキストメニュー、モバイル対応メニュー、複雑な階層型ナビゲーションシステムの構築に使用できます。

このスキルを使用する場面

• ナビゲーションメニューの構築： ファイルメニュー、アプリケーションメニュー、メインナビゲーションバー
• ドロップダウンメニュー： ユーザーアクションメニュー、コンテキストに応じたオプション
• サブメニューシステム： 複数レベルの階層型ナビゲーション
• ハンバーガー／モバイルメニュー： モバイルデバイス向けのレスポンシブメニュー
• メニューのカスタマイズ： 項目、アイコン、区切り線、カスタムスタイルの追加／削除
• イベント処理： メニュー項目のクリック、開閉イベント、項目の状態変更の検出
• データ駆動型メニュー： JSON データ構造（階層型または自己参照型）へのメニューのバインド
• 項目の状態管理： メニュー項目の有効化／無効化、表示／非表示、更新
• アクセシビリティ： キーボード操作に対応し、スクリーンリーダーで使いやすいメニューの作成
• RTL 対応： 右から左に読む言語向けのメニュー
• スクロール可能なメニュー： 水平／垂直スクロールに対応した大規模なメニュー
• 状態の永続化： ページの再読み込み後もメニューの状態を保持

コンポーネントの概要

主な機能

• 無制限のネストレベルに対応した階層型メニュー
• 階層型または自己参照型の JSON データへのデータバインディング
• 視覚的な整理に役立つアイコンと区切り線のサポート
• クリック、開閉、描画の操作に対応したイベントシステム
• タイミングとイージングを設定できるアニメーション効果
• キーボードナビゲーションと WCAG アクセシビリティ準拠
• 右から左に読む言語向けのRTL 対応
• 水平／垂直スクロールに対応したレスポンシブレイアウト
• 項目の状態管理 - 項目の動的な追加、削除、有効化／無効化、表示／非表示
• モバイル対応メニュー向けのハンバーガーモード
• 状態の永続化 - ページの再読み込み後もメニューの状態を保存・復元
• セキュリティのためのHTML サニタイズ
• サブメニューの表示タイミングを制御するホバーディレイ
• 柔軟なスタイル設定に使えるカスタム CSS クラス

代替コンポーネントより Menu を選ぶ場面

コンポーネント	最適な用途
Menu	階層型ナビゲーション、ドロップダウンメニュー、ファイルメニュー、ハンバーガーメニュー
Navbar	上部に配置する直線的なナビゲーション
Sidebar	固定サイドナビゲーションパネル
Tabs	切り替え可能なフラットなコンテンツセクション

クイックスタート

import { MenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import React from 'react';

function App() {
  const menuItems: MenuItemModel[] = [
    {
      text: 'File',
      items: [
        { text: 'New' },
        { text: 'Open' },
        { text: 'Save' }
      ]
    },
    {
      text: 'Edit',
      items: [
        { text: 'Cut' },
        { text: 'Copy' },
        { text: 'Paste' }
      ]
    }
  ];

  return (
    <MenuComponent items={menuItems}></MenuComponent>
  );
}

export default App;

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

はじめに

📄 参照： references/getting-started.md

• Vite／Create React App を使ったインストールとパッケージのセットアップ
• CSS のインポートとテーマの設定
• MenuItemModel を使った基本的なメニューの作成
• React での MenuComponent の組み込み
• 初回の描画と初期化
• リップル効果
• 参照する場面： 新しい Menu の実装を開始するとき、プロジェクトをセットアップするとき

プロパティと設定

📄 参照： references/properties-and-configuration.md

• MenuComponent のすべてのプロパティと説明
• デフォルト値と受け付ける型
• 各プロパティの設定例
• animationSettings、cssClass、enableHtmlSanitizer、enablePersistence
• enableRtl、enableScrolling、hamburgerMode、hoverDelay
• locale、orientation、showItemOnClick、target、title
• 参照する場面： コンポーネントの動作を設定するとき、アニメーションを設定するとき、機能を有効にするとき

メソッドと API

📄 参照: references/methods-api.md

• 詳細なドキュメント付きの MenuComponent の全メソッド
• insertBefore()、insertAfter()、removeItems() - 項目の操作
• enableItems()、hideItems()、showItems() - 項目の状態管理
• getItemIndex()、setItem() - 項目へのアクセスと更新
• open()、close() - ハンバーガーモードの制御
• destroy() - クリーンアップ
• すべてのメソッドの完全なコード例
• 参照するタイミング: メニュー項目を動的に操作する場合、メニューの状態を制御する場合

イベントとコールバック

📄 参照: references/events-and-callbacks.md

• 完全なドキュメント付きのすべてのイベントタイプ
• イベント引数: MenuEventArgs、BeforeOpenCloseMenuEventArgs、OpenCloseMenuEventArgs
• select、beforeOpen、beforeClose、onOpen、onClose イベント
• beforeItemRender イベントと created ライフサイクルイベント
• イベント処理のパターンとコールバックの例
• 参照するタイミング: ユーザー操作に応答する場合、ライフサイクルイベントを処理する場合

データバインディング

📄 参照: references/data-binding.md

• 階層型データバインディング
• 自己参照型データ構造
• FieldSettingsModel を使用した JSON データのマッピング
• 複雑なネスト型データ階層
• 動的なデータの更新と変更
• API からのリアルタイムデータ
• 参照するタイミング: データソースからメニューにデータを設定する場合

メニュー項目のカスタマイズ

📄 参照: references/menu-items-customization.md

• insertBefore/insertAfter によるメニュー項目の追加
• removeItems による項目の削除
• enableItems による項目の有効化／無効化
• showItems/hideItems による項目の表示／非表示
• カスタム HTML 属性
• 区切り線のサポート
• 参照するタイミング: メニュー構造を動的に管理する場合

スタイルと外観

📄 参照: references/styling-and-appearance.md

• アイコンの統合と配置
• 区切り線の描画とカスタマイズ
• ニーモニック UI の作成（キーボードショートカット）
• RTL（右から左）サポート
• カスタム CSS クラスとテーマの統合
• アニメーション設定とエフェクト
• ダークモードのサポート
• 参照するタイミング: 外観やテーマをカスタマイズする場合

ハンバーガーモードとモバイルモード

📄 参照: references/hamburger-mode.md

• ハンバーガーモードのセットアップと設定
• モバイル対応の実装
• hamburgerMode、target、title プロパティ
• open() メソッドと close() メソッド
• Sidebar および Accordion との統合
• モバイルファーストの設計パターン
• 参照するタイミング: モバイル対応メニューを構築する場合

ユースケースのシナリオ

📄 参照: references/use-case-scenarios.md

• スクロール可能なメニューの実装
• Toolbar とのメニュー統合
• Sidebar を使ったハンバーガーメニュー
• ListView を使ったモバイル表示
• コンテキストメニューのパターン
• 動的なデータ駆動型メニュー
• 参照するタイミング: 実際のシナリオに応じた特定のメニューパターンを構築する場合

アクセシビリティ

📄 参照: references/accessibility.md

• WCAG 準拠基準
• WAI-ARIA 属性
• キーボード操作のパターン
• スクリーンリーダーのサポート
• フォーカス管理
• 色のコントラストに関するガイドライン
• アクセシビリティのテスト
• 参照するタイミング: すべてのユーザーがメニューを利用できるようにする場合

クイックスタートの例

import { MenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';

function App() {
  // Define menu structure
  const menuItems: MenuItemModel[] = [
    {
      text: 'File',
      items: [
        { text: 'New' },
        { text: 'Open' },
        { text: 'Save' },
        { separator: true },
        { text: 'Exit' }
      ]
    },
    {
      text: 'Edit',
      items: [
        { text: 'Cut' },
        { text: 'Copy' },
        { text: 'Paste' }
      ]
    },
    {
      text: 'Help'
    }
  ];

  return (
    <MenuComponent items={menuItems}></MenuComponent>
  );
}

export default App;

主要プロパティのリファレンス

プロパティ	型	デフォルト	用途
items	MenuItemModel[]	[]	表示するメニュー項目
fields	FieldSettingsModel	-	データフィールドのマッピング
hamburgerMode	boolean	false	モバイル向けのハンバーガービューを有効にします
enableScrolling	boolean	true	項目数の多いメニューでのスクロールを許可します
enablePersistence	boolean	false	セッション間で状態を保存します
enableRtl	boolean	false	右から左へ記述するテキストをサポートします
orientation	Orientation	Horizontal	レイアウトの方向
animationSettings	MenuAnimationSettings	-	アニメーションの設定
hoverDelay	number	400	サブメニューのホバー遅延（ms）
showItemOnClick	boolean	false	クリック時のみ項目を表示します
enableHtmlSanitizer	boolean	true	HTML コンテンツをサニタイズします
cssClass	string	-	カスタム CSS クラス
locale	string	'en-US'	カルチャ／言語の設定
target	string	-	ハンバーガー用の要素セレクター
title	string	-	ハンバーガーモードのタイトルテキスト

主要メソッドのリファレンス

メソッド	パラメーター	用途
insertBefore()	item, selector	メニュー項目の前に挿入します
insertAfter()	item, selector	メニュー項目の後に挿入します
removeItems()	selectors	セレクターで項目を削除します
enableItems()	selectors, enable	項目を有効化／無効化します
showItems()	selectors	非表示の項目を表示します
hideItems()	selectors	表示中の項目を非表示にします
setItem()	item, selector	項目のプロパティを更新します
getItemIndex()	selector	メニュー内の項目インデックスを取得します
open()	-	ハンバーガーメニューを開きます
close()	-	ハンバーガーメニューを閉じます
destroy()	-	コンポーネントをクリーンアップします

主要イベントのリファレンス

イベント	発生条件	引数の型
select	メニュー項目がクリックされたとき	MenuEventArgs
beforeOpen	サブメニューが開く前	BeforeOpenCloseMenuEventArgs
beforeClose	サブメニューが閉じる前	BeforeOpenCloseMenuEventArgs
onOpen	サブメニューが開いた後	OpenCloseMenuEventArgs
onClose	サブメニューが閉じた後	OpenCloseMenuEventArgs
beforeItemRender	項目のレンダリング前	BeforeItemRenderEventArgs
created	コンポーネントの初期化時	Object

よく使われるパターン

パターン 1：メニュー項目の選択への応答

const handleMenuSelect = (args) => {
  console.log(`Selected: ${args.item.text}`);
  // Handle the selected menu item
};

<MenuComponent 
  items={menuItems} 
  select={handleMenuSelect}
></MenuComponent>

パターン 2：メニュー項目の動的な追加

let menuObj: MenuComponent;

const addMenuItem = () => {
  menuObj.insertAfter([{ text: 'New Item' }], 'File');
};

<MenuComponent 
  ref={(menu) => (menuObj = menu)} 
  items={menuItems}
></MenuComponent>

パターン 3：メニュー項目の無効化

const handleBeforeOpen = (args) => {
  if (args.item.text === 'Save') {
    args.item.disabled = true; // Disable based on condition
  }
};

<MenuComponent 
  items={menuItems} 
  beforeOpen={handleBeforeOpen}
></MenuComponent>

主な学習手順

1. ここから開始： references/getting-started.md - セットアップと基本的なメニューの作成
2. データの追加： references/data-binding.md - メニューをデータソースにバインドする
3. インタラクションの処理： references/events-and-callbacks.md - ユーザー操作に応答する
4. 動的な制御： references/methods-api.md - メニューをプログラムで操作する
5. 高度な機能： references/hamburger-mode.md - モバイル対応のパターン
6. 実際のパターン： references/use-case-scenarios.md - 本番環境での実装例

すべてのリファレンスファイル

基礎

• getting-started.md - インストール、セットアップ、MenuItemModel の構造
• properties-and-configuration.md - 24 以上のすべてのコンポーネントプロパティ

データと状態

• data-binding.md - 階層型および自己参照型のバインディング
• menu-items-customization.md - 項目の動的な管理

インタラクションと制御

• events-and-callbacks.md - イベントシステムとコールバック
• methods-api.md - プログラム制御用のすべてのメソッド

プレゼンテーションと UX

• styling-and-appearance.md - アイコン、テーマ、アニメーション
• orientation-and-layout.md - 水平／垂直レイアウト
• hamburger-mode.md - モバイル向けハンバーガーメニュー
• accessibility.md - WCAG 準拠とキーボード操作

レガシー（元のファイル）

• events-and-interactions.md - 基本的なイベント処理（包括的なドキュメントについては、events-and-callbacks.md を参照してください）

実際の実装例

• use-case-scenarios.md - 8 つの完全なパターン：ファイルメニュー、ツールバー、サイドバー、ダッシュボード、モバイルアプリなど

関連スキル

• Implementing Sidebar - サイドナビゲーションパネル
• Implementing AppBar - 上部のナビゲーション／アプリケーションバー
• Implementing Tabs - タブによるコンテンツの切り替え
• Implementing Accordion - 展開可能なコンテンツセクション
• Implementing ListView - リスト形式のナビゲーション