第1回 2020年版 Node.js+Reactのインストール

# 1．概要

MacbookにNode.jsとReactをインストールし、アプリを開発するための環境を構築するための手順について。

# 2．前提条件

##事前作業
- MacのOSを最新にする
- Xcodeのコマンドラインツールをインストールする
    - https://qiita.com/royroy/items/338362362de73a94fc0c

##作業日時
- 2020年2月

## 環境
- MacBook Pro
- macOS Catalina

## ソフトウェアのバージョン

| ソフトウェア      |  バージョン       | 
|:-----------------|------------------:|
| nodebrew         |             1.0.1 |
| Homebrew         |            2.1.11 |
| yarn             |            1.21.1 | 

# 3．インストール手順
## Node.jsをインストールする

以下の流れでインストールする。

1. Homebrewのインストール
2. nodebrewのインストール
3. Node.jsのインストール

## Homebrewのインストール

以下のコマンドでHomebrewをインストールする。

```console
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

## nodebrewのインストール
Homebrewを使用してインストールする。

```console
brew install nodebrew
```

インストール後は以下コマンドでnodebrewのバージョンが確認できます。

```console
nodebrew -v
nodebrew 1.0.1
```

## node.jsのインストール


```
$ mkdir -p ~/.nodebrew/src
```

最新版を取得する際は

```console
$ nodebrew install-binary latest
```

安定版を取得する際は

```console
$ nodebrew install-binary stable
```

インストールされたnodeを有効化

```console
$ nodebrew ls
```

上記、コマンドでインストールされたバージョンが一覧できる。

```console
v7.1.0

current: none
```

インストール直後はcurrent: noneとなっているため、必要なバージョンを有効化する。

```console
$ nodebrew use v7.1.0
```

もう一度nodebrew lsを試すと

```console
v7.1.0

current: v7.1.0
```

v7.1.0が設定されました。

### 参考記事
- MacにNode.jsをインストール
    - https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09

ちなみに、Windowsの場合は、以下のインストーラでインストール可能。

https://nodejs.org/en/download/

## yarnのインストール

npmの代わりのパッケージマネージャ。
`yarn add`でパッケージをインストールできる。

```console
$ npm install -g yarn
```

## Reactのアプリの作成

以下コマンドでReactアプリのフォルダが作成される。
Typescriptで開発を行うため、`--template typescript`のオプションを設定する。

```console
npx create-react-app <app name> --template typescript
```

## 各種ライブラリのインストール

作成したフォルダに移動して、各種ライブラリをインストールする。

```console
$ cd my-react-app
```
### Reduxのインストール

プロジェクトルートフォルダで以下コマンドを実行する。
reduxはreduxそのもの、react-reduxはreactとreduxをつなぐライブラリです

```
$ yarn add redux react-redux typescript-fsa typescript-fsa-reducers
```

typescript-fsaはAction側、typescript-fsa-reducersがReducer側で利用するライブラリです。

- typescript-fsa　→　ActionCreatorを簡単に生成するライブラリ
- typescript-fsa-reducers　→　Reducerを簡単に作成するためのライブラリ


### 開発ツール（redux-devtools）のインストール

redux-devtoolsは、Reduxで開発する際に利用できる便利な開発ツールで、アクション実行時のstoreの状態を確認するのに利用する。
これに加えてChromeの拡張機能でRedux DevToolsを追加するとツールでRedux上のStoreの状態が確認でき、非常にデバッグしやすくなります。

```
yarn add --dev redux-devtools
```

### Prettierのインストール

整形ツールのPrettier(-Dで開発版のみにインストールされる)
設定はこちら
https://qiita.com/awakia/items/3a05edfa135762d7952c

```console
# yarn add -D prettier
```

### Eslintのインストール

```console
# yarn add -D eslint  \
   @typescript-eslint/eslint-plugin  \
   eslint-plugin-prettier  \
   eslint-config-prettier
```
### Material-ui

Materialデザインを利用するためのパッケージ。
`@material-ui/icons`は、表示も早く、綺麗なSVGアイコンを利用するためにインストールする。


```console
# yarn add @material-ui/core @material-ui/icons
```

### react-router-dom

react-routerの代わりにConnected React Routerを使う。
URLに応じて、表示するコンテンツを変更するルーティングを行うためにインストールする。

```
# yarn add react-router-dom connected-react-router
# yarn add -D @types/react-router-dom
```
## date-fns

dateオブジェクトのライブラリ。
momentより軽いらしい。

```
$ yarn add date-fns
```

# 4．コマンド

## ローカルでサーバーを起動する

以下コマンドでローカルでサーバーを起動できる。
http://localhost:8080/でアクセスできる。

```cosole
$ yarn start
```

## ビルドする

```cosole
$ yarn build
```

# 5．終わりに
次回はMaterial UI V4を利用した画面の作成方法について説明します。

# 6. 関連記事
Reactに関する記事です。

- [第1回 2020年版 Node.js+Reactのインストール](https://qiita.com/tetsurotayama/items/6dd91dc37941fab462a4)
- [第2回 2020年版 ReactのMaterial UI V4の使い方について](https://qiita.com/tetsurotayama/items/12d6c7b3463246306e87)
- [第3回 2020年版 React+Firebaseでアプリを作成する](https://qiita.com/tetsurotayama/items/179daca2cacb0caad0c5)
- [第4回 2020年版 既存のウェブサイトに React を追加する](https://qiita.com/tetsurotayama/items/a2e4edd5bc46bc592c32)
- [第5回 2020年版 ReactのRechartsで新型コロナウイルス感染症対策サイトのデータを可視化する](https://qiita.com/tetsurotayama/items/f5eda6dc2bbcd1f71b4e)
- [第6回 2020年版 React+Firebaseで画像のアップロード（その１）](https://qiita.com/tetsurotayama/items/30a0609a0cca5ba5ff0a)
- [第7回 2020年版 React+Firebaseで画像のアップロード（その２）](https://qiita.com/tetsurotayama/items/5129f0cfb21f9ec9b9a0)
- [第8回 2020年版 React+Firebaseで画像のアップロード（その３）](https://qiita.com/tetsurotayama/items/6fb3d3b6e01cac77c85f)
- [第9回 2020年版 ReactにStoryshotsを導入する](https://qiita.com/tetsurotayama/items/dd637e90f4ea008fd878)