新しいマシンにVue.js Reactの環境をインストールする方法

自分用に新しいマシンにVue.jsやReactをインストールする方法をメモとして残す
マニュアルインストールの方法は別にまとめる（予定）

Macに『HomeBrew』をインストールする

• 何故インストールするのか？
  • CUIベースで環境構築がしやすくなる
  • 『$ brew install xxx』でCUIツールをインストールできる
  • 『$ brew cask install xxx』でGUIツールをインストールできる

HomeBrewインストール手順

• 1. HomeBrewのHPを開く
• 1. Terminalを開く
• 1. インストールコマンドを実行する

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

brewコマンドでMacの開発環境を構築していく

• Google Chrome

$ brew cask install google-chrome

• VSCode

$ brew cask install visual-studio-code

• IntelliJ
  • IntelliJのHPを開く (Ultimate版は有料なので、適宜検討する)

https://www.jetbrains.com/ja-jp/idea/download/#section=mac

Node.jsをインストールする

• 1. Terminalを開く
• 1. 下記コマンドを実行する (この時は最新のnodeのバージョンがインストールされる)

$ brew install node

• 1. インストールされたNodeのバージョンを確認する

$ node -v
ex). v12.14.1

• 1. npmコマンドが実行できるか確認する (試しにバージョン情報を確認する)

$ npm -v
ex). 6.14.8

• 1. nodeのバージョン管理コマンドをインストールする (今回は『n』を使用する)

$ npm install -g n

• 1. nコマンドが実行できるか確認する (試しにバージョン情報を確認する)

$ n -V
ex). 6.7.0

nについて

• Nodeのバージョンを管理することができる
  • Nodeのバージョンを確認する
  • https://nodejs.org/ja/download/releases/
• nodeの最新バージョンをインストールする

$ n latest

• インストール済みのNodeのバージョンを確認する

$ n ls

• Nodeのバージョンを切り替える
  • 実行後にインストール済みのNodeのバージョンが表示されるので変更したいバージョンを選択する

$ n

Vue.jsの環境構築方法

vue/cliコマンドを実行できるようにする

• 1. @vue/cliのHPを開く
• 1. Terminalを開く
• 1. @vue/cliをインストールする

$ npm install -g @vue/cli

• ※1 バージョンを指定してインストールする場合は『@』をつける (Version 4.5.7をインストールする場合)

$ npm install -g @vue/cli@4.5.7

• ※2 updateの仕方 (updateするときもinstallを実行することにより最新バージョンを取得できる)

$ npm install -g @vue/cli

1. インストール済みの@vue/cliのバージョンを確認する

$ npm -g ls | grep @vue/cli
ex). @vue/cli@4.5.7

Vueのプロジェクトを作成する

• 1. Terminalを開く
• 1. プロジェクトを新規に作成する (今回はプロジェクト名を『sample』とする)

$ vue create sample

Reactの環境構築方法

create-react-appコマンドを実行できるようにする

• 1. create-react-appのHPを開く
• 1. Terminalを開く
• 1. create-react-appをインストールする

$ npm install -g create-react-app

• ※1 バージョンを指定してインストールする場合は『@』をつける (Version 3.4.1をインストール)

$ npm install -g create-react-app@3.4.1

• ※2 updateの仕方 (updateするときもinstallを実行することにより最新バージョンを取得できる)

$ npm install -g create-react-app

• 1. インストール済みのcreate-react-appのバージョンを確認する

$ npm -g ls | grep create-react-app
ex). create-react-app@3.4.1

Reactのプロジェクトを作成する

• 1. Terminalを開く
• 1. プロジェクトを新規に作成する (今回はプロジェクト名を『sample』とする)

$ create-react-app sample