Skip to main content

クイックスタート - MySQL編

今回は以下の機能を実現する社内向け管理画面を構築して、Querierの基本的な使い方を紹介します。

  • ユーザーの一覧を表示する
  • ユーザー名から検索する
  • ユーザーのメールアドレスを変更する

データを連携する

今回はすでに接続されている [Onboading DB] を使用するので、接続の設定などは必要ありません。
ご自信のデータソースを接続した方は、こちらをご覧ください。

管理画面を構築する

画面のラベルを配置する

  1. 右側の [コンポーネント] から [テキスト] をドラッグ&ドロップします。
  2. 右側の [エディター][テキスト]ユーザー一覧 と入力します。
  3. 右側の [エディター][サイズ]large に変更します。

ユーザー一覧をテーブルに表示する

  1. 右側の [コンポーネント] から [テーブル] をドラッグ&ドロップします。
  2. [データフローリスト][新規作成] をクリックします。
  3. [データフロー] の下のテキストインプットにある、データフローの名前を listUsers という名前に変更します。
  4. [Onboarding DB] というMySQLのデータソースを選択します。
  5. [SQL] に、以下のSQLを記述します
SELECT * FROM users LIMIT 20;
  1. [実行する] をクリックします。
  2. 右下の [状態管理] タブを開き、listUsers を選択し、 data の中を確認し、データが取れていることを確認します。
  3. 配置された [テーブル] をクリックし、右側の設定項目の データ{{ listUsers.data }} に変更すると、データがマッピングされます。

ユーザー名から検索する

  1. 右側の [コンポーネント] から [インプット][テキスト][テーブル] の間にドラッグ&ドロップします。
  2. 右側の [エディター][ラベル]メールアドレスで検索 と入力します。
  3. 前で作成した listUsers というデータフローを選択し、 [オプションの入力] を選択します。
  4. [SQL] を以下に変更します。
SELECT * FROM users WHERE email LIKE '%{{ input1.value }}%' LIMIT 20;
  1. [変更が発生したら自動でクエリを実行] のチェックをオンにします。

ユーザーのメールアドレスを変更する

  1. 右側の [コンポーネント] から [カラム] をドラッグ&ドロップします。
  2. [カラム] の左側にすでに配置されているテーブルを移動します。
  3. [カラム] の右側に新しく [インプット] を配置します。
  4. [状態管理]タブをクリックし、 [UIエレメント]から [table1]を選択して、 [selectedRow]を選択しdataのなかにemailが入っていることを確認します。
  5. 3で配置したインプットの [エディター][ラベル]メールアドレスを更新 と入力します。
  6. 3で配置したインプットの [エディター][DefaultValue]{{ table1.selectedRow.data.email }} と入力します。
  7. [ボタン] を3で配置したインプットの下に配置します。
  8. 5で配置したボタンの [エディター][ラベル]更新 と入力します。
  9. [カラム] のアジャスターを動かして、幅を調整します。
  10. [データフローリスト] に戻り、 [新規作成] をクリックします。
  11. [データフロー] の下のテキストインプットにある、データフローの名前を updateUserEmail という名前に変更します。
  12. [Onboarding DB] というMySQLのデータソースを選択します。
  13. [SQL] に、以下のSQLを記述します
UPDATE users
SET email = '{{ input2.value }}'
WHERE id = {{ table1.selectedRow.data.id }};
  1. [成功時のトリガーを設定する] で、 listUsers データフローを選択します。これをすることによって、 updateUserEmail が実行された後に、 listUsers が実行されるので、テーブル情報が最新の状態に保たれます。
  2. 7で配置したボタンの [エディター]データフローupdateUserEmail を選択します。これをすることによって、ボタンが押された直後に updateUserEmail が実行されます。

動作を確認する

次のステップ