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

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

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

まずはじめに

今回はブログ記事の中でも人気のselect()関数についてです。

appsheetで困ったらとりあえずselect()関数を叩けばいい

それくらい汎用性の高い関数なので、select()関数の理解を更に深める記事を作成しました。

タイトルにある依存型ドロップダウンリストとは、

直前に入力したデータの値によって続く入力値を動的に変える ことを意味しています。

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

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

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

検証データの紹介

まず最初に、記事をまとめる際に使用したデータの紹介をします。

注文シート

このシートはValid ifにselect()関数を入力したときの挙動を確認するシートです。

• ID：Key値
• 商品名、サイズ、価格：メニューからリストをもらうカラム値

メニュー

このシートは注文シートにリストを送るためのシートです。

• ID：Key値
• 商品名、サイズ、価格：注文シートへリストを送るカラム値

これらのデータをappsheetに読み込んで、関数入力の検証を行います。

ポイントとしては、

データを送るシートと受け取るシートのカラム名を同じにする

このようにしておくと、本記事の内容を真似すればどんなアプリにでも使えます。

データタイプRefでは成立しない？

select()関数の検証をする前にこちらの疑問を解説します。

読者の皆さんの中で「データタイプRefでは駄目なのか？」と疑問を持たれた方もいらっしゃるかもしれません。

結論から言うと、Ref関係は1対1の関係なら使用できますが、1対多の関係なら使用できません

上図の◯パターンでは同じ商品名に紐ついている情報が1つしかないため、データのリレーションを持たせることが可能です。

反対に✕パターンでは同じ商品に異なるサイズとして複数の情報が紐ついています。

試しにRef関係を結ぶと、appsheetの画面ではカレーライスの選択肢が3つ出現することになります。

紐ついているサイズのデータは上から少なめ、普通、大盛りですが、

これでは選んでみないことには紐ついているデータが分からないです。

この設定では入力者が混乱するので、1対多の関係になる場合はRefは使わないのがベターです(^^)

データタイプrefについて学べる記事を用意しました

ドロップダウンリストの作り方

上図のような入力値によって続く入力値のリストを動的に変更する仕組みを作ってみたいと思います。

汎用性が高く、私もこの設定方法で困ったことがないのでぜひ参考にしてください(^^)

まず設定の流れを先に説明し、ポイントをあとから解説します。

商品名カラムにリストを送る

Valid ifに以下の関数を入力します。

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

unique()関数

括弧の中にリストを送ることで、リスト内の重複する値を除外してリストにし直す関数

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

Valid ifに以下の関数を入力します。

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

価格カラムのInitial Valueにselect()関数を入力する

Initial Valueに以下の関数を入力します。

any(select(メニュー[価格],and([商品名]=[_thisrow].[商品名],[サイズ]=[_thisrow].[サイズ])))

設定としてはこれで完了です(^^)

続いてなぜそうなるのか？を解説します。

select()関数と[_thisrow].[カラム]の考え方

まずselect()関数の引数の渡し方を確認します。

第一引数に検索対象となるリストを指定し、第二引数にそのリスト内のフィルター条件式を指定します。

今回の記事で入力した関数

select(メニュー[サイズ],[商品名]=[_thisrow].[商品名])の考え方ですが

第一引数に送りたいリストを考える

つまり、注文シートのサイズに送りたいリストはメニューにあるサイズのカラム値です。

第一引数をメニュー[サイズ]と入力することで、C列を検索対象としています。

直前で選んだ商品名に紐ついているサイズの情報が欲しい

次に考えるべきこととして、注文シートで選んだ商品名とメニューにある商品名が同じであるとき、

それに紐ついているサイズの情報をドロップダウンリストで表示させる方法です。

例えば、注文シートでカレーライスを選択した場合

緑で塗られたセルの情報が欲しいことになります。

対象となるリスト（C列）から抽出条件に該当するリストを作成するのは、select()関数にお任せ(^^)

select()関数の第二引数に送るフィルター条件式を考える

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

この第二引数の条件式の考え方ですが、

1.第一引数にメニュー[サイズ]のリストを送ると、select()関数はメニューにフォーカスします

2.第二引数には『メニュー』（select()関数が参照しているシート）と『注文シート』（select()関数を入力しているシート）をselect()関数が区別出来るように引数を渡す必要があります

3.参照先：[商品名]と入力先：[_thisrow].[商品名]でその区別が可能です

[_thisrow].[カラム]は関数を入力しているテーブルにあるカラムのことを指し、

select()関数が迷子にならないようにするための目印と思ってください(^^)

any(select())関数と価格カラムについて

価格カラムについても考え方は同じです。

第二引数のフィルター条件式が少し複雑になっただけだと思ってください(^^)

やりたいことのイメージとしては、下図のようなデータの紐付きです。

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

データのイメージを見てもらうとわかりますが、価格の値は必ず一意の値を取ります。

商品名とサイズを決めたら価格は1つに決まります

こういう場合は、any(select())関数を用いれば問題は全て解決します。

今回の記事で入力した関数

any(select(メニュー[価格],and([商品名]=[_thisrow].[商品名],[サイズ]=[_thisrow].[サイズ])))の考え方は、以下の流れです。

第一引数に送りたいリストを考える

つまり注文シートの価格に送りたいリストはメニューにある価格のカラム値です。

第一引数にメニュー[価格]と入力することで、D列を検索対象としていることになります。

直前で選んだ商品名とサイズに紐ついている価格の情報が欲しい

次に考えるべきこととして、注文シートで選んだ商品名とサイズ、メニューにある商品名とサイズが同じであるときに

それに紐ついている価格の情報を初期値として取得する方法です。

例えば、注文シートでカレーライスを選択した場合、普通サイズは600円で大盛りサイズは800円。

対象となるリスト（D列）から抽出条件に該当するリストをselect()関数で作成し、一意の値としてany()関数で取得します。

select()関数の第二引数に送るフィルター条件式を考える

any(select(メニュー[価格],and([商品名]=[_thisrow].[商品名],[サイズ]=[_thisrow].[サイズ])))

この第二引数の条件式の考え方は以下です。

関数の検証

最後に入力した関数がどういった画面の挙動を示すのか確認したいと思います(^^)

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

カレーライス→普通と選んだ場合、価格￥600を取得しています。

カレーライス→大盛りと選んだ場合、価格￥800を取得しています。

ハンバーグを選んだ場合

ハンバーグ→200gと選んだ場合、価格￥800を取得しています。

ハンバーグ→300gと選んだ場合、価格￥1000を取得しています。

ドリンクを選んだ場合

ドリンク→小と選んだ場合、価格￥150を取得しています。

ドリンク→中と選んだ場合、価格￥250を取得しています。

ドリンク→大と選んだ場合、価格￥400を取得しています。

まとめ

以上、依存型ドロップダウンリストの作り方についての記事でした。

作成するには、select()関数を使いこなせるようになることが絶対条件です。

select()関数はappsheetでアプリ開発をするなら避けて通れない関数です。

本記事でselect()関数について、より一層理解が出来るようになっていただければ幸いです(^^)

また、今回select()関数を入力したValid ifについても理解しておくことをおすすめします。

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

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

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

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