2024.12.17 2024.12.17

【PowerApps徹底解説】データ検索に便利なFilter・Search・LookUp関数の違いと使い方

2024 12/17

ローコード開発ツールの中でも、PowerAppsは大量データの取り扱いや連携が得意です。本記事では、アプリ開発の中で欠かせない「データの検索・絞り込み・取得」にフォーカスし、便利な Filter、Search、LookUp の3つの関数を徹底解説します！

実際のアプリ制作を通じて、データ操作を実践的に学び、業務効率化に役立てましょう。

＼ホワイトペーパー／
貴社のPowerApps導入をぐっと前に進めるための
資料3点セット

【下記の３点の資料が無料でダウンロードできます】

Powe Apps 活用事例集
【MS365で使える範囲も分かる】PowerAppsのライセンス早見表
【担当者のスキルレベルや導入の進め方から判断！】PowerPlatformで内製化をすすめるためのロードマップ

1. はじめに：PowerAppsのデータ検索・絞り込みとは？

PowerAppsではデータソースを指定して管理するといった用途に適しているためデータを検索・絞り込むシーンが頻繁に登場します。
そこで重要となるのがこちらの3つの関数です。

Filter関数（複数条件で絞り込み）
Search関数（部分一致検索）
LookUp関数（単一レコードの検索）

どの関数もデータ管理には欠かせないものです。この記事では関数の違いや使い方を商品検索・カート追加機能アプリを作成しながら解説していきます。

2. 3つの関数の概要と違い

3つともデータをリストなどから条件に沿って取得するものですが、取得できる情報や条件の数などに違いがあります。

① Filter関数：複数条件でデータを絞り込む

用途：条件に一致する複数のレコードを取得します。名前通り「フィルター」となる機能で、条件となるふるいを通過したデータ全てが取得されます。

構文：

Filter(データソース, 条件)

特徴：
- AND / ORを使った複数条件の組み合わせが可能です。
- 検索条件が変わると即時反映され、データが動的に絞り込むことができます。

使用例：カテゴリが「Electronics」で価格が5万円以上の商品を絞り込む場合以下のように条件を指定するとデータソースから情報を取得されます。

Filter(Products, Category = "Electronics" && Price >= 50000)

② Search関数：部分一致でデータを検索する

用途：フィールド内の文字列に特定の文字が含まれているか検索する機能です。

構文：

Search(データソース, 検索文字列, 検索対象の列1, 検索対象の列2...)

特徴：
- 文字列が指定フィールド内に含まれているかどうかで判定をするので部分一致検索ができます。

使用例：商品名やカテゴリに「PC」という文字が含まれるデータを検索する場合は、「商品名」と「カテゴリ」といった2つの列を指定してその中から「PC」を検索します。

Search(Products, "PC", "商品名", "カテゴリ")

③ LookUp関数：条件に一致する最初の1件を取得する

用途：条件に一致する1件目のレコードまたは特定のフィールドの値を取得します。ユニークなデータを管理するときに適しています。

構文：

LookUp(データソース, 条件, 取得するフィールド)

特徴：
- 1件目しか取得されないため、単一レコードの検索に特化しています。
- 複数レコードが条件に合致しても最初の1件のみ返すのに注意が必要です。

使用例：「ノートPC」に該当するレコードの価格フィールドを取得する場合は以下のように条件と取得フィールドを指定しておきます。

LookUp(Products, 商品名 = "ノートPC", 価格)

3. 3つの関数を使ったアプリ制作：商品検索アプリ

早速、3つの関数を使って実際にアプリを作成してみましょう。

今回は「商品検索・カート追加機能アプリ」を作成します。アプリの機能や見た目は一例なので、ご自身でアレンジを加えながら作ってみてください。

アプリの概要

目的：PowerAppsを使って商品検索・カート追加機能を持つアプリを作成する。
機能：
1. 商品検索・絞り込み機能（Filter、Search）
2. カート追加（LookUp）と合計金額計算

ステップ1：データソースの準備

ExcelテーブルやSharePointリストを使用してデータを作成しておきます。今回はChatGPTに「商品名、カテゴリ、価格の三つの列を持つ50行くらいのデータを作成し、Excelファイルでください」と指示しを使ってExcelデータを作成してもらいました。アクセスするだけで使用できるGPT-4oの無料範囲内でファイルのダウンロードが可能ですが、トーク回数の制限に達した後自動で切り替わる「GPT-4o mini」ではファイルの作成・送信とダウンロードはできないので注意してください。

ダウンロード後はデータを確認して適宜修正をしておきましょう。

PowerAppsのホーム画面を開き、「テーブル」から「新しいテーブルを作成する」を選択します。

するとこのようにオプションが表示されるので、インポートを選択します。

データがインポートされます。AI機能でデータ名も勝手につけてくれました。保存ボタンを押してデータの準備は完了です。

ステップ2：データの接続とコントロールの配置

PowerAppsで空のアプリを作成し、サイドメニューのデータから先ほど作成したテーブルを接続しておきます。テキスト入力、ボタン、スライダー、垂直ギャラリー、アイコンなどのコントロールを適宜用いて画面を構成します。このような画面にしました。

検索ボックスの「ヒントのテキスト」を「商品を検索」に変更し「テキスト」を空欄にしています。また、ギャラリーを配置し一番上を選択した状態でテキストラベルを挿入し商品名と価格をThisItem.商品名のように指定し、表示させました。その他、同じ方法で挿入からテキストラベル「円」とボタン「カートに入れる」を配置しています。

ステップ3：ドロップダウンとスライダーの設定

ドロップダウンにリストを適用する

今の状態ではドロップダウンにカテゴリが適用されていないので適用させます。カテゴリ用のリストを新たに作成します。商品データを作成したときと同様にテーブルから新規作成しテーブル名は分かりやすいように「商品カテゴリリスト」とし、列名を「カテゴリ名」とします。

作成後、配置した「ドロップダウン」プロパティのItemsを以下のように指定しておきます。

これで、ドロップダウンを選択するとカテゴリの項目が表示されるようになります。

スライダーの設定

続いて、スライダーの設定です。スライダーではスライダーの左端の値となる最小値と右端の値となる最大値を決めておくことができます。初期値は5000円としましたが、好きなように設定します。

スライダーのハンドルが一つしか置けないのと間隔が設定できず１刻みになってしまうのが問題ですが、条件を入れることで刻みを設定することも可能です。

OnChangeに

UpdateContext({SliderValue: Round(Slider1.Value / 1000, 0) * 1000})

と入力することでスライダーの値は変わりませんが、変数「SliderValue」に値が1000刻みとなって保存することが可能です。このSliderValueを検索フィルターとして利用しましょう。

スライダー本体の「値の表示」機能はオフにしスライダーの上に選択した価格帯を表示するテキストラベルを配置しました。Textは一例ですが、スライダーが左端に行き、スライダー本体の値が最小値の1となったときに、計算式上SliderValueが0となってしまうので、表示も1とするためにIf文で条件式を入れています。

これでドロップダウンとスライダーの設定が完了しました。

ステップ4: ギャラリーに検索条件とフィルター条件を適用する

ギャラリーに表示される商品にドロップダウンと検索ボックス、スライダーの値でフィルターと検索ができるようにギャラリー全体を選択した「Items」に以下の文で適用します。

Filter(Search(商品情報, TextInput1.Text, 商品名, カテゴリ), 
(Dropdown1.Selected.カテゴリ名 = "すべて" || カテゴリ = Dropdown1.Selected.カテゴリ名) && 
価格 >= Slider1.Min && 価格 <= SliderValue)

まず、検索欄に入力されているテキストが含まれるものを「商品情報」リストの「商品名」と「カテゴリ」列の中から抽出したリストの中でフィルターをかけると宣言します。
次の条件ではドロップダウンが「すべて」となっているときは全てか、もしくはカテゴリ名と一致するものを抽出しています。

抽出されたもののうちスライダーで選択した価格内のものを表示するといった式になっています。

プレビューで見てみると上手く適用されているのが確認できます。

ステップ5: カートに入れる機能の実装

カートに入れるボタンを押したときに実装される「OnSelect」を設定します。

Collect(Cart, LookUp(商品情報,  商品名= ThisItem.商品名 && 価格=ThisItem.価格))

選択した商品の商品名と価格が一致するものをリストから探し、「Cart」コレクションに追加する動作です。商品名だけで探すと正しいものが追加されない可能性があるので、複数条件に一致するようにしましょう。
ここでの詳しい説明は省きますが、コレクションはアプリ内で要素を追加できるグループ型の変数といった感じです。

カートをクリックしたとき表示される画面を作成。

画面右上のカートがクリックされたときにカート内の商品が表示されるような画面を作成します。

カートと商品一覧ギャラリーの横にこのように配置しました。ギャラリーを配置しギャラリーのItemsは「Cart」にしています。
カートに入れるボタンとカートのアイコンをクリックしたら表示されるようにしたいので、Visibleプロパティで設定しておきます。
いくつか方法はありますが、「ShowCart」といったブール代数型の変数を設定し変数の値(True,False)に応じて表示を変えることにしています。

カートのアイコンのOnSelectに

UpdateContext({showCart: !showCart})

と入力します。カートが開いている時に押されると閉じ、開いていないときに押されると開くといった切り替えができます。

「カートに入れる」ボタンのOnSelectにはUpdateContext({showCart: True})とし、カートが開いている時に押してもカートが閉じられないようにしておきます。

カート内の要素(ギャラリー、テキストラベル)のVisibleをShowCartにすれば、応じて非表示にすることができます。

キャンセルアイコンはDisplayModeを

If(showCart=true,DisplayMode.Edit,DisplayMode.Disabled)

と設定し、非活性字の表示色(DisabledColor)を無色透明RGBA(0,0,0,0)にします。

また、キャンセルアイコンが押された場合はshowCartをfalseにするよう、OnSelectを設定します。

UpdateContext({showCart: false})

ギャラリー内のごみ箱アイコンが押された場合にコレクションCartから要素が削除されるようにOnSelectに「Remove(Cart,ThisItem)」と入力します。これは選択中の要素を削除する処理になります。

最後に合計金額を表示するテキストラベルを配置し、カートの中の価格の合計値を表示するためにTextに以下のように設定します。

Sum(Cart, 価格)

これでカート機能の実装が完了しました。
最後にアプリが更新されたときにカートのアイテムが初期化されるようにアプリ開始時Cartを空にする処理を追加します。
ツリービューの一番上の「App」を選択し「OnStart」プロパティにClear(Cart)と入力します。

これで、アプリを再起動したときにカートを空にすることができます。

以上でアプリは完成です。

4. 完成したアプリの動作確認

検索機能が正しく動作しているか、カートが正しく表示され、ボタンや合計金額が合っているか確認してみましょう。

5. 3つの関数の使い分けまとめ

以上、３つの関数を使って商品検索やカート機能を実装しました。上手く実装できたでしょうか？3つの関数を組み合わせて、ギャラリーに反映すると条件が分かりにくく、はじめは難航するかもしれません。

ぜひ今回の活用例を活かして関数の使い分けと組み合わせで機能の幅を広げてみてください。

関数名	用途	主な特徴	使用シーン
Filter	複数条件でデータを絞り込む	AND/OR条件の柔軟な適用	カテゴリや価格での絞り込み検索
Search	部分一致検索	文字列検索に特化	キーワード検索
LookUp	単一レコードの取得	最初の1件のみ取得	詳細情報の表示や単一値の取得