React: Material-UI (MUI) のインストールと始め方

2021年10月17日

📋 目次（クリックで展開）

Material-UI とは
React アプリケーションの作成
Material-UI のインストール
Material-UI Button の利用
実行結果
サンプルアプリケーション
React おすすめの学習教材
React 入門者・Web 開発入門者向け
React 経験者者・Web 開発経験者向け
MUI 参考情報

React で Material-UI を使う設定方法を記します。記事の最後にはサンプルも用意しています。

Material-UI とは

Material-UI は、React 向けの UI コンポーネントライブラリです。Material Design をベースにした UI コンポーネント群が提供されています。その他にも、テーマやレイアウトシステムなどの、UI 開発に便利な仕組みも提供しています。

React アプリケーションの作成

まずは、React アプリケーションを作成します。TypeScript で開発をすることを前提とするため、template オプションに “typescript” を指定しています。

npx create-react-app@latest my-app --template=typescript

※ npx が認識されずにコマンドがエラーになる場合、Node.js のインストールが必要です。

Material-UI のインストール

アプリケーションのルートディレクトリ（フォルダ）で、次のコマンドを実行します。

npm install @mui/material @emotion/react @emotion/styled

続いて、public\index.html に次のコード 3-18 行目（ハイライト部分）を追加します。

<title>React App</title>

  <!-- Roboto font -->
  <link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
  />

  <!-- Font icons -->
  <link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  />
</head>

Material-UI Button の利用

では、Material-UI で提供されている Button コンポーネントを利用してみましょう。App.tsx 4 行目で、“@mui/materil” から Button をインポートして利用します。

また、App.tsx 3 行目にあるスタイルのインポートをコメントアウトしていることと、header タグ内の記述は Button 以外は削除します。

import React from 'react';
import logo from './logo.svg';
// import './App.css'; <-- コメントアウト
import { Button } from "@mui/material";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Button variant="outlined">Material-UI ボタン</Button>
      </header>
    </div>
  );
}

export default App;

実行結果

ターミナルから npm start を実行し、アプリケーションを起動します。

Button コンポーネントが表示されていることが分かります。

サンプルアプリケーション

今回の Material UI (MUI) Button コンポーネントを組み込んだサンプルです。

Visual Studio Code などの IDE で開いたのち、「npm install」→「npm start」と実行すると、上記のようにアプリケーションが実行できます。

my-app.zip

React おすすめの学習教材

React MUI を使いこなす上で、React の理解は必須です。ここでは、React 学習のおすすめ教材を紹介します。

React 入門者・Web 開発入門者向け

React や Web 開発の入門者向けおすすめ書籍は、モダンJavaScriptの基本から始める React実践の教科書です。React を下支えしている JavaScript やパッケージマネージャー、モジュールバンドラーなどについて解説があり、React の動作の仕組みを想像しやすくなると思います。