【TypeScript】ReactでMaterialUIの使い方ご紹介。

今回の記事はTypeScriptベースのReactでMaterialUI（ver5 MUI）の使い方に関してご紹介する内容の記事です。基本的なコンポーネントとレイアウトによる調整、MaterialUIの応用的な使い方まで詳細にご紹介して行きます。便利なフレームワークですので是非覚えて行きましょう。

TypeScriptのReactプロジェクト作成
MaterialUIインストール方法
MaterialUIのコンポーネント使い方
MaterialUIの応用的な使い方
1. MaterialUIをcssでさらに細かく設定

TypeScriptのReactプロジェクト作成

node等がインストールされてない方はインストールして下さい。その前提で話を進めます。

npx create-react-app sample --template typescript

まずは上記で「sample」プロジェクトを作成します。

cd sample
npm start

これでローカルサーバが立ち上がって初期画面が表示できます。

では次にMaterialUIをインストールします。

MaterialUIインストール方法

一度アプリの起動を停止します。MaterialUIの最低限必要なモジュールをインストールします。

cd sample
npm install @mui/material @mui/styles @emotion/react @emotion/styled --save

これで準備完了です。では各コンポーネントに関してご紹介して行きます。

MaterialUIのコンポーネント使い方

最低限のレイアウトということで今回は「Typography」「Box」「Grid」に関してご紹介していきます。分かりやすいように枠線をつけて解説していきます。

MaterialUI Typographyの使い方

「Typograpy」は基本的に文字を記載する際に使用するcomponentです。

import React from 'react';
import { Typography } from '@mui/material';

const App: React.VFC = () => {
  return (
    <div>
      <Typography>文字1</Typography>
    </div>
  );
}

export default App;

文字サイズを変えることができるので基本的に文字を記載する場合はこの「Typography」を利用します。

import React from 'react';
import { Box, Grid,Typography,Select,Tab,Table } from '@mui/material';

const App: React.VFC = () => {
  return (
    <div>
        <Typography variant='h1'>文字1</Typography>
        <Typography variant='h2'>文字2</Typography>
        <Typography variant='h3'>文字3</Typography>
        <Typography variant='h4'>文字4</Typography>
        <Typography variant='h5'>文字5</Typography>
    </div>
  );
}

export default App;

MaterialUIを使用する場合はこの文字サイズをあらかじめ使用することを周知しておく必要があります。サイズや他のプロパティも様々ありますので気になる方は公式のドキュメントを参考にしてみて下さい。

MaterialUI Boxの使い方

import React from 'react';
import { Box } from '@mui/material';

const App: React.VFC = () => {
  return (
    <div>
      <Box >ボックス</Box>
    </div>
  );
}

export default App;

ボックス単体で記載するとこのようにただの横長になります。ボックスを重ねる、または入れこのように扱うと下記のようなレイアウトを使うことができます。

import React from 'react';
import { Box } from '@mui/material';

const App: React.VFC = () => {
  return (
    <div>
      <Box border={1}>ボックス1</Box>
      <Box border={1}>ボックス2</Box>
      <Box border={1}>
        <Box>ボックス3</Box>
        <Box>ボックス4</Box>
      </Box>
    </div>
  );
}

export default App;

入子にすることで外枠に線をつけたりとできます。また、先ほど紹介した文字を記載する場合は「Typography」と併用して使用することをお勧めします。やはり基本的に文字を記載する場合は「Typography」を使用しましょう。

import React from 'react';
import { Box } from '@mui/material';

const App: React.VFC = () => {
  return (
    <div>
      <Box border={1}>
        <Typography>文字1</Typography>
      </Box>
    </div>
  );
}

export default App;

「Box」を横に並べることも可能です。ただし横に並べる場合は「Grid」を使用した方が良いと個人的に思っておりますのでそちらでご紹介しいきます。「Box」を使用して横並びを行いたい方は公式より確認ください。

MaterialUI Gridの使い方

import React from 'react';
import { Grid } from '@mui/material';

const App: React.VFC = () => {
  return (
    <div>
        <Grid container>
          <Grid item border={1}>グリッド1</Grid>
          <Grid item border={1}>グリッド2</Grid>
          <Grid item border={1}>グリッド3</Grid>
        </Grid>
    </div>
  );
}

export default App;

「Grid」は基本的に「container」「item」の二つで構成されています。「Grid」の「container」という一つの横枠のなかに「item」がいくつも入っていくイメージです。

便利なプロパティとして均等に位置を配分できる「columns」について解説して行きます。

import React from 'react';
import { Grid } from '@mui/material';

const App: React.VFC = () => {
  return (
    <div>
        <Grid container columns={6}>
          <Grid item xs={1} border={1}>グリッド1</Grid>
          <Grid item xs={2} border={1}>グリッド2</Grid>
          <Grid item xs={3} border={1}>グリッド3</Grid>
        </Grid>
    </div>
  );
}

export default App;

画面横幅を「columns={6}」で指定したように6等分し、それぞれ「1:2:3」の比率で配分しているという記述です。この「Grid」と「Box」を利用すれば基本的にどのような枠組みでも作成することができます。

import React from 'react';
import { Box,Grid } from '@mui/material';

const App: React.VFC = () => {
  return (
    <div>
        <Grid container columns={6}>
          <Grid item xs={1}>
            <Box border={1}>ボックス1</Box>
            <Box border={1}>ボックス2</Box>
            <Box border={1}>ボックス3</Box>
          </Grid>
          <Grid item xs={2}>
            <Box border={1}>ボックス4</Box>
            <Box border={1}>ボックス5</Box>
          </Grid>
          <Grid item xs={3} border={1}>
            
          </Grid>
        </Grid>
    </div>
  );
}

export default App;

興味がある方は色々実験してみて下さい。

基本的に「Box」と「Grid」で枠などの配置を設定し、「Typography」で文字を表示。という構成でWebページのレイアウトをおこなっていくことが良いと思います。ここにセレクトボックスなどを追加していけばWebページらしくなると思います。下記参考にしてみて下さい。

「React＋MaterialUIでセレクトボックスを表示する方法」

他にもデータ連携などはWebページではほぼ必須と言えるので下記も参考になると思いますのでこちらも是非。

「React＋MaterialUIでdatagridviewを利用してAPI経由で取得したデータ表示」

では次にMaterialUIをより応用的に使用していく方法を説明していきます。

MaterialUIの応用的な使い方

MaterialUIの応用的な使い方は様々ありますが、今回は特にお伝えしておきたい点に絞ってご紹介します。こちらはどんどん追加して行きますのでお楽しみに。

MaterialUIをcssでさらに細かく設定

MaterialUIは優れていますが100%理想のレイアウトを作ることは難しいでしょう。そういった場合はやはりcssに頼る必要があるのでそちらを使っていきます。

import React, { ReactNodeArray } from 'react';
import { Box,Grid,Typography,Select,Tab,Table, styled } from '@mui/material';


const App: React.VFC = () => {
  return (
    <div>
      <Box border={1} sx={{textAlign:'center'}}>
        ボックス1
      </Box>
      <Box border={1}>
        ボックス2
      </Box>
    </div>
  );
}

export default App;