2020年12月1日
プログラミング
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 Builderを使ってみる
さて、本題のMaterial UI Builderのお話です。
こちらは無料でも利用できますが、有料アカウントにすることで多くのデザインパーツを利用することができるようです。
実際にこちらの画面をスタートとして、実際にデザインパーツを組み込んでいきましょう。
左側のメニューから、追加したいコンポーネントを追加していきましょう。
無料のアカウントの場合、ドラッグアンドドロップして右側のキャンバスにコンポーネントが追加できます。
また、追加したコンポーネントのReactを押すことで、コードの編集も可能です。
このような形でエディタ表示されます。
JSX形式での出力もされますし、コンポーネントのstyleも修正することが可能です！
当然ここで修正したものは反映されます。
と思ったのですが、こちらは有料の機能のようです。
また右上のプレビューボタンを押すことでHTMLのページとしてプレビューすることもできます。
当然レスポンシブになってますし、便利ですね。
Reactコンポーネントとしてエクスポートしてみる
また、作り終わったページはReactのソースコードとしてエクスポートすることができます。
こんな感じですね。
まとめ
確かに画面を定義しながら、ワイヤーを作るようなイメージでReactのコードがかけるのは便利だと感じました。
さくっとローコードでレスポンシブのMaterial-UIベースのReactコードを作れました。
有料アカウントにすることで、よりテンプレートが増え、使い勝手もよくなりそうです。
実際使う際のデメリットとしては、コンポーネントの命名が Features1.js など連番になるなどコードをメンテナンスしていくのが少し大変そうです。
またコンポーネントの粒度としては荒いものとなる為、これまたメンテナンスしていくのが大変そうです。
全体として、さくっとモックアップを作っていく為のサービスかなという印象を受けました。
デザイナーがいない、もしくは少ない組織でフロントエンドエンジニア主導で使うには便利だと感じました。
他にもTailwindベースのビルダーもあるようなので、また別の機会にご紹介したいと思います。
Reactのお仕事に関するご相談
Bageleeの運営会社、palanではReactに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。
この記事は
参考になりましたか？
2
1
AUTHOR
Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にpalan（旧eishis）を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
関連記事
2022年5月13日
Reactでオセロゲームを作る
2021年4月9日
Slack OAuth x React で Slack ユーザー認証を作ってみた！
2021年3月1日
Reactで使えるバリデーションライブラリを紹介！
2021年2月22日
Hasura Cloud × Auth0 × React でお手軽にTodoアプリを作ってみた！
2020年12月12日
Blitz.jsとTailwind CSSでメモ帳アプリの作成【第２弾】
2020年12月8日
コンポーネントを実装するときに意識すること
アプリでもっと便利に！気になる記事をチェック！
記事のお気に入り登録やランキングが表示される昨日に対応！毎日の情報収集や調べ物にもっと身近なメディアになりました。
簡単に自分で作れるWebAR
「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。
palanARへ
palanでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー
Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にpalan（旧eishis）を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。
やまかわたかし デザイナー
フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。
はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
こぼり ともろう エンジニア
サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。
ささい エンジニア
フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。
Damien
WebAR/VRの企画・開発をやっています。森に住んでいます。
ゲスト bagelee
かっきー
まりな
suzuki
miyagi
ogawa
雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。
いわもと
デザイナーをしています。 好きな食べ物はラーメンです。
taishi kobari
フロントエンドの開発を主に担当してます。Blitz.js好きです。
kubota shogo
サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています！
nishi tomoya
aihara
グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。
nagao
SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。
Kainuma
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
sugimoto
asama
ando
iwasawa ayane
yoko oshimo
異業界からやってきたデザイナー。palanARのUIをメインに担当してます。これからたくさん吸収していきます！
