本記事では、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が頭一個抜けています
おすすめ記事
- 【経験談】プログラミングを独学で習得する方法【3ヶ月で可能な話】
- 【保存版】WordPress初心者が独学で勉強する方法【サイト紹介】
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に関する理解を深めてください。

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

ここまで『【React + Material-UI入門】カッコいいデザインを秒速で作成可能』について解説してきました。
- Material-UIはReactのデザインライブラリの中で1番人気がある
- Material-UIのインストールは1コマンドで終わる
- デザインを極めたいならMaterial-UIを使い倒そう
本記事は以上です。
読者におすすめの記事
