コピペできるanyenv、nodenvでReact（TypeScript）環境構築

概要

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 18.12.1 をインストール

執筆時点(2023 年 3 月 16 日)で LTS である 18.12.1 をインストールします。

nodenv install 18.12.1
nodenv global 18.12.1

動作確認

React を起動

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

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

解説

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 default-packages とは nodenv の plugin です。nodenv で Node.js をインストールした際に、$(nodenv root)/default-packagesに記述されたパッケージを自動的にインストールされます。

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 18.12.1 をインストール

nodenv install 18.12.1
nodenv global 18.12.1

nodenv install 18.12.1コマンドで、指定した Node.js のバージョンをインストールしています。
nodenv global 18.12.1コマンドで、指定した 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 で作成されます。