概要

今回は、JavaScriptのライブラリであるReactの環境構築を行なったので、メモ程度ですが情報を共有しときます。
環境構築はcreate-react-appコマンドを使います。

目次

• 開発環境
• Reactの環境構築をする手順
  • 1. Homebrewのインストール
  • 2. nodebrewのインストール
  • 3. Node.jsをインストールする
  • 4. npmをインストールする
  • 5. create-react-appを実行する
• エディタで開く
• ブラウザに表示する
• まとめ

開発環境

開発環境は以下の通りです。

• macOS Catalina
• Homebrew 2.4.0
• nodebrew 1.0.1
• Node.js v14.4.0
• zsh
• VScode

Reactの環境構築をする手順

今回、create-react-appを使って環境構築をしていきます。
Create React AppはReactの環境構築ツールで、コマンド1つでReactに必要な環境を構築することができます。

create-react-appで環境構築するには、「Node.js」と「npm」が必要です。
また、これらをインストールするには、「Homebrew」と「nodebrew」が必要なので、順番にインストールしていきます。

手順は以下の通りです。

1. Homebrewをインストールする
2. nodebrewをインストールする
3. Node.jsをインストールする
4. npmをインストールする
5. create-react-appを実行する

1つずつクリアしていきましょう。

1. Homebrewのインストール

「Homebrew」とはmacOSまたはLinux用のパッケージマネージャーです。

Homebrewの公式サイトはこちらです。

Homebrewの公式サイトのホームページにあるコマンドをターミナルに貼り付けて実行します。

実行するとインストールが始まりますので、しばらく待ちます。

インストールが完了したら、以下のコマンドを実行してHomebrewのバージョンを確認してみましょう。このコマンドは、Homebrewのバージョンを確認するコマンドです。

% brew -v

今回は、バージョン2.4.0がインストールされています。
このように、Homebrewのバージョンを確認することができたら、インストールは正常に完了しています。

2. nodebrewのインストール

「nodebrew」とはNode.jsのバージョン管理システムで、Homebrewでインストールすることができます。
nodebrewはnodeをインストールするために使います。

ターミナルで以下のコマンドを実行します。

% brew install nodebrew

しばらく待ちます。

Homebrewをインストールした際と同様に、nodebrewのバージョンを確認します。
以下のコマンドを実行しましょう。

% nodebrew -v

このようにnodebrewのバージョンが表示されれば、nodebrewのインストールは完了です。

3. Node.jsをインストールする

「Node.js」とは、簡単にいうとサーバーサイドで動くJavaScriptのことです。

Node.jsをインストールしていきます。
まず、インストール可能なNode.jsのバージョンを確認します。以下のコマンドを実行してください。

% nodebrew ls-remote

コマンドを実行すると、次の画像のようにインストールすることができるNode.jsのバージョンが一覧で表示されます。この中から、好きなバージョンを選んでインストールすることができます。

create-react-appに必要なNode.jsのバージョンは8.1.0以上なので、インストールするバージョンはこれより新しいバージョンであれば問題ありません。

では、インストールしていきます。
以下のコマンドを実行します。

% nodebrew  install stable

このコマンドでは、Node.jsの安定バージョンをインストールすることができます。stableが、安定バージョンという意味です。

stableの部分をlatestにすると最新バージョンをインストールすることができます。
最新バージョンはバグなどが起きやすいので、基本的には安定バージョンのインストールで大丈夫です。

インストールしたNode.jsを確認します。以下のコマンドを実行しましょう。

% nodebrew ls

コマンドを実行すると。画像のように現在インストール済みのNode.jsのバージョンが表示されます。ぼくがインストールしているバージョンはv14.4.0です。
初めて使う方「current: noneとなっているはずです。

以下のコマンドでNode.jsを使えるようにしましょう。バージョンの部分は自分のPCにインストールされているバージョンを入力してください。

% nodebrew use v14.4.0

コマンド実行後、もう一度nodebrew lsのコマンドを実行すると、currentの部分が変更されているはずです。

次にパスを通します。
以下のコマンドを実行してください。(以下のコマンドはshellがzshの場合ですので、気をつけてください)

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

% source ~/.zshrc

ここまでやるとNode.jsが使えるようになっているはずです。
以下のコマンドで確認してみましょう。

% node -v

先ほどcurrentに設定したバージョンが表示されれば、Node.jsのインストールは完了です。

4. npmをインストールする

npmをインストールしていきます。npmとは、Node Package Managerの略で、Node.jsのパッケージを管理するものです。
パッケージとは、Node.jsの便利な機能をまとめたものです。これを簡単に管理できるのがnpmになります。

とは言っても、実はNode.jsをインストールした時点でnpmも一緒にインストールされています。
以下のコマンドで確認してみましょう。

% npm -v

このように、バージョンが表示されればOKです。

ここまでで、create-react-appを使う準備は整いました。
では、create-react-appしていきましょう！

5. create-react-appを実行する

まず、cdコマンドで自身の開発環境に移動してください。移動したフォルダの直下に開発フォルダが作られます。

移動した先で以下のコマンドを実行します。

% npx create-react-app 開発フォルダ名

npxというコマンドでcreate-react-appを呼び出しています。npxを使うことでMacのローカルファイルにcreate-react-appをインストールすることなく使用できます。
create-react-appの後に入力したフォルダ名でReactの環境が構築されます。
今回は、フォルダ名をpracticeとしました。

コマンドを実行して、しばらく待ちます。

npxというコマンドでcreate-react-appを呼び出しています。npxを使うことでMacのローカルファイルにcreate-react-appをインストールすることなく使用できます。
create-react-appの後に入力したフォルダ名でReactの環境が構築されます。
今回は、フォルダ名を「practice」としました。

コマンドを実行して、しばらく待ちます。

処理が完了したら環境構築は終了です！
作成したフォルダ内でReactを使う準備ができています。

この後は、実際にブラウザに表示させるまでをやってみたいと思います。

エディタで開く

以下のコマンドを実行してエディタで作ったフォルダを開きます。(ぼくはVScodeをエディタとして使っています)

% code practice

エディタで開くとsrcフォルダやpublicフォルダなど色々なフォルダとファイルが自動的に作成されています。

画像はsrcフォルダ内のApp.jsファイルを開いています。

ブラウザに表示する

エディタ内でターミナルを起動し、作業を続けます。

以下のコマンドを実行して、buildフォルダを作成します。コマンドを実行する際は、必ず開発フォルダに移動してから実行してください。

% npm run build

コマンドを実行すると、画像のようにbuildフォルダが作成されます。
このフォルダの中にあるindex.htmlが実際にブラウザに公開するファイルです。

npm run buildではsrcフォルダとpublicフォルダの中のファイルを一つにまとめてbuildディレクトリに出力しています。

buildフォルダが作成できたら、以下のコマンドを実行します。

% npm start

このコマンドを実行するとブラウザが立ち上がり、create-react-appで作成した初期の画面が表示されます。

npm startではローカルサーバーを起動してReactアプリを確認することができるようになります。

Reactでは、srcフォルダ内のApp.jsファイルを書き換えていくことでアプリケーションの中身が変わっていきます。

まとめ

今回はcreate-react-appを使ってReactの環境構築をしました。
1コマンドでReact開発環境を超カンタンに構築できたと思います。

Reactの公式ドキュメントによると、

「Create React AppはReactを学習するのに最適な環境であり、Reactで新しいシングルページアプリケーションを作成するのに最も良い方法です」
引用 : React公式ドキュメント

と書かれています。

Reactは、現在人気がある言語なのでぜひ勉強してみてください！

最後まで読んでいただいてありがとうございました。ではまた。