syncfusion-javascript-menu

Syncfusion TypeScript Menu の実装

Syncfusion Menu は、アプリケーションやウェブサイトのナビゲーションヘッダーとして機能するグラフィカルユーザーインターフェイスコンポーネントです。複数階層のネストされたメニュー項目、データバインディング、アニメーション、スクロール、包括的なイベント処理に対応しています。

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

次のような場合にこのスキルを使用します。

• ナビゲーション階層を作成する：複数階層のネストされた項目を含む階層型メニュー構造を構築します
• データ駆動型メニューを実装する：JSON データ、サービス、または自己参照型データソースからメニュー項目をバインドします
• メニューの外観をカスタマイズする：アニメーション、方向、スタイル、テーマを設定します
• メニュー操作を処理する：ユーザーのクリック、メニューの開閉イベント、項目の選択に応答します
• レスポンシブメニューを構築する：大規模なデータセット向けにスクロール可能な水平／垂直メニューを作成します
• アクセシビリティに対応する：キーボードナビゲーションとスクリーンリーダーのサポートを実装します
• メニューの状態を管理する：メニュー項目を動的に追加、削除、有効化、無効化、表示、または非表示にします

コントロールの概要

主な機能

• データバインディング：階層型 JSON データ、自己参照型データ、サービスベースのデータソースに対応します
• テンプレートのサポート：HTML テンプレートとカスタムコンテンツでメニュー項目をカスタマイズします
• 方向：メニューを水平または垂直に表示します
• アニメーション：サブメニューにフェードイン、ズームイン、スライドダウンの効果を適用します
• スクロール：水平メニューと垂直メニューの両方でスクロールを有効にします
• アクセシビリティ：スクリーンリーダー向けのキーボードナビゲーションと ARIA に標準で対応しています
• イベント：select、beforeOpen、onOpen、beforeClose、onClose、beforeItemRender に対応する包括的なイベントシステム
• 項目管理：項目を動的に追加、削除、有効化、無効化、表示、または非表示にします
• RTL サポート：右から左に記述する言語に対応します
• ハンバーガーモード：モバイルに適したレスポンシブメニューです

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

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージの依存関係
• 開発環境のセットアップ
• CSS のインポートとテーマの設定
• TypeScript による基本的なメニューの初期化
• メニューをレンダリングする HTML 構造
• 最初のメニューアプリケーションの実行

メニュー項目と階層

📄 参照： references/menu-items-and-hierarchy.md

• シンプルなフラットメニュー項目の作成
• 複数階層のネストされた階層の構築
• MenuItem プロパティの概要
• 項目のテキスト、ID、URL、アイコン
• グループ化用の区切り項目
• MenuItemModel インターフェイスのリファレンス

データバインディングとフィールドマッピング

📄 参照： references/data-binding.md

• 階層型 JSON データのバインド
• 自己参照型データソースのパターン
• データサービスとの統合
• カスタムフィールドマッピング用の FieldSettings
• HTML 要素のバインド
• 大規模なデータセットの処理

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

📄 参照： references/customization-and-styling.md

• CSS クラスのカスタマイズ
• 水平と垂直の方向
• アニメーションの設定と効果
• 角を丸くするスタイル設定
• テンプレートを使ったカスタムメニュー項目
• 右から左（RTL）へのサポート
• テーマのカスタマイズ

イベントの操作

📄 参照： references/working-with-events.md

• イベントの種類とライフサイクル
• select イベントの処理
• beforeOpen イベントと onOpen イベント
• beforeClose イベントと onClose イベント
• beforeItemRender イベント
• イベント引数のプロパティ
• 実際のイベント使用例

高度な機能と項目管理

📄 参照： references/advanced-features.md

• メニュー項目の追加と削除
• 項目の有効化と無効化
• 項目の表示と非表示
• スクロール可能なメニュー（enableScrolling）
• サブメニューの配置
• モバイル向けハンバーガーモード
• メニューの効果とトランジション
• パフォーマンスの最適化

ユースケースとシナリオ

📄 参照： references/use-cases-and-scenarios.md

• 大規模なデータセットに対応したスクロール可能なメニュー
• アコーディオンメニューのパターン
• サイドバーメニューの実装
• ツールバーへの統合
• コンテキストメニューのパターン
• ニーモニック UI の実装
• アイコンとタイトル付きのメニュー

アクセシビリティとベストプラクティス

📄 参照： references/accessibility-and-best-practices.md

• キーボードナビゲーションのサポート
• ARIA 属性とスクリーンリーダー
• セキュリティのための HTML サニタイズ
• モバイル対応
• パフォーマンス最適化のヒント
• よくある落とし穴と解決策
• テストと検証

API リファレンス全編

📄 参照： references/api-reference.md

• 型とデフォルト値を含む Menu のプロパティ
• MenuItem のプロパティとオプション
• Menu のメソッドとパラメーター
• 引数の構造を含むイベント
• アニメーション効果と列挙型
• フィールド設定の構成
• 各 API 要素の完全なコード例

クイックスタートの例

import { Menu, MenuItemModel } from '@syncfusion/ej2-navigations';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Define menu items
let menuItems: MenuItemModel[] = [
    {
        text: 'File',
        items: [
            { text: 'Open' },
            { text: 'Save' },
            { text: 'Exit' }
        ]
    },
    {
        text: 'Edit',
        items: [
            { text: 'Cut' },
            { text: 'Copy' },
            { text: 'Paste' }
        ]
    },
    {
        text: 'View',
        items: [
            { text: 'Toolbar' },
            { text: 'Sidebar' }
        ]
    },
    { text: 'Help' }
];

// Initialize Menu
let menuObj: Menu = new Menu({ items: menuItems }, '#menu');

よく使われるパターン

パターン 1：項目の選択に応答する

let menuObj: Menu = new Menu({
    items: menuItems,
    select: (args: MenuEventArgs) => {
        console.log(`Selected: ${args.item.text}`);
    }
}, '#menu');

パターン 2：項目を動的に管理する

// Add new item
menuObj.insertAfter([{ text: 'Print' }], '#open');

// Enable/disable items
menuObj.enableItems([0, 1]);
menuObj.disableItems([2]);

// Show/hide items
menuObj.showItems([0, 1]);
menuObj.hideItems([2]);

パターン 3：イベントを追跡する

let menuObj: Menu = new Menu({
    items: menuItems,
    beforeOpen: (args: BeforeOpenCloseMenuEventArgs) => {
        console.log('Menu opening:', args.name);
    },
    onOpen: (args: OpenCloseMenuEventArgs) => {
        console.log('Menu opened:', args.name);
    },
    beforeClose: (args: BeforeOpenCloseMenuEventArgs) => {
        console.log('Menu closing:', args.name);
    }
}, '#menu');

パターン 4：JSON からデータをバインドする

let hierarchicalData: MenuItemModel[] = [
    {
        text: 'Categories',
        items: [
            { text: 'Electronics' },
            { text: 'Furniture' },
            { text: 'Accessories' }
        ]
    }
];

let menuObj: Menu = new Menu({ items: hierarchicalData }, '#menu');

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

基本的なプロパティ

プロパティ	型	目的
items	MenuItemModel[]	表示するメニュー項目の配列
orientation	Orientation	水平方向または垂直方向のレイアウト
animationSettings	MenuAnimationSettingsModel	サブメニューのアニメーション効果
enableScrolling	boolean	大規模なメニューのスクロールを有効にする
enableRtl	boolean	右から左への表示をサポートする
cssClass	string	カスタム CSS クラス
fields	FieldSettingsModel	データバインディング用のフィールドマッピング

基本的なメソッド

メソッド	パラメーター	目的
open()	element?: HTMLElement	メニューまたはサブメニューを開く
close()	-	メニューを閉じる
enableItems()	items: string[] | number[]	特定の項目を有効にする
disableItems()	items: string[] | number[]	特定の項目を無効にする
hideItems()	items: string[] | number[]	特定の項目を非表示にする
showItems()	items: string[] | number[]	非表示の項目を表示する
insertAfter()	items: MenuItemModel[], target?: string | number	対象の後に項目を挿入する
insertBefore()	items: MenuItemModel[], target?: string | number	対象の前に項目を挿入する
removeItems()	items: string[] | number[]	特定の項目を削除する

よくあるユースケース

1. アプリケーションナビゲーション：アプリケーションのメインナビゲーションバーに使用します
2. ドロップダウンメニュー：コンテキストメニューやドロップダウンナビゲーションに使用します
3. 階層型ナビゲーション：複数レベルのカテゴリまたはセクションのナビゲーションに使用します
4. レスポンシブメニュー：モバイル向けのハンバーガーメニューに使用します
5. カスタムレイアウト：テンプレートベースのカスタムメニュー項目に使用します
6. 動的更新：メニュー項目をリアルタイムで管理します
7. アクセシビリティ：キーボード操作に対応したメニューを作成します

---

詳しい情報が必要ですか？ 実装例、高度な構成、ベストプラクティスについては、上記のリファレンスをご確認ください。