【脱初心者！】SELECT()関数で依存型ドロップダウンリストを作成する方法

本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

まずはじめに

今回は、当ブログ記事の中でも特に人気の高いSELECT()関数を、さらに深く掘り下げていきます。

AppSheetで何か困った時、「とりあえずSELECT()関数を使ってみよう」と言われるほど、その汎用性は抜群です。

この記事では、そんなSELECT()関数の理解をさらに深めるために、応用例として「依存型ドロップダウンリスト」の作成方法を解説します。

依存型ドロップダウンリストとは、直前に入力したデータ（選択肢）によって、次に表示される入力値（選択肢）が動的に変わる仕組みのことです。

例えば、「都道府県」を選ぶと、その都道府県内の「市区町村」だけがリストに表示される、といった便利な機能ですね。

なるべく分かりやすくまとめたつもりなので、ぜひ皆さんのアプリ開発の参考にしてください。

それでは勉強していきましょう！

本記事を読む前にこちらの記事内容を理解しておきましょう

検証用シートのご紹介

最初に、今回の記事で依存型ドロップダウンリストの作成に使用するデータをご紹介します。

注文シート

このシートは、Valid if設定にSELECT()関数を入力した際の挙動を確認するために作成しました。

このシートの各カラムは、以下の役割を持っています。

• ID: 各行を一意に識別するためのキー値です。
• 商品名、サイズ、価格: これらは、後ほどメニューからリストとして選択できるように設定するカラムです。

メニュー

このシートは、注文シートへ選択肢のリストを供給するために使用します。

このシートの各カラムは、以下の役割を持っています。

• ID: 各行を一意に識別するためのキー値です。
• 商品名、サイズ、価格: これらは、後ほど注文シートへ選択肢としてリストを送るために使用するカラムです。

それでは、これらのデータをAppSheetに読み込み、関数の入力と動作の検証を行っていきましょう。

ここで一つ重要なポイントがあります。

データを送るシート（供給元）と、データを受け取るシート（注文シートなど）のカラム名を同じにしておくことです。

このように設計しておくことで、本記事で解説する内容を、皆さんが作成するどんなAppSheetアプリにも応用しやすくなります。ぜひ参考にしてください(^^)

データタイプRefでは成立しない？その疑問を解消！

SELECT()関数の検証に入る前に、もしかすると読者の皆さんの中に「Ref（参照）データタイプを使えば良いのではないか？」と疑問を持たれた方もいらっしゃるかもしれませんね。

この疑問に対して、まず結論からお伝えします。

Refデータタイプは、参照元と参照先のデータが「1対1」の関係であれば適切に機能します。

しかし、今回の依存型ドロップダウンリストのように、一つのデータ（例: 商品名）に対して複数の関連データ（例: サイズ）が存在する「1対多」の関係の場合には、Refデータタイプだけでは実現できません。

そのため、今回はSELECT()関数を用いて、この「1対多」の関係に対応する依存型ドロップダウンリストの作成方法を解説していきます。

具体例を見てみましょう。

上図の「◯パターン」で示されているように、同じ商品名に紐づく情報が一つしかない場合は、Refデータタイプでデータのリレーションを持たせることが可能です。

しかし、「✕パターン」を見ると、同じ商品名（例：カレーライス）に対して、異なるサイズとして複数の情報が紐づいています。

この状態で無理にRef関係を結ぼうとすると、AppSheetの画面上では「カレーライス」の選択肢が複数（この場合は3つ）出現してしまい、UI低下の原因となってしまいます。

これが、「1対多」の関係でRefデータタイプが適さない理由です。

SELECT()関数を使うことで、この問題をスマートに解決し、意図したとおりの依存型ドロップダウンリストを実現します。

このような設定では、データを入力するユーザーが混乱してしまいます。

したがって、「1対多」の関係になる場合には、Refデータタイプを使用しないのが賢明な選択と言えるでしょう。

データタイプRefについて深く学びたい人はこちら

入力値に連動するドロップダウンリストの作成

それでは、上図のような「入力値によって、次に続く入力値のリストが動的に変更される」仕組みを作成していきましょう。この設定方法は汎用性が高く、私自身もこれまで困ったことがないため、ぜひ皆さんにも参考にしていただきたいです。

まず、設定の全体的な流れを先に説明し、その後に各ステップのポイントを詳しく解説していきます。

商品名カラムにリストを設定する

まず、「商品名」カラムのValid if設定に、以下の関数を入力します。

UNIQUE(メニュー[商品名])

UNIQUE()関数とは？

UNIQUE()関数は、括弧の中に指定されたリストの中から重複する値を除外し、ユニークな値だけのリストを返す関数です。

今回の例では、メニュー[商品名]（「メニュー」シートの「商品名」カラムにあるすべてのデータ）をUNIQUE()関数に渡すことで、重複しない商品名のリストだけが「商品名」のドロップダウンに表示されるようになります。

これにより、ユーザーは重複のないクリーンな選択肢から商品を選ぶことができます。

サイズカラムのValid ifにSELECT()関数を入力する

次に、「サイズ」カラムのValid if設定に、いよいよ本命のSELECT()関数を入力します。

SELECT(メニュー[サイズ],[商品名]=[_THISROW].[商品名])

このSELECT()関数がやっていること

このSELECT()関数は、以下の二つの引数を使って、選択された「商品名」に応じて「サイズ」のリストを動的に絞り込んでいます。

• メニュー[サイズ]

これは、SELECT()関数でリストとして取得したい「サイズ」カラムの全データを指します。

つまり、「メニュー」シートにあるすべての「サイズ」の選択肢を候補として考えます。

• [商品名]=[_THISROW].[商品名]

ここが依存型ドロップダウンリストの肝です。

• [商品名]：「メニュー」シート（データの供給元）の「商品名」カラムを指します。
• =：比較演算子で、両辺が等しいかを確認します。
• [_THISROW].[商品名]：現在入力中のフォームで、すでにユーザーが選択した「商品名」の値を指します。

価格カラムのInitial ValueにANY()とSELECT()関数を設定

最後に、「価格」カラムのInitial Value（初期値）に、以下の関数を入力します。

ANY(SELECT(メニュー[価格],AND([商品名]=[_THISROW].[商品名],[サイズ]=[_THISROW].[サイズ])))

この式は、ユーザーが選択した「商品名」と「サイズ」に基づいて、該当する「価格」を自動的に取得し、初期値として設定します。

その際、フィルター条件式としてAND()関数を使用し、複数の条件を同時に満たす行を絞り込みます。具体的には、

• 「メニュー」シートの「商品名」が、現在フォームで選択されている「商品名」と一致
• 「サイズ」が、現在選択されている「サイズ」と一致

この条件に合致する「価格」のリストが返されます。

通常、この組み合わせであれば抽出される価格は一つだけ（リストに要素が一つ）になる想定です。

ANY()関数

ANY()関数は、引数に渡されたリストから任意の1つの値を取り出す関数です。

• SELECT()関数が返した「価格」のリストは通常1つの値しか含まないため、ANY()を使うことでその唯一の値を確定させ、「価格」カラムの初期値として設定できます。
• この設定により、ユーザーが「商品名」と「サイズ」を選択すると、それに紐づく正しい「価格」が自動で入力されるため、入力の手間が省け、誤入力も防ぐことができます。

設定はこれで完了です！お疲れ様でした。

続いては、なぜ上記の設定で依存型ドロップダウンリストが機能するのか、その仕組みを図を使いながら詳しく解説していきます。

SELECT()関数と[_THISROW].[カラム]の仕組み

まず、SELECT()関数の引数がどのように機能するのか、その基本からおさらいしましょう。

SELECT()関数は、大きく分けて二つの引数を受け取ります。

• 第一引数: 検索対象となるリスト（どのデータ群から情報を取得するか）を指定します。
• 第二引数: そのリストの中から、どのような条件でデータを絞り込むかを示すフィルター条件式を指定します。

今回の記事で「サイズ」カラムに設定した関数、SELECT(メニュー[サイズ], [商品名] = [_THISROW].[商品名])を例に、この考え方を掘り下げていきましょう。

第一引数：取得したいリストの指定

まず、SELECT()関数の第一引数で、「どのリストを取得したいのか」を明確にします。

今回のケースでは、注文シートの「サイズ」カラムに表示したいリストは、メニューシートにある「サイズ」カラムの値です。

そのため、第一引数にメニュー[サイズ]と入力することで、SELECT()関数はメニューシートのC列（サイズ）を検索対象として認識し、そこからデータを取得しようとします。

直前の選択に連動する情報の取得

次に考えるべきは、注文シートでユーザーが選択した「商品名」に紐づく「サイズ」情報のみを、ドロップダウンリストに表示させる方法です。

例えば、注文シートで「カレーライス」を選択した場合、下図で緑色に塗られたセルの情報（カレーライスのサイズ）だけが欲しい、ということになります。

この「対象となるリスト（メニューシートのC列）から、抽出条件に該当するリストを作成する」という処理は、まさにSELECT()関数が得意とする領域です。

第二引数：フィルター条件式の考え方

それでは、SELECT(メニュー[サイズ],[商品名]=[_THISROW].[商品名])における、第二引数のフィルター条件式について詳しく見ていきましょう。

この条件式を理解するには、以下の3つのポイントが重要です。

SELECT()関数の「フォーカス」

第一引数にメニュー[サイズ]のリストを送ると、SELECT()関数はまず「メニュー」シートにフォーカスし、その中のデータを検索対象とします。

二つのシートの区別

第二引数には、SELECT()関数が参照しているメニューシート（データ供給元）と、現在関数を入力している注文シート（データ入力先）の情報を区別して渡す必要があります。

SELECT()関数が、「どこにある、どのデータ」と「今入力している、このデータ」を正しく比較できるよう、指示してあげるイメージです。

[_THISROW].[カラム名]の活用

この「参照先」と「入力先」の区別を可能にするのが、メニューシートの[商品名]と、注文シート（現在入力中の行）の[_THISROW].[商品名]です。

• [商品名]：SELECT()関数がフォーカスしているメニューシート内の「商品名」カラムを指します。
• [_THISROW].[商品名]：現在AppSheetのフォームでユーザーが入力中の行（_THISROW）における「商品名」カラムの値を指します。

つまり、[商品名]=[_THISROW].[商品名]という条件式は、

「メニューシートのこの行の『商品名』は、今あなたが入力しているフォームの『商品名』と同じですか？」という質問をAppSheetに投げかけ、TRUE（同じ）かFALSE（違う）で判断させています。

この仕組みによって、選択された商品名に連動するサイズのみがリストとして表示されます。

ANY(SELECT())関数と「価格」カラムの仕組み

「価格」カラムに設定したANY(SELECT())関数についても、基本的な考え方は「サイズ」カラムの場合と変わりません。SELECT()関数の第二引数であるフィルター条件式が少し複雑になっているだけと捉えてください。

ここで実現したいのは、下図に示すようなデータの紐づきです。

今回は、上図のようなテーブル構造を用いて説明します。

このデータのイメージからお分かりのように、「商品名」と「サイズ」が決定すれば、「価格」は必ず一意の値を取ります。

つまり、「商品名」と「サイズ」の組み合わせに対して、対応する「価格」は一つに決まります。

このようなケースでは、ANY(SELECT())関数を用いることで、求めている「価格」を自動的に取得し、問題をすべて解決できます。

今回の記事で「価格」カラムに入力した関数、ANY(SELECT(メニュー[価格],AND([商品名]=[_THISROW].[商品名],[サイズ]=[_THISROW].[サイズ])))の考え方は、以下の流れで理解するとスムーズです。

第一引数：取得したいリストの指定

つまり、注文シートの「価格」カラムに表示させたいリストは、メニューシートの「価格」カラムの値です。

したがって、第一引数にメニュー[価格]と入力することで、SELECT()関数はメニューシートのD列（価格）を検索対象として設定していることになります。

直前の選択に連動する価格情報の取得

次に考えるべきは、注文シートでユーザーが選択した「商品名」と「サイズ」に紐づく「価格」情報を、初期値として自動的に取得する方法です。

例えば、注文シートで「カレーライス」を「普通サイズ」と選択した場合、対応する価格は600円、また「大盛りサイズ」と選択した場合は800円といった具体的な価格を自動で表示させたい、ということです。

この「対象となるリスト（メニューシートのD列）から、複数の抽出条件に合致するリストをSELECT()関数で作成し、その中から一意の値としてANY()関数で取得する」という流れで実現します。

第二引数：フィルター条件式の考え方

それでは、ANY(SELECT(メニュー[価格],AND([商品名]=[_THISROW].[商品名],[サイズ]=[_THISROW].[サイズ])))という関数における、第二引数のフィルター条件式について解説します。

この条件式の考え方は以下の通りです。

SELECT()関数の「フォーカス」:
第一引数にメニュー[価格]のリストを送ることで、SELECT()関数はメニューシートにフォーカスし、その「価格」カラムからデータを検索しようとします。

複数の条件をANDで結合:
今回は「商品名」と「サイズ」という二つの条件が同時に満たされる必要があります。この複数の条件を組み合わせるために、AND()関数を使用します。

• [商品名]=[_THISROW].[商品名]：これは、メニューシート内の「商品名」が、現在フォームで選択されている（_THISROW）「商品名」と一致するかどうかを判断
• [サイズ]=[_THISROW].[サイズ]：同様に、メニューシート内の「サイズ」が、現在フォームで選択されている（_THISROW）「サイズ」と一致するかどうかを判断

合致する一意の値の抽出:
AND()関数によって結合されたこの条件式は、「メニューシートの中で、現在選択されている商品名とサイズの両方に完全に一致する行」だけを特定します。そして、SELECT()関数はその行の「価格」をリストとして返します。この条件であれば、通常、リストに含まれる価格は一つだけになります。

ANY()による値の確定:
SELECT()関数が返した単一の要素を持つリストから、ANY()関数がその唯一の値を抽出し、「価格」カラムの初期値として設定します。

この仕組みによって、ユーザーが商品名とサイズを選択するだけで、対応する正しい価格が自動的に入力される、非常に便利な機能が実現できます(^^)

関数の検証：実際の挙動を確認しよう！

さて、これまでの設定で入力した関数が、AppSheetの画面上で実際にどのような挙動を示すのか確認してみましょう！

以下の例をご覧ください。

カレーライスを選んだ場合

「商品名」で「カレーライス」を選択し、次に「サイズ」で「普通」を選択した場合

「価格」カラムには、自動的に「¥600」が取得されて表示されます。

同じく「商品名」で「カレーライス」を選択し、次に「サイズ」で「大盛り」を選択した場合

「価格」カラムには、自動的に「¥800」が取得されて表示されます。

ハンバーグを選んだ場合

「商品名」で「ハンバーグ」を選択し、次に「サイズ」で「200g」を選択した場合

「価格」カラムには、自動的に「¥800」が取得されて表示されます。

同じく「商品名」で「ハンバーグ」を選択し、次に「サイズ」で「300g」を選択した場合

「価格」カラムには、自動的に「¥1000」が取得されて表示されます。

ドリンクを選んだ場合

「商品名」で「ドリンク」を選択し、次に「サイズ」で「小」を選択した場合

「価格」カラムには、自動的に「¥150」が取得されて表示されます。

同じく「商品名」で「ドリンク」を選択し、次に「サイズ」で「中」を選択した場合

「価格」カラムには、自動的に「¥250」が取得されて表示されます。

同じく「商品名」で「ドリンク」を選択し、次に「サイズ」で「大」を選択した場合

「価格」カラムには、自動的に「¥400」が取得されて表示されます。

このように、ユーザーの選択に応じて価格が動的に変化することが確認できます。

この仕組みは、データの入力ミスを防ぎ、UIを大幅に向上させます。

まとめ

今回は、AppSheetで非常に便利な依存型ドロップダウンリストの作り方について解説しました。

この機能を実現するには、AppSheetの中核をなすSELECT()関数を使いこなすことが絶対条件となります。

SELECT()関数は、AppSheetでアプリ開発をする上で避けては通れない、まさに中心的な存在です。

本記事を通じて、SELECT()関数、そしてValid ifやInitial Valueといった設定項目への理解がさらに深まっていただけたら幸いです。

Valid ifについて学べる記事を用意しました

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)