React ローカル開発環境の構築方法

WebブラウザでReactの開発を進めるのも簡単で便利なのですが、「やっぱりローカルで開発をしたい！」となったので、
今回は同じような境遇の方に向けて、Reactのローカル開発環境の構築方法について解説します。

Reactのローカル開発環境の構築には、以下の3つが必要になります。

Homebrew
→Macのパッケージ管理ツール
Nodebrew
　→Node.jsのバージョン管理ツール
Node.js
　→ローカル環境でJavaScriptを使えるようにする

Homebrewについては、以前の記事をご参照ください。
【ExcelVBA】ファイル操作ブックを開く

今回は以下の2点について解説します。

Nodebrewのインストール方法
Node.jsのインストール方法

Nodebrewのインストール方法

NodebrewはNode.jsのバージョンを管理する際に必要になります。
Homebrewをインストールした上で、Nodebrewをインストールしてください。

インストール

以下のコマンドで、Nodebrewをインストールします。

$ brew install nodebrew

以下のエラーが発生した場合、フォルダを作成して、再度インストールコマンドを実行してください。

Fetching: https://nodejs.org/dist/v17.2.0/node-v17.2.0-darwin-arm64.tar.gz
Warning: Failed to create the file                                                                                                                                                                       
Warning: /Users/user_name/.nodebrew/src/v17.2.0/node-v17.2.0-darwin-arm64.ta
Warning: r.gz: No such file or directory
                                                                                                                                                                                                      0.0%curl: (23) Failure writing output to destination

※user_name：Macのユーザー名

以下のコマンドでフォルダを作成します。

mkdir -p ~/.nodebrew/src

パス設定

インストールが完了したら、パスを通す必要があります。

まずは、ホームディレクトリに移動します。
(ターミナルを起動した際のディレクトリ：・・・@・・・　~)

以下のコマンドで、「.zshrc」ファイルを開きます。

$ open ~/.zshrc

「.zshrc」ファイルに以下のコードをコピペして、保存します。

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

以下のコマンドで、ファイルに追記した内容を反映します。

source ~/.zshrc

Node.jsのインストール方法

Nodebrewのインストールが完了したら、Node.jsをインストールします。

Node.jsの最新版は、以下のコマンドを実行します。

$ nodebrew install latest

他のバージョンは、以下のコマンドで実行します。

// インストール可能なバージョンを確認
$ nodebrew ls-remote

// バージョンを指定して、インストール
$ nodebrew install-binary v17.2.0

使用バージョンを変更

Node.jsをインストールしたら、使用するバージョンを選択する必要があります。
以下のように、初期は”none”となっているため使用できない状態となっています。

$ nodebrew ls
v17.2.0

current: none

以下のコマンドで使用するバージョンを変更することができます。

$ nodebrew use v17.2.0
use v17.2.0

バージョン変更できたか確認してみましょう。

$ nodebrew ls
v17.2.0

current: v17.2.0

確認

node、npmコマンドが使用できるようになっているか確認しましょう。
※npmコマンドはNode.jsをインストールすると使用できるようになります。

$ node -v
v17.2.0

$ npm -v
8.1.4

インストールが上手くいけば、バージョン名が出力されます。

「command not found」が出力される場合、パスの設定をやり直してみてください。

まとめ

Reactのローカル開発環境の構築は少し大変ですが、使用できるようになると便利ですので、ぜひ試してみてください。

Udemyで学習を促進！！

Reactを学びたいという方には、Udemyでの学習をおすすめします！
Progate、Dotinstall、本でプログラミングを学習してきましたが、最近Udemyが一番いいなと感じています。

なぜなら、UdemyはProgate、Dotinstall、本のメリットを併せ持っているからです！
Udemyのメリット

Progate、Dotinstallのようなサブスクだと月額料金がかかる
　→Udemyは、購入したら繰り返し使用可能です。
本だと開きながら学習するのが不便
　→Udemyは、画面に表示して使用可能。
　　コードエディタとUdemyを並べて使用することで、作業性Up。

Reactのおすすめ講座

React – 入門

a8adscript(‘body’).showAd({“req”: {“mat”:”3BMMUV+4324QQ+3L4M+BWGDT”,”alt”:”商品リンク”,”id”:”3xk7jfV-g7-sXkkH0l”},”goods”: {“ejp”:”h”+”ttps://www.udemy.com/course/modern_javascipt_react_beginner/”,”imu”:”h”+”ttps://img-c.udemycdn.com/course/240×135/3452848_0c2e.jpg”}});

React – ステップアップコース

a8adscript(‘body’).showAd({“req”: {“mat”:”3BMMUV+4324QQ+3L4M+BWGDT”,”alt”:”商品リンク”,”id”:”3xk7jfV-g7-sXkljVB”},”goods”: {“ejp”:”h”+”ttps://www.udemy.com/course/react_stepup/”,”imu”:”h”+”ttps://img-b.udemycdn.com/course/240×135/3834240_bbc9.jpg?secure=_vo0UBVcc8gBwnYU91PCtg%3D%3D%2C1644739486″}});