AzureのDBをRetoolでCRUD処理をした時に試行錯誤した結果解消できた話
AzureのcosmosDBのデータCRUD管理をRetoolと呼ばれるノーコードツールでしようとしたら超めんどくさかった話です。結果的にワークアラウンド的に解消できたのでその内容を記載します。ちなみに筆者はSQLについてはそこまで詳しくはないので詳しい方には当たり前の記事かもしれません😇
1. Retoolとは
Retoolを知らない方向けに説明しますと、Retoolは↓のような特徴を持つWebアプリケーション開発プラットフォームです。
- コーディング不要でアプリケーションを素早く開発可能
- 様々なデータソースに接続可能（データベース、API、スプレッドシートなど）
- ドラッグ＆ドロップでUIを構築可
- JavaScriptやPythonを使ったカスタムコードの記述もOK
左側:UIコンポーネント・右側:画面レイアウト, テンプレートも多くはないですがあります
Retoolを使うと、開発者はバックエンドとフロントエンドの両方を素早く構築することができます。特にデータを可視化することや内部の管理ツール開発に適しているツールです。
自社のデータベース管理をするツールをどう作ろうか迷った時に、Reactの管理ライブラリを使おうか迷ったのですが、API Keyを繋ぐだけで楽に管理ツールを作れそうなRetoolを今回は選定してみました。
（特に無料の範囲でできることがかなり多いため）
2. やろうとしたこと
Retoolは元々データ参照するだけなら本当に簡単に繋げることができるため、DBの内容をテーブルに表示してチームと共有するような用途は以前から利用していました。
ただ、今回やろうとしたこととしては、DBの中で頻繁に値を変えたり追加・編集したいトランザクショナルではないコンテンツ関連のデータをRetoolで動かせないかを試そうとしていました。
やりたいこととしては、
- サクッと新規データを追加できる
- 一般的なフォームのように一つ一つTextFieldやPullDownを用意してデータを選択・入力されるUIは追加作業に時間がかかるのでテーブル上で追加ができる体験がしたかった。
- サクッとデータを削除できる
- 仮に誤ったデータ項目で追加してしまってもすぐに削除ができる
- サクッとデータ項目の値を更新できる
- メンバーとの議論の中でデータ項目の変更要望が発生した際にすぐに変更・修正ができる
とりあえず、サクッとCRUD処理ができないかと思っていました。
具体的には、
- 追加
- tableにoptionでついていたadd rowボタンを追加すると各入力項目に入力できるようになる
- 入力を完了したらSaveボタンを押すと追加処理が行われる
- DBに入力した項目が全て反映されている（idなどは関数処理で付与）
- 編集
- セルを選択したら編集ができる
- 編集が完了したらSaveボタンを押すと更新処理が行われる
- DBに入力した項目が全て反映されている
- 削除
- 削除ボタンを押したら選択した行データが削除される
query resourceからDBを選択してquery文を書くと実行ができます
3. 躓いた箇所
前述の通りRead（読み取り）の部分は既に実装できていたので、Createの部分から構築しようとしたのですが....
どうやって追加するquery文を書いたらいいんだ...？
となり、とりあえず公式docsにアクセスするも、
Local databaseの解説記事は多いがAzure周りのドキュメントが余りない...
ZennにもqiitaにもRetoolに関する記事が全然ない...
docsのpropertiesのドキュメントやquery文の様々なプロパティを色々試してはエラーが出てなど試行錯誤した結果分かったことが下記です。
4. 試行錯誤した結果
結論から言うと、以下がわかりました。
追加
{{ table_name }}
table名は変数として使用できるため、アクセスしたいtable名を入力する
（query文は{{ }}で囲う）
{{ table_name.newRows[0] }}
.newRowsを使うとadd rowボタンを押した後に表示される追加行の情報にアクセスできる。
例えば、「title」「description」という列がある場合は、
{{ "title" : {{table_name.newRows[0].title}}, "description" : {{ table_name.newRows[0].descripton }} }}
と記述すればよい。（[0]は新規行が配列として存在しているのでその最初の行という意味だと思われる）
更新
{{table_name.selectedRow.id, table_name.selectedRow.title}}
と記述するとtable上で選択している行データの各列項目の値を参照することができます。
これは編集していないデータの値を取得する際に使用できます。
{{ table1.changesetArray[0].title }}
と記述すると編集したセル情報にアクセスできます。
ただしこの時、編集可能な列項目に設定されているが、実際には編集はしない場合には""が値としては入ってしまいます。そのため、
"title": "{{table1.changesetArray[0]?.title || table1.selectedRow.title}}"
のような形で条件分岐させる必要があります。この場合は、実際には編集されていない場合には元の値を参照するというような挙動が実現できます。
削除
{"id": "{{table1.selectedRowKey}}"}
削除はid指定してqueryをボタンに対応させるだけで実行できました。
selectedRowKeyはその行のkeyの値を取得できます。selectedRow.idでも同じだと思います。
削除ボタンを実行する際にダイアログを表示させることも設定可能なので設定しておきましょう。
後はtableのインスペクタ(Command + U)からボタンの設定 + queryの配置を行えばOK
5. 最後に（宣伝）
JSに詳しいエンジニアの方からすると何も迷わずに捌ける内容なのかもしれません。
ただ、Retoolはがっつりのエンジニアではない方も使いそうだなと思ったことと、実際に自分が行き詰まった際にいつも参考にしていたzenn, qiitaにほとんど本件のような内容を記載していた記事がなかったため、（少ないとは思いますが）似たような状況に陥った人が同じ轍を踏まないために、本記事が参考になれば幸いです。
（また初執筆になるため説明が不足している部分については都度更新しようかと考えています。もし情報として不足していることがあればご教示頂けますと大変嬉しい限りです）
最後に、現在私たちのチームではポーカーの学習を支援するプラットフォームアプリケーションを開発しています。
近年急速に盛り上がっているポーカーですが、近代ポーカーはゲーム理論と呼ばれる領域の知識体系が戦略の基礎となっており、多くのアマチュア・プロプレイヤーはその戦略を基礎としてプレイをしています。
一方で、現在の学習コンテンツは体系化されておらず、かつ初心者〜中級者の層が気軽、かつ手軽に学べるサービスが存在しておらず、学ぶモチベーションはあるのに十分な学習機会が提供されていないという課題があります。私たちは誰もが手軽に・気軽に学べるゲーミフィケーションされた学習サービスのβ版を現在開発しています。
そのようなサービスを共に開発・推進できる仲間を探しています。
- 不完全情報ゲーム（将棋などとは異なり、全ての情報がプレイヤー間で共有されていないゲーム）の領域に興味や関心がある方
- ポーカー自体に興味がある方
- 学習サービス・ゲーミフィケーションに興味がある方
がいましたらどんな内容でも一度フランクにお話しができると嬉しいです。
（旧TwitterのDM欄より連絡頂けました爆速でレスいたします笑）
Discussion