MUI React

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

2021年10月17日

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 のインストールが必要です。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ダウンロード

React おすすめの学習教材

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

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

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

モダンJavaScriptの基本から始める　React実践の教科書 （最新ReactHooks対応） [ じゃけぇ（岡田　拓巳） ]
created by Rinker
¥2,860 (2024/04/26 16:48:09時点 楽天市場調べ-詳細)

React 経験者者・Web 開発経験者向け

React に少し慣れた方や、Web 開発経験者は、Reactハンズオンラーニングがおすすめです。出版から少し時間が経ち、React 最新バージョンとは記法が変わってしまいっている機能もありますが、React の基本的な機能を網羅しており、脱入門におすすめです。

Reactハンズオンラーニング 第2版 Webアプリケーション開発のベストプラクティス [ Alex Banks ]
created by Rinker
¥3,740 (2024/04/26 16:48:09時点 楽天市場調べ-詳細)

MUI 参考情報

React MUI のインストールを終えたら、次は実際に MUI コンポーネントの利用方法を学びましょう。Button コンポーネントの使い方は、次の記事をご覧ください。（実行可能サンプル付きです。）

「React MUI 記事一覧」には、React MUI を利用する、各種実装例も紹介しています。実行可能サンプルも用意していますので、まず手元で動かして動作を確認したい方にもおすすめです。

React MUI 記事一覧
https://watermargin.net/category/programming/mui/

-MUI, React