はじめに
俺の考えた結果
開発環境
環境作っていくよーん
番外編
まとめ
参考文献
俺の考えた結果
野暮用で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開発することができる！
まとめ
いかがだったでしょうか。自分に向けた備忘録だったので、走り書きで拙い文章だったのですがお役に立てれば幸いです。もっといい方法とかあるかもしれないので、調べ次第追記しようかな、、、気が向けば。。。
参考文献
https://qiita.com/ttokdev/items/3547587b0494dd624901
https://qiita.com/Hai-dozo/items/90b852ac29b79a7ea02b
https://ja.reactjs.org/docs/create-a-new-react-app.html
↧