Material-UI BuilderでReactコンポーネントをローコードで作る！

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay1です！

最近、「ノーコード」と呼ばれる開発いらずでシステムを構築できるサービスや、コードを最小限にしながら開発できる「ローコード」によるサービスが流行っています。
代表的なのは bubble といったウェブアプリの構築ツール、またbageleeの運営元であるpalanでもノーコードでWebARを開発することができるpalanAR なども運営しています。

今回ご紹介するMaterial-UI BuilderはReactによるMaterial-UIベースのウェブサイトを簡単にローコードで開発することができるサービスです。

Material UIとは

マテリアルデザインとは、Google社が2014年に考案したデザインに対する考え方とガイドラインです。
具体的にはコンポーネントやレイヤーなどUIで表現することができるものの特徴を定めたドキュメントになります。
※詳しくはこちらの記事をご覧ください。

マテリアルデザインを読んで学んだ、実践で使えるデザインテクニック第２弾

Material-UIはReactで簡単にコンポーネントベースでマテリアルデザインを実現できるライブラリです。
※Material-UIについては実際にReactのプロジェクトに組み込んだこちらの記事もご覧ください。

Material-UI でインタフェースを作る【Reactで作るマラソンペースメーカー】

Material UI Builderを使ってみる

さて、本題のMaterial UI Builderのお話です。
こちらは無料でも利用できますが、有料アカウントにすることで多くのデザインパーツを利用することができるようです。

実際にこちらの画面をスタートとして、実際にデザインパーツを組み込んでいきましょう。

左側のメニューから、追加したいコンポーネントを追加していきましょう。
無料のアカウントの場合、ドラッグアンドドロップして右側のキャンバスにコンポーネントが追加できます。

また、追加したコンポーネントのReactを押すことで、コードの編集も可能です。

このような形でエディタ表示されます。
JSX形式での出力もされますし、コンポーネントのstyleも修正することが可能です！

当然ここで修正したものは反映されます。

と思ったのですが、こちらは有料の機能のようです。

また右上のプレビューボタンを押すことでHTMLのページとしてプレビューすることもできます。

当然レスポンシブになってますし、便利ですね。

Reactコンポーネントとしてエクスポートしてみる

また、作り終わったページはReactのソースコードとしてエクスポートすることができます。

こんな感じですね。

まとめ

確かに画面を定義しながら、ワイヤーを作るようなイメージでReactのコードがかけるのは便利だと感じました。
さくっとローコードでレスポンシブのMaterial-UIベースのReactコードを作れました。
有料アカウントにすることで、よりテンプレートが増え、使い勝手もよくなりそうです。

実際使う際のデメリットとしては、コンポーネントの命名が Features1.js など連番になるなどコードをメンテナンスしていくのが少し大変そうです。
またコンポーネントの粒度としては荒いものとなる為、これまたメンテナンスしていくのが大変そうです。

全体として、さくっとモックアップを作っていく為のサービスかなという印象を受けました。
デザイナーがいない、もしくは少ない組織でフロントエンドエンジニア主導で使うには便利だと感じました。

他にもTailwindベースのビルダーもあるようなので、また別の機会にご紹介したいと思います。