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

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

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

【React入門】Reactとは？UI構築のためのJSライブラリReact入門｜Reactでの開発環境、todoアプリ、chatbotアプリなどを開発できるコンテンツ｜日々更新しています。...

2021年/4月29日執筆

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

本記事の全体像

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

Matearial-UIとは

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

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

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

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

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

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

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

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

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

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

 

React｜Material-UIの使い方

React｜Material-UIの使い方

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

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

 

使い方：icons

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 />
    </>
  );
}

 

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

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

 

まとめ：React + Material-UIでカッコ良いデザインを作成できる

まとめ：React+ Material-UIは最高

ここまで『【React + Material-UI入門】カッコいいデザインを秒速で作成可能』について解説してきました。

 

読者におすすめの記事