LoginSignup
15
11

More than 5 years have passed since last update.

@park-jh(devtopia)

Reactのスタート

Last updated at Posted at 2017-06-15

reactの開発環境を構築する。

関連記事

始まる前に

ホームディレクトリに下記のようなディレクトリやファイルはないだろうか？

cd ~

node_modules
package.json
yarn.lock

あるとしたら、間違った方法で、nodeの開発を行ってると言える。
またはパッケージをグローバルで設置しようとしたのに、-gオプションを忘れてしまい、そのまま気付かずに放置したとも言える。
上記のディレクトリやファイルはnodeのプロジェクトの配下にあるべきのものだ。

ここではnvm ▶︎ node（npm） ▶︎ yarn ▶︎ create-react-app 順で開発環境を構築する方法を紹介する。
nvmからyarnまでの手順はreactの開発環境だけではなく他のフロントエンド開発環境にも通用される。
rubyもそうだが、nodeの場合も活発に開発されていてバージョンアップが頻繁に行われている。
バージョン別に使えるライブラリが決まってることも多くなっている。
もはやrubyやnodeのバージョン別管理なしでは、いろんなニーズに対応が難しいのだ。

nvmとnode、npmやyarnを適材適所に正しく使うのが重要になる。

nvm(node version manager)

  • nodeのバージョンを管理
  • rubyのrbenvやrvmみたいなもの

npm(node package manager)

  • nodeで使うjavascriptのpackageを管理
  • rubyのbundlerやpythonのpipみたいなもの

yarn

  • npmと同様
  • facebookが開発
  • npmで設置できるpackageはyarnでも設置が可能
  • npmがmac portであれば、yarnがhomebrewみたいな感じ

create-react-app

  • facebookが開発
  • reactプロジェクトを生成してくれるツール

設置

macOSではhomebrewという立派なパッケージマネージャーが存在する。
googleのchromeやmicrosoftのskypeなどgui系のアプリもhomebrewで設置ができる。
brew info ＜パッケージ名＞を実行すると、設置手順が表示されるから参考にしよう。

nvm（macOS）

% brew info nvm
nvm: stable 0.33.2, HEAD
Manage multiple Node.js versions
https://github.com/creationix/nvm
/usr/local/Cellar/nvm/0.33.1 (7 files, 122.4KB) *
  Built from source on 2017-03-28 at 17:55:15
  From: https://github.com/Homebrew/homebrew-core/blob/master/Formula/nvm.rb
  ==> Caveats
  Please note that upstream has asked us to make explicit managing
  nvm via Homebrew is unsupported by them and you should check any
  problems against the standard nvm install method prior to reporting.

You should create NVM's working directory if it doesn't exist:

  mkdir ~/.nvm

Add the following to ~/.zshrc or your desired shell
configuration file:

  export NVM_DIR="$HOME/.nvm"
    . "/usr/local/opt/nvm/nvm.sh"

You can set $NVM_DIR to any location, but leaving it unchanged from
/usr/local/Cellar/nvm/0.33.2 will destroy any nvm-installed Node installations
upon upgrade/reinstall.

Type `nvm help` for further information.

Bash completion has been installed to:
  /usr/local/etc/bash_completion.d
  • ホームディレクトリの配下に.nvmを生成する。
  mkdir ~/.nvm
  • シェルの設定ファイルに環境変数を追加する。
  vi ~/.zshrc #bashの場合は、~/.bash_profile

  export NVM_DIR="$HOME/.nvm"
    . "/usr/local/opt/nvm/nvm.sh"

念のためシェルをbashに切り替えてbrew info nvmで確認してみた。

$ brew info nvm
nvm: stable 0.33.2, HEAD
Manage multiple Node.js versions
https://github.com/creationix/nvm
/usr/local/Cellar/nvm/0.33.1 (7 files, 122.4KB) *
  Built from source on 2017-03-28 at 17:55:15
  From: https://github.com/Homebrew/homebrew-core/blob/master/Formula/nvm.rb
  ==> Caveats
  Please note that upstream has asked us to make explicit managing
  nvm via Homebrew is unsupported by them and you should check any
  problems against the standard nvm install method prior to reporting.

You should create NVM's working directory if it doesn't exist:

  mkdir ~/.nvm

Add the following to ~/.bash_profile or your desired shell
configuration file:

  export NVM_DIR="$HOME/.nvm"
    . "/usr/local/opt/nvm/nvm.sh"

You can set $NVM_DIR to any location, but leaving it unchanged from
/usr/local/Cellar/nvm/0.33.2 will destroy any nvm-installed Node installations
upon upgrade/reinstall.

Type `nvm help` for further information.

Bash completion has been installed to:
  /usr/local/etc/bash_completion.d

使っているシェルに合わせてメッセージが表示されてる。
~/.zshrcが~/.bash_profileに変えただけで手順は同じだ。
シェルの設定ファイルを修正したら、リロードする。

source ~/.zshrc # source ~/.bash_profile

nvm（Linux）

redhat系とdebian系のディストリビューションもパッケージマネージャーを提供している。
しかし、nvmは関連パッケージを提供してない。
代わりにインストールスクリプトを提供しているので、これを使う。
curlやwgetを用いてインストールスクリプトをダウンロードし実行する。
curlやwgetコマンドが存在しない場合はyumやapt-getなどで設置しよう。

  • curlを使う場合
  curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
  • wgetを使う場合
  wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

使ってるシェルの設定ファイルに環境変数を追加する。

  vi ~/.zshrc #bashの場合は、~/.bash_profile

  export NVM_DIR="$HOME/.nvm"
  [ -s "$NVM_DIR/nvm.sh"  ] && . "$NVM_DIR/nvm.sh" # This loads nvm

nvmの使用法

コマンド 説明
nvm ls 設置されてるnodeの一覧を表示
nvm ls-remote 設置可能なnodeの一覧を表示
nvm use ＜nodeバージョン＞ 指定したnodeバージョンに切り替え
nvm install ＜nodeバージョン＞ 指定したnodeバージョンを設置
nvm uninstall ＜nodeバージョン＞ 指定したnodeバージョンを削除

使用例）nvm use 8.1.1

node

最新バージョンのnodeを設置する。（この記事を作成しているときは v8.1.1が最新）

# 8.1.1で設置
nvm install 8.1.1

# 設置されたnodeの一覧を確認
nvm ls

# 設置されたnodeのバージョンを確認
node -v

npm

npmはnvmで設置したnodeにbundleされてるから別途に設置する必要はない。
homebrewでもパッケージとして提供しているが、設置しないように注意を払う必要がある。
次に説明するyarnの場合も同じだ。

which npm
~/.nvm/versions/node/v8.1.1/bin/npm

yarn

yarnの公式サイトではhomebrewを用いて設置しているが、npmから提供しているパッケージに対してはnpmで設置したほうがいい。
nvmを使わないならともかくnvmを使うならnodeのバージョン別にパッケージを管理したほうがいいのだ。
同じバージョンのnode環境で共通的に使えるパッケージに関してはグローバルで設置しよう。

# グローバルでyarnを設置
npm install -g yarn

# 設置したyarnを確認
npm ls -g --depth=0

create-react-app

npmでも設置できるが、ここではyarnで設置する。

yarn global add create-react-app
yarn global ls
yarn global v0.24.5
warning No license field
info "create-react-app@1.3.1" has binaries:
   - create-react-app
info "phantomjs-prebuilt@2.1.14" has binaries:
   - phantomjs
info "pushstate-server@3.0.0" has binaries:
   - pushstate-server
✨  Done in 1.36s.

ここまですると、主に使うコマンドはこうなる。

which node
~/.nvm/versions/node/v8.1.1/bin/node
which npm
~/.nvm/versions/node/v8.1.1/bin/npm
which yarn
~/.nvm/versions/node/v8.1.1/bin/yarn
which create-react-app
~/.nvm/versions/node/v8.1.1/bin/create-react-app

これで、一つのnodeのバージョンに従属されたグローバルな開発環境が構築された。
次は、create-react-appでプロジェクトを生成してみよう。

参考

15
11
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
15
11