未経験がポートフォリオで使ったReactライブラリ(その1)

まえがき

業務でReactを触る機会が出てきそうなので、復習のため、以前作ったポートフォリオを個人的に振り返ります。

フロントエンド
https://github.com/momonoki1990/house_work_memo_front
バックエンド(Express)
https://github.com/momonoki1990/house_work_memo_back
サービス
https://house-work-memo-front.herokuapp.com/home
(Herokuのフリープランで定期モニタリングも解除したので、起動がめちゃ遅いです(1分くらい?))
(表示が変な場合は、バックエンドの起動に時間がかかっています。そのままお待ちいただくと表示されます)

ちなみに、定期モニタリングの参考
Herokuの無料dynoをスリープさせないで24時間稼働させる4つの方法
https://casualdevelopers.com/tech-tips/how-to-prevent-idling-of-free-dyno-on-heroku/
→UptimeRobotを使ってました。

使用したモジュール

package.json

"dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/chart.js": "^2.9.23",
    "@types/jest": "^24.9.1",
    "@types/node": "^12.12.50",
    "@types/react": "^16.9.43",
    "@types/react-dom": "^16.9.8",
    "@types/react-redux": "^7.1.9",
    "@types/react-router-dom": "^5.1.5",
    "@types/redux-logger": "^3.0.8",
    "@types/redux-thunk": "^2.1.0",
    "axios": "^0.19.2",
    "chart.js": "^2.9.3",
    "chartjs-plugin-colorschemes": "^0.4.0",
    "connected-react-router": "^6.8.0",
    "date-fns": "^2.15.0",
    "react": "^16.13.1",
    "react-chartjs-2": "^2.10.0",
    "react-dom": "^16.13.1",
    "react-hook-form": "^6.1.0",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.3",
    "redux": "^4.0.5",
    "redux-devtools": "^3.5.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "typescript": "^3.7.5",
    "typescript-fsa": "^3.0.0",
    "typescript-fsa-reducers": "^1.2.2"
  }

順番に解説(というかほとんど忘れているので復習しつつ)

Material UI

Material UIとは？
公式：Material UI
GoogleのMaterialデザインをベースに開発された、UIコンポーネントライブラリです。
お手軽にMaterialデザインを取り入れられることに加えて、コンポーネントの種類が豊富に用意されているため、それらを組み合わせるだけでも見栄えの良いものを作ることができます。
一からコンポーネントを作るのはつらいとか、デザインを考えるのが難しいとか、それらに工数をあまりかけたくないなどの場合にもおすすめです。
React向けのUIコンポーネントライブラリはいろんなものがありますが、その中で人気の高いライブラリでもあります。
React入門 ～Material UI編～
https://qiita.com/h-yoshikawa/items/efa33101b0a02cba7759

@material-ui/core
Material UIの基本のモジュール。基本的なコンポーネントが格納されている。
Material UI
https://material-ui.com/

@material-ui/icons
SVGアイコンが格納されています。
Material Icons
https://material-ui.com/components/material-icons/

こんな感じで使います。

HomePage.tsx

import Button from '@material-ui/core/Button';
import DeleteIcon from '@material-ui/icons/Delete';

<Button variant="contained" color="secondary" data-key={work.id} onClick={handleDelete} startIcon={<DeleteIcon />}>削除</Button> :
<DeleteIcon color='secondary' />

@types/node・Create React App・React DOM

@types/node
node.jsの型ファイル。TypeScriptを使うのに必要。
というか、npx create-react-app sample_react_ts_app --typescriptでReactプロジェクトを作成した時点で、デフォルトで入っている。

ちなみに、create-react-appはnpmモジュールで、グローバルにインストールして使う。
Reactアプリケーションの雛形がコマンド一発で作れる。

参考
Create React Appで環境構築 – React入門
https://www.to-r.net/media/react-tutorial12/

npm install -g create-react-app
npx create-react-app sample_react_ts_app --typescript　

create-react-appを使用した場合にデフォルトでインストール済みのモジュール。

package.json

"dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3",
    "typescript": "~3.7.2"
  },

そういえば、react-domってなんだっけ？

react-dom パッケージには、DOM 固有のメソッドが用意されており、アプリケーションのトップレベルで使用したり、必要に応じて React モデルから外れるための避難ハッチとして使用できます。ほとんどのコンポーネントでは、このモジュールを使用する必要はないはずです。
render()
hydrate()
unmountComponentAtNode()
findDOMNode()
createPortal()
ReactDOM
https://ja.reactjs.org/docs/react-dom.html

create-react-appで作ったプロジェクトのsrc/index.tsxはこんな感じ。

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

→「renderぐらいでしか使わない」くらいの認識でいることにしよう。。。

ちなみに、reactはReact本体で、型定義に使ったり、Hookとかをimportして使う。

HomePage.tsx

import React, { useEffect, MouseEvent } from 'react';

// コンポーネント関数
const HomePage: React.FC = (props: any) => { return ()}

// useEffect Hook
useEffect(() => {
    dispatch(defaultHomeAction());
}, []);

// 削除ボタンの処理
const handleDelete = (event: MouseEvent<HTMLButtonElement>) => {
  dispatch(deleteWorkOfHome(event.currentTarget.getAttribute('data-key')));
}

あとがき

長くなってしまったので、一旦ここで締めます。
そもそも、Reactの仕組み、仮想DOMとかってなんなんだっけ...?
調べてまとめたい。