0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめての記事投稿
Qiita Tech Festa20262026年7月13日まで開催中！
@kouta_frontend

[無料]Vite+React+TypeScriptのCI/CDまでの環境構築(Windows)

0
Last updated at Posted at 2026-07-02

目次

はじめに

今回は、Windowでフロントエンド環境構築のフローを紹介する

技術選定

今回の環境構築において、それぞれの項目において以下の技術を選定する

項目 技術
エディタ VS Code
フロントエンド Vite + React + TypeScript
テスト Vitest + React Testing Library
データ Supabase
ホスティング Vercel(Git連携で自動デプロイ)
CI GitHub Actions(lint/test/build)

環境構築フロー

Node.js

  • React+Viteを動かすにはNode.jsが必須となる
  • nvm-windowsのリリースページからnvm-setup.exeをダウンロードする
// インストールできているかの確認
nvm --version

// Node.jsのLTS版(安定版)をインストール
nvm install lts
nvm use lts

// インストールできているかの確認
node -v
npm -v

VS Codeのおすすめ拡張機能

  • ESLint
    • コードの静的解析
  • Prettier - Code formatter
    • コード整形
  • ES7 + React/Redux/React-Native snippets
    • Reactのスニペット補完
  • GitLens
    • Git操作の可視化

Git

  • Git for Windowsからダウンロードする
// インストールできているかの確認
git --version

// 初回はユーザー情報を設定する
git config --global user.name "あなたの名前"
git config --global user.email "あなたのメールアドレス"

Vite+React+TypeScriptプロジェクトの作成

  • 作業用フォルダに移動する
// 今回のプロジェクト名はmy-appとする
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

// 以下を実行し、表示されたURLにブラウザでアクセスし、Reactのロゴが表示されれば成功
npm run dev
  • which linter to use?
    • ESLintを選ぶ
  • Install with npm and start now?
    • noを選ぶ

ESLint/Prettierの導入

npm install -D prettier eslint-config-prettier
  • ルートに.prettierrcを作成する
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5"
}

GitHubレポジトリとの連携

  • GitHub上で新規レポジトリを作成する
git init
git add .
git commit -m "Initial commit: Vite + React + TypeScript"
git remote add origin https://github.com/あなたのユーザー名/リポジトリ名.git
git branch -M main
git push -u origin main

Vitest+React Testing Library

npm install -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom
  • vite.config.tsを以下のように変更する
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.ts',
  },
})
  • src/setupTests.tsを作成する
import '@testing-library/jest-dom';

Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: (query: string) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: () => {},
    removeListener: () => {},
    addEventListener: () => {},
    removeEventListener: () => {},
    dispatchEvent: () => false,
  }),
});
  • tsconfig.app.jsonのcompilerOptionsに以下を追加する
{
  "compilerOptions": {
    "types": ["vitest/globals", "@testing-library/jest-dom"]
  }
}
  • package.josnにテストスクリプトを追加する
{
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "test": "vitest",
    "test:run": "vitest run"
  }
}
  • 動作確認用テストを作成する(src/App.tets.tsx)
import { render, screen } from '@testing-library/react'
import { describe, it, expect } from 'vitest'
import App from './App'

describe('App', () => {
  it('renders without crashing', () => {
    render(<App />)
    expect(screen.getByText(/Get/i)).toBeInTheDocument()
  })
})
  • 以下を実行し、テストがPASSすれば成功
npm run test:run

Supabase

  • https://supabase.com にアクセスしてGitHubアカウントでサインアップする
  • 「New Project」からプロジェクトを作成する(組織名・プロジェクト名・DBパスワード・リージョンを設定、リージョンは Northeast Asia (Tokyo) がおすすめ)
    • Enable Data APIとEnable automatic RLSはON推奨
  • プロジェクト作成後、左メニューの Project Settings → API から、Project URLとanon public keyをコピーしておく
npm install @supabase/supabase-js
  • プロジェクト直下に.env.localを作成する
VITE_SUPABASE_URL=あなたのProject URL
VITE_SUPABASE_ANON_KEY=あなたのanon public key
  • .gitignore に .env.local が含まれているか確認する
    • *.local という行があればOK
  • src/lib/supabase.ts を作成する
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

Husky + lint-staged(コミット前の自動チェック)

npm install -D husky lint-staged
npx husky init
  • .husky/pre-commit に以下を設定する
npx lint-staged
  • package.json に追加する
{
  "lint-staged": {
    "*.{ts,tsx}": ["eslint --fix", "prettier --write"]
  }
}

Vercel

  • https://vercel.com にアクセスし、GitHubアカウントでサインアップする
  • ダッシュボードの「Add New...」→「Project」
  • GitHubリポジトリの一覧が表示されるので、対象のリポジトリを選択して「Import」
  • Environment Variables という項目に以下を追加する
Name Value
VITE_SUPABASE_URL あなたのSupabase Project URL
VITE_SUPABASE_ANON_KEY あなたのSupabase anon key
  • 入力後、「Deploy」ボタンを押し、数十秒〜1分程度でビルド&デプロイが完了し、https://プロジェクト名.vercel.app のようなURLが発行され、ここでサイトが正しく表示されるか確認する
  • プロジェクトルートにvercel.jsonを作成する
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

GitHub Actionsでの品質チェック

  • GitHub Secretsに環境変数を登録する
    • Settings → Secrets and variables → Actions → New repository secret から、VITE_SUPABASE_URLとVITE_SUPABASE_ANON_KEYをそれぞれ登録
  • .github/workflows/ci.yml を作成する
name: CI

on:
  pull_request:
    branches:
      - main
  push:
    branches:
      - main

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Lint
        run: npm run lint

      - name: Run tests
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
        run: npm run test:run

      - name: Build Check
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
        run: npm run build

ブランチ保護ルールの設定

  • GitHubリポジトリの Settings → Branches
  • Branch protection rules → Add branch protection rule
  • Branch name pattern に main と入力する
  • 以下にチェックを入れる
    • Require a pull request before merging
      • Require approvalsは外す
    • Require status checks to pass before merging
      • Require branches to be up to date before mergingは入れる

動作確認

git checkout -b feature/something
# 何か変更する
git add .
git commit -m "feat: 何かの変更"
git push origin feature/something
  • GitHubのブラウザに表示されている、「Compare & pull request」 ボタンをクリックする
  • PR作成を作成して画面の項目が緑になれば、ページ下部の 「Merge pull request」 ボタンが押せるようになる
  • https://プロジェクト名.vercel.app が更新されていたら成功
    • GitHub Actionsでエラーが起きてないかも確認する
  • ローカル環境の後片付け
git checkout main
git pull origin main
git branch -d feature/something

普段の開発フロー

1. git checkout main && git pull origin main    (最新のmainを取得)
2. git checkout -b feature/機能名                (作業ブランチを作成)
3. コードを書く
4. git add . && git commit -m "..."
5. git push origin feature/機能名
6. GitHub上でPull Requestを作成
7. CI(lint/test/build)が自動実行される
8. 問題なければ Merge pull request
9. Vercelが自動で本番デプロイ
10. 作業ブランチを削除、mainに戻って1に戻る

補足(Firebaseについて)

  • 当初はホスティングの技術として、Firebaseを選定していた
  • しかし、GitHub ACtionsでcurrent active versionというエラーが起きてしまう
  • ただ、画面更新自体はできていた

  • 調べたところ、2026年7月2日現在、未解決の問題であるらしい
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?