Reactアプリをローカルで起動する際に必要なこと

最近は画面側の開発で React を使うことが増えました。

ただ毎回最初にどんな設定すべきやっけ？と悩みます。

特に自分は複数のパソコンを使い分けている（現場毎に PC が貸与されたりしている）ため頻繁に直面します。。

そこで備忘録として残しておこうと思ったので記事にします。

Reactアプリをローカルで起動する際に必要なこと

必要なことをざっとリストアップすると下記になると思います。

Node がインストールされていること。
npm がインストールされていること。
yarn がインストールされていること。（使っている場合）
expo がインストールされていること。（ react-native の場合）

順番に見ていく前に前提を確認しておきます。

前提

本記事の内容の前提は下記に示す通りです。

端末が Mac であること。
Homebrew がインストールされていること。
ソースコードは別ですでに用意されていること。

Mac を前提としていますが、必要なものは基本変わりません。ただ設定方法やコマンドは Windows と Mac では全く異なるのでその辺りは参考にならない可能性が高いです。

Homebrew は Mac では必須と言っても過言ではないくらい便利なパッケージ管理のツールなのでまだインストールしていない方はこれを機にインストールしてみてはいかがでしょうか？

Homebrew のインストール方法は下記の記事を参考にしていただけたらと思います。

また React アプリのソースコードに関しては既に別で用意されているものとして、今から新規でアプリを作成することは想定していません。

ではさっそく順番に見ていきます。

Node がインストールされていること

まず Node は必須になります。

Node のインストールの方法の詳細は下記の記事に記載しているので、本記事では抜粋してコマンド中心に記載します。

自分の場合は自由に Node のバージョンを切り替えたかったので nodebrew を使っています。

Windows の場合だと Nodist がそれに該当します。

Node のインストールを簡単に記載すると下記のコマンドを順番に実行していくだけです。

# nodebrew のインストール
brew install nodebrew

# Node のインストール
nodebrew install-binary stable
# 又は nodebrew install-binary { インストールしたいバージョン }

# インストールでエラーが発生したら下記を実行
mkdir -p ~/.nodebrew/src

# Node の有効化
nodebrew ls
nodebrew use { 任意のバージョン }

これで完了です。

npm がインストールされていること

続いて npm です。

Node がインストールされているのであれば npm は後はパスを通すだけです。

パスを通すための詳細な説明は下記の記事で紹介しているので、本記事ではコマンドを中心に抜粋して記載します。

パスを通して確認するコマンドは下記の通りです。

# パスを通す
vim ~/.bash_profile

## 下記を追記する
PATH=”${PATH}:$HOME/.nodebrew/current/bin”

# 変更内容の反映
source ~/.bash_profile

# パスが通ったかの確認作業
npm -v
node -v
npx -v

これで完了です。

yarn がインストールされていること

続いて yarn です。

yarn に関しては npm 実行のためのパスが通っていると後はコマンドを実行するだけです。

詳細な部分は下記の記事に記載しているので、本記事ではコマンドを中心に抜粋します。

# yarn をインストールする
npm install -g yarn

# yarn がインストールされたことを確認する
yarn -v

これで完了です。

Web アプリの場合はここまで準備が完了しているとローカルでのアプリの起動が可能となります。

その場合は起動したいアプリのディレクトリに移動して（ package.json が配置されているディレクトリ）下記のコマンドを実行します。

yarn install

この処理は利用しているライブラリの数にもよりますが、数秒で終わるものから10分近くかかるものまであるので、機能盛り盛りのアプリの場合は気長に待ちましょう。

処理が完了したら下記のコマンドを実行してアプリを起動するだけです。

yarn start

コマンドを実行すると自動でブラウザが立ち上がると思うので、それでアプリの起動は完了です。

expoがインストールされていること

続いて expo です。

expo のインストールも非常に簡単で詳細は下記の記事に記載しているので、本記事ではコマンドのみ抜粋します。

インストールとアプリの起動コマンドは下記の通りです。

# expo-cli をインストールする
npm install --global expo-cli

# expo が正常にインストールできたことを確認する
expo --version

# 起動したいアプリのディレクトリに移動してアプリを起動する
# package.json が配置されたディレクトリで事前に npm install / yarn install のいずれかが事前に実行されている必要がある。
expo start

上記のコマンドを実行すると自動でブラウザが起動します。

これで完了です。