はじめに

俺の考えた結果
開発環境
環境作っていくよーん
番外編
まとめ
参考文献

俺の考えた結果

野暮用でReactをやりたくなって環境構築を思い立ったところ、いろいろなNodeの環境構築法があることを知った。nodebrewやらanyenv入れてnodenv入れてとか、、、。npmとかyarnとか、、、
私が個人的にpyenv + pipenvでPythonの環境を作っていることもあり、できるだけ似たようなもので整えたかった。
個人的に納得のいく環境構築ができたので、備忘録として残しておく。参考になるかは分からんが、、、

開発環境

macOS Catalina

環境作っていくよーん

nodenvがpyenvとなんか親戚的な関係らしいので、nodenvを使っていこうと思うが、調べるとanyenv入れてやる方法がとても出てくる。しかし、pyenvはもうダイレクトにbrewから入れてるのでその方法はなんとなく気持ち悪い、、、。よし、nodenvもbrewから直接入れよう！！

brew install nodenv

よし、パスを通そう、私のMacはzshなので.zprofileに書いていく。調べると.zshrcで書いてる人も結構いる、、、。どっちがいいかはよくわかっていない。誰か教えてください。

~/.zprofile

# 適当に追記
# nodenv
export PATH="$HOME/.nodenv/bin:$PATH"
eval "$(nodenv init -)"

もうこれで環境構築大体終わったも同然。あとはpyenv的な感じでnodenvに使いたいversionを入れていく。installできるversionを確認するには、こうやってやるっぽい。やっぱりpyenvと似てて使いやすい

nodenv install --list

今回は、なんとなく15.13.0を入れていく。インストールするには以下の方法で、入れたあとはrehashした方がいいらしい

nodenv install 15.13.0
nodenv rehash

これで入ってるか確認してみる。

nodenv versions

自分が入れたものが出てきたらOK!
複数のversionを入れてglobal, localでversionを管理することができる。とっても便利。
よし、早速Reactの環境を作っていこう。
任意のディレクトリを作って移動

mkdir test
cd test

試しにnodeコマンド使ってみよう、適当なファイルに書いてみて実行してみる

sample.js

console.log('Hello!');

作成したら以下のコマンドで実行

node sample.js

Hello!が出たら成功です！！
よし、Reactやってみよう。Reactの公式によるとnpmではなくnpxで作るのがいいっぽい。

npx create-react-app sample

そうするとsampleってディレクトリができてるはず。

cd sample
npm start

これでなんとReact動いちゃうんですよ。
まあReact以外もできないと意味がないですよね。express入れてみよう。

cd ..
mkdir sample2
cd sample2

このsample2のディレクトリにexpress入れていこう、まずはnpm initでnpm環境を初期化、その後にnpm installでexpressを入れていく。

npm init
npm install express

これだけ！！これでexpressがこのディレクトリに入っちゃった。
追加したいパッケージはnpm installで入れていくことができる。

番外編

番外編って言っていいのか分からないが、npmとは別にyarnってやつもある。
どちらもNodeのパッケージマネージャーだが、デフォルのままだとyarnは使えない。yarnの方がインストールが早く、セキュリティが高い。こんなの入れるしかないでしょ！ってことで入れていきます！！

まず、.nodenv/pluginsと言う場所にyarnを入れていくのだが、デフォルトだとないこともある。ってことで作成していく、確認してある場合は必要はない。

mkdir -p "$(nodenv root)/plugins"

そうしたら、そのディレクトリに

git clone https://github.com/pine/nodenv-yarn-install.git

を実行し入れていく。これでyarnを入れる準備が整った。しかしこれでは準備が整っただけでまだ入っていないので、一度installしたversionをuninstallしてinstallしていく。

nodenv uninstall 15.13.0
nodenv install 15.13.0

これで自動的にyarnが入っていく。
一応確認する方法は、

which yarn

これで入っていればOK!
これでyarnでもNode開発することができる！

まとめ

いかがだったでしょうか。自分に向けた備忘録だったので、走り書きで拙い文章だったのですがお役に立てれば幸いです。もっといい方法とかあるかもしれないので、調べ次第追記しようかな、、、気が向けば。。。

はじめに

俺の考えた結果

開発環境

環境作っていくよーん

番外編

まとめ

参考文献