More than 3 years have passed since last update.

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

Last updated at 2020-04-22Posted at 2020-02-17

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をインストールする

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

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

Homebrewのインストール

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

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

nodebrewのインストール

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

brew install nodebrew

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

nodebrew -v
nodebrew 1.0.1

node.jsのインストール

$ mkdir -p ~/.nodebrew/src

最新版を取得する際は

$ nodebrew install-binary latest

安定版を取得する際は

$ nodebrew install-binary stable

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

$ nodebrew ls

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

v7.1.0

current: none

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

$ nodebrew use v7.1.0

もう一度nodebrew lsを試すと

v7.1.0

current: v7.1.0

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

参考記事

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

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

yarnのインストール

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

$ npm install -g yarn

Reactのアプリの作成

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

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

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

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

$ 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

# yarn add -D prettier

Eslintのインストール

# yarn add -D eslint  \
   @typescript-eslint/eslint-plugin  \
   eslint-plugin-prettier  \
   eslint-config-prettier

Material-ui

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

# 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/でアクセスできる。

$ yarn start

ビルドする

$ yarn build

5．終わりに

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

6. 関連記事

Reactに関する記事です。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up