お手軽に今風な画面を作りたい
その昔、htmlとcssだけでめっちゃ頑張ってカッコイイ画面を作っていました。
しかしある人は言いました。
🙅♀️「デザインに統一なくね？」
🤦♀️「毎回似たようなcss描きまくるのダルくね？」
そこでいつの間にか生まれた概念マテリアルデザインと
そのコンポーネントライブラリです。
とくにReactのためにあるものがMaterial-UIであり
公式がとても見やすく、簡単に綺麗なUIが作れるうえ、カスタムも十分にできます。
やすっぽい言葉より実際に見た方が早いので、早速実践してみましょう。
とその前に...
バージョンについて
Material-UIのv4とv5の間に大きな溝があります。
綺麗にまとめてくださいってる方の記事を貼っておきます。公式はこちら
v4
v5
また、v5からブランド名がMaterial-UIからMUIに変わりました。よって
この記事のタグにも一応どっちもつけてみましたし、なにより
npm installするものが変わり、ソース中でのimport文も変わってしまいます。
npm install @material-ui/core @material-ui/icons
npm install @mui/lab @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material
🌾公式のGet Startedを参考にしています
さっそく実践
それではいい感じの画面を作ってみましょう。Reactの導入等はここではスキップします。
codepenで5秒で作ってみたものがこちら。
0.5x押すと見やすいです。
See the Pen Untitled by serna37 (@serna37) on CodePen.
muiのCardとかとTypographyを使ってみました。
文字通りカード型のやつを画面上に置いてくれます。勝手にレスポンシブ対応してくれます。
さて、MUI公式を見ながら使い方のデモを確認してゆき、多くのコンポーネントを取り入れることができますが
公式はとっても見やすいです。
サンプルのソースも↓のボタン押せばすぐに見れますし
sandboxで公開してくれているので、その場でちょっと変更してお試しができちゃいます。
服屋で試着する感覚に近いです。
MUIは基本的に細かいcss事情を考えなくて良い、あらかじめ、ある程度作られた
みんながどうせコレよく使ってるでしょ！ってパーツをめっちゃ持ってます。
なんてありがたい。
コード共有サイトで試す
コード共有サイトについては趣旨とズレるので細かくは触れませんが、以下を参考にすると良いです。
・CodeSandbox
・StackBlitz
・CodePen
とにかく即座にフロント言語を試してみましょうということです。
MUIのCDNでの入れ方はこちらにあります。
https://unpkg.com/@mui/material@latest/umd/material-ui.development.js
とりあえず触ってみたいだけの方は、前述のCodePenで試してみたり
以下のように公式MUIに溢れているsandbox(や、stackblitz)で試すと良いでしょう
Cardの例であればこちらからいけます
