yarn startしてReactの最初の画面を表示するまでの手順を整理してみた
$ yarn start をしてReactの画面を表示するまでの手順とその周辺知識を整理してみました。
PCはmacOSです。
nodenvのインストール
rubyのインストールや、Terraformのインストールで幾度となく出てきた~~env系のツールです。
node.jsのバージョンをいい感じにしてくれます。
今回も、nodenvの上にnode.jsをインストールします。
詳しくは、rubyやTerraformの記事を参考にしてください。やりたいこととやってることは同じです。
$ git clone https://github.com/nodenv/nodenv.git ~/.nodenv
$ cd ~/.nodenv
$ src/configure && make -C src続いてPathを通します。
bashの場合こちら
$ echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.zshrc
$ echo 'eval "$(nodenv init -)"' >> ~/.zshrcmacのデフォルトはzshですね。zshの場合はこちら
echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(nodenv init -)"' >> ~/.zshrc私はFishを使っているのでこっちでした。
$ set -Ux fish_user_paths $HOME/.nodenv/bin $fish_user_paths
$ echo 'eval (nodenv init - | source)' >> ~/.config/fish/config.fish反映後バージョンが確認できればOKです。
$ exec $SHELL -l
$ nodenv -v
nodenv 1.4.0+3.631d0b6次にnodenv-buildというプラグインを追加します。
これもrbenvの時に似たようなのが出てきていますね。
nodenvの上にnode.jsをインストールするために必要なプラグインです。
$ mkdir -p $(nodenv root)/plugins
$ git clone https://github.com/nodenv/node-build.git "$(nodenv root)"/plugins/node-build
$ nodenv rehashnode.jsのインストール
nodenvの上にnode.jsをインストールします。
## インストール
$ nodenv install 16.13.0
## 有効化
$ nodenv global 16.13.0
## nodenvで有効になっているバージョンを確認(有効化したところに*がついていればOK)
$ nodenv versions
system
* 16.13.0 (set by /Users/user_name/.nodenv/version)
## node.jsのバージョンを確認
$ node -v
v16.13.0これで、node.jsのインストールは完了です。
yarnのインストール
yarnはサードパーティのパッケージマネージャなので、npm(node.jsのデフォルトパッケージマネージャ)でインストールする必要があります。
$ npm install -g yarn-gオプションをつけることで、yarnがグローバルにインストールされるため、npmコマンドのようにどこのパスにいてもyarnコマンドを使うことができます。
macの場合brewでもインストールできます。
$ brew install yarn
あの画面まで
yarnのインストールが終わったらもう少しです。
$ yarn create react-app my-appこれを実行すると、my-appという名前のプロジェクトが作成されます。
プロジェクトに必要なパッケージや.jsファイルなどが自動でインストールされます。
プロジェクトの作成が完了したら、とりあえず動かしてみましょう。
以下のコマンドで、サーバを開始できます。
$ yarn start
....
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.0.12:3000
Note that the development build is not optimized.
To create a production build, use yarn build.この状態でブラウザから、http://localhost:3000またはOn Your Network:に記載されているURLにアクセスするとReactのページが確認できます。
yarnコマンド
yarnのコマンドについて最初よくわかっていなかったので一緒にまとめておきます。
yarn
このコマンドだけで、カレントディレクトリのpackage.jsonに記載されているパッケージをインストールします。
$ yarnパッケージのインストールし直しは、node_modulesとyarn.lockを削除してからこのコマンドを実行することで実現できます。
yarn add -D/-S [package名]
devDependenciesにパッケージをインストールします。
devDependenciesにインストールされたパッケージは、ビルドする時に取り込まれません。
テストや構文解析に用いられる本番環境に不要なパッケージはdevDependenciesにインストールしていきます。
逆に本番にのみインストールしたいパッケージは-Sと指定します。
$ yarn add -D [package名] #devDependenciesにインストール
$ yarn add -S [package名] #Dependenciesにインストールyarn run
yarnコマンドでインストールしたパッケージによって使うことができるコマンドを実行するためのコマンドです。
yarn addでインストールしたパッケージのコマンドは、yarnで管理しているためコマンドそのまま実行しようとしてもコマンドが見つかりません。
なぜなら、そのコマンドはPCで管理されているのではなくyarnによって管理されているからです。
そのため、yarnを通して呼び出してあげる必要があります。
例えば、create react-appで自動でインストールされるeslintコマンドを実行する場合、作成したプロジェクト内でそのまま実行しても、
$ cd my-app
$ eslint -v
fish: Unknown command: eslintのようになってしまいます。
yarn runコマンドから実行すると、
$ yarn run eslint -v
yarn run v1.22.17
$ /Users/tohi/RaiseTech/react/task/task5/my-app/node_modules/.bin/eslint -v
v7.20.0
✨ Done in 1.04s.こんな感じで実行されます。
実行結果を見るとわかると思いますが、内部的にはnode_modules内のコマンドを叩いているといった動きになっているようです。
参考
