【M1 Mac】React開発環境の構築

当ページのリンクには広告が含まれています。

React開発環境の構築方法をまとめます。

実行環境

• 以下の通りM1 MacでHomebrewをインストール済であることを前提としています。

・ M1 Macbookpro
・ Homebrewはインストール済

大まかな流れ

• nodebrewのインストール
• node.jsのインストールと有効化
• 環境パスの設定
• react開発環境の作成

nodebrewのインストール

• まずはHomebrewを使用してnodebrewをインストールします。

terminal

brew install nodebrew

• インストールが完了したらnodebrewのバージョンを確認しましょう。

terinal

nodebrew -v

• 以下のような出力が確認できたらOKです。

terminal

nodebrew 1.0.1

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backword compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4

node.jsのインストールと有効化

• node.jsをインストールする際は、LTSの推奨版（安定版）をインストールします。

terminal

nodebrew install-binary stable

• インストールされたnode.jsのバージョンを確認しましょう

terminal

nodebrew ls

• 以下のようにcurrent: noneとなっている場合は、使用するバージョンを有効化します。

出力結果

v14.15.4

current: none

• 指定したバージョンのnode.jsを有効化する際は以下のコマンドで有効化が可能です。ここでは、2021年1月時点で最新の安定バージョンであるv14.15.4を有効化します。

terminal

nodebrew use v14.15.4

• 有効化が完了しているか確認をします。

terminal

nodebrew ls
v14.15.4

current: v14.15.4

• これで完了です。

環境パスの設定

• M1 Macのデフォルトターミナルであるzshでnodeコマンドが使えるように環境パスを設定します。

terminal

vim ~/.zprofile

• zprofileには以下を追記します。

~/.zprofile

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

• 完了したら以下のコマンドを実行して環境パスを読み込みます

terminal

source ~/.zprofile

• nodeが使用できるか確認しましょう。

terminal

node -v

出力結果

v14.15.4

• 上記のようにv14.15.4と表示されればOKです。

react開発環境の作成

• まずは任意の場所にフォルダを作成します。ここではUserの配下にreact-pjというフォルダを作成します。その後、作成したreact-pdフォルダに移動します。

terminal

mkdir react-pj
cd react-pj

• react-pfフォルダに移動したら、以下のコマンドを実行し、react開発環境を実行します。react-appの箇所は任意の名前でOKです。

terminal

npx create-react-app react-app

• すると、react-appというフォルダが作成されます。このフォルダに移動し、npm startコマンドを実行します。

terminal

cd react-app
npm start

• すると以下の出力が現れます。

terminal

You can now view react-basic in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.158.15:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

• 場合によっては、chromeにアクセスしてもよいかのポップアップが現れるので、OKを選択しましょう。

• chromeなどのブラウザで、localhost:3000にアクセスすると、reactの最初の画面が現れるかと思います。

ReactとDjango REST Framework APIを学ぶ

バックエンドエンジニアとしてフロントエンドの知識を学びつつ、Django REST Framework APIを学びたい方は、Udemyの[基礎編]React Hooks + Django REST Framework API でフルスタックWeb開発で学ぶのがおすすめです。

こちらの記事もあわせて読みましょう