More than 1 year has passed since last update.

ローコード開発ツール「Material UI Toolpad (α版)」使ってみた！

Last updated at 2022-12-28Posted at 2022-12-28

はじめに

この記事は、ローコード開発ツールであるMaterial UI Toolpad（α版）についてまとめたものになります。

α版なので、まだまだ出来ることに限りはありそうですが、
触ってみたら面白かったため、いくつか共有できたらと思います！

Material-UI（以後、MUI）のコンポーネントライブラリを利用して、
MUIベースのウェブサイトを簡単に開発することができるローコードUIビルダーです。

Toolpad内に置かれているMUIのコンポーネントをドラッグ&ドロップするだけで、簡単に構築することができます。

ただ、α版ですので、現状使えるコンポーネントは以下の7つと少なめですが、

近々、Form / Card / Tabs / Slider / Switch / Radio / Date picker / Checkbox
などのコンポーネント達も使えるようになるみたいです！
楽しみですね。

ツール内で、REST APIを叩いたり、Google スプレッドシート / PostgreSQLに接続して取得してきたデータを
レンダリングすることも可能なようです！

ここではQiitaのAPIを叩いてみようと思います！

まずは、データを表示させたいページを開いた状態で、右側の「+ Add query」をクリック

「Create Query」モーダルが表示されたら、「Fetch | < default>」を選択して、右下に表示される「Create query」をクリックします。

すると、こんな画面に。

デモ用のjsonも置いてくれていますが、ここではQiitaのAPIを叩いてみます。

一応、上部のnameを「qiitaQuery」にしてみました。
左側のQueryの部分で設定していきます。

QiitaAPIについてはこちらを参考にしてください。
参考) Qiita API v2のドキュメント

今回は必要ないですが、パラメータの設定なども勿論できます。

ここまで設定が完了したら、「Preview」をクリックしてみてください。
そうすると、レスポンスがモーダル右側に表示されます。

ここまで出来たら、右下で「Save」をクリック

この後は、ここで取得してきたデータを画面にレンダリングするステップに入っていきます。
今回は「Data grid」内に私の書いた記事を表示させてみます！

Data gridを選択した状態で、右側「rows」と書かれてあるボタンの右側のボタンをクリックしてください。

そうすると、「Bind a property」というモーダルが表示されます。

Make the "rows" property dynamic with a JavaScript expression. This property expects a type: array.

と記載があるので、配列を入れてあげれば良いことが分かります。
ここから、先程作成した「qiitaQuery」のデータを紐づけていきます。

qiitaQuery.data

と書いてあげると、以下のようにどのようなデータが入っているのかも確認することができます。

ここまで来たら、右下の「Update binding」をクリックしましょう。
すると、以下のような形で自分の記事に関する情報を表示することが出来ました。

勿論表示させたいカラムを以下のように指定することも出来ますし、カラムを入れ替えることも出来るようです！

画面上部にデプロイボタンがあり、そこをクリックしてみると、
Deploy applicationというモーダルが表示されます。

適当に説明を書いて、Deployボタンを押してみると、
新しいタブがうまれて、そこで作ったページを確認することが出来るようになります！

詳細はこちらを参考にしてみてください！

α版なので、子コンポーネントを削除してみたら、親コンポーネントも全部消えてしまったりなど、
まだまだバグはあるようですし、使えるコンポーネントが少ないので、
実際のアプリケーション開発に活用できる段階ではなさそうです。
（α版なので当たり前ですが、、、）

けど、ローコード開発ツールに触ってみたのが初めてということもあり、めっちゃワクワクしました！
β版が出てからもう一回使ってみたいなと思います！

皆さんも良ければ是非触ってみてください！