Chapter 03無料公開

【React】React関連パッケージのインストール

のら
のら
2022.05.07に更新

create-react-appに必要なパッケージ

  • node
  • yarnnpm

下記の確認コマンドをターミナルで実行して、正常にバージョンが表示される場合はこの章は読み飛ばしていただいて構いません。

ターミナル
$ node -v
v14.16.1

$ yarn -v
1.22.11

インストールされていない場合は、このまま読み進めて各種パッケージをインストールしてください。

Node.jsのインストール

Node.jsとは

  • JavaScript実行環境の1つ
  • サーバーサイドで動くJavaScriptのことを指すこともある

ちなみにnodeをインストールすることで、npmというJavaScriptのパッケージマネージャも一緒にインストールされます。

npmとは

Node Package Managerの略です。簡単にいうと、Node.jsのパッケージ(ライブラリとか)を管理するものです。

Railsでいうbundlerのようなものだと捉えると良いかもしれません。 使いたいパッケージ(ライブラリ)をインストールしたいときは、npm(またはyarn)を使って取り込んでいきます。

nodebrewを使ってnodeのバージョンを管理

今回はnodebrewを使ってnodeのバージョンを管理していきます。

nodebrewとは

nodebrewとは、Node.jsのバージョン管理ツールです。

プロジェクト毎にNode.jsのバージョンが異なるとインストールし直す必要がありますが、nodebrewを使えば簡単にnodeのバージョンを切り替えることができます。 今回はこのnodebrewを使ってnodeをインストールしていきたいと思います。

nodebrewをインストールする

下記のコマンドでHomebrew経由でnodebrewをインストールしていきます。

ターミナル
$ brew install nodebrew

次にPathを通します。下記のコマンドを実行してシェルを確認していきます。(ここら辺のシェルについての解説は割愛させていただくので、ご興味のある方は調べてみてください。)

ターミナル
echo $SHELL

表示された表記に従って下記のコマンドを実行してください

/bin/bashと表示された場合】

ターミナル
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile && source ~/.bash_profile

/bin/zshと表示された場合】

ターミナル
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc && source ~/.zshrc

次に下記のコマンドを実行して、インストールできるnodeのバージョンを確認していきましょう。

ターミナル
$ nodebrew ls-all
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
・・・略

たまにsuch file or directoryみたいなエラーが発生することがあるみたいです。そんなときは下記のコマンドを実行してください。

ターミナル
$ mkdir -p ~/.nodebrew/src

参考記事

nodeのインストールコマンドを実行

では、nodeをインストールしていきましょう。下記のコマンドを実行してください。

ターミナル
$ nodebrew install v14.16.1

正常にインストールされたら下記のコマンドを実行して、インストールしたバージョンを使用するように設定しましょう。

ターミナル
$ nodebrew use v14.16.1

最後に正常にnodeがインストールされているか確認しましょう

$ node -v
v14.16.1

バージョンが表示されていればOKです!

yarnのインストール

yarnとは

  • JavaScriptのパッケージマネージャ(npmのお仲間)
  • npmと互換性がある

なんでnpmじゃなくてyarnを使うの?

yarnはnpmに比べて、下記のようなメリットがあります。

  • npmよりインストールが早い
  • npmと互換性があるので並行して使える

よく 「yarnはyarn.lockがあるため、npmよりも厳密である」 みたいな情報があります。確かに以前はそうだったのですが、現在はnpmにも同じような機能であるpackage-lock.jsonが作られたので、「厳密」という観点では、特に変わりません。

yarnのインストールコマンドを実行

最初にyarnが入っているか確認していきます。すでにインストール済みなら読み飛ばしてください。下記はインストール済みの例です。

ターミナル
$ yarn -v
1.22.11

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

ターミナル
$ npm install -g yarn

正常にインストールされているか下記のコマンドを実行して確認してください。

ターミナル
$ yarn -v
1.22.11

今回は以上です。お疲れ様でした!