はじめに

JavaScriptのライブラリであるReactでアプリを作成してみたくなったので環境構築までの過程を備忘録としてまとめたいと思います。

create-react-appはReactで簡単にアプリを作成するためのツールです。本来ならbabelやwebpackなどの設定も含めて自分で構築しなければならないのですが1行のコマンドでそれができてしまうのがcreate-react-appです。

create-react-appに必要なツール

node バージョン8.10以上
npm バージョン5.6以上

また、上記の２つをインストールするために更にhomebrewとnodebrewをインストールしていきます。

1. homebrewのインストール

nodebrewを使うために最初にhomebrewをインストールします。
homebrewとはmacOS用のパッケージマネージャーです。様々なファイルの依存関係の問題を解決するためにパッケージとしてまとめて提供してくれています。
homebrew公式HPからインストール用のコマンドをターミナルにコピペします。

ターミナル

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
// インストールに数分かかります

// インストールできたか確認（バージョンが表示されれば成功です）
% brew -v
Homebrew 3.0.10
Homebrew/homebrew-core (git revision 772716397f; last commit 2021-03-30)

2. nodebrewをインストール

homebrewを使ってのインストールはbrew install パッケージ名と記述します。

ターミナル

$ brew install nodebrew

// インストールできたか確認（バージョンが表示されれば成功です）
$ nodebrew -v
nodebrew 1.1.0

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 backward 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

ここまででhomebrewとnodebrewを無事インストールできました。
次にnodeとnpmをインストールしていきます。

3. nodeをインストール

nodebrew ls-remoteでインストールできるnodeのバージョンを確認します。

ターミナル

$ nodebrew ls-remote

// 実行結果
v0.0.1    v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6

v0.1.0    v0.1.1    v0.1.2    v0.1.3    v0.1.4    v0.1.5    v0.1.6    v0.1.7
v0.1.8    v0.1.9    v0.1.10   v0.1.11   v0.1.12   v0.1.13   v0.1.14   v0.1.15
v0.1.16   v0.1.17   v0.1.18   v0.1.19   v0.1.20   v0.1.21   v0.1.22   v0.1.23
v0.1.24   v0.1.25   v0.1.26   v0.1.27   v0.1.28   v0.1.29   v0.1.30   v0.1.31
v0.1.32   v0.1.33   v0.1.90   v0.1.91   v0.1.92   v0.1.93   v0.1.94   v0.1.95
v0.1.96   v0.1.97   v0.1.98   v0.1.99   v0.1.100  v0.1.101  v0.1.102  v0.1.103
v0.1.104
:
:
:

下にいくほど最新のバージョンになります。
要件的には8.10以上であれば問題ないですが、nodebrew install stableと打てば安定的なバージョンを自動でインストールできます。

しかし、以下のようなエラーが発生することがあります。

ターミナル

% nodebrew install stable
Fetching: https://nodejs.org/dist/v16.0.0/node-v16.0.0-darwin-x64.tar.gz
Warning: Failed to create the file
Warning: /Users/XXXXXX/.nodebrew/src/v16.0.0/node-v16.0.0-darwin-x64.
Warning: tar.gz: No such file or directory

これはnodebrewをインストールする用のディレクトリが存在しない場合に起こります。
この場合は以下のコマンドで解決できます。

ターミナル

% nodebrew setup

// 実行結果
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

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

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

これでnodebrewがインストールできるようになります。

ターミナル

% nodebrew install stable
Fetching: https://nodejs.org/dist/v16.0.0/node-v16.0.0-darwin-x64.tar.gz
##################################################################################################################################################################################################### 100.0%
Installed successfully

// successfullyと表示されたら成功です。

// インストールされているnodeを確認
$ nodebrew ls
v16.0.0

current: none

確認してみるとv16.0.0がインストールされていることがわかります。
現在currentがnoneになっているので、インストールしたバージョンを指定して有効化します。

ターミナル

$ nodebrew use v16.0.0

// もう一度確認
$ nodebrew ls
v16.0.0

current: v16.0.0

currentがインストールしたバージョンになっていたら成功です。
次にnodeを使用できるように以下のコマンドを入力します。

ターミナル

$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile

コマンドを入力したら一旦ターミナルを再起動して結果を反映させます。
ターミナルを開いたらバージョンを確認してみましょう。

ターミナル

$ node -v
v16.0.0

インストールしたバージョンになっていたら成功です。

4. npmのインストール

次にnpmですが実はnodeをインストールした時点で自動的にインストールされています。
以下のコマンドでバージョンが確認でしてみましょう

ターミナル

% npm -v
7.10.0

バージョンは5.6以上でしたら問題ないです。
長かったですが、これでやっと準備が整いました！
それではいよいよcreate-react-appに移ります。

create-react-app

まず、いつも自分が使っているディレクトリに移動しましょう。
今回はprojectsとします。
移動できたらnpxコマンドでアプリを作成していきます。

ターミナル

projects $ npx create-react-app 任意のフォルダ名

// 結果
:
:省略
:
Happy hacking!

いろいろフォルダやらファイルが生成されますがまずはエディタを開いて中身を確認していきましょう。

フォルダの中身を確認

エディタを開いたらまずは、ターミナルを立ち上げて以下のコマンドを打ちましょう。

ターミナル

$ npm run build

これで本番環境に公開するためのbuildというフォルダが作成されます。
ディレクトリ構成は以下のようになっていると思います。

React(任意のフォルダ名)
|-build
|-node_module
|-public
|-src
|-.gitignore
|-package.json
|-README
|-yarn.lock

次はターミナルで以下のコマンドを打ってみましょう。

ターミナル

$ npm start

するとサーバーが立ち上がりReactの初期画面が描画されます。

画面にある通り、src/App.jsを編集すると編集内容が画面に反映されます。
試しに、App.jsを以下のように編集してみましょう。

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React and output // and outputを追記
        </a>
      </header>
    </div>
  );
}

export default App;

保存してブラウザを確認するとLearn React and outputと表示されると思います。

簡単にまとめるとこんな感じです。

src: コンポーネントを作るためのjsファイルの集まり
public: htmlファイルやその他の設定ファイル
build: 本番環境用のファイル

以上で環境構築は終了です。お疲れさまでした。。。

参考文献

MacにNode.jsをインストール
 チュートリアル：React の導入