Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn

Zennの開発チームは、エンジニア3人で開発しています。わたしたちがAIコーディングエージェントのClaude Codeを、単なる便利なツールとしてではなく、開発に不可欠な同僚として迎え入れるにはなにが必要か、をTipsとして紹介しました。

Claude Code の力を最大限発揮するには、「あとはやるだけ」という小さなタスクに分解することが近道です。これにより開発のオートパイロット化を目指しています。

・バグ修正や小規模な機能追加といった日常的なタスク
・お知らせに載るレベルの機能開発
この２例を通して、ZennチームがClaude Codeをオートパイロットに近づけるために実施しているtipsをまとめました。

Transcript

1. Zennチームは Claude Code と協業する 新規事業統括部 Zennチーム 和田祐介
2. 自己紹介 クラスメソッド株式会社 Zennチーム エンジニア 和田祐介 Zennの開発と運営を担当 Zennチームへ異動 2021年7月 勤務地 生まれ 大学時代 東京 福岡県 北九州市 糸島市（九州大学） Google Developer Experts プログラム認定 Google Cloud / 2024年04月 クラスメソッドへ入社 2016年2月 AWS EC2、Scala、Backend API Cloud Run、Next.js、Ruby on Rails、 Zenn全般
3. ターゲットとゴール ターゲット • Claude Code を導入してその威力を知った！他の人たちはどのように活用し ているか知りたい ゴール • Zennがどのように活用しているかを知っていただく • 「自分の業務だとこれが使えそう」というイメージを持っていただく
4. 今日お話する内容 Zennチームでの Claude Code の使い方をなるべく具体的に 試したけど実践投入しなかったものもいくつか紹介
5. おさらい: Claude Code とは？ コーディングに特化したAIエージェント npm install -g @anthropic-ai/claude-code cd zenn-repository claude > LP の zennfes2024という文字列をすべて zennfes2025にして なぜ流行っている？ ▶ エディタを選ばないから 1. インストール 2. プロンプト入力 3.編集までやってくれる
6. Zennの開発フローと Claude Code 活用
7. Zenn - 技術情報共有コミュニティ 2025年8月時点 1,500 万/月 PV 16万 登録ユーザー 19万 投稿記事数 1,300 組織利用 記事や本を書いて投稿
8. Zenn - 技術情報共有コミュニティ 2025年8月時点 1,500 万/月 PV 16万 登録ユーザー 19万 投稿記事数 1,300 組織利用 記事や本を書いて投稿
9. Publication - チームのメディアをZennに開設
10. Ruby on Rails と Next.js がメイン イベントデータ Cloud Load Balancing データベース Cloud SQL Analytics 画像など Cloud Storage タスク API Cloud Run 管理用サーバー Cloud Run ユーザーAPI Cloud Run HTML / JS Cloud Run Assets Stats BigQuery Scheduled Tasks Cloud Scheduler タスクAPIへ Monitoring Logging Bulk Tasks Cloud Tasks タスクAPIへ 著者‧読者 管理者 WAF CDN Cloud Armor
11. Ruby on Rails と Next.js がメイン イベントデータ Cloud Load Balancing データベース Cloud SQL Analytics 画像など Cloud Storage タスク API Cloud Run 管理用サーバー Cloud Run ユーザーAPI Cloud Run HTML / JS Cloud Run Assets Stats BigQuery Scheduled Tasks Cloud Scheduler タスクAPIへ Monitoring Logging Bulk Tasks Cloud Tasks タスクAPIへ 著者‧読者 管理者 WAF CDN Cloud Armor
12. Claude Code 活用しています zenn-repository ├── backend (Ruby on Rails) ├── frontend (Next.js) ├── CLAUDE.md └── .cursor/rules > https://github.com/zenn-dev/zenn-repo sitory/issues/9999 これ実装して
13. Claude Code を使うことになった経緯 • 戦略だてて使う！というよりは、Claude Code の実験場として • エンジニア3人で開発している背景もあり、コーディングエージェントはも ともとフル活用 • GitHub Copilot から始まり、Cline、Devin、Cursor、Claude Code ときて 現在 Claude Code と Cursor の併用に落ち着きつつある
14. Tips: CLAUDE.md でアプリ実行コマンドを指南する • テストやビルドの実行方法をコマン ドで記載しておく • とくにDockerを利用している場合は おすすめ • （私見）日本語でいろいろ書くより は、Claude Code が試行錯誤するた めの材料を提供するほうが効果を実 感した ### Backend (Rails) ```bash # 開発 docker compose up -d # テスト docker compose run --rm -e RSPEC_SILENT=1 backend bundle exec rspec docker compose run --rm -e RSPEC_SILENT=1 backend bundle exec rspec spec/path/to/file_spec.rb # リント docker compose run --rm backend rubocop -A --parallel ```
15. 開発シーンごとの活用例 • 保守開発 • 機能開発
16. 保守開発 • 実現のためのファイル変更数が10以内 • リリースしてもお知らせには載らない • バグ修正・小規模な機能追加 • 例 ◦ Exploreページで意図せずスクロールされ る問題を修正 ◦ ブックマークアイコンの視認性を改善 ◦ ユーザーメニューでPublicationへの導線 を追加
17. 保守開発 • 実現のためのファイル変更数が10以内 • リリースしてもお知らせには載らない • バグ修正・小規模な機能追加 • 例 ◦ Exploreページで意図せずスクロールされ る問題を修正 ◦ ブックマークアイコンの視認性を改善 ◦ ユーザーメニューでPublicationへの導線 を追加
18. 具体例: ユーザーメニューに導線を追加 1. プロンプト入力 ここに追加しよう
19. 具体例: ユーザーメニューに導線を追加 > ユーザーメニューで、ログインしていると きに表示している「Publicationの管理」は 未ログイン状態で「Publicationをはじめ る」というリンクを追加してほしい。 1. プロンプト入力
20. 具体例: ユーザーメニューに導線を追加 > ユーザーメニューで、ログインしていると きに表示している「Publicationの管理」は 未ログイン状態で「Publicationをはじめ る」というリンクを追加してほしい。 1. プロンプト入力 2. プルリクエスト作成
21. 具体例: ユーザーメニューに導線を追加 > ユーザーメニューで、ログインしていると きに表示している「Publicationの管理」は 未ログイン状態で「Publicationをはじめ る」というリンクを追加してほしい。 LGTM いきましょう 1. プロンプト入力 2. プルリクエスト作成 どうでしょうか？ 3.レビュー リリース
22. Tips: CI/CDの整備は必須 • Claude Code を同僚に迎えるために必要。オートパイロットのために道路を 舗装し、白線を引くイメージ • Ruby on Rails アプリ ◦ Linter、Formatter - RuboCop ◦ Unit Test - RSpec • Next.js アプリ ◦ Linter - ESLint、Formatter - Prettier、型チェック - tsc ◦ Unit Test - Vitest • E2E テスト - Playwright
23. Tips: 「とりあえず実装してもらう」 はアリ • 小規模な開発やバグ修正の場合、Claude Code にやってもらったらあっさり 解決することもある • Claude Code は投機的な実装が得意なため、小規模なものであれば動くもの ベースで議論したほうが全体のスループットが大きく出る Exploreページで意図せず勝手にスクロール される。原因しらべて修正して。 GitHub Actions の Node.js を v22 にアッ プデートして。
24. 保守開発まとめ • CI/CDを整えてとりあえずClaude Codeにお願いする • かなり楽になりました 年月 プルリクエスト合計 2025年3月 135 2025年4月 175 2025年5月 198 2025年6月 191 2025年7月 139 2025年8月 112
25. 機能開発 • 実現のためのプルリクエストが10以内 • リリースするとお知らせに載る • 執筆体験の向上・Publicationの拡充など • 例 ◦ Publicationでの記事作成・レビュー・公 開をメール通知できるように ◦ コンテストやハッカソンの栄誉を称える Award機能 ◦ 記事のAIレビュー機能
26. 機能開発 • 実現のためのプルリクエストが10以内 • リリースするとお知らせに載る • 執筆体験の向上・Publicationの拡充など • 例 ◦ Publicationでの記事作成・レビュー・公 開をメール通知できるように ◦ コンテストやハッカソンの栄誉を称える Award機能 ◦ 記事のAIレビュー機能
27. 具体例: Publicationでの記事作成をメール通知 1. 仕様検討 + レビュー Publicationでおきた記事の下書き作成などをメンバーへメー ル通知する メール通知設定はPublicationメンバーが自分の設定を編集で きる 2. DB設計 + レビュー PublicationNotification テーブルを新設する Claude Code は壁打ちや設計のドラフト作成で使いました 通知設定はユーザー テーブルに持たせたほ うがいいと思う？別の テーブルを新設したが ほういいとおもう？
28. 具体例: Publicationでの記事作成をメール通知 3. Sub-issueとしてタスク単位に分割する 分割の目安は10ファイル以内に収まること。ひとつ ひとつが保守開発くらいの規模（=オートパイロット 可能）になれば勝てる 4. ひとつずつレビュー依頼してマージ 5. ひとつずつ機能を隠した状態でリリース 6. 隠した機能を解放し、お知らせをあげる
29. Tips: /review-pr カスタムコマンド。レビューの下読み に利用。レビュー負荷を下げる。 /review-pr https://github.com/zenn-dev/zenn-repo sitory/pull/9999 7. 総合評価 承認推奨度: ★★★★☆ (4/5) 良い点: - Publicationメンバー向けのメール通知設 定機能が適切に実装されている - UIの一貫性が保たれている（既存のダッ シュボードレイアウトを活用） - エラーハンドリングとローディング状態 の管理が適切 - アクセシビリティを考慮したフォーム実 装 改善提案:
30. Tips: /review-pr - review-pr.md ### 包括的なレビュー分析 以下の各観点でプルリクエストを分析します 1. **コーディング規約への準拠** 2. **バグやセキュリティ上の問題** 3. **パフォーマンスの懸念点** 4. **テストカバレッジ** 5. **DRY原則** 6. **YAGNI原則** ### 構造化された出力 レビューをこの構造化されたフォーマットで 提供します： ``` ### 承認推奨度: ★★★☆☆ (3/5) ### 良い点: - [具体的な良い実装] - [評価できる設計判断] ### 改善提案: - [優先度の高い改善点] - [中長期的な改善提案] ```
31. Tips: フィーチャーフラグ コード変更は少しずつ本番環境へ適用したい フィーチャーフラグ を活用してユーザーからは見えないようにする AIエージェントの実装パフォーマンスを発揮するには是非検討したい フロントエンド ユーザーAPI 記事API メール通知取得API メール通知更新API feature() && ({ <div> ✉メール通知 </div> }) バックエンド before_action :is_feature, only: %i(show update)
32. おためし中のもの • サブエージェント ◦ 10ファイル以内の差分であれば通常のカスタムコマンドで十分 ◦ より広いコードベースに対してセキュリティチェックをする場合に備えて用意し ているが、明確な優位性をまだ認識できていない🤔 • GitHub 上での @claude による呼び出し ◦ 試行錯誤スピード勝負のなか、GitHubでそれをやるメリットが見いだせていない ◦ Zennチームの場合、GitHubに載せる情報がフローよりストック寄りなので相性 が良くないだけかも ◦ Vertex AI 経由で利用しており、課金が怖い
33. おためし中のもの • Figma MCP ◦ Figmaのモックデザインからフロントエンドを実装してくれる ◦ CSSも実装してくれるが、変数名なども忠実に取得するため、高いレベルで Figmaと実装が統合されている必要がある ◦ 実装自体もFigmaモックと完全一致というわけではなさそう…？ ◦ 試行錯誤回数が足りていない󰢜
34. ←開催中のZennfes2025
35. ←開催中のZennfes2025 Figma MCPによる実装→
36. Tipsまとめ • CLAUDE.md でアプリ実行コマンドを指南する • CI/CDの整備は必須 • 「とりあえずClaude Codeに実装してもらう」 はアリ • /review-pr でプルリクエストの下読み • フィーチャーフラグで安心してコードベースを更新
37. 今日の話のまとめ • Claude Code の威力は人間にはできないスピードで試行錯誤できる点にある • オートパイロットのための場作りが現場ごとに必要 • 迷ったら「タスクを小さく分割する」これが一番効く
39. おまけ
40. Claude Code と Cursor の併用 - rulesync • Claude Code でベース実装、Cursorエディ タで細かい修正などを行うケースが多い • CLAUDE.md と .cursor/rules/*.md を用意 • ルールファイルは rulesync で一元管理 https://github.com/dyoshikawa/rulesync
41. 抽象度低 抽象度高 保守する 書き捨て コーディング支援 文章の校正・翻訳 コードスニペットの解説 ①AIコーディング ②自動化・自分用ツールの開発 - GAS による集計 - マーケティングメールの作成 - チーム専用の雑談タイマーアプリ作成 ③壁打ち・発想支援 - ブレインストーミング - 思考の整理 - DB設計の壁打ち ④戦略・企画の自動生成 事業戦略作成 キャンペーンのLP
42. tsumikiについて 仕様駆動開発のためのツールだが、課題とゴールがあいまいなタスクを AIと伴走 でるレベルまで分解してくれるツールだと理解している - 実行するべきタスクを目で見て選べるのも◯ - Next.js のアップグレードで使いました - 途中成果物（要求・仕様）が言語化されることで、要否を整理できる - タスクリストから取捨選択できた - Reactのアップグレード：やる - ユニットテストの実行と修正: CI/CD で完了とみなしてOK - 24時間連続稼働テスト: やらない クラスメソッド、 AI支援型テスト駆動開発フレームワーク「 Tsumiki」を公開〜AIを活用しながら品質を確保する開発手法をオープンソースで提供〜 https://classmethod.jp/news/20250729-tsumiki/
43. 評価について • Claude Code の導入成果をどう評価するか？ ◦ 売上に寄与する活動量 / 部門ごとのKPIがあるはずなのでそれを使う • Zenn の場合 ◦ デプロイ回数 ◦ Zennからのメール送信数 Zennメール送信数 Zennのデプロイ回数