1．概要
MacbookにNode.jsとReactをインストールし、アプリを開発するための環境を構築するための手順について。
2．前提条件
事前作業
- MacのOSを最新にする
- Xcodeのコマンドラインツールをインストールする
作業日時
- 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をインストール
ちなみに、Windowsの場合は、以下のインストーラでインストール可能。
https://nodejs.org/en/download/
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デザインを利用するためのパッケージ。
タッチ、タップ、クリックなどのイベントを使うためにreact-tap-event-pluginのインストールも必要。
#yarn add material-ui react-tap-event-plugin
#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．終わりに
- firebaseの設定は別途。
以上。