syncfusion-javascript-query-builder

TypeScript での QueryBuilder の実装

QueryBuilder は、ビジュアル UI を使用して動的で複雑なクエリを作成するための、強力な Syncfusion コンポーネントです。このスキルでは、TypeScript アプリケーションで QueryBuilder を実装、設定、カスタマイズするための包括的なガイダンスを提供します。

コントロールの概要

QueryBuilder は、コードを書かずに複雑なフィルター条件を作成できる、高度な UI コンポーネントです。次の機能をサポートしています。

• 複数のデータ型（string、number、date、boolean）
• さまざまな演算子（equals、contains、between など）
• AND/OR 条件によるルールのグループ化
• 入れ子になったグループ階層
• UI カスタマイズ用のカスタムテンプレート
• ドラッグ＆ドロップ操作（並べ替え、複製、ルールのロック）
• JSON のインポート／エクスポートと SQL 生成
• RTL サポートと完全なキーボードアクセシビリティ
• WCAG 2.1 AA 準拠

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

はじめに

こちらも参照してください：references/getting-started.md

• インストールと npm パッケージのセットアップ
• Syncfusion の依存関係の設定
• CSS のインポートとテーマのセットアップ
• QueryBuilder の基本的な初期化
• 型を指定した列定義
• 最初の QueryBuilder アプリケーションの実行

列とスキーマの定義

こちらも参照してください：references/columns-definition.md

• 列定義とスキーマ構造
• データからの列の自動生成
• フィールドのマッピングとラベル
• サポートされるデータ型（string、number、date、boolean）
• 各データ型で使用できる演算子
• 数値／日付の step プロパティと format プロパティ
• カスタム列の設定パターン

データバインディング

こちらも参照してください：references/data-binding.md

• JavaScript 配列を使用したローカルデータのバインディング
• DataManager を使用したリモートデータのバインディング
• DataSource の割り当てパターン
• 定義済みクエリ用の RuleModel 構造
• 初期ルールを使用したバインディング
• 動的なデータ更新とリフレッシュ
• DataManager の設定

ルールとグループの管理

こちらも参照してください：references/rules-and-groups.md

• ルールモデルの構造（condition、rules、field、operator、value）
• 単一フィルタールールの作成
• AND/OR ロジックによるルールのグループ化
• プログラムによるルールの追加と削除
• グループの追加と削除
• ルールの検証と制約
• 入れ子になったグループ階層

フィルタリングと検索操作

こちらも参照してください：references/filtering-search.md

• フィルター条件の作成と削除
• クエリの実行メソッド
• カスタムフィルター条件のパターン
• 条件内の検索機能
• ShowButtons の設定（ルールの削除、グループの挿入／削除）
• UI とプログラムによるフィルタリング
• フィルター変更時のイベント処理

テンプレートとカスタマイズ

こちらも参照してください：references/templates-customization.md

• 値テンプレートのカスタマイズ
• 演算子テンプレートのカスタマイズ
• フィールドテンプレートのカスタマイズ
• カスタム HTML テンプレートの作成
• テンプレートのレンダリングとバインディング
• CSS クラスのカスタマイズ
• 動的なテンプレートレンダリングのパターン

ドラッグ＆ドロップとルール操作

こちらも参照してください：references/drag-drop-clone-lock.md

• ルールのドラッグ＆ドロップ機能
• グループ内でのルールの複製
• 変更を防ぐためのルールのロック
• 区切りとコネクターの動作
• グループ間でのルールの移動
• ドラッグ＆ドロップイベントの処理
• 視覚的なフィードバックとスタイル設定

インポート／エクスポートと永続化

こちらも参照してください：references/import-export.md

• ルールの JSON 形式へのエクスポート
• JSON からのルールのインポート
• SQL クエリの生成
• JSON のシリアル化パターン
• 形式の変換（ルールから SQL／JSON へ）
• データ永続化の方法
• 状態管理

アクセシビリティとRTL

関連項目：references/accessibility-rtl.md

• WCAG 2.1 AA 準拠基準
• キーボードナビゲーションのパターン
• ARIA 属性とラベル
• スクリーンリーダーのサポート
• RTL（右から左）言語のサポート
• フォーカス管理とインジケーター
• ローカライズと国際化

高度な機能とトラブルシューティング

関連項目：references/advanced-features.md

• グローバルおよびローカルの設定オプション
• モデルのバインディングパターン
• 高度な検証戦略
• パフォーマンス最適化の手法
• イベント処理とコールバック
• 状態の永続化パターン
• よくある問題とトラブルシューティング
• 複雑なシナリオでのベストプラクティス

API リファレンス

関連項目：references/api.md

• 型とデフォルト値を含む全プロパティのリファレンス
• パラメーターと戻り値の型を含むすべてのパブリックメソッド
• イベント引数インターフェイスを含むすべてのイベント
• 主要なモデルインターフェイス（RuleModel、ColumnsModel、ShowButtonsModel、ValueModel、TemplateColumn、Validation）
• イベント引数インターフェイス（ActionEventArgs、ChangeEventArgs、RuleChangeEventArgs、DragEventArgs、DropEventArgs）
• SQL／クエリ出力インターフェイス（ParameterizedSql、ParameterizedNamedSql）
• 初期化、SQL エクスポート、ルール管理、クローン／ロック、ドラッグ＆ドロップの使用例

クイックスタートの例

QueryBuilder を使い始めるための最小限の例を紹介します。

import { QueryBuilder, ColumnsModel, RuleModel } from '@syncfusion/ej2-querybuilder';

// Define your data
const employeeData = [
  {
    EmployeeID: 1,
    FirstName: 'Nancy',
    Title: 'Sales Representative',
    HireDate: '22/07/2001',
    City: 'Seattle',
    Country: 'USA'
  },
  {
    EmployeeID: 2,
    FirstName: 'Andrew',
    Title: 'Vice President',
    HireDate: '21/04/2003',
    City: 'Tacoma',
    Country: 'USA'
  }
];

// Define columns matching your data
const columnData: ColumnsModel[] = [
  { field: 'EmployeeID', label: 'Employee ID', type: 'number' },
  { field: 'FirstName', label: 'First Name', type: 'string' },
  { field: 'Title', label: 'Title', type: 'string' },
  { field: 'HireDate', label: 'Hire Date', type: 'date', format: 'dd/MM/yyyy' },
  { field: 'City', label: 'City', type: 'string' },
  { field: 'Country', label: 'Country', type: 'string' }
];

// Optional: Define initial rules
const initialRules: RuleModel = {
  condition: 'and',
  rules: [
    {
      label: 'Employee ID',
      field: 'EmployeeID',
      type: 'number',
      operator: 'equal',
      value: 1
    },
    {
      label: 'Title',
      field: 'Title',
      type: 'string',
      operator: 'startswith',
      value: 'Sales'
    }
  ]
};

// Create QueryBuilder instance
const queryBuilder = new QueryBuilder({
  width: '100%',
  dataSource: employeeData,
  columns: columnData,
  rule: initialRules
});

// Render to DOM
queryBuilder.appendTo('#querybuilder');

よくあるパターン

パターン 1：単一ルールによる基本的なフィルター

シンプルなフィルタリングでは、グループを使わずに単一のルールを使用します。

const rule: RuleModel = {
  condition: 'and',
  rules: [{
    field: 'FirstName',
    type: 'string',
    operator: 'startswith',
    value: 'A'
  }]
};

パターン 2：グループによる AND／OR ロジック

複数の条件を組み合わせた複雑なフィルターに使用します。

const rule: RuleModel = {
  condition: 'and',
  rules: [
    { field: 'City', operator: 'equal', value: 'Seattle' },
    {
      condition: 'or',
      rules: [
        { field: 'Title', operator: 'contains', value: 'Sales' },
        { field: 'Title', operator: 'contains', value: 'Manager' }
      ]
    }
  ]
};

パターン 3：ルールの動的な追加

ユーザーの操作に応じて、プログラムからルールを追加します。

const newRule = [{
  field: 'Country',
  operator: 'equal',
  value: 'USA'
}];
queryBuilder.addRules(newRule, 'group0');

パターン 4：保存用の JSON へのエクスポート

現在のクエリ状態を保存し、永続化します。

const rules = queryBuilder.getRules();
const jsonQuery = JSON.stringify(rules);
// Store in database or local storage

主要な概念

• RuleModel： フィールド、演算子、値を含む単一のフィルター条件を表します
• Condition： 複数のルールを結合する論理演算子（AND／OR）です
• GroupModel： AND／OR 条件を持つルールのコンテナーです
• Operators： 比較方法（等しい、含む、範囲内など）です
• Data Types： サポートされている列の型（文字列、数値、日付、ブール値）です
• Templates： フィールド、演算子、値に使用するカスタム UI 要素です
• State： ルールとグループの現在の設定です

よくあるユースケース

1. 高度な検索フィルター - ユーザーがデータ検索用の複雑なクエリを作成できるようにします
2. レポート生成 - レポートパラメーター用の動的なフィルターを作成します
3. データエクスポート - 視覚的な UI を使用して、エクスポート前にデータをフィルタリングします
4. ログ分析 - システムログを分析するための複雑なクエリを作成します
5. 顧客セグメンテーション - 複数の条件に基づいて顧客をフィルタリングします
6. 権限ルール - 複雑な条件でアクセスルールを定義します
7. 通知ルール - 動的なアラート条件を作成します
8. ETL ワークフロー - 変換前にソースデータをフィルタリングします

---

特定の機能についてサポートが必要ですか？ 上記のリファレンスファイルで、列、データバインディング、テンプレートなどについて詳しくご確認ください！