React開発のセットアップ
2025.06.26こんにちは。新規事業統括部のこーすけです。
Reactに入門したので、ViteからReactのSPAを作成するときの作業内容を備忘録としてまとめておきます。
この記事ではプロジェクトの新規作成から、LinterとFormatterの設定までを行います。
開発環境
OS：Ubuntu 24.04.2 LTS
エディタ：VSCode
作業内容
プロジェクトの新規作成
まずは、以下のコマンドを実行して新規プロジェクトを作成します。
npm create vite@latest my-react-app
これを実行すると対話形式で、「Select a framework」と「Select a variant」を聞かれます。今のトレンドで勉強したかったので、それぞれ「React」、「TypeScript」を選択しました。
実行結果はこちらになります。
次に実行すべきコマンドが案内されていますね。まずは、なにも修正しないままでプロジェクトを生成できたか動作確認をします。
cd my-react-app
npm install
npm run dev
を実行するだけで、開発サーバの起動までできてしまいます。ここまで5分。
めちゃくちゃ見たことあるこの画面
LinterとFormatterの準備
LinterにはEslintを使います。
最近はEslintとBiomeを採用することが多いと思いますが、現状はESlintが多いためこちらを採用しました。
以下のコマンドを実行。
npm init @eslint/config@latest
各種オプションは上記のように設定しました。
package.jsonのscriptにコマンドが登録されていたので、実行してみます。
npm run lint
すると、こんなエラーが大量に。
これはReact 17以降からReactのインポートが不要になったことに起因するエラーです。
my-react-app/eslint.config.jsに、以下のルールを追加して、この項目を無効化することで解決できました。
{
rules: {
"react/react-in-jsx-scope": "off",
},
},
続いて、FormatterにはPrettirerを使います。
以下のコマンドを実行してインストールしました。
npm install -D --save-exact prettier
最後にVSCodeの拡張機能でも「ESlint」と「Prettier - Code formatter」をインストール。
さらにsettingsからいくつか変更を行いました。
以下はsettings.jsonの抜粋です。
"editor.formatOnSave": true,
"files.autoSave": "onFocusChange",
"editor.defaultFormatter": "esbenp.prettier-vscode",
最後に、package.jsonにprettierを実行するコマンドを登録し、各種コマンドを実行できることを確認。
package.jsonは以下の通りになっています。
{
"name": "my-react-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview",
"format": "prettier --write ."
},
"dependencies": {
"react": "^19.1.0",
"react-dom": "^19.1.0"
},
"devDependencies": {
"@eslint/js": "^9.29.0",
"@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6",
"@vitejs/plugin-react": "^4.5.2",
"eslint": "^9.29.0",
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20",
"globals": "^16.2.0",
"prettier": "3.6.1",
"typescript": "~5.8.3",
"typescript-eslint": "^8.35.0",
"vite": "^7.0.0"
}
}
あとがき
開発環境が整ったので、中身をいじっていきたい！
