【React】TypeScriptとMaterial UI(MUI)でモダンな開発環境を構築する

動画で解説を見る

1 開発環境
2 ReactにTypeScriptの環境構築をするまでの手順
3 ReactにMaterial UI(MUI)の環境構築をするまでの手順
- 3.1 Material UI(MUI)をインストールする
- 3.2 @material-ui/coreはv4まで
4 Material UI(MUI)を使ってボタンを表示してみる
- 4.1 index.htmlを編集する
- 4.2 index.tsxを編集する
5 おわりに

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
Node.js:v18.14.0
npm:9.3.1
react:18.2.0
react-dom:18.2.0
typescript:4.9.5
mui:5.11.10

ReactにTypeScriptの環境構築をするまでの手順

ReactにTypeScriptの環境構築をするまでの手順は、以下の手順を実行する必要があります。

Reactをインストールする

Reactプロジェクトを作成するにはReactをインストールする必要があります。

Reactをインストールするために必要なNode.jsをインストールしていない場合は、Node.jsの公式サイトからインストーラーをダウンロードし、インストールしてください。

詳しくは【React】インストールからHellowWordlを表示させるまでを解説の記事を参考にしてください。

Reactアプリケーションを作成する

Create React AppコマンドでReactアプリケーションを作成します。

また、コマンドを実行する際にオプションでTypeScriptのテンプレートを指定することにより、ReactでTypeScriptが使える状態のReactアプリケーションを作成することができます。

npx create-react-app プロジェクト名 --template typescript

1	npx create-react-app プロジェクト名 --template typescript

上記のプロジェクト名には任意のプロジェクト名をつけてください。

Reactアプリケーションを起動する

次にnpm startコマンドでReactアプリケーションを起動します。

cdコマンドでReactアプリケーションのディレクトリに移動してから、npm startコマンドでアプリケーションを起動します。

cd プロジェクト名
npm start

1 2	cd プロジェクト名 npm start

コマンドを実行したらブラウザが自動的に開き、アプリケーションが表示されるはずですが、ブラウザで「http://localhost:3000/」でアクセスができます。

以上でReactとTypeScriptの環境構築は完了です。

ReactにMaterial UI(MUI)の環境構築をするまでの手順

ReactにMaterial UI(MUI)の環境構築をするまでの手順は、以下の手順を実行する必要があります。

Material UI(MUI)をインストールする

まずMaterial UI(MUI)をインストールします。

下記のコマンドを実行して、Material UI(MUI)をReactプロジェクトに追加します。

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

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

また、補足になりますが「@mui/material」だけでは下記のようなエラーになります。

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)

You might be breaking the Rules of Hooks

You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

「@emotion/react」と「@emotion/styled」はCSSを調整するためのものになりますが、この2つがないとエラーになるため注意しましょう。

@material-ui/coreはv4まで

Material UI(MUI)をインストールするコマンドはv4までは下記でした。

公式サイト：https://v4.mui.com/getting-started/installation/

npm install @material-ui/core @material-ui/icons

1	npm install @material-ui/core @material-ui/icons

現在のMaterial UI(MUI)はv5となり、インストールするコマンドも変更されているため、公式サイトを参考に最新の方法でMaterial UI(MUI)をインストールしましょう。

公式サイト：https://v5.mui.com/material-ui/getting-started/installation/

Material UI(MUI)を使ってボタンを表示してみる

最後に動作確認も含めて、Material UI(MUI)を使ってボタンを表示してみたいと思います。

index.htmlを編集する

まずはindex.htmlを編集します。

Reactプロジェクトを作成したときにある不要なコードを削除するだけになりますが、下記のようにしてみましょう。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>React App</title>

</head>

<body>

</body>

</html>

「id="root"」の部分がReactコンポーネントをレンダリングする箇所になります。

index.tsxを編集する

次にindex.tsxを編集します。

Reactプロジェクトを作成したときにあるコードを削除してから、下記のようにしてみましょう。

import React from 'react';
import ReactDom from 'react-dom';
import Button from '@mui/material/Button';

const setList: Array<string> = ["男性","女性"];

const BtnComponent: React.FC = () => {
  return (
    <div>
      <Button variant="contained">{setList[0]}</Button>
      <Button variant="outlined">{setList[1]}</Button>
    </div>
  );
};

ReactDom.render(<BtnComponent />, document.getElementById("root") );

import React from 'react';

import ReactDom from 'react-dom';

import Button from '@mui/material/Button';

const setList: Array<string> = ["男性","女性"];

const BtnComponent: React.FC = () => {

return (

<div>

<Button variant="contained">{setList[0]}</Button>

<Button variant="outlined">{setList[1]}</Button>

</div>

);

};

ReactDom.render(<BtnComponent />, document.getElementById("root") );

5行目はTypeScriptの型指定の書き方になります。

Arrayの後にstringと宣言することにより、変数setListは配列かつ、配列の要素は文字列という型指定になります。

7行目の「React.FC」はReactコンポーネントという型指定になります。

また、10・11行目に「Button」というタグを使用していますが、それらがMaterial UIのボタンを使用するタグになります。

以上でボタンの表示ができれば完成です。

おわりに

ReactにTypeScriptとMaterial UI(MUI)を組み合わせた環境構築について解説してきましたが、、いかがだったでしょうか。

現在ではTypeScriptで型を指定しつつ、React専用のUIコンポーネントであるMaterial UII(MUI)でCSSを書かずとも、モダンなデザインに仕上げることができます。

是非、モダンなフロントエンド開発の組み合わせに多い「React×TypeScript×Material UI(MUI)」を使いこなしていきましょう。