Meterial-UIを使うときのポイント～Grid編～

はじめに

ReactのアプリケーションのUIコンポーネントといえばMeterial-UIではないでしょうか。
Meterial-UIは2018年にversion1がでて、この記事の執筆時点で3.9.2となっています。

個人的には馴染み親しんだbootstrapのほうが画面のデザインは楽に進みそうだったのですが、
せっかくReact使うんだからと思いMeterial-UIを使い始めました。

バージョンアップが早くどんどん進化しているイメージですが、まずは基本的な使い方を身に着けようということで備忘録がてら書いていきます。

ちなみにreact-bootstrapというのを使えばReactでもコンポーネントちっくにbootstrapが使えるよう。

Gridレイアウトの使い方

Gridレイアウトの基本の基本

まずなにをするにも必要になってくるのが、Grid。
覚え方は単純に「container」でwrapして、「item」を並べる感じです。

具体的な使用方法は以下

import Grid from '@material-ui/core/Grid';
<Grid container>
<Grid item xs={12}>基本の基本</Grid>
</Grid>

bootstrapでいうdiv class=”container”とdiv class=”row”がGrid container部分になり、
div class=”col-12″部分がGrid item xs={12}に代用される感じです。

npm iでmaterial-uiのパッケージを追加している前提ですが、material-uiのコンポーネント使用時には該当コンポーネントをimportするのを忘れずに。
上記でいう１行目import Grid from ‘@material-ui/core/Grid’;の部分ですね。
これを書いておくことでと書くだけでよしなにやってくれる。便利。

カラム幅は最大が12でbootstrapと同じです。
6:6で同じ幅の２カラム。
4:8で左カラム狭めの右カラム広め。

レスポンシブデザインの対応方法

基本はxs={**}の形でレイアウトしていき、デバイスの幅によってレイアウトを分けたいときは以下のように定義します。
xs 全てのサイズに対応
sm（small）: 600dp〜
md（medium）: 960dp〜
lg（large）: 1280dp〜
xl（xlarge）: 1920dp〜

これもbootstrapの経験があれば慣れ親しんだ定義ですが、ブレイクポイントの値が違う点だけ注意。
モバイルファーストで考えてレイアウトしていき、必要に応じてmd、lg等を追加していくやり方だとはかどりそうです。
例えば、モバイルだといいけどデスクトップで見ると幅が広すぎる、というときにそこだけmdの定義を追加するといった感じです。

ここまでの説明を使った例

import Grid from '@material-ui/core/Grid';

<Grid container>
  <Grid item xs={4}>
    カラム
  </Grid>
  <Grid item xs={4}>
    カラム
  </Grid>
  <Grid item xs={4}>
    カラム
  </Grid>
</Grid>

paparと組み合わせた例

import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';

      <Grid container justify="center">
        <Grid item xs={10}>
          <Paper>
            ①
          </Paper>
        </Grid>
        <Grid item xs={2}>
          <Paper>
            ②
          </Paper<
        </Grid>
      </Grid>

レスポンシブデザイン用のレイアウト

import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';

      <Grid container justify="center">
        <Grid item xs={12} sm={6}>
          <Paper>
            ①
          </Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper>
            ②
          </Paper>
        </Grid>
      </Grid>
[/html]

デスクトップ

モバイル

Gridの入れ子もこのようにシンプルです

import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';

      <Grid container justify="center">
        <Grid item xs={6}>
         <Paper>
            <Grid container justify="center">
              <Grid item xs={6}>
                入れ子の左側
              </Grid>
              <Grid item xs={6}>
                入れ子の右側
              </Grid>
            </Grid>
          </Paper>
        </Grid>
        <Grid item xs={6}>
          <Paper>
            入れ子じゃない右側
          </Paper>
        </Grid>
      </Grid>