Reactで神経衰弱アプリ作ってみた（Front環境構築編）


## 企画概要

今アツいReactを使って、みんなでアプリを作ってみよう！という思いから始まった神経衰弱アプリ作成企画…

全6回のうち、今回は第2回の**環境構築**編です！



関連記事は以下です
興味のある方は是非シリーズで読んでみてください

- [決起編](https://qiita.com/ntc-suzuki/items/713ee53825e833ab2a19)
- フロント環境構築編 ★本記事
- フロントエンド編
- [バックエンド編](https://qiita.com/ntc-suzuki/items/34eb7ff436326b2c88b7)
- [コンポーネント作成編](https://qiita.com/ntc-arai/items/d2a1bb152b5a0859ac9e)
- [リファクタリング編](https://qiita.com/ntc-saito/private/6af683fd7ee936c23ac2)

## 環境構築編

リポジトリの構成はざっくり決めてあるけどサーバ構築されてない！！！（アプリの実行環境が無い！）
ということで急遽 **React + Typescript + vite** の環境構築しました。

既にDevelopブランチに最小構成は用意されていましたが、地道に環境構築する時間が無かったので便利ツールをひたすら利用……

打ったコマンドは以下です。

:::note warn
Node.jsはインストール済みの想定です。
:::


#### ①npm（パッケージ管理ツール）の導入
```terminal
npm install -g npm

//インストール出来ているかの確認
npm -v

//package.jsonの作成
npm init
```

#### ②viteの導入
```terminal
npm create vite@latest
```

上記のコマンドを打つと構成について質問されます。

以下は選択の例です。
```terminal
> npm create vite@latest
Need to install the following packages:
create-vite@6.1.0
Ok to proceed? (y) y


> test@1.0.0 npx
> create-vite

√ Project name: ... vite-project
√ Target directory "vite-project" is not empty. Please choose how to proceed: » Remove existing files and continue
√ Select a framework: » React
√ Select a variant: » TypeScript + SWC

Scaffolding project in D:\Users\arai.moe\Documents\test\vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev

npm notice
npm notice New major version of npm available! 10.8.2 -> 11.0.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.0.0
npm notice To update run: npm install -g npm@11.0.0
npm notice
```

ポイントは
- frameworkは**React**を選択
- **Typescript + SWC**を選択したほうが簡単（お好みで）

これであっという間に自分で入力したプロジェクト名のフォルダが新規作成されるので、
何も考えずに最小構成の React + Typescript + vite 環境が出来上がります。



package.jsonは以下の通りに設定されているので、scriptsの欄を見れば設定されているコマンドが見られます。
初期設定では npm run dev で開発用の環境でアプリが立ち上がります。
```json:package.json
{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^9.9.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.0.1",
    "vite": "^5.4.1"
  }
}
```
このあとはチームメンバと決めたフォルダ構成に沿って地道にファイルの中身を移動すれば完成です。



## 環境構築おまけ

開発をしているときに文法チェックやコードフォーマットを自動でやってほしい人は**ESLint**と**Prettier**を導入しましょう。
この組み合わせな理由は何回か使ったことがあって安心だから、という程度です。
好みのフォーマッターがあればそちらを使っていただいて構いません。

#### Eslint

まずはESLintの導入から
```terminal
npm init @eslint/config@latest
```

こんな感じで選択。これで文法チェックをしてくれるようになります。

```terminal
> test@1.0.0 npx
> create-config

@eslint/create-config: v1.3.1

√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · typescript
√ Where does your code run? · browser
The config that you've selected requires the following dependencies:

eslint, globals, @eslint/js, typescript-eslint, eslint-plugin-react
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · npm
```

#### Prettier

次にPrettierの導入

```terminal
npm install --save-dev --save-exact prettier
```

こちらは特に選択肢もなく、これだけでフォーマッターが使えるようになります。
ただし、このままでは整形してほしい時には（Windowsの場合）**Shift + Alt + F**を押さないといけないので、
ファイルを保存した際に自動で整形されるようにする設定を行います。

##### VSCode自動保存

手順としては簡単で、VSCodeの設定を開き、「format on save」で検索をかけます。出てきた同名の項目にチェックを入れましょう。
次に、「Default Formatter」で検索をかけて「Prettier – Code formatter」を選択します。

これでファイル保存と同時にフォーマッターが動くようになりました。



## 参考

https://qiita.com/mk185/items/7ad004bf202f400daea1 

https://qiita.com/teradonburi/items/fcdd900adb069811bfda 

https://qiita.com/Yasushi-Mo/items/e8e90a6690d731dc0a2d