【React + Material-UI入門】カッコいいデザインを秒速で作成

2021 7/19

2021年7月19日

本記事では、Reactの環境構築が完了している方を対象としています。

Reactの準備が終わっていない方は下記の記事を参考にしてみてください。

React｜Matearial-UIをインストールしよう

まずは、Reactの開発を行うファイルまでコマンドで移動してください。

//おにちゃん塾の場合

cd projects/my-app
npm start

このように表示された方はReactの環境準備は問題なしです。次にMatearial-UIをインストールしていきましょう。

Matearial-UIをインストールする方法は簡単です。

npm install @material-ui/core

上記のコマンドを入力してインストールしていきましょう。CDNでの読込もあるのですが、おにちゃん塾ではあまりおすすめしていません。

おにちゃん

インストール後、package.jsonに行くと["@material-ui/core": "^4.11.4",
]と書かれているはずです。

数字の部分はいつインストールしたのかによって違うのであまり気にしなくても大乗です。

React｜Material-UIの使い方

Matearial-UIのインストールが完了した方は、実際に使い方について学んでいきましょう。

Matearial-UI×icons
Matearial-UI×button
Matearial-UI×table

今後は、あらゆるMatearial-UIコンポーネントを追加する予定です。

使い方：icons

Material-uiのiconsを使うためにはターミナルにてインストールする必要があります。

npm install @material-ui/icons

インストールが完了したら、package.jsonで確認しましょう。

確認後は、Material-ui公式ページにて追加したいアイコンを拾っていきましょう。

今回はHomeアイコンを取得していきます。

使いたいHomeアイコンをクリックすると「import HomeIcon from '@material-ui/icons/Home’;」が表示されます。

その文をコピーしてください。

コピー後は、Reactの作業フォルダへ行き、App.jsファイルを開いて下記のようにコードを記述してみてください。

import HomeRoundedIcon from '@material-ui/icons/HomeRounded';

export default function App() {
  return (
    <>
    <HomeRoundedIcon />
    </>
  );
}

上記のコードを入力した後に、下記のコマンドを入力してみてください。

npm start

これでMaterial-uiのiconsコンポーネントの基本的な使い方はマスターできました。

使い方：button

Material-uiでbuttonを使う際は、下記のコードでButtonをインポートする必要があります。

import {Button} from '@material-ui/core';

export default function App() {
  return (
    <>
    <Button variant="contained">
      おにちゃん塾でmaterial-ui学習
    </Button>
    </>
  );
}

これだけで、いけてるボタンを追加することができます。

使い方：table

tableの使い方を理解するために、まずは下記のコードをコピーしてApp.jsに貼り付けてみてください。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const useStyle = makeStyles ({
  tableContainer: {
    width: 1000,
    justifyContent: 'center'
  },
  table: {
    minWidth: 650,
  }
});

function LanguageData(language, level, understand) {
  return {language, level,  understand};
}

const tablerows = [
  LanguageData('HTML', 1, 10),
  LanguageData('CSS', 3, 9),
  LanguageData('JavaScript', 6, 5),
  LanguageData('PHP', 8, 3)
];

export default function App() {
  const classs = useStyle();
  return(
    <TableContainer component={Paper} className={classs.tableContainer}>
      <Table className={classs.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>プログラミング言語</TableCell>
            <TableCell>難易度</TableCell>
            <TableCell>理解度</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
        {tablerows.map((row) => (
            <TableRow>
              <TableCell>{row.language}</TableCell>
              <TableCell >{row.level}</TableCell>
              <TableCell>{row.understand}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  )
}

このコードを貼り、動きを確認した方は、map関数とTableに関する理解を深めてください。