ふかしぎのReactさんぷるず

MUI v5 - Reactさんぷるず

最終更新 2022/04/06
MUI v5 についてのあれこれです。初心者向けです。
Webアプリケーション向けです。
MUIの機能の説明はこちらに移動してください。

一歩目

そもそもMUIって?

見た目をかっこよくするための物です!
動きもあるのでなんかよりかっこよくなります!
以前はmaterial-UIといっていましたがMUIに名前を変わりました。
とはいうもののファイル名などあちこちに未だにmaterial-uiという単語が使われています。
material-UIと書いてあるネットの情報は古いので注意してください。

インストールして下準備

npmは3つのパッケージをインストールしてください。
npm install @mui/material
npm install @emotion/react
npm install @emotion/styled
インストールせずにCDNでMUIをいじりたい場合はCDNでMUIへ移動してください

なにはともあれ色を決めよう

テーマカラーです。
統一感を持たせるために全体で使用する色を最初に決めましょう。
実はなにもしなくてもデフォルトで青っぽい色が設定されます。
それでかまわなければテーマカラーの設定はすっとばしてもかまいません。
1.よく使うやつ「primary」
2.次によく使うやつ「secondary」
3.エラー時に使う「error」
4.注意時に使う「warning」
5.情報に使う「info」
6.正常終了に使う「success」
大きくこれらに分かれて設定します。
さらにこれらがそれぞれ通常「main」、暗い「light」、明るい「dark」に分かれす。
例えば「primary」の「main」や「primary」の「light」、「primary」の「dark」などにです。
なので6種類かける3タイプで18種類の色になります。
デフォルトではどんな色なのか見てみましょう。
種類 通常「main」 明るい「light」 暗い「dark」
1.よく使うやつ「primary」 blue[700] #1976d2 blue[400] #42a5f5 blue[800] #1565c0
2.次によく使うやつ「secondary」 purple[500] #9c27b0 purple[300] #ba68c8 purple[700] #7b1fa2
3.エラー時に使う「error」 red[700] #d32f2f red[400] #ef5350 red[800] #c62828
4.注意時に使う「warning」 #ed6c02 orange[500] #ff9800 orange[900] #e65100
5.情報に使う「info」 lightBlue[700] #0288d1 lightBlue[500] #03a9f4 lightBlue[900] #01579b
6.正常終了に使う「success」 green[800] #2e7d32 green[500] #4caf50 green[900] #1b5e20
blue[700]などはMUIが内部で持っている色の配列です。
内部で持っている色の種類はred、pink、purple、deepPurple、indigo、blue、lightBlue、cyan、teal、green、lightGreen、lime、yellow、amber、orange、deepOrange、brown、grey、blueGreyになります。
ひとつ不思議なのがどうして公式のパレットで示されているデフォルトカラーとここで表示しているデフォルトカラーが異なるのか。謎です。
ここで表示しているデフォルトカラーはmaterial-ui.development.jsの内部で定義されている値をもってきています。
「warning」の「main」にいたっては色の配列すら使っていません。そして中にコメントで「// closest to orange[800] that pass 3:1.」と注記してあります。

createThemeで使う色を決める

このデフォルトの色が気に食わなければ変更するのは簡単です。
createThemeを使って色を指定してからThemeProviderで適用します。
createThemeでは変更したいところだけ色を指定すればよいです。
未指定のところは自動的にデフォルトの色が適用されます。
一番シンプルな色の設定です。プライマリーをオレンジに変更します。
一つだけ設定することにより内部ではこのオレンジに基づいてmain、light、darkが自動設定されます。
const tukuttaTheme = createTheme({
  palette: {
    primary: orange,
  },
});
もっと細かくmain、light、darkも指定できます。この時mainは必須です。lightだけやdarkだけでは指定できません。そしてlightやdarkを省略した場合はmainをもとに未設定のものが自動設定されます。この場合はdarkを省略しているのでmainのorangeをもとにdarkの色が自動設定されます。
const tukuttaTheme = createTheme({
  palette: {
    primary: {
      main: orange[500],
      light: orange[200],
    },
  },
});
プライマリーの他にも設定できます。下記の例はプライマリーとセカンダリーを設定しています。
const tukuttaTheme = createTheme({
  palette: {
    primary: orange,
    secondary: {
      main: purple[500],
      light: purple[200],
      dark: purple[600],
    },
  },
});
ありがたいことに公式にカラーツールがありGUIで色を調べることができます。
公式カラーツール(https://mui.com/customization/color/#playground)

ThemeProviderで決めた色を適用する

ThemeProviderで囲んでthemeに先ほど設定したtheme変数を指定するだけです。
これでMUIの色の定義は終了です。
ReactDOM.render(
  <ThemeProvider theme={tukuttaTheme}>
    このThemeProviderの中でうんたらかんたらコードを書くと色が適用される
  </ThemeProvider>
  , document.getElementById('sample')
);

CssBaselineのすすめ

CssBaselineを設定しておくとなんかちょっとかっこよくなったデザインがさらに最適化されます。
とりあえず設定しておきましょう。
ReactDOM.render(
  <ThemeProvider theme={theme}>
    <CssBaseline />
      このThemeProviderの中でうんたらかんたらコードを書くと色が適用される
    </ThemeProvider>
  , document.getElementById('sample')
);

とりあえ実際につかってみる

BUTTON

色を設定したので早速使ってみましょう。
「primary色のボタンです」をクリックしてください。クリックしたことがわかるようにちょっと変化します。
const tukuttaTheme = createTheme({
  palette: {
    primary: orange
  },
});
ReactDOM.render(
<ThemeProvider theme={tukuttaTheme}>
<CssBaseline />
<Button color="primaryvariant="contained">primary色のボタンです</Button>
</ThemeProvider>
, document.getElementById('sample')
);

CDNでMUI

npmなどでMUIをインストールしなくてもMUIを使うことができます。
下のコードのいずれかをHTMLに埋め込むだけです。
上からVer指定の開発版、最新の開発版、最新の運用版になります。
※最新版はバージョンが変わった場合はintegrityの値も変わるのでその都度変更する必要があります。
<script src="https://unpkg.com/@mui/material@5.4.1/umd/material-ui.development.js" integrity="sha512-H8SbwYOfzmnhe4TOuWh1qLvuSbez0tymeZwATjoCsxWdEoxxwLl1J6m4Kx28nLQsFJynFXjPNfsLVHXBLizVZw==" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js" integrity="sha512-H8SbwYOfzmnhe4TOuWh1qLvuSbez0tymeZwATjoCsxWdEoxxwLl1J6m4Kx28nLQsFJynFXjPNfsLVHXBLizVZw==" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@mui/material@latest/umd/material-ui.production.min.js" integrity="sha512-PcnKZR3oj1BNPiaILKXUgiiSv5HQh2PX8nFGhYGgKEeUeib/0CJQNTmQ4Rtdg8qRzcpZQdH76sHG3Ebps6/O1A==" crossorigin="anonymous"></script>
このサイトでは意図的にmaterial-ui.development.jsを使用しています。
通常は公開するときにはmaterial-ui.production.min.jsに使用します。開発版で公開してはいけません。
CDNで読み込んだ時はimportではなく変数に定義して使用します。
const Button = MaterialUI.Button;
const CssBaseline = MaterialUI.CssBaseline;
const ThemeProvider = MaterialUI.ThemeProvider;
const createTheme = MaterialUI.createTheme;
const orange = MaterialUI.colors.orange;
実際に全体をどのように書くかはサンプル0で確認してください。
事前にトランスパイルしていないのでサンプル0はソースコードをみればJSXが直接見られます。
サンプル0

cjsとumd

CDNを設定しようとした際によく見ると同じバージョンなのにURLにcjsやumdの違いがあるものがあります。
これはモジュールシステムの違いです。
cjsはCommonJSのモジュールシステムを使っています。
umdはUniversal Module Definitionの略称でフロントエンドとバックエンドのどちらでも動作します。
今回はscript要素で読み込むので必ずumdの方を使用してください。
cjsのほうでは動きません!

integrityのすすめ

CDNで読み込む際にはできる限りintegrityを設定しましょう。
ブラウザーが読み込もうとしているJavaScvriptファイルが途中で改ざんされていないかチェックするのでセキュリティ対策になります。
転ばぬ先の杖ではないですが、やっておいて損はありません。

MUI v5の機能

MUI v5の機能の説明はこちらに移動してください。

React 目次

最初に現在のReactについて
世界一シンプルなサンプル
React Router v6
React Router v6 API
MUI v5
sxの解説
マテリアルアイコンの解説
Autocomplete
Avatar
AvatarGroup
Badge
Button
ButtonGroup
Checkbox
Chip
Collapse
Divider
Floating Action Button(Fab)
Fade
FormControlLabel
Grow
Icon
List
ListItem
ListItemAvatar
ListItemButton
ListItemIcon
ListItemSecondaryAction
ListItemText
ListSubheader
Radio
RadioGroup
Rating
Select
Slide
Slider
Switch
TextField
ToggleButton
ToggleButtonGroup
Zoom
エラー対処
HTMl select
戻る

全体目次