Skip to content

Commit d6abb01

Browse files
yamachuyamachu
authored
Merge pull request #1 from vscodejp/awesome-frontend
フロントエンド: API接続先env化・レスポンシブ・設定ファイル追加・mcp.json追加
2 parents bf501b9 + 307f6a6 commit d6abb01

29 files changed

+5080
-1
lines changed

‎.github/copilot-instructions.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# Copilot Instructions for ai-coding-vscodejp-githubdockyard
2+
3+
## コアコマンド
4+
- **フロントエンド**
5+
- ビルド: `npm run build`（`frontend/` ディレクトリ、Azure Static Web Apps CI/CD で `build` ディレクトリ生成）
6+
- デプロイ: プッシュ時に GitHub Actions で自動デプロイ
7+
- **バックエンド**
8+
- ビルド: `dotnet build --configuration Release`（`Functions/Survey`）
9+
- パブリッシュ: `dotnet publish --configuration Release --output ./publish`
10+
- デプロイ: GitHub Actions で `release.zip` を Azure Functions へ自動デプロイ
11+
- **CI/CD**
12+
- `.github/workflows/azure-static-web-apps-purple-sea-093b8b000.yml`（フロントエンド）
13+
- `.github/workflows/deploy-function.yml`（バックエンド）
14+
15+
## アーキテクチャ概要
16+
- **フロントエンド**: React（`frontend/`）
17+
- **バックエンド**: .NET 9 Azure Functions（`Functions/Survey`）
18+
- **データベース**: Azure Cosmos DB (NoSQL)
19+
- **API**: REST（`/api/surveys`, `/api/surveys/results`）
20+
- **デプロイ**: Azure Static Web Apps（フロント）、Azure Functions（バック）
21+
22+
## スタイル・コーディング規約
23+
- **TypeScript/JavaScript**
24+
- 型安全を重視（型注釈推奨）
25+
- インデントはスペース2 or 4（プロジェクト設定に従う）
26+
- import順序は標準→外部→内部
27+
- 命名: キャメルケース（変数/関数）、パスカルケース（型/クラス）
28+
- エラー処理は明示的に
29+
- **C# (.NET)**
30+
- 型明示、PascalCase命名
31+
- 非同期処理は `async`/`await`
32+
- 例外処理は try-catch で明示
33+
- **共通**
34+
- コメントは日本語可
35+
- バリデーション・エラーハンドリングはAPI仕様に準拠
36+
37+
## 重要な仕様・ルール（README要約）
38+
- **アンケートAPI**
39+
- POST `/surveys`: 回答登録
40+
- GET `/surveys/results`: 集計取得
41+
- 必須: `communityAffiliation`（配列, 空配列可）, `jobRole`（配列, 1つ以上）, `eventRating`（1-5）
42+
- オプション: `jobRoleOther`（"その他"時必須, 100字以内）, `feedback`（1000字以内）
43+
- レスポンス: `success`, `message`/`error`, `surveyId`/`code`
44+
- ステータス: 200, 201, 400, 422, 500
45+
- **データモデル**
46+
- `Survey`型（README参照）
47+
48+
## その他
49+
- 追加のエージェントルールや独自Copilotファイルは現時点で未検出
50+
- 詳細はREADME.md参照

‎.github/instructions/frontend.instructions.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
applyTo: 'frontend/**'
3+
---
4+
5+
アンケートアプリ フロントエンド実装指針
6+
1. 画面・機能要件
7+
トップページ
8+
9+
アンケート回答フォーム
10+
必須: communityAffiliation（配列, 空配列可）, jobRole（配列, 1つ以上）, eventRating（1-5）
11+
オプション: jobRoleOther（"その他"時必須, 100字以内）, feedback（1000字以内）
12+
入力バリデーション（zod＋react-hook-form）
13+
送信時にAPI（POST /api/surveys）へリクエスト
14+
送信後は完了画面を表示
15+
集計結果ページ
16+
17+
API（GET /api/surveys/results）から集計データ取得
18+
回答集計をグラフやリストで表示
19+
共通
20+
21+
APIエラーやバリデーションエラーの明示的な表示
22+
2. 技術・設計方針
23+
UI: React + TypeScript + MUI（@mui/material）
24+
フォーム: react-hook-form + zod
25+
API通信・状態管理: @tanstack/react-query
26+
ルーティング: 必要に応じてreact-router-dom
27+
型定義: Survey型をAPI仕様に準拠して定義
28+
Lint/Format: ESLint, Prettier
29+
3. ディレクトリ構成例
30+
4. 実装手順
31+
Survey型・APIクライアントの型定義
32+
SurveyFormコンポーネント作成（バリデーション含む）
33+
API連携（送信・取得）
34+
集計結果表示コンポーネント作成
35+
ルーティング・UI調整
36+
エラー・ローディング対応
37+
ESLint/Prettier整備

‎.github/workflows/azure-static-web-apps-purple-sea-093b8b000.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ jobs:
3838
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
3939
app_location: "/frontend" # App source code path
4040
api_location: "" # Api source code path - optional
41-
output_location: "build" # Built app content directory - optional
41+
output_location: "dist" # Built app content directory - optional
4242
###### End of Repository/Build Configurations ######
4343

4444
close_pull_request_job:

‎.vscode/mcp.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"inputs": [],
3+
"servers": {
4+
"github-remote-mcp": {
5+
"url": "https://api.githubcopilot.com/mcp/",
6+
"type": "http"
7+
}
8+
}
9+
}

‎frontend/.env.example‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# APIのベースURL（例: 本番用・開発用で切り替え）
2+
VITE_API_BASE_URL=http://localhost:3000/api

‎frontend/.gitignore‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# 環境変数ファイル（安全のためgit管理外に）
16+
.env
17+
.env.*
18+
!.env.example
19+
20+
# Editor directories and files
21+
.vscode/*
22+
!.vscode/extensions.json
23+
.idea
24+
.DS_Store
25+
*.suo
26+
*.ntvs*
27+
*.njsproj
28+
*.sln
29+
*.sw?

‎frontend/.gitkeep‎

Whitespace-only changes.

‎frontend/README.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# React + TypeScript + Vite
2+
3+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4+
5+
Currently, two official plugins are available:
6+
7+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
8+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9+
10+
## Expanding the ESLint configuration
11+
12+
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
13+
14+
```js
15+
export default tseslint.config([
16+
globalIgnores(['dist']),
17+
{
18+
files: ['**/*.{ts,tsx}'],
19+
extends: [
20+
// Other configs...
21+
22+
// Remove tseslint.configs.recommended and replace with this
23+
...tseslint.configs.recommendedTypeChecked,
24+
// Alternatively, use this for stricter rules
25+
...tseslint.configs.strictTypeChecked,
26+
// Optionally, add this for stylistic rules
27+
...tseslint.configs.stylisticTypeChecked,
28+
29+
// Other configs...
30+
],
31+
languageOptions: {
32+
parserOptions: {
33+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
34+
tsconfigRootDir: import.meta.dirname,
35+
},
36+
// other options...
37+
},
38+
},
39+
])
40+
```
41+
42+
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
43+
44+
```js
45+
// eslint.config.js
46+
import reactX from 'eslint-plugin-react-x'
47+
import reactDom from 'eslint-plugin-react-dom'
48+
49+
export default tseslint.config([
50+
globalIgnores(['dist']),
51+
{
52+
files: ['**/*.{ts,tsx}'],
53+
extends: [
54+
// Other configs...
55+
// Enable lint rules for React
56+
reactX.configs['recommended-typescript'],
57+
// Enable lint rules for React DOM
58+
reactDom.configs.recommended,
59+
],
60+
languageOptions: {
61+
parserOptions: {
62+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
63+
tsconfigRootDir: import.meta.dirname,
64+
},
65+
// other options...
66+
},
67+
},
68+
])
69+
```

‎frontend/eslint.config.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
import { globalIgnores } from 'eslint/config'
7+
8+
export default tseslint.config([
9+
globalIgnores(['dist']),
10+
{
11+
files: ['**/*.{ts,tsx}'],
12+
extends: [
13+
js.configs.recommended,
14+
tseslint.configs.recommended,
15+
reactHooks.configs['recommended-latest'],
16+
reactRefresh.configs.vite,
17+
],
18+
languageOptions: {
19+
ecmaVersion: 2020,
20+
globals: globals.browser,
21+
},
22+
},
23+
])

‎frontend/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)