🦔

コピペできるanyenv、nodenvでReact(TypeScript)環境構築

2021/11/05に公開約3,300字

概要

n 番煎じですが、自分用に anyenv、nodenv から React(TypeScript)環境を作るコマンドのまとめです。
新しい PC とか EC2 とかで、Docker すら入っていない状態のときに使う使うことが多かったので記事を書きました。
MacOS、Linux 向けに、記事を読まなくても上からコピペするだけで環境構築できるようになっています。

インストール手順

使用するシェルは zsh を想定しています。

anyenv をインストール

git clone https://github.com/anyenv/anyenv ~/.anyenv
echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(anyenv init -)"' >> ~/.zshrc
exec $SHELL -l
anyenv install --init

nodenv をインストール

anyenv install nodenv
exec $SHELL -l

anyenv-update インストール

mkdir -p $(anyenv root)/plugins
git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update
mkdir -p "$(nodenv root)"/plugins

nodenv default-package をインストールして編集

git clone https://github.com/nodenv/nodenv-default-packages.git "$(nodenv root)/plugins/nodenv-default-packages"
touch $(nodenv root)/default-packages
echo "yarn\ntypescript\nts-node\ntypesync" >> $(nodenv root)/default-packages

node.js 14.17.0 をインストール

執筆時点(2021 年 6 月 11 日)で最新の LTS である 14.17.0 をインストールします。

nodenv install 14.17.0
nodenv global 14.17.0

動作確認

React を起動

npx create-react-app react-example --template typescript
cd react-example
yarn start

ブラウザが起動して以下の画面が出てきたら完了です。

localhost:3000

解説

anyenv をインストール

git clone https://github.com/anyenv/anyenv ~/.anyenv
echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(anyenv init -)"' >> ~/.zshrc
exec $SHELL -l
anyenv install --init

nodenv をインストール

anyenv install nodenv
exec $SHELL -l

anyenv-update インストール

anyenv-update を anyenv の plugins に install しています。
anyenv-update を使うと、install する env たちも update されるので便利です。

mkdir -p $(anyenv root)/plugins
git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update
mkdir -p "$(nodenv root)"/plugins
git clone https://github.com/nodenv/nodenv-default-packages.git "$(nodenv root)/plugins/nodenv-default-packages"
touch $(nodenv root)/default-packages

nodenv default-packages をインストールして編集

nodenv default-packages とは nodenv で node.js 環境をインストールした際に、$(nodenv root)/default-packagesに記述された package を自動的に install する nodenv の plugin です。

git clone https://github.com/nodenv/nodenv-default-packages.git "$(nodenv root)/plugins/nodenv-default-packages"
touch $(nodenv root)/default-packages
echo "yarn\ntypescript\nts-node\ntypesync" >> $(nodenv root)/default-packages

以下のコマンドで package を指定していました。

echo "yarn\ntypescript\nts-note\ntypesync" >> $(nodenv root)/default-packages

中身は以下、詳しくは解説しませんが、必須なもの(typescript、ts-node)と、あると便利なもの(typesync、yarn)を記述しています。

yarn
typescript
ts-node
typesync

node.js 14.17.0 をインストール

nodenv install 14.17.0
nodenv global 14.17.0

nodenv install 14.17.0コマンドで、指定した node.js のバージョンをインストールしています。
nodenv global 14.17.0コマンドで、指定した node.js のバージョンをデフォルトにします。

nodenv globalで現在設定している node.js のバージョンを確認できます。

React を起動

npx create-react-app react-example --template typescript
cd react-example
yarn start

npx コマンドglobal install されていないコマンドを実行時にインストール、完了後に削除するコマンドです。
この例では、コマンドにcreate-react-appが該当します。
create-react-app プロジェクト名 --template typescriptは、プロジェクト名で React アプリを起動するコマンドです。
--template typescriptで typescript を使用することを指定しています。
指定しなければ javascript で作成されます。

Discussion

ログインするとコメントできます