前回の話

Material UIの構築ができるように。
という喜びもつかの間、脆弱性だゾ～って何かが赤く光ってました。
ということで、昨日の手順だと脆弱性に関するエラーが出るので改めてドキュメントを見ていくことに

Material UI Introduction

Material UI is an open-source React component library that implements Google's Material Design.

→Reactの構築が必要。

React再構築 - create-next-app

npx create-next-app@latest

project named - > gtasktool
typescript -> no
ESLint -> yes
Tailwind CSS -> no
src/ directory -> yes
App Router -> no
import alias -> no

こちらに詳しく記載されていましたのでシェアします！

found 0 vulnerabilities
Initialized a git repository.

Success! Created gtasktool

とりあえず、create-next-appを実行する手順で、脆弱性によるエラーはなくなったようです。

作成後はこのような状態

Material UIを入れる

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

added 80 packages, and audited 393 packages in 12s

138 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

npm install @fontsource/roboto

added 1 package, and audited 394 packages in 3s

138 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

こちらも脆弱性は問題なさそう。

起動する

先にnpm run buildを実行、次にnpm startを実行

できました～！
動かしながらデバッグするためにはnpm startではなく、npm run devを使用してください

参考記事：

Material UIが動くかの確認

index.jsにこれを上書きします

import * as React from 'react';
import Button from '@mui/material/Button';

export default function ButtonUsage() {
  return <Button variant="contained">Hello world</Button>;
}

う、うーん・・・まあよしとしましょう・・・？

とりあえず公式の手順通りに進めることができ、さらにボタンいっこ置けました。
デザインはおおまかにこうしたいというのがありますので、それに向けてコードをいじっていこうかと思います。

ここまでご覧頂いてありがとうございました

エルシアでした。ではまた～