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

2022 8/27

2022年8月27日

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

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

投稿が見つかりません。

2021年/4月29日執筆

記事は常に最新の状態にしていきます。

本記事の全体像

本記事では、ReactのMatearial-UIとは何なのか、Matearial-UIのインストール方法、Matearial-UIの基本的な使い方について紹介しています。

実践的な内容も追加する予定ですが、現在は基本的な内容のみです。

Matearial-UIとは

Googleが推薦するMaterialデザインをベースにしたUIコンポーネントライブラリです。

簡単に導入可能
UIコンポーネントが多数
Googleがおすすめしている

上記の理由から、Reactのデザインライブラリで1番人気があります。

証拠：GitHubのスター数
Matearial-UI：56.6k
React Toolbox：8.7k
Element UI：4.3K

Reactデザインライブラリの中で3大人気を比較してみても,Matearial-UIが頭一個抜けています

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に関する理解を深めてください。