[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公式より参照](https://github.com/nvm-sh/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などのフレームワークと比べると一歩下の立ち位置の扱いとなります。
- [このページ内](https://ja.react.dev/learn/start-a-new-react-project)でフレームワーク無しの方法として紹介されているが、  
  どうしてもフレームワークを使いたくないならこの方法もあるよといったスタンス。
##### AWS Amplifyにおいて
AWS Amplifyは、フルスタックのウェブおよびモバイルアプリケーションを  
迅速に構築・デプロイするためのAWSのサービスです。
- [公式ドキュメント](https://docs.amplify.aws/react/start/quickstart/)ではViteを利用した[テンプレート](https://github.com/aws-samples/amplify-vite-react-template)も用意されており、  
  Amplifyを使い始める際はそのテンプレートを利用することをお勧めされています。
- GUIを用いて、ホスティングを行う際にも候補の1つとしてViteがあげられています。

##### Chakra UIにおいて
人気のUIコンポーネントライブラリのChakra UIにおいても、  
[Vite用インストールガイド](https://www.chakra-ui.com/docs/get-started/frameworks/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