今回は、React.jsにMaterial-UIを導入していこうと思います！
デザインに自信のない方や、デザインにあまり時間をかけずにそれなりのものを作っていきたい方におすすめしたい内容です！
学習に使った本はこちら！
ポチップ
ポチップ
クマじいAmazon Kindle Unlimited でもReactの本はいっぱいあるぞ！
Material-UIは、Google Material Desingのガイドラインに沿ったCSSフレームワークです！
現場でもよく使われており、日本でもよく使われているので使いやすいフレームワークです。
- デザインに自信がない
- デザインにあまり時間をかけたくない
- それなりのデザインで作成したい
クマじいわしにもできるかのー。
まずは、現在の状況を確認しよう！
過去の資料を見てくれている方であれば、現在は「create-react-app」でアプリの雛形を作った状態だと思います！
もし、まだアプリを作れていない方は、こちらの資料を参考に雛形のアプリを作成してください！
現在は、初期のままなのでこのような画面が表示されていると思います！
これで実行できるよ！
C:\Users\******\Documents\sample-react-app\sample-client> npm start
この画面か、ご自身で変更された画面が表示されていればOKです！！
フォルダ構成を変更しておこう！
今回は、あまり大きなシステムを作る予定はないのですが、ある程度フォルダ構成を整えておかないと後々大変なのでフォルダ構成を変更しておきます！
今回は一旦このような構成としておきます！
※今後はReduxを使うタイミングで、もう一度変更することになります。
- pages
-
modulesを活用してページを格納します。１画面毎にファイルができてくる想定です！
- modules
-
画面を構成するパーツを格納していくフォルダ。どんどんここに入れていきます！
componentsフォルダ内に、pagesとmodulesを作成して画像のようになっていればOKです！
Material-UIを導入しよう！
では、早速Material-UIを導入していきましょう！
今回は、Reactの公式ページにある手順に沿って解説していきます！
Material-UIをインストールしよう！
Material-UIは、NPMパッケージとしてインストールが可能です！
公式通り次のコマンドを実行することで、package.jsonに追記されインストールができます！
// npmの場合
npm install @material-ui/core
// yarnの場合
yarn add @material-ui/coreyarnを使う場合は、下のコマンドを実行してください！
今回は、npmでインストールします！
C:\Users\*****\Documents\sample-react-app\sample-client> npm install @material-ui/core
・・・
+ @material-ui/core@4.11.3
added 33 packages from 49 contributors and audited 1967 packages in 23.738s
131 packages are looking for funding
run `npm fund` for details
found 1 high severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
メッセージが結構出てくると思いますが、マーカーの内容が出力されていればインストールは完了です！
実際にpackage.jsonの中身を見てみましょう！
マーカーを引いた「”@material-ui/core”: “^4.11.3″」が追記されているはずです！
package.json
{
"name": "sample-client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.3",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.7.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.2",
"web-vitals": "^1.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}フォントを変更しておこう！
ここは、やりたい方だけでOKです！
Material-UIは、Robotoフォントを考慮して設計されております。
今回は、Material-UIでRobotoフォントを使用するための設定をしていきます！
index.htmlを編集しますので、publicの配下にあるindex.htmlを開いてください！
コメントのある行を追加してください！
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Robotoフォントを使用する -->>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<!-- Robotoフォントは欧文のみなので、足りないものをNoteで補う -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&subset=japanese" />
<!-- フォントアイコンを使用する -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>このような内容になっていれば、OKです！
SVGアイコンを使えるようにしておこう！
続いて、Material-UIでアイコンを使えるようにしていきます！
こちらにあるアイコンが使えるようになります！
こちらもnpmでインストールすることが可能です！
// with npm
npm install @material-ui/icons
// with yarn
yarn add @material-ui/iconsでは、インストールしましょう！NPMでインストールしますが、yarnの方は下のコマンドを実行してください！
PS C:\Users\*****\Documents\sample-react-app\sample-client> npm install @material-ui/icons
・・・
+ @material-ui/icons@4.11.2
added 1 package from 1 contributor and audited 1968 packages in 34.172s
131 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilitiesマーカーのメッセージが出ていればOKです！
package.jsonは、各自で確認してみてください。
これで、Material-UIの導入は完了です！
Material-UIを使ってみよう！
では、Material-UIが本当に導入できたか確認するために、ボタンを配置してみましょう！
App.jsを下のように変更してみましょう！
App.js
import './App.css'
import Button from '@material-ui/core/Button'
function App() {
return (
<div className="App">
<Button variant="contained" color="primary">
Hello World
</Button>
</div>
)
}
export default App保存したら実行してみてください！
このようなボタンが表示されたと思います！
他のボタンも確認したい方は、こちらをコピペしてみてください！
ボタン以外も触ってみるといいかと思います！
まとめ
今回は、React.jsに Material-UIを導入してみました！
手順も難しくなく、綺麗なボタンが配置できたのではないでしょうか？
学習に使った本はこちら！
ポチップ
ポチップ
クマじいAmazon Kindle Unlimited でもReactの本はいっぱいあるぞ！
次は、ヘッダーやフッダーを作っていこうと思います。
ヘッダーやフッダーがあるだけで、アプリの見た目がガラッと変わりますので次回も見てくれると嬉しいです！
