[React] React + Vite + TS 環境の構築

環境

• M1 Mac
• macOS Ventura 13.7
• Node.js v20.17.0
• NPM 10.8.2

Node.jsのインストール

管理用ツール(nvm)をダウンロードする

nvmとは、Node Version Managerの略称でありNode.jsのバージョン管理ツールです。

• Node.jsは更新頻度が高いため、バージョン管理ツールの利用が推奨されています。

今回はmacOS環境想定のため、
下記コマンド(nvm公式より参照)でダウンロードを行います。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

コマンドの処理が完了した後、
ターミナルを再起動し以下コマンドでバージョンが表示されることを確認します。

nvm --version

nvmを利用して、Node.jsのLTS版をインストールする

nvmを利用して、Node.jsにおけるLTS最新版のインストールを行います。

nvm install --lts

• インストール済みのNode.jsについては以下コマンドで確認可能

  nvm list
  

利用するNode.jsのバージョンを指定します。

• 今回は例として、20.17.0を利用しています。

nvm use 20.17.0
Now using node v20.17.0 (npm v10.8.2)

以上で、Node.jsの準備は完了となります。

React環境構築

Viteテンプレートを利用した構築

下準備が済み、いよいよReactの環境構築です。
以下コマンドで、Vite公式のテンプレートを利用した環境構成が作成されます。

npm create vite@latest my-react-app -- --template react-swc-ts

カレントディレクトリに環境構築したい場合

上記コマンドにおける「my-react-app」の部分は自由に変更可能であり
環境が入ったディレクトリ名になります。

一階層下のディレクトリ配下に環境構築を行いたくない場合は、
「my-react-app」の箇所を「.」とすれば、カレントディレクトリに展開することができます。

npm create vite@latest . -- --template react-swc-ts

この方法はGitHubからCloneした空リポジトリ内に
直接環境構築したいときなどに便利です。

コマンドを実行し処理が完了すると、指定したディレクトリ配下に
開発に必要な環境が自動で構築されます。

用語説明

Viteとは？

Viteはモダンなフロントエンド開発のために設計された、高速なビルドツールです。

• ちなみに、Reactと似た立ち位置にあるVue.jsと開発者が同じであり
  Vite自体はフランス語で「素早い」という意味の単語となります。

何故使うのか？

ReactはあくまでもUI構築用のライブラリであり、
補助としてビルドツールが必要であることが理由になります。

かつては、CRA(Creact React App)がビルドツールとして主流でしたが、
現在のReact公式ドキュメントからは選択肢として紹介されていません。

Viteの立ち位置

CRAの後継として期待されているViteですが
その扱いはコミュニティごとに立ち位置は異なっています。

React公式において

React公式ドキュメント内でも、選択肢としてViteの紹介はされていますが
Next.jsなどのフレームワークと比べると一歩下の立ち位置の扱いとなります。

• このページ内でフレームワーク無しの方法として紹介されているが、
  どうしてもフレームワークを使いたくないならこの方法もあるよといったスタンス。

AWS Amplifyにおいて

AWS Amplifyは、フルスタックのウェブおよびモバイルアプリケーションを
迅速に構築・デプロイするためのAWSのサービスです。

• 公式ドキュメントではViteを利用したテンプレートも用意されており、
  Amplifyを使い始める際はそのテンプレートを利用することをお勧めされています。
• GUIを用いて、ホスティングを行う際にも候補の1つとしてViteがあげられています。

Chakra UIにおいて

人気のUIコンポーネントライブラリのChakra UIにおいても、
Vite用インストールガイドが記載されています。

参考

nvm関連

macOS用

• 【Node.jsバージョン管理入門】最適なバージョン管理ツールの選択とその使い方
  • https://zenn.dev/json_hardcoder/articles/8d88eef460ceee
• nvm(Node Version Manager)を使ってNode.jsをインストールする手順
  • https://qiita.com/ffggss/items/94f1c4c5d311db2ec71a
• nvm公式
  • https://github.com/nvm-sh/nvm

Windows用

• WindowsでNode.jsをインストールしよう！ (nvm-windows)
  • https://zenn.dev/y_2_k/articles/e419bcf729e82d
• nvm-windows公式
  • https://github.com/coreybutler/nvm-windows

ビルドツール関連

• Webpack?Create React App?No、Vite!! ~ ①コンパイル、バンドル、ビルドを理解しよう ~
  • https://qiita.com/yuppe-namura/items/fbe8c1af9779e7ba8f87

Vite関連

• Vite公式
  • https://vite.dev/
• SWC
  • https://swc.rs/

CRA関連

• Create React Appは役割を終えました
  • https://zenn.dev/nekoya/articles/dd0f0e8a2fa35f
• create-react-appが消えてしまったことの調査
  • https://zenn.dev/laravelstudy/articles/bad11d64eeac42

各コミュニティにおけるVite紹介ページ

• React公式docs
  • https://ja.react.dev/learn/start-a-new-react-project
• AWS Amplify 公式docs
  • https://docs.amplify.aws/react/start/quickstart/
• AWS Amplify 公式テンプレート
  • https://github.com/aws-samples/amplify-vite-react-template
• Chakra UI公式docs
  • https://www.chakra-ui.com/docs/get-started/frameworks/vite