【CI】フロントエンドのフォーマット/リンター

.github/workflows/client-ci.yml

@@ -0,0 +1,47 @@
+name: Client CI
+
+on:
+  pull_request:
+    paths:
+      - 'client/**'
+      - '.github/workflows/client-ci.yml'
+
+env:
+  NODE_VERSION: '22'
+  PNPM_VERSION: '10.12.4'
+
+defaults:
+  run:
+    working-directory: client
+
+jobs:
+  lint-and-build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: ${{ env.PNPM_VERSION }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'pnpm'
+          cache-dependency-path: client/pnpm-lock.yaml
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run linter
+        run: pnpm lint
+
+      - name: Check formatting
+        run: pnpm format:check
+
+      - name: Build
+        run: pnpm build

client/.prettierignore

@@ -0,0 +1,19 @@
+# Dependencies
+node_modules
+.pnpm-store
+
+# Lock files
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+
+# Build outputs
+.next
+out
+dist
+build
+
+# Cache
+.cache
+.turbo
+.prettier-cache

client/app/room/[roomId]/_components/QuestionLog.tsx

@@ -99,9 +99,12 @@ export const QuestionLog = () => {
                 {q.code}
               </SyntaxHighlighter>
             </pre>
-            <div className="grid grid-cols-2 gap-1 mb-2">
+            <div className="mb-2 grid grid-cols-2 gap-1">
               {q.choices.map((choice, idx) => (
-                <div key={idx} className="text-sm text-gray-400 flex items-center gap-2">
+                <div
+                  key={idx}
+                  className="flex items-center gap-2 text-sm text-gray-400"
+                >
                   <span>{String.fromCharCode(65 + idx)}.</span>
                   <span>{choice}</span>
                 </div>

client/app/room/[roomId]/_components/ingame/QuizGameClient.tsx

@@ -122,7 +122,8 @@ export const QuizGameClient = (props: QuizGameClientProps) => {
         } = message.payload;
 
         // 回答者が自分でない場合は、先に回答されたとして処理
-        if (answeredUserId !== userId && !quizResult && userId) { // gamePhaseの代わりにquizResultで判定
+        if (answeredUserId !== userId && !quizResult && userId) {
+          // gamePhaseの代わりにquizResultで判定
           // 正解の選択肢インデックスを見つける
           const correctIndex =
             currentQuestion?.choices.findIndex(
@@ -198,7 +199,15 @@ export const QuizGameClient = (props: QuizGameClientProps) => {
         }
         break;
     }
-  }, [lastMessage, userId, handleQuizComplete, quizResult, currentQuestion, currentQuestionIndex, score]);
+  }, [
+    lastMessage,
+    userId,
+    handleQuizComplete,
+    quizResult,
+    currentQuestion,
+    currentQuestionIndex,
+    score,
+  ]);
 
   // QuestionLogに移行する関数
   const handleShowQuestionLog = useCallback(() => {

client/package.json

@@ -7,7 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "format": "prettier --write --cache ."
+    "format": "prettier --write --cache .",
+    "format:check": "prettier --check --cache ."
   },
   "dependencies": {
     "next": "15.3.5",