React.jsにMaterial-UIを導入してみよう!UIデザインに自信がない方におすすめのCSSフレームワーク!

Material-UIを導入しよう!
  • URLをコピーしました!

今回は、React.jsにMaterial-UIを導入していこうと思います!
デザインに自信のない方や、デザインにあまり時間をかけずにそれなりのものを作っていきたい方におすすめしたい内容です!

学習に使った本はこちら!

¥3,432 (2022/12/03 14:42時点 | Amazon調べ)
¥5,601 (2022/12/03 14:42時点 | Amazon調べ)
クマじい

Amazon Kindle Unlimited でもReactの本はいっぱいあるぞ!

  • 技術書をたくさん読みたい!
  • 色々な技術を学びたい!
初回30日間無料体験があるので、どのような参考書があるか確認してみよう!

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ!
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります!

¥15,980 (2022/12/09 11:28時点 | Amazon調べ)

Material-UIは、Google Material Desingのガイドラインに沿ったCSSフレームワークです!
現場でもよく使われており、日本でもよく使われているので使いやすいフレームワークです。

こんな方に見てもらいたい内容です!
  • デザインに自信がない
  • デザインにあまり時間をかけたくない
  • それなりのデザインで作成したい
クマじい

わしにもできるかのー。

目次

まずは、現在の状況を確認しよう!

過去の資料を見てくれている方であれば、現在は「create-react-app」でアプリの雛形を作った状態だと思います!
もし、まだアプリを作れていない方は、こちらの資料を参考に雛形のアプリを作成してください!

現在は、初期のままなのでこのような画面が表示されていると思います!

これで実行できるよ!

C:\Users\******\Documents\sample-react-app\sample-client> npm start
Edit src/App.js and save to reload. 
Learn React

この画面か、ご自身で変更された画面が表示されていればOKです!!

フォルダ構成を変更しておこう!

今回は、あまり大きなシステムを作る予定はないのですが、ある程度フォルダ構成を整えておかないと後々大変なのでフォルダ構成を変更しておきます!

今回は一旦このような構成としておきます!
※今後はReduxを使うタイミングで、もう一度変更することになります。

pages

modulesを活用してページを格納します。1画面毎にファイルができてくる想定です!

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/core

yarnを使う場合は、下のコマンドを実行してください!
今回は、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フォントを使用するための設定をしていきます!

「Roboto」は、Googleのデザイナーによって作られた欧文フォントです。 AndroidやChromeでのデフォルトフォントとして利用されており、 また、GoogleのMaterial Designの推奨フォントにもなっています!
欧文のみなので、日本語はなく、足りない部分は、 Notoで補うことになります。

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

保存したら実行してみてください!

HELLO WORLD

このようなボタンが表示されたと思います!
他のボタンも確認したい方は、こちらをコピペしてみてください!

ボタン以外も触ってみるといいかと思います!

まとめ

今回は、React.jsに Material-UIを導入してみました!
手順も難しくなく、綺麗なボタンが配置できたのではないでしょうか?

学習に使った本はこちら!

¥3,432 (2022/12/03 14:42時点 | Amazon調べ)
¥5,601 (2022/12/03 14:42時点 | Amazon調べ)
クマじい

Amazon Kindle Unlimited でもReactの本はいっぱいあるぞ!

  • 技術書をたくさん読みたい!
  • 色々な技術を学びたい!
初回30日間無料体験があるので、どのような参考書があるか確認してみよう!

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ!
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります!

¥15,980 (2022/12/09 11:28時点 | Amazon調べ)

次は、ヘッダーやフッダーを作っていこうと思います。
ヘッダーやフッダーがあるだけで、アプリの見た目がガラッと変わりますので次回も見てくれると嬉しいです!

Material-UIを導入しよう!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

東京在住で20代のエンジニアです。
特に特技があるわけではありませんが、誰もが楽しくプログラミングができたらいいと思い、「teech lab.」を開設いたしました。

Enjoy Diaryという、ガジェットや雑貨を紹介しているブログもあります!
ぜひ、みてください!!

目次