asdf + ViteでReact環境構築

はじめに

Reactについてドキュメントを読んだりインプットをしているものの、理解するにはアウトプットもしようと思い、その環境構築手順を備忘録がてら残します。

Next.js等フレームワークを使うこともできますが、今回は簡易的にReactを触りたいのでViteで環境構築をします。

手順

自分の使っている環境は以下なので、Windowsだったりシェルが異なる場合は手順も変わってくるのでご容赦ください。

• Macbook
• zsh
• Homebrew

asdf

Dockerを立てるのも手間だったので、サクッと入れられるかつ簡単にバージョンを変えられるのでasdfを使いました。

asdfについてはこちら。

※ すでに自分の環境はHomebrewやgitは入っていたのでその手順は飛ばしています。

asdfをダウンロード

$ brew install asdf

$ asdf --version
v0.13.1

asdfをインストール

zshを使っているのでzshの手順を記載しています。異なる方はこちらを参照してください。

$ echo -e "\n. $(brew --prefix asdf)/libexec/asdf.sh" >> ${ZDOTDIR:-~}/.zshrc

バージョンをインストール

最新バージョンを入れることもバージョンを指定することもできます。

# 利用可能なバージョンを確認
$ asdf list all nodejs
...
23.2.0
23.3.0
23.4.0

# 最新バージョンをインストール
$ asdf install nodejs latest

# バージョンを指定してインストール
$ asdf install nodejs 20.12.2

バージョンを設定

バージョン設定は全体（global）に設定するか、プロジェクトごと（local）に設定するかも指定することができます。

# global
$ asdf global nodejs latest

# local
$ asdf local nodejs latest

# バージョン確認
$ node -v
v20.12.2

Vite

プロジェクト作成

SWCだと高速というのを見かけたので、興味本位でreact-swcにしています。

$ npm create vite@latest my-react-app -- --template react-swc
Need to install the following packages:
create-vite@6.0.1
Ok to proceed? (y) y

Scaffolding project in ... /my-react-app...

Done. Now run:

  cd my-react-app
  npm install
  npm run dev

起動

プロジェクト作成時、最後に3つのコマンドが表示されたので順に実行していきます。

$ cd my-react-app

$ npm install

$ npm run dev

> my-react-app@0.0.0 dev
> vite


  VITE v6.0.3  ready in 386 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

http://localhost:5173/にアクセスすると画面が表示されました👏
これで環境構築終了です。