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

企画概要

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

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

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

• 決起編
• フロント環境構築編 ★本記事
• フロントエンド編
• バックエンド編
• コンポーネント作成編
• リファクタリング編

環境構築編

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

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

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

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

①npm（パッケージ管理ツール）の導入

npm install -g npm

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

//package.jsonの作成
npm init

②viteの導入

npm create vite@latest

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

以下は選択の例です。

> 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 で開発用の環境でアプリが立ち上がります。

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の導入から

npm init @eslint/config@latest

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

> 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の導入

npm install --save-dev --save-exact prettier

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

VSCode自動保存

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

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

参考