BiNDupの画面の正体?UIコンポーネントライブラリ「MUI」

f:id:t-ookubo:20220113191332j:plain

 こんにちは。フロントエンドエンジニアのオオクボです。

 デジタルステージではノーコードでサイトを作成できるBiNDupを開発していますが、ボタンやドロップダウンメニュー、ダイアログ等々、多種多様な部品でそういったWebアプリの操作画面は構成されています。 いざこれらを一から実装しようとすると、デザインを考案し、HTMLで骨組みを作り、CSSで飾り付け、JavaScriptで操作時の動きを実現し…と非常に大変です。
こうした手間を省くために、統一性のあるリッチなデザインと挙動を提供するUIライブラリが数多く存在します。

 その中でも今回はBiNDupでサイトをデザインする際に使うDress・SHiFT、マーケティング機能のSmoothGrow、現在開発中の新ブロックエディタで用いられている「MUI」について紹介します。

MUIとは

f:id:t-ookubo:20220117184954p:plain

 Googleのデザイン仕様「Material Design(マテリアルデザイン)」に則って開発されたReact向けのUIライブラリです。 かつては「Material-UI」という名前でしたが、2021年9月にリリースされたバージョン5より「MUI」に変更されました。

 ReactがUIを任意のまとまりで部品(コンポーネント)化できる強みを活かし、MUIはボタンやチェックボックスを始めとした画面を構築する上でほぼ最小単位のWebパーツ群を提供しています。
React及びコンポーネント化のメリットについては「React入門 ~その1」でまとめられているので、ご参考になさってください。

コンポーネント例

MUIで実装できるコンポーネントの一部を公式ドキュメントから抜粋・紹介します。

スイッチ
トグルボタン
ダイアログ
セレクトボックス


 デザインも使い心地もこのままで実用に足るクオリティですね。またコード量の少なさから見ても手軽に実装できる事が伝わるかと思います。
他にも沢山のデモが公式のドキュメントに載っていますので、ご覧になってみてください。

こうしてMUIで作成したコンポーネントをカスタマイズした上で組み合わせ、冒頭で示したBiNDupの一部機能のUIは成り立っています。


 MUIはReact向けUIコンポーネントライブラリの中でも高い人気を誇っており、活発にアップデートされています。
コンポーネントの種類もますます増えつつあり、トリッキーなWebアプリでさえなければMUIで画面作成を網羅できるほどになる事も期待されます。
今後もMUIの進化に追随し、BiNDupのUIも改良を進めていきたい所です。

オオクボ カテゴリーの記事一覧 -