Google App Maker ー Transformerを使いこなす

Posted at 2017-12-26

App Maker には Binding Transformersというバインディングのオプションのような仕組みがある。

これを使うことで表示の仕方を変えたりも出来るようになるし、スクリプトを書く行数を減らすことにも貢献してくるのでしっかり使いこなしていきたい。

本記事では、筆者がよく使うものを厳選して Transformer の解説をする。

#formatDate

通常は Date 型をバインドすると yyyy-mm-dd の形式で表示されるが、これを変えることが出来る Transformer。

次の画像はバインドした時の式、と実際に表示される文字列。

時分秒も表示できるし、\xで囲っておけば任意の文字列を埋め込むことも出来る。

通常は Number 型をバインドすると #.0000000000000 の形式で表示されるが、これを変えることが出来る Transformer。

次の画像は1234.5678901234567890をバインドした時の式、と実際に表示される文字列。

一番下の桁のひとつ下の桁で四捨五入される模様。

通常は Array 型をバインドすると 要素1,要素2,要素3 の形式で表示されるが、これを変えることが出来る Transformer。

次の画像は['JavaScript', 'Angular', 'TypeScript']をバインドした時の式、と実際に表示される文字列。

Transformer はつなげることが出来る。

次の画像はDateの形式を変えて、スペース区切りでArrayにして、スラッシュでつなげたときの式、と実際に表示される文字列。
※この式に意味はないです（良い例が思いつかなかった）

特殊な使い方をする Transformer を紹介しておく。

projection は配列の中から指定したFiledsにマッチする配列を返す事ができる機能のこと。
items..{Fields名}のように使用する。¹

projection で取得した配列の Transformer　には # ではなく ## を指定する。

次の画像はレコード内のを Names を - でつなげて、複数レコードを / でつなげた例。

データソースのバインドを双方向から単方向（サーバー→クライアント）にするための Transformer。

たとえば、次のような場合に使う。

この場合、3で入力した時点でサーバーに保存されているデータが更新されてしまう。
それを避けたいとき、テキストボックスにバインドするときに #readonly を指定する。

Transformer とはちょっと話がずれるが、関連があるのでついでに記載しておく。

式がかけるので +を使って数字の加算や文字列の結合なんかも可能。

Client スクリプトに定義してある Function をそのまま呼ぶことが出来る。

そのため次のようなバインディングが可能。