【Claude Code】Sonnet 4.5の登場でさらに強化されたAIエージェントで開発効率爆あがり！

npm install -g @anthropic-ai/claude-code

mkdir Claudecode-my-project

cd Claudecode-my-project

npm init -y

Claude Codeを実行します。

claude

弊社で取り扱っている健康関連器具を新たに販売します。30-40代女性、富裕層がターゲットなのでそれに合致するLPを作成してください。

cat > playwright-mcp-config.json << 'EOF'

{

  "browser": {

    "browserName": "chrome",

    "isolated": true,

    "userDataDir": "/tmp/playwright-user-data",

    "launchOptions": {

      "channel": "chromium",

      "headless": true,

      "args": ["--no-sandbox", "--disable-dev-shm-usage"]

    },

    "contextOptions": {

      "viewport": {

        "width": 1920,

        "height": 1080

      },

      "locale": "ja-JP",

      "timezoneId": "Asia/Tokyo"

    }

  },

  "outputDir": "/tmp/playwright-output"

}

EOF

claude mcp add playwright npx @playwright/mcp@latest

claude mcp list

playwright: npx @playwright/mcp@latest

## Playwright MCP使用ルール

### 絶対的な禁止事項

1. **いかなる形式のコード実行も禁止**

   - Python、JavaScript、curlなど

   - MCPツールを調査するためのsubprocessやコマンド実行

2. **利用可能なのはMCPツールのみ**

   - playwright:browser_* 系のみ使用可能

3. **エラー時は即座に報告**

   - 回避策を探さない

   - 代替手段を実行しない

   - エラーメッセージをそのまま報告

### 実装後の必須作業

ランディングページのスクリーンショットを保存しました。デザインと表示を確

  認した結果、以下の良い点と改善提案をお伝えします：

  良い点：

  - ヒーロー部分：メインメッセージ「理想の自分を手に入れる」が明確で印象的

  - CTAボタン：「詳細を見る」のボタンが目立つ金色で効果的

  - 特徴説明：3つの特徴（プレミアム品質、時短ケア、プライベート空間）が絵文

  字付きで分かりやすい

  改善提案：

  1. ページ下部が見切れている：「あなたが得られるもの」セクション以降が表示

  されていない

  2. 視覚的要素の不足：商品画像エリアに実際の画像がない

  3. CTAセクション：最下部のお問い合わせ部分の視認性

  スクリーンショットは/Users//health-lp-full-page.pngに保存され

  ています。

name: Claude Next.js Auto Test & Fix

on:

  pull_request:

    types: [opened, synchronize, ready_for_review]

  issue_comment:

    types: [created]

permissions:

  contents: read

  pull-requests: write

  issues: write

jobs:

  auto-test:

    if: |

      (github.event_name == 'pull_request') ||

      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude'))

    runs-on: ubuntu-latest

    steps:

      - name: Checkout code

        uses: actions/checkout@v4

        with:

          ref: ${{ github.event.pull_request.head.sha || github.sha }}

          fetch-depth: 0

      - name: Setup Node.js

        uses: actions/setup-node@v4

        with:

          node-version: '18'

          cache: 'npm'

      - name: Install dependencies

        run: npm ci

      - name: Run TypeScript type checking

        id: typecheck

        run: |

          echo "🔬 TypeScript型チェック実行中..."

          if npm run type-check 2>&1 | tee typecheck-output.log; then

            echo "✅ 型チェック成功"

            echo "typecheck_status=passed" >> $GITHUB_OUTPUT

          else

            echo "❌ 型チェック失敗"

            echo "typecheck_status=failed" >> $GITHUB_OUTPUT

          fi

        continue-on-error: true

      - name: Run ESLint

        id: lint

        run: |

          echo "🔍 ESLint実行中..."

          if npm run lint 2>&1 | tee lint-output.log; then

            echo "✅ リンティング成功"

            echo "lint_status=passed" >> $GITHUB_OUTPUT

          else

            echo "❌ リンティング失敗"

            echo "lint_status=failed" >> $GITHUB_OUTPUT

          fi

        continue-on-error: true

      - name: Run tests

        id: test

        run: |

          echo "🧪 テスト実行中..."

          if npm test -- --passWithNoTests --watchAll=false 2>&1 | tee test-output.log; then

            echo "✅ テスト成功"

            echo "test_status=passed" >> $GITHUB_OUTPUT

          else

            echo "❌ テスト失敗"

            echo "test_status=failed" >> $GITHUB_OUTPUT

          fi

        continue-on-error: true

      - name: Build application

        id: build

        run: |

          echo "🏗 Next.jsビルド実行中..."

          if npm run build 2>&1 | tee build-output.log; then

            echo "✅ ビルド成功"

            echo "build_status=passed" >> $GITHUB_OUTPUT

          else

            echo "❌ ビルド失敗"

            echo "build_status=failed" >> $GITHUB_OUTPUT

          fi

        continue-on-error: true

      - name: Collect detailed error information

        if: |

          steps.typecheck.outputs.typecheck_status == 'failed' ||

          steps.lint.outputs.lint_status == 'failed' ||

          steps.test.outputs.test_status == 'failed' ||

          steps.build.outputs.build_status == 'failed'

        run: |

          echo "## 🔍 詳細エラー情報" > error-details.md

          echo "" >> error-details.md

          if [ "${{ steps.typecheck.outputs.typecheck_status }}" = "failed" ]; then

            echo "### ❌ TypeScript型チェックエラー" >> error-details.md

            echo "\`\`\`" >> error-details.md

            cat typecheck-output.log 2>/dev/null || echo "型チェックエラーログの取得に失敗" >> error-details.md

            echo "\`\`\`" >> error-details.md

            echo "" >> error-details.md

          fi

          if [ "${{ steps.lint.outputs.lint_status }}" = "failed" ]; then

            echo "### ❌ ESLintエラー" >> error-details.md

            echo "\`\`\`" >> error-details.md

            cat lint-output.log 2>/dev/null || echo "リントエラーログの取得に失敗" >> error-details.md

            echo "\`\`\`" >> error-details.md

            echo "" >> error-details.md

          fi

          if [ "${{ steps.test.outputs.test_status }}" = "failed" ]; then

            echo "### ❌ テストエラー" >> error-details.md

            echo "\`\`\`" >> error-details.md

            cat test-output.log 2>/dev/null || echo "テストエラーログの取得に失敗" >> error-details.md

            echo "\`\`\`" >> error-details.md

            echo "" >> error-details.md

          fi

          if [ "${{ steps.build.outputs.build_status }}" = "failed" ]; then

            echo "### ❌ Next.jsビルドエラー" >> error-details.md

            echo "\`\`\`" >> error-details.md

            cat build-output.log 2>/dev/null || echo "ビルドエラーログの取得に失敗" >> error-details.md

            echo "\`\`\`" >> error-details.md

            echo "" >> error-details.md

          fi

          echo "## 📋 修正が必要な項目" >> error-details.md

          [ "${{ steps.typecheck.outputs.typecheck_status }}" = "failed" ] && echo "- [ ] TypeScript型エラーの修正" >> error-details.md

          [ "${{ steps.lint.outputs.lint_status }}" = "failed" ] && echo "- [ ] ESLintエラーの修正" >> error-details.md

          [ "${{ steps.test.outputs.test_status }}" = "failed" ] && echo "- [ ] テスト失敗の修正" >> error-details.md

          [ "${{ steps.build.outputs.build_status }}" = "failed" ] && echo "- [ ] ビルドエラーの修正" >> error-details.md

      - name: Comment success results

        if: |

          github.event_name == 'pull_request' &&

          steps.typecheck.outputs.typecheck_status == 'passed' &&

          steps.lint.outputs.lint_status == 'passed' &&

          steps.test.outputs.test_status == 'passed' &&

          steps.build.outputs.build_status == 'passed'

        uses: actions/github-script@v7

        with:

          script: |

            const report = `

            # 🤖 Claude Next.js自動テスト結果

            ## 📋 結果サマリー

            - **TypeScript型チェック**: ✅ 成功

            - **ESLint**: ✅ 成功

            - **テスト**: ✅ 成功  

            - **Next.jsビルド**: ✅ 成功

            ## 🎯 総合判定

            ✅ **全テスト通過 - レビュー可能**

            すべての自動チェックが正常に完了しました。このPRは人間によるレビューの準備ができています。

            ---

            💡 [詳細ログを確認](${context.payload.repository.html_url}/actions/runs/${context.runId})

            `;

            github.rest.issues.createComment({

              issue_number: context.issue.number,

              owner: context.repo.owner,

              repo: context.repo.repo,

              body: report

            });

      - name: Auto-request fix from Claude on failure

        if: |

          github.event_name == 'pull_request' && (

            steps.typecheck.outputs.typecheck_status == 'failed' ||

            steps.lint.outputs.lint_status == 'failed' ||

            steps.test.outputs.test_status == 'failed' ||

            steps.build.outputs.build_status == 'failed'

          )

        uses: actions/github-script@v7

        with:

          script: |

            const fs = require('fs');

            let errorDetails = '';

            try {

              errorDetails = fs.readFileSync('error-details.md', 'utf8');

            } catch (e) {

              errorDetails = 'エラー詳細の取得に失敗しました';

            }

            const typecheckStatus = '${{ steps.typecheck.outputs.typecheck_status }}';

            const lintStatus = '${{ steps.lint.outputs.lint_status }}';

            const testStatus = '${{ steps.test.outputs.test_status }}';

            const buildStatus = '${{ steps.build.outputs.build_status }}';

            const failureReport = `

            # 🚨 Next.js自動テスト失敗 - 修正が必要です

            @claude Next.js自動テストで問題が検出されました。以下のエラーを確認して修正してください：

            ## 📊 テスト結果

            - **TypeScript型チェック**: ${typecheckStatus === 'passed' ? '✅ 成功' : '❌ 失敗'}

            - **ESLint**: ${lintStatus === 'passed' ? '✅ 成功' : '❌ 失敗'}

            - **テスト**: ${testStatus === 'passed' ? '✅ 成功' : '❌ 失敗'}

            - **Next.jsビルド**: ${buildStatus === 'passed' ? '✅ 成功' : '❌ 失敗'}

            ${errorDetails}

            ## 🔧 対応をお願いします

            上記のエラーを解析して、適切な修正を行ってください。修正後は自動的に再テストが実行されます。

            ## 📝 Next.js/React修正のポイント

            - TypeScriptエラー: 型定義の修正、interfaceの追加

            - ESLintエラー: コーディング規約の修正、未使用変数の削除

            - テストエラー: テストケースまたは実装の修正

            - ビルドエラー: 依存関係、設定ファイル、構文エラーの確認

            ---

            💡 [詳細ログを確認](${context.payload.repository.html_url}/actions/runs/${context.runId})

            `;

            await github.rest.issues.createComment({

              issue_number: context.issue.number,

              owner: context.repo.owner,

              repo: context.repo.repo,

              body: failureReport

            });

            try {

              await github.rest.issues.addLabels({

                owner: context.repo.owner,

                repo: context.repo.repo,

                issue_number: context.issue.number,

                labels: ['🚨 nextjs-test-failed', '🔧 needs-claude-fix']

              });

            } catch (e) {

              console.log('ラベル追加に失敗');

            }

      - name: Set success labels

        if: |

          github.event_name == 'pull_request' &&

          steps.typecheck.outputs.typecheck_status == 'passed' &&

          steps.lint.outputs.lint_status == 'passed' &&

          steps.test.outputs.test_status == 'passed' &&

          steps.build.outputs.build_status == 'passed'

        uses: actions/github-script@v7

        with:

          script: |

            try {

              await github.rest.issues.addLabels({

                owner: context.repo.owner,

                repo: context.repo.repo,

                issue_number: context.issue.number,

                labels: ['✅ nextjs-tests-passed', '👀 ready-for-review']

              });

              const labelsToRemove = ['🚨 nextjs-test-failed', '🔧 needs-claude-fix'];

              for (const label of labelsToRemove) {

                try {

                  await github.rest.issues.removeLabel({

                    owner: context.repo.owner,

                    repo: context.repo.repo,

                    issue_number: context.issue.number,

                    name: label

                  });

                } catch (e) {

                  // ラベルが存在しない場合は無視

                }

              }

            } catch (e) {

              console.log('ラベル操作に失敗');

            }