この前までReact/Reduxの勉強をしていました。
Reactの使い方がふんわりわかってきたって感じです。 とはいうものの、きれいな画面を作る能力が皆無なので、デザイン系のフレームワークがないと自分はまともな画面も作れません。
ということで、今回はReactのデザイン系フレームワークのMaterial-UIを使ってみたので、そのメモです。
Material-UI is なに？
Reactがいくらフロントエンド開発の生産性を向上させるからと言っても、画面のデザインを作っていくのは大変なものです。 従来では、BootstrapのようなCSSフレームワークを使用することが一般的でしたが、Reactについてもそのような"いい感じの画面を早く作る"ためのツールが開発されており、"React コンポーネントセット"と呼ぶようです。d
上の記事を参考に、Reactコンポーネントセットについて調べてみました。
(2020年7月6日現在)
| Reactコンポーネントセット | githubスター数 |
|---|---|
| material-ui | 59023 |
| react-toolbox | 8603 |
| rebass | 6651 |
| belle | 2467 |
| mui | 4361 |
| grommet | 6444 |
| elemental-ui | 4320 |
| react-bootstrap | 17910 |
| reactstrap | 9311 |
| react-mdl | 1780 |
| material-design-react | 39 |
| react-materialize | 1276 |
| react-uikit-components | 0 |
| uikit-react | 111 |
| react-semantify | 344 |
| react-semantic-ui | 217 |
上の表から分かるように、最もスター数が多いのがmaterial-uiです。
要するに、多少大袈裟かもしれませんが、Reactコンポーネントセットの使用を考えた際のファーストチョイスはmaterial-uiであると考えて良いでしょう。
使ってみる
インストール
とりあえずプロジェクトを作ってみます。
npx create-react-app material_ui_sample
そんでもってインストールしてみます。
npm install --save @material-ui/core
これでインストール完了です。簡単ですね。
とりあえず突っ込んでみる
思考停止で、書いてあるとおりにApp.jsを書き換えてみます。
import React from 'react';
import { Button } from '@material-ui/core';
import './App.css';
function App() {
return <Button color="primary">Hello World</Button>;
}
export default App;
するとこんな感じ。
左上になんかいますね。ボタンです。
ダッシュボードを作る
ちょっとずつ真面目に作っていきます。 公式で提供されている画面サンプルのテンプレートがあるので、はじめはその辺りを参考に作っていくのが良いかと思います。
ということで、最初に書かれているダッシュボードについてやってみます。
アイコンのインストール
画面に使用されるアイコンをインストールする必要があるようなので、そのへんをやってみます。
npm install --save @material-ui/icons
これだけみたいです。
rechartsのインストール
ダッシュボードにグラフ表示がありますので、グラフ描画用のライブラリもインストールする必要があるようです。
npm install --save recharts
突っ込む
これも思考停止で用意されたコンポーネントを突っ込んでいくだけです。 詳細は下にgithubのリポジトリくっつけたので、そちらをご参照ください。
まず、気になるのがApp.jsの中にある、CssBaselineってタグです。 これで、基本的なMaterial UIのCSSのテンプレートを適用しているようですね。
次にAppbar(画面上のバー)がありますね。
Drawerは左のメニューですね。
メインのコンテンツになるものは"main"タグで囲うようです。 その中に段階的にコンポーネントをはめ込んで行く感じなんですね。
グリッドシステムはflexboxが想定されているようで、mdとかxsとかでレイアウトを表現できるようです。
その他、必要そうなコンポーネントは適宜、公式サイトから探してみたらいいと思います。(適当)
出来上がり
動かしてみるとこんな感じです。
npm start
ダッシュボードらしきものが出てきました。 めでたしめでたし。
残骸
今回も試した残骸はこの辺にあります。
感想
VueだとVuetifyを使ってましたが、ReactだったらMaterial-UIを使うことになりそうですね。 Vuetifyに慣れすぎてしまって、時々「あれ?」ってなったりしますが、まあそのへんは使っていくうちに慣れるでしょう。
