Web 部のための Claude Code 入門

コース構成

このコースで学ぶこと

1. 01

   ウェブ部はメインカリキュラムが土台

   ウェブはエンジニアリング寄りなので、公式 11 レベルがそのまま使える。この入門は弊社固有の追加事項のみ。

   他の部署のコースは『チャットとどう違うか』『非エンジニアでも使える理由』から始まりますが、ウェブ部は違います。あなたはコードを書く人で、Claude Code は同僚のシニアエンジニアのような道具です。

   11 レベルのカリキュラムを 1 通り読むのが王道。このコースは弊社特有の運用ルールのみ。

   公式準拠 11 レベル
   弊社固有：リポジトリの CLAUDE.md テンプレ
2. 02

   弊社固有：リポジトリの CLAUDE.md テンプレ

   Next.js 16 / Postgres / pnpm 固定 / Biome / Vercel デプロイ。最低限の前提を書いておく。

   markdown

   # このプロジェクトの前提
   
   ## スタック
   - Next.js 16 (App Router)
   - React 19
   - TypeScript strict
   - Tailwind v4
   - Postgres + Drizzle
   
   ## 規約
   - パッケージマネージャは **pnpm 固定**
   - フォーマッタは **Biome** （prettier 禁止）
   - テストは Vitest、E2E は Playwright
   - ESLint より型で守る
   
   ## 触らない
   - `apps/legacy/` は凍結中、別チーム管轄
   - `infra/prod/` は SRE 専管、PR を出さない
   - `.env.production` は読み書き禁止
   
   ## デプロイ
   - main → 自動で staging
   - prod は手動承認（Slack #release）

   ウェブ部はメインカリキュラムが土台REVIEW.md でレビュー観点を統一
3. 03

   REVIEW.md でレビュー観点を統一

   Claude Code Review が PR で走るとき、何を重視するかをチームで言語化。

   GitHub の Claude Code Review 機能 + `REVIEW.md` の組合せで、レビューのトーンが揃います。P0/P1/P2 の severity 基準を最初に決めるのがコツ。

   markdown

   # REVIEW.md
   
   ## 重視する
   - セキュリティ：認証・認可・SQL インジェクション
   - データ整合性：競合状態・トランザクション境界
   - パフォーマンス：N+1 クエリ・無限ループ
   
   ## 無視する
   - フォーマッティング（Biome が処理する）
   - import 順（自動整理）
   - コメントの言い回し
   
   ## Severity
   - **P0**：本番で即障害になり得る → 必ず修正
   - **P1**：レビュー前に直したい
   - **P2**：余裕があれば

   Lv.8 — Code Review
   弊社固有：リポジトリの CLAUDE.md テンプレGitHub Actions に @claude を仕込む
4. 04

   GitHub Actions に @claude を仕込む

   PR コメントの @claude で自動レビュー・自動修正が走る仕組み。

   yaml

   # .github/workflows/claude.yml
   name: Claude
   on:
     issue_comment:
       types: [created]
     pull_request_review_comment:
       types: [created]
   
   jobs:
     claude:
       if: contains(github.event.comment.body, '@claude')
       runs-on: ubuntu-latest
       permissions:
         contents: write
         pull-requests: write
         issues: write
       steps:
         - uses: actions/checkout@v4
         - uses: anthropics/claude-code-action@v1
           with:
             anthropic-api-key: ${{ secrets.ANTHROPIC_API_KEY }}

   出力イメージPR に投稿される @claude のレビューコメント

   **Claude のレビュー** — 変更 4 ファイル / +128 −12
   
   ## P0 — 要修正
   - `src/api/○○.ts:42` 認証チェック前に DB クエリが走っています。未ログインでも実行可能な状態です。
   
   ## P1 — 推奨
   - `src/lib/○○.ts:88` ループ内 await による N+1。`Promise.all` でまとめられます。
   
   ## good
   - エラーハンドリングが各分岐で揃っていて読みやすいです
   …（以下 2 件）

   Lv.8 — GitHub Actions 統合
   REVIEW.md でレビュー観点を統一本番事故防止：deny と sandbox
5. 05

   本番事故防止：deny と sandbox

   Auto モードを使う前に、必ず deny ルールと sandbox 設定を済ませる。エンジニア部署が最も事故りやすい場所なので、初日に固める。

   • `infra/prod/**` と `.env` は必ず deny
   • 本番 DB に繋がる接続文字列は環境変数で渡し、Claude プロセスに渡さない
   • Auto モードを使うときは事前に sandbox を有効化
   • 個人 settings.local.json に追加の deny を入れて二重防御

   Lv.4 — 権限とサンドボックス
   GitHub Actions に @claude を仕込むSkill 化と日常運用のリズム
6. 06

   Skill 化と日常運用のリズム

   ガードレールを敷いたら、次は日常運用に組み込む。Web 部の場合は PR レビュー・Issue 起票・ローカル開発の 3 場面が最大のレバレッジポイント。

   • 毎朝：PR キューを Claude に要約させる（“今日触るべき 3 件”）
   • 編集時：Hook で format / lint を自動化、書き直し往復をゼロに
   • リリース前：CHANGELOG ドラフトを Claude に書かせて人が最終確認

   手を動かす

   0 / 3

   • 週次でチーム共有 .claude/ の Skill / Hook を 1 つ増やす
   • 個人 CLAUDE.md に『あなたの担当領域』を書き、領域外は触らせない
   • Lv.7（自動化）と Lv.8（Code Review）を順に進む

   ウェブ部の個別コース一覧

   理解度チェック

   1. Q1.Web 部が日常運用で最大のレバレッジを得る 3 場面は？

      Aコードレビュー・本番デプロイ・障害対応BPR レビュー・Issue 起票・ローカル開発Cペアプロ・採用面接・1on1Dドキュメント生成・SEO 監査・広告配信

   2. Q2.Auto モードを有効化する前に必ず済ませておくべき設定はどれか？

      AClaude をローカル LLM に差し替えるB`infra/prod/**` や `.env` の deny ルール、および sandbox の有効化CGitHub Actions の全ワークフローを停止するD全社員に Auto モードを共有する

   3. Q3.リポジトリの CLAUDE.md に書いておくべき内容として最も適切なものはどれか？

      Aメンバー個人の業務目標Bスタック（Next.js 16 / pnpm 固定 / Biome など）と『触らないディレクトリ』の宣言CSlack 全チャンネルのリンクD個人の API キー
   本番事故防止：deny と sandbox