フロントエンド: API接続先env化・レスポンシブ・設定ファイル追加・mcp.json追加

.github/copilot-instructions.md

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

.github/instructions/frontend.instructions.md

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

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

@@ -38,7 +38,7 @@ jobs:
           # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
           app_location: "/frontend" # App source code path
           api_location: "" # Api source code path - optional
-          output_location: "build" # Built app content directory - optional
+          output_location: "dist" # Built app content directory - optional
           ###### End of Repository/Build Configurations ######
 
   close_pull_request_job:

.vscode/mcp.json

@@ -0,0 +1,9 @@
+{
+	"inputs": [],
+	"servers": {
+		"github-remote-mcp": {
+			"url": "https://api.githubcopilot.com/mcp/",
+			"type": "http"
+		}
+	}
+}

frontend/.env.example

@@ -0,0 +1,2 @@
+# APIのベースURL（例: 本番用・開発用で切り替え）
+VITE_API_BASE_URL=http://localhost:3000/api

frontend/.gitignore

@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# 環境変数ファイル（安全のためgit管理外に）
+.env
+.env.*
+!.env.example
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,69 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@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
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      ...tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      ...tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      ...tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+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:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

frontend/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { globalIgnores } from 'eslint/config'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>