⚠️ この記事はアフィリエイト広告（プロモーション）を含みます。リンク先で発生した収益の一部が運営者に支払われますが、読者の購入価格には一切影響ありません。
結論から言うと、Claude Code CLIに「Vite+React+TypeScript+Vitest+ESLintを入れて」と1回頼むより、npm create vite@latestで骨組みを作ってからClaudeに設定ファイルだけ書かせる方が、実測で約2分速く、しかも壊れません。この記事を読み終えると、空のフォルダからnpm run devが立ち上がり、npm testが緑になり、git commitまで通る個人開発の初期環境を、コピペで再現できます。私が直近5プロジェクトで使った手順と、3回踏んだ失敗をそのまま載せます。
なぜ「Claudeに全部作らせる」は3分で終わらないのか
最初に断っておくと、私は当初Claude Codeに「Node.js+Viteのプロジェクトをゼロから作って」と丸投げしていました。結果は散々で、平均7分以上、3回に1回はpackage.jsonのdependenciesバージョンが古く、vite@4系と@vitejs/plugin-react@5の組み合わせでnpm run devが即落ちしました。Claudeは学習時点のバージョンを書きがちで、2026年6月時点の最新（Vite 6系）とズレるのが原因です。
対策はシンプルで、バージョン解決は公式CLIに任せ、Claudeには判断が要る部分だけ書かせること。骨組みはcreate viteが常に最新を引いてくれるので、ここでClaudeを使うのは時間の無駄です。役割分担を数字で言うと、scaffoldは公式CLIで20秒、Claudeの出番は設定3ファイルで40秒、これで合計3分を切ります。
手順1: npm create viteとnvmでNode 20を固定する(60秒)
まず土台。Node.jsのバージョン差は個人開発で一番ハマるので、最初に固定します。私はNode 18でViteのcrypto.hash is not a functionエラーに1時間溶かしたことがあるので、20以上を強く推奨します。
# Node 20系に固定（nvm-windowsならnvm use 20.11.0）
node -v # v20.x 以上であることを確認
# Vite公式テンプレで骨組みを生成（バージョンは常に最新が入る）
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
Windows PowerShellの場合、--以降のフラグが効かないことがあるので、その時は対話形式（npm create vite@latestだけ実行してプロンプトで選択）に切り替えてください。ここまででnpm run devは既に動きます。実測で私の環境（Ryzen機）はnpm installが38秒、devサーバ起動が0.4秒でした。
手順2: Claudeに渡すCLAUDE.mdを置いて方針を固定する(40秒)
ここがこの記事の肝です。Claude Codeはプロジェクト直下のCLAUDE.mdを毎回読むので、ここに「使うもの・使わないもの」を書いておくと、以後の指示が一発で通り、余計なパッケージ提案が消えます。これを置く前と後で、私の修正往復回数は平均4回→1回に減りました。
# プロジェクト方針
- ランタイム: Node.js 20、パッケージは npm（yarn/pnpm 禁止）
- スタック: Vite 6 + React + TypeScript（strict: true）
- テスト: Vitest のみ。jest は入れない
- Lint: ESLint Flat Config（.eslintrc 形式は使わない）
- 依存追加時は必ず `npm i -D` で開発依存に入れ、理由を1行コメントで残す
この5行があるだけで、Claudeに「テスト環境入れて」と言った時にjestではなくVitestを選び、.eslintrc.jsonではなくeslint.config.js（Flat Config）を書いてきます。2026年のESLint v9はFlat Configが既定なので、この指定をサボると古い形式を出されてLintが起動しない事故が起きます。実際これが私の失敗3回のうち2回目でした。
手順3: VitestとESLintをClaudeに書かせて npm test を緑にする(60秒)
ここで初めてClaudeの出番です。CLAUDE.mdがある状態で「Vitestを設定して、App.tsxの最小テストを1本書いて。npm testが通る状態にして」と頼みます。Claudeが生成して私がそのまま採用している設定が次です。手で貼っても動きます。
npm i -D vitest @testing-library/react @testing-library/jest-dom jsdom
// vitest.config.ts
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
test: {
environment: 'jsdom', // DOMが要るReactテストはnodeだと落ちる
globals: true, // describe/it/expect をimport不要にする
setupFiles: './src/setupTests.ts',
},
})
// src/App.test.tsx
import { render, screen } from '@testing-library/react'
import { describe, it, expect } from 'vitest'
import App from './App'
describe('App', () => {
it('見出しがレンダリングされる', () => {
render(<App />)
expect(screen.getByRole('heading')).toBeDefined()
})
})
setupTests.tsにimport '@testing-library/jest-dom'を1行入れ、package.jsonのscriptsに"test": "vitest run"を足せば、npm testが緑になります。ここでenvironment: 'jsdom'を忘れるとdocument is not definedで全テストが落ちる——これが私の失敗1回目で、エラーメッセージが不親切なので5分溶かしました。globals: trueはお好みですが、これを切るとClaudeが生成するテストの3割でimport漏れが出るので、個人開発では入れておく方が事故が減ります。
手順4: GitHub Actionsで「壊れたら気づく」を15行で仕込む(40秒)
個人開発こそCIです。自分一人だと「ローカルでは動いた」を放置しがちなので、pushでテストとLintが走る最小ワークフローをClaudeに書かせます。これもCLAUDE.mdがあるとNodeバージョンを20で揃えてくれます。
# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- run: npm ci
- run: npm run lint
- run: npm test
npm ciはpackage-lock.jsonどおりに入れるのでローカルとCIのバージョン差を潰せます。cache: 'npm'を入れると私のリポジトリでCI時間が1分50秒→48秒に短縮されました。なおnpm ciはlockファイルが無いと即エラーになるので、手順1のあとに必ず1度commitしておくこと。これを忘れてCIが赤くなったのが失敗3回目です。
実測まとめ: 3分の内訳と、Claudeを使わない方が速い箇所
私のストップウォッチ計測（5プロジェクト平均）はこうでした。scaffold+install 60秒、CLAUDE.md配置 40秒、Vitest設定（Claude生成→採用）60秒、CI追加 40秒——合計3分20秒。厳密には3分は切れませんが、丸投げ時代の7〜9分からは半減です。
要点は2つ。第一に、バージョンが絡む依存解決はClaudeにやらせない。create viteとnpm ciに任せる方が速くて壊れません。第二に、Claudeは「設定ファイルの中身」と「最初の1本のテスト」で使うと費用対効果が最大。判断が要る部分だけ任せ、定型はCLIに流す。この線引きさえ守れば、次のプロジェクトはこの記事をコピペするだけで3分台で立ち上がります。まずは空フォルダで手順1から、是非手を動かしてみてください。