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
• Prettier - Code formatter
• ES7 React/Redux/GraphQL/React-Native 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の出番

プロジェクト作成

• 以下を実行

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ディレクトリ（ディレクトリ名は任意）を作成し、そこに型定義ファイルを配置

types/eslint-plugin-react-hooks.d.ts

declare module "eslint-plugin-react-hooks"; 

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

できた～～～～～～

補足

• （前提という名の言い訳だが）フロントエンド開発には全く明るくなく、今回環境構築するだけでも挫折しそうだった。そんな中で得た知識を以下に共有

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を勉強したい！という場合にはこれくらいの設定でちょうどいいと思うよ！！！！ 凝った環境構築をしようとして心折れる初心者がどれだけいることか…一つのコマンドで簡単に構築できるようにしてくれ