React + vite + Typescriptの環境構築（ESLintとPrettierは超最低限だよ！！）

# 前提
- フロントエンド（React）の勉強をかねて個人開発をする
- まずは環境構築を実施。今後の自分のためにも備忘録として行ったことを記載していく
- ESlint、Prettierの設定も行う
    - とはいえ、個人開発なのでVSCodeの拡張機能しか使わないので超簡易的設定
- VSCodeのインストールは済んでいる
- フロントエンド初心者向けの最低限の設定

# 環境

- OS：Windows11
- IDE（エディタ）：VSCode
- nvm：1.1.12
- node：v20.17.0
- Vite：5.4.1
- React：18.3.1
- ESlint：9.9.0
- Prettier：3.3.3
- Typescript：5.5.3

# 環境構築
- 早速本題

## nodeのインストール
- nodeのバージョン管理をしたいので、まずはnvmをインストールする
- nvmを使用してnodeをインストール
参考：https://zenn.dev/y_2_k/articles/e419bcf729e82d

## VSCodeのセットアップ
- ESlint、Prettierを使用するための拡張機能や設定変更を実施
### 拡張機能（プラグイン）のインストール
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=rodrigovallades.es7-react-js-snippets)
    - VScodeでReact開発するときにsnippetsを用いて時短できる

### VScodeの設定ファイル（setting.json）の変更
- 以下を追加
```
{
  // 自動保存
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  // Prettierをデフォルトで使用する設定
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 保存時の挙動
  "editor.codeActionsOnSave": {
  　// importが不足していた場合補足
    "source.addMissingImports": "always",
    // ファイルを保存する際にESLintで修正する
    "source.fixAll.eslint": "always",
    // import文の 自動未使用import削除 & 自動アルファベット順ソート 
    "source.organizeImports": "always"
  },
  // ESLintのFlatConfigを使用する
  "eslint.useFlatConfig": true
  }
```
参考：https://www.kawaichiblog.com/blog/ej-gewz8edl8
https://qiita.com/yukiji/items/5ba9e065ac6ed57d05a4

## ViteでReact構築
- ようやっとViteの出番
### プロジェクト作成
- 以下を実行
 ```powershell
npm create vite@latest react-app
cd react-app
npm install
 ```
 - React、Typescript+SWCを選択
 
 参考：https://zenn.dev/kazukix/articles/react-setup-2024

 ### 型定義ファイルの作成
 - `eslint.config.js`のimport部分で以下のようなエラーが出る（はず）
 ```
 モジュール 'eslint-plugin-react-hooks' の宣言ファイルが見つかりませんでした。XXXは暗黙的に 'any' 型になります。
 ```
- importしているモジュールがTypeScriptに対応していないとかで出るエラーらしい
- `@types`のインストールを試したのだが解決しなかったため、型定義ファイルを作成する
- ルートディレクトリ配下に`types`ディレクトリ（ディレクトリ名は任意）を作成し、そこに型定義ファイルを配置

 ```typescript:types/eslint-plugin-react-hooks.d.ts
 declare module "eslint-plugin-react-hooks"; 
 ```
  ```typescript:types/eslint-plugin-react-refresh.d.ts
 declare module "eslint-plugin-react-refresh"; 
 ```

参考：https://bnsgt.hatenablog.com/entry/2021/12/24/193825
https://zenn.dev/ymmt1089/articles/20220429_interface

# サンプルを動かしてみる
- 以下を実行して`http://localhost:5173`にアクセスしてみる
```
npm run dev
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557424/872b6b47-4fa1-bb28-6cfc-8b4a7e572b20.png)

**できた～～～～～～**

# 補足
- （前提という名の言い訳だが）フロントエンド開発には全く明るくなく、今回環境構築するだけでも挫折しそうだった。そんな中で得た知識を以下に共有
## ESLint、Prettierについて
### ESLintとは
- JavaScript や TypeScript のコードの品質を保つための「静的コード解析ツール」
- コードを解析し、構文のエラーや不適切な書き方を見つけて警告やエラーとして表示してくれる
    - 検出するだけでなく、設定によっては修正することもできる（~~Prettierと役割被っとるやろ~~）
- 例えば、以下のような問題を検出する
    - 構文エラー: 括弧を閉じ忘れた、変数名のミスなど
    - スタイルエラー: 行末に不要なセミコロンを入れた、余計な空白を含んでいる、インデントが揃っていないなど
    - ベストプラクティスのルール違反: 例えば、変数を定義しているのに使っていない（未使用変数）など
- 役割は主に「コードの品質を保つこと」にある。バグを防ぐことを目的としている

### Prettierとは
- コードのフォーマット（整形）を自動で行うツール
- ESLint とは異なり、バグや論理的なエラーを検出するのではなく、「コードの見た目」を綺麗に整えるために使用する
- 例えば、以下のような部分を自動的に修正する
    - インデントの整え方（スペースの数、タブの有無）
    - 行の長さ（長すぎる行を折り返す）
    - セミコロンの有無
    - ダブルクォートとシングルクォートの統一
- 目的は、「チーム全員が同じスタイルでコードを書くこと」

### ESLint と Prettier の違い
||ESLint|Prettier|
|---|---|---|
|目的|バグや構文ミスの検出、ベストプラクティスの推奨|コードのフォーマット（見た目を綺麗にする）|
|検出内容|論理的なエラー、未使用変数、構文エラーなど|インデント、スペース、行の長さ、クォートの統一など|
|自動修正の範囲|一部のスタイルルールのみ自動修正可能|フォーマット全般（インデントや行の整形）|
|設定方法|.eslintrc や eslint.config.js|.prettierrc や .prettierrc.json|
|使い方|開発中にリアルタイムで警告・エラーを表示|コードの保存時に自動でフォーマット|

### VSCodeでのESLintとPrettier
- VSCodeの拡張機能だけで事足りるっちゃ事足りる
    - 大規模なプロジェクトや、複数人で開発する場合は事足りないと思う（前述した「目的」を果たせないため）
- VSCodeの場合、拡張機能をインストールし、各拡張機能の設定や`setting.json`に設定内容を記載するだけで動いてくれる
- 細かいルールの設定がしたい場合、複数人でのプロジェクト場合、またVSCodeという環境に依存させたくない場合などは、プロジェクトに対してのESlintやPrettierのパッケージインストールが必須
    - この場合、`eslint.config.js`や`.prettierrc.json`といった各設定ファイルを設定する必要あり
- 今回は前提の通りバリバリ個人開発（しかも公開予定なし）であり、なおかつ一つの大きな目的が「Reactの学習」であるため、最低限の設定（VSCodeの拡張機能のみ利用）に留めた
- **案件の場合今回の構築手順はあまり役立たない気がするが、初心者がReactを勉強したい！という場合にはこれくらいの設定でちょうどいいと思うよ！！！！** 凝った環境構築をしようとして心折れる初心者がどれだけいることか…~~一つのコマンドで簡単に構築できるようにしてくれ~~