Posted in Mac, React

[React] Macでの開発環境構築

   Published Date: 2020年2月8日

HomeBrewのインストール

Homebrew（ホームブルー）はmacOS（LINUX）上のパッケージ管理システムです。パッケージのインストール、管理、アンインストールなどを行うことができます。
簡単にパッケージをインストールでき、パッケージの依存関係などのチェックも行ってくれるので便利です。

Macのターミナルを起動します。HomeBrewの公式ホームページに掲載されているコマンドをターミナルにコピー&ペーストして実行します。
macOS用パッケージマネージャー_—_Homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
==> This script will install:
/usr/local/bin/brew
/usr/local/share/doc/homebrew
/usr/local/share/man/man1/brew.1
/usr/local/share/zsh/site-functions/_brew
/usr/local/etc/bash_completion.d/brew
/usr/local/Homebrew
==> The following existing directories will be made group writable:
/usr/local/bin
/usr/local/include
/usr/local/lib
/usr/local/lib/pkgconfig

~~~ 省略 ~~~

==> Installation successful!

==> Homebrew has enabled anonymous aggregate formulae and cask analytics.
Read the analytics documentation (and how to opt-out) here:
  https://docs.brew.sh/Analytics

==> Homebrew is run entirely by unpaid volunteers. Please consider donating:
  https://github.com/Homebrew/brew#donations
==> Next steps:
- Run `brew help` to get started
- Further documentation: 
    https://docs.brew.sh

途中でルートパスワードを聞かれたり、Yes Noを聞かれたりします。
5分ほどでインストールが完了となります。

nodebrewのインストール

brew install nodebrew
==> Downloading https://github.com/hokaccha/nodebrew/archive/v1.0.1.tar.gz
==> Downloading from https://codeload.github.com/hokaccha/nodebrew/tar.gz/v1.0.1
######################################################################## 100.0%
==> Caveats
You need to manually run setup_dirs to create directories required by nodebrew:
  /usr/local/opt/nodebrew/bin/nodebrew setup_dirs

Add path:
  export PATH=$HOME/.nodebrew/current/bin:$PATH

To use Homebrew's directories rather than ~/.nodebrew add to your profile:
  export NODEBREW_ROOT=/usr/local/var/nodebrew

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

zsh completions have been installed to:
  /usr/local/share/zsh/site-functions
==> Summary
🍺  /usr/local/Cellar/nodebrew/1.0.1: 8 files, 38.6KB, built in 7 seconds

上記の表示内にパスの設定が書いてあるので、下記の2つのパスを通します。

$ export PATH=$HOME/.nodebrew/current/bin:$PATH
$ export NODEBREW_ROOT=/usr/local/var/nodebrew

パスを編集します。

source /.bash_profile

ここでエラーメッセージが表示されました。

-bash: /.bash_profile: No such file or directory

ファイルやディレクトリが無いと言われます。

viでファイルを作成します。

$ sudo vi .bash_profile

ファイルに下記を記載します。

export PATH=$HOME/.nodebrew/current/bin:$PATH

viで「：wq」を入力して保存。

もう一度、下記を実行 

source /.bash_profile

nodebrewのセットアップを行います。 

nodebrew setup

下記のような表示が現れます。

Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================

バージョンを設定してインストール

バージョンを確認します。

nodebrew ls-remote

最新はv13.8.0でしたので、v13.8.0をインストールしてみます。

nodebrew install-binary v13.8.0

インストールの確認

$ nodebrew ls
v13.8.0
current: none

インストールしたバージョンが表示されました。

しかし「current: none」と表示されています。これから利用するバージョンを指定します。

nodebrew use v13.8.0

再度、「nodebrew ls」を実行してみます。

$ nodebrew ls
v13.8.0
current: v13.8.0

これで無事、インストールと設定が完了しました。

最後、確認作業です。「node -v」「rpm -v」をターミナルから入力します。

$ node -v
v13.8.0

$ npm -v
6.13.6

両方とも表示されたのでOKです。

Reactの設定

グローバルで利用するので「-g」オプションを付けます。

$ npm install -g create-react-app


Author: webmaster