React + TypeScript + Cloudflare Workers

React、TypeScript、Cloudflare Workersを使用したWebアプリケーション開発のためのテンプレートプロジェクトです。

概要

このテンプレートは、モダンなフロントエンド開発環境とCloudflare Workersによるエッジコンピューティング環境を統合した開発基盤を提供します。DevContainerによる完全に分離された開発環境により、環境構築の手間を最小限に抑えます。

技術スタック

コア

• Bun - 高速なJavaScriptランタイム
• TypeScript - 型安全なJavaScript
• React - UIライブラリ
• Vite - 高速なビルドツール

フロントエンド

• Tanstack Query - データフェッチング・状態管理
• Tanstack Router - 型安全なルーティング
• Tailwind CSS - ユーティリティファーストCSS
• Shadcn UI - 再利用可能なUIコンポーネント
• IntLayer - 国際化対応

バックエンド・API

• Cloudflare Workers - エッジコンピューティング
• Zodios - 型安全なAPIクライアント
• Zod - スキーマバリデーション

開発ツール

• DevContainer - コンテナベース開発環境
• Biome - 高速なリンター・フォーマッター
• commitlint - コミットメッセージ規約
• husky - Gitフック管理
• lint-staged - ステージングファイルのリント
• act - ローカルでのGitHub Actions実行
• PR Agent - AI自動コードレビュー

環境構築

前提条件

• Docker Desktop
• Visual Studio Code
• Dev Containers Extension

セットアップ

git clone <repository-url>
cd <repository-name>

VS Codeでプロジェクトを開き、Cmd/Ctrl + Shift + Pでコマンドパレットを開いてDev Containers: Reopen in Containerを実行します。

開発

ローカル開発サーバー起動

bun dev

ビルド

bun run build

テスト実行

bun test

リント・フォーマット

# リント実行
bun run lint

# フォーマット実行
bun run format

プロジェクト構成

src/
├── components/        # Reactコンポーネント
│   ├── ui/           # Shadcn UIコンポーネント（編集不可）
│   └── **/*.tsx      # カスタムコンポーネント
├── schemas/          # Zodスキーマ定義
│   └── **/*.dto.ts   # DTOスキーマ
├── utils/            # ユーティリティ関数
│   └── client.ts     # Zodios APIクライアント
└── __tests__/        # テストコード
    └── **/*.test.ts  # テストファイル

GitHub設定

PR Agent

PR Agentを使用する場合、リポジトリのSecretsに以下を設定してください。

• OPENAI_KEY: OpenAI APIキー

設定は.pr_agent.tomlで管理されています。デフォルトでは日本語でコメントが生成されます。

その他の機能

• マージ済みブランチの自動削除
• GPG署名付きコミット対応
• push.autoSetupRemoteによるブランチ自動作成

注意事項

• src/components/ui/**/*.tsxのShadcn UIコンポーネントは直接編集せず、classNameでスタイルをカスタマイズしてください
• モジュールインポートには@エイリアスを使用できます
• コミットメッセージはConventional Commits規約に従ってください