|
| 1 | +--- |
| 2 | +title: クエリ ビルダー モデルの使用 |
| 3 | +_description: Angular Query Builder は、シリアル化/逆シリアル化可能な JSON 形式モデルを提供し、SQL クエリを簡単に構築できるようにします。今すぐお試しください。 |
| 4 | +_keywords: Angular Query Builder コンポーネント, Angular Query Builder コントロール, Ignite UI for Angular, UI コントロール, Angular ウィジェット, web ウィジェット, UI ウィジェット, Angular, ネイティブ Angular コンポーネント スイート, Angular UI コンポーネント, ネイティブAngular コンポーネント ライブラリ |
| 5 | +_language: ja |
| 6 | +--- |
| 7 | + |
| 8 | +# クエリ ビルダー モデルの使用 |
| 9 | +Angular Query Builder は、シリアル化/逆シリアル化可能な JSON 形式モデルを提供し、SQL クエリを簡単に構築できるようにします。 |
| 10 | + |
| 11 | +## 概要 |
| 12 | + |
| 13 | +この Angular クエリ ビルダーの例では、[`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) 式ツリーを使用してエンドポイント [Northwind WebAPI](https://data-northwind.indigo.design/swagger/index.html) からデータを要求し、それを [`IgxGridComponent`]({environment:angularApiUrl}/classes/igxgridcomponent.html) のデータ ソースとして設定する方法を示します。 |
| 14 | + |
| 15 | +<code-view style="height:700px" |
| 16 | + no-theming |
| 17 | + data-demos-base-url="{environment:demosBaseUrl}" |
| 18 | + iframe-src="{environment:demosBaseUrl}/interactions/query-builder-request-sample" > |
| 19 | +</code-view> |
| 20 | + |
| 21 | +## クエリ ビルダー モデル |
| 22 | +[`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) に式ツリーを設定するには、[`FilteringExpressionsTree`]({environment:angularApiUrl}/classes/filteringexpressionstree.html) を定義する必要があります。各 [`FilteringExpressionsTree`]({environment:angularApiUrl}/classes/filteringexpressionstree.html) には、データ レコードがツリーに対してどのように解決されるかを表すフィルタリング ロジックが必要であり、ユース ケースに応じて、フィールド名、エンティティ名、および返却フィールドドの配列を渡すことができます。特定のエンティティ内のすべてのフィールドを返す必要がある場合は、`returnFields` プロパティを ['*'] に設定できます。 |
| 23 | + |
| 24 | +```ts |
| 25 | +const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Entity A', ['*']); |
| 26 | +``` |
| 27 | +ルート [`FilteringExpressionsTree`]({environment:angularApiUrl}/classes/filteringexpressionstree.html) が作成されると、その `filteringOperands` プロパティを [`IFilteringExpression`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html) (単一の式またはグループ) または [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html) (サブクエリ) の配列に設定することで、条件、グループ、またはサブクエリを追加できます。 |
| 28 | +各 [`IFilteringExpression`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html) および [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html) には、フィルタリング式が配置されている列の名前である `fieldName` と、[`IFilteringOperation`]({environment:angularApiUrl}/interfaces/ifilteringoperation.html) 型の `condition` または `conditionName` のいずれかが必要です。必要に応じて、`searchVal`、[`IExpressionTree`]({environment:angularApiUrl}/interfaces/iexpressiontree.html) タイプの `searchTree`、および `ignoreCase` プロパティを設定することもできます。 |
| 29 | + |
| 30 | +- 簡単な**式**の定義: |
| 31 | +```ts |
| 32 | +tree.filteringOperands.push({ |
| 33 | + fieldName: 'Name', |
| 34 | + conditionName: IgxStringFilteringOperand.instance().condition('endsWith').name, |
| 35 | + searchVal: 'a' |
| 36 | + }); |
| 37 | +``` |
| 38 | + |
| 39 | +- 式の**グループ**の定義: |
| 40 | +```ts |
| 41 | +const group = new FilteringExpressionsTree(FilteringLogic.Or, undefined, 'Entity A', ['*']); |
| 42 | +group.filteringOperands.push({ |
| 43 | + fieldName: 'Name', |
| 44 | + conditionName: IgxStringFilteringOperand.instance().condition('endsWith').name, |
| 45 | + searchVal: 'a' |
| 46 | +}); |
| 47 | +group.filteringOperands.push({ |
| 48 | + fieldName: 'DateTime created', |
| 49 | + conditionName: IgxDateFilteringOperand.instance().condition('today').name |
| 50 | +}); |
| 51 | +tree.filteringOperands.push(group); |
| 52 | +``` |
| 53 | + |
| 54 | +- **サブクエリ**の定義: |
| 55 | +```ts |
| 56 | +const innerTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Entity B', ['Number']); |
| 57 | +innerTree.filteringOperands.push({ |
| 58 | + fieldName: 'Number', |
| 59 | + conditionName: 'equals', |
| 60 | + searchVal: 123 |
| 61 | +}); |
| 62 | + tree.filteringOperands.push({ |
| 63 | + fieldName: 'Id', |
| 64 | + conditionName: 'inQuery', |
| 65 | + searchTree: innerTree |
| 66 | +}); |
| 67 | +``` |
| 68 | + |
| 69 | +モデルは JSON 形式でシリアル化/逆シリアル化できるため、クライアントとサーバー間で簡単に転送できます。 |
| 70 | +```ts |
| 71 | +JSON.stringify(tree, null, 2); |
| 72 | +``` |
| 73 | + |
| 74 | +## サブクエリの使用 |
| 75 | + |
| 76 | +[`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) のコンテキストでは、*IN / NOT-IN* 演算子は、*WHERE* 句で新しく公開されたサブクエリ機能とともに使用されます。 |
| 77 | + |
| 78 | +> [!Note] |
| 79 | +> サブクエリは、外部クエリの条件として使用されるデータを取得するために使用される、別のクエリ内にネストされたクエリです。 |
| 80 | +
|
| 81 | +`FilteringExpression` で *IN / NOT-IN* 演算子を選択すると、サブクエリが作成されます。返すエンティティと列を選択した後、外部クエリの指定された列の値がサブクエリによって返される値のいずれかと一致するかどうかを確認します。 |
| 82 | + |
| 83 | +次の式ツリーは: |
| 84 | +```ts |
| 85 | +const innerTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Products', ['supplierId']); |
| 86 | +innerTree.filteringOperands.push({ |
| 87 | + fieldName: 'supplierId', |
| 88 | + conditionName: IgxNumberFilteringOperand.instance().condition('greaterThan').name, |
| 89 | + searchVal: 10 |
| 90 | +}); |
| 91 | + |
| 92 | +const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Suppliers', ['supplierId']); |
| 93 | +tree.filteringOperands.push({ |
| 94 | + fieldName: 'supplierId', |
| 95 | + conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name, |
| 96 | + searchTree: innerTree |
| 97 | +}); |
| 98 | +``` |
| 99 | +次を呼び出すことでシリアル化できます: |
| 100 | +```ts |
| 101 | +JSON.stringify(tree, null, 2); |
| 102 | +``` |
| 103 | + |
| 104 | +これは次のように転送されます: |
| 105 | +``` |
| 106 | +{ |
| 107 | + "filteringOperands": [ |
| 108 | + { |
| 109 | + "fieldName": "supplierId", |
| 110 | + "condition": { |
| 111 | + "name": "inQuery", |
| 112 | + "isUnary": false, |
| 113 | + "isNestedQuery": true, |
| 114 | + "iconName": "in" |
| 115 | + }, |
| 116 | + "conditionName": "inQuery", |
| 117 | + "searchVal": null, |
| 118 | + "searchTree": { |
| 119 | + "filteringOperands": [ |
| 120 | + { |
| 121 | + "fieldName": "supplierId", |
| 122 | + "condition": { |
| 123 | + "name": "greaterThan", |
| 124 | + "isUnary": false, |
| 125 | + "iconName": "filter_greater_than" |
| 126 | + }, |
| 127 | + "conditionName": "greaterThan", |
| 128 | + "searchVal": 10, |
| 129 | + "searchTree": null |
| 130 | + } |
| 131 | + ], |
| 132 | + "operator": 0, |
| 133 | + "entity": "Suppliers", |
| 134 | + "returnFields": [ |
| 135 | + "supplierId" |
| 136 | + ] |
| 137 | + } |
| 138 | + } |
| 139 | + ], |
| 140 | + "operator": 0, |
| 141 | + "entity": "Products", |
| 142 | + "returnFields": [ |
| 143 | + "supplierId" |
| 144 | + ] |
| 145 | +} |
| 146 | +``` |
| 147 | + |
| 148 | +## SQL の例 |
| 149 | + |
| 150 | +Ignite UI for Angular クエリ ビルダー コンポーネントを使用して SQL クエリを構築する方法の実用的な例を見てみましょう。 |
| 151 | + |
| 152 | +以下のサンプルには、「Suppliers」、「Categories」、「Products」 という名前の 3 つの`エンティティ`があります。 |
| 153 | + |
| 154 | +「Beverages」 カテゴリに属する製品を供給するすべてのサプライヤーを見つけたいとします。データはすべてのエンティティに分散されているため、*IN* 演算子を活用し、サブクエリを作成することでタスクを実行できます。各サブクエリは `FilteringExpressionsTree` によって表され、`transformExpressionTreeToSqlQuery(tree: IExpressionTree)` メソッドを通じて SQL クエリに変換できます。 |
| 155 | + |
| 156 | +まず、`name` が `Beverages` であるレコードの `categoryId` を返す `categoriesTree` を作成します。これは最も内側のサブクエリです: |
| 157 | + |
| 158 | +```ts |
| 159 | +const categoriesTree = new FilteringExpressionsTree(0, undefined, 'Categories', ['categoryId']); |
| 160 | +categoriesTree.filteringOperands.push({ |
| 161 | + fieldName: 'name', |
| 162 | + conditionName: IgxStringFilteringOperand.instance().condition('equals').name, |
| 163 | + searchVal: 'Beverages' |
| 164 | +}); |
| 165 | +``` |
| 166 | + |
| 167 | +この `FilteringExpressionsTree` に対応する SQL クエリは次のようになります。 |
| 168 | + |
| 169 | +``` |
| 170 | +SELECT categoryId FROM Categories WHERE name = 'Beverages' |
| 171 | +``` |
| 172 | + |
| 173 | +次に、最も内側のサブクエリによって返された `categoryId` と一致する `categoryId` を持つレコードの `categoriesTree` から、`supplierId` フィールドを返す `productsTree` を作成します。これは、`inQuery` 条件と関連する `searchTree` を設定することによって行います。これは中間のサブクエリです: |
| 174 | + |
| 175 | +```ts |
| 176 | +const productsTree = new FilteringExpressionsTree(0, undefined, 'Products', ['supplierId']); |
| 177 | +productsTree.filteringOperands.push({ |
| 178 | + fieldName: 'categoryId', |
| 179 | + conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name, |
| 180 | + searchTree: categoriesTree |
| 181 | +}); |
| 182 | +``` |
| 183 | + |
| 184 | +SQL クエリの更新された状態は次のとおりです。 |
| 185 | + |
| 186 | +``` |
| 187 | +SELECT supplierId FROM Products WHERE categoryId IN ( |
| 188 | + SELECT categoryId FROM Categories WHERE name = 'Beverages' |
| 189 | + ) |
| 190 | +``` |
| 191 | + |
| 192 | +最後に、`Suppliers` エンティティのすべてのフィールドを返す `suppliersTree` を作成します。ここで、`supplierId` は、中間のサブクエリによって返される `supplierId` のいずれかと一致します。これは最も外側のクエリです: |
| 193 | + |
| 194 | +```ts |
| 195 | +const suppliersTree = new FilteringExpressionsTree(0, undefined, 'Suppliers', ['*']); |
| 196 | +suppliersTree.filteringOperands.push({ |
| 197 | + fieldName: 'supplierId', |
| 198 | + conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name, |
| 199 | + searchTree: productsTree |
| 200 | +}); |
| 201 | +``` |
| 202 | + |
| 203 | +これで SQL クエリは完了です。 |
| 204 | + |
| 205 | +``` |
| 206 | +SELECT * FROM Suppliers WHERE supplierId IN ( |
| 207 | + SELECT supplierId FROM Products WHERE categoryId IN ( |
| 208 | + SELECT categoryId FROM Categories WHERE name = 'Beverages' |
| 209 | + ) |
| 210 | +) |
| 211 | +``` |
| 212 | + |
| 213 | +これで、`IgxQueryBuilderComponent` の `expressionsTree` プロパティを `suppliersTree` に設定できます。さらに、クエリが変更されるたびにエンドポイントへの新しいリクエストがトリガーされ、グリッドに表示される結果データが更新されます。 |
| 214 | + |
| 215 | +<code-view style="height:700px" |
| 216 | + no-theming |
| 217 | + data-demos-base-url="{environment:demosBaseUrl}" |
| 218 | + iframe-src="{environment:demosBaseUrl}/interactions/query-builder-sql-sample" > |
| 219 | +</code-view> |
| 220 | + |
| 221 | +## API リファレンス |
| 222 | + |
| 223 | +<div class="divider--half"></div> |
| 224 | + |
| 225 | +* [IgxQueryBuilderComponent API]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) |
| 226 | +* [IgxQueryBuilderComponent スタイル]({environment:sassApiUrl}/index.html#function-query-builder-theme) |
| 227 | + |
| 228 | +## その他のリソース |
| 229 | + |
| 230 | +<div class="divider--half"></div> |
| 231 | +コミュニティに参加して新しいアイデアをご提案ください。 |
| 232 | + |
| 233 | +* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) |
| 234 | +* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular) |
0 commit comments