生成 AI ワークショップ第一回コーディングエージェントの全体像

#ai

Disclaimer

@Daichi HAYASHI の 2026-02-13 時点での意見や「今はこう使っているよ」という共有です。参考程度にしつつ、生成 AI・コーディングエージェントを触るきっかけになれば幸いです。

コーディングエージェントに任せる領域・任せられない領域

積極的に任せている場面

品質基準が緩い機能。俗に言う Vibe Coding が許されると思っている。

デバッグ機能
テストコードの実装
便利ツール
PoC

AI と並走する場面

Vibe Coding はしない。人間が監視して方針を定めてあげて、適切に導く必要がある。

ドキュメント作成
- たたき台は AI に生成させて、微調整を繰り返していく
秩序が保たれている・パターンの繰り返し等の正解がわかる状態でのプロダクションコードの実装
- これはある程度 AI にお任せ可能だが、最終成果物のレビューは必須
新機能等、設計から考える必要があるプロダクションコードの実装

コーディングエージェントの使い分け

@Daichi HAYASHI の使い分け: ずっと Claude Code メインだったが、直近は Codex と Claude Code を同じくらい使っていて、Codex の方が好みになりつつある。(最近出た Codex の macOS app が自分と相性良かった)

Claude Code or Codex であれば好みでいいと思う。

	Claude Code	Codex	Gemini
速度	高速	低速だったが Codex 5.3 で改善	高速
印象	創造的	真面目・忠実	-
作業スタイル	ボトムアップ的	トップダウン的	-
特徴	機能が非常に多く、日夜大量のアップデート。体感毎日新機能が出ている	Plan mode, skills, project scope 等の主要機能がほぼ追いついた。モデル性能が高く macOS app の完成度が高い	CLI は全く使ってない。モデルアップデートがなく、現時点では他ツールを優先

PRD を作ってみる

事前準備

MCP を Claude Code 等にインストール
- MCP とは: AI エージェントが外部サービスと連携するための標準プロトコル。決まった I/F で AI が適宜必要に応じて呼び出し、MCP を介して情報の CRUD 等ができる
- Notion MCP : Notion 上でメンバーである必要があるので、使える人は限られるかも？
- Figma MCP
仕様書を作成する枠だけ作っておく

今回のお題

既存画面に新規要素を足すようなことを考える。
Figma にワイヤーフレームはあるが、仕様書が無いのでこれを作ってみる。

基本的な考え方

いきなりやってほしいことを指示することはせず、まずは必要な知識を AI 自身で収集させる
方向性は与えるが、ガチガチに指示しすぎない (AI が創造性を発揮する余白を設ける)
詳しく知りたい人はこのあたりを読むと良い
- Best Practices for Claude Code - Claude Code Docs
- Codex Prompting Guide

早速やってみる

1. まずはコンテキストを与える

以下の URL から Figma デザインを取得して
https://www.figma.com/design/xxxxxxx/yyyyyyyyyyyy?node-id=zzzzzzzzzzzz&m=dev

2. 次に課題感を自身で考えさせる
もちろん人間は差分を知っているが、あえて質問することで多角的に教えてくれる印象。

現状の実装と、先程取得した Figma UI との差分を教えて

ここまで情報が揃ったら本題のやりたいことを指示する
Markdown で章立てすると AI が理解しやすい印象。
実際にやってほしいことを指示するときは、Plan mode を使うことをおすすめする。 (Plan mode についての詳細は後で解説します)

## 背景・前提

- XXXXX 画面において、Figma 通りの YYYY 表示を追加したい
- iOS / Android 両方で使い回せる、共通言語としての仕様書を作成したい

## やること

- Notion の <https://www.notion.so/xxxxxxxxxx/yyyyyyyyyyyyyy> の URL に、仕様書を作成する
- 英語で記述する
- User Story + Acceptance Criteria (Gherkin) で構造的に記述すること

出てきた Plan が良さそうであれば承認し、修正が必要であれば指示をして計画させ直す。
成果物を見て、修正が必要であれば手で直す or プロンプトで指示して完了。

コーディングエージェントにおいて重要な Session context という概念

Session: 一連の会話。 $ claude や $ codex で始めることができる。
Context window: Session あたりのトークン制限。モデルやツールに応じて決められている。
- Claude Code であれば /clear , Codex であれば /new コマンドで context をリセットしてまっさらな状態にリセットできる

昨今のコーディングエージェント・モデルの性能だと、 1M token に近いものも出てきているが、それでもまだコード全体を把握できるほどの Context Window は無い。

そこで、エージェントが作業に必要なファイルだけを読み取って効率よくコンテキストを消費している。

コンテキスト上限に近づくと、Compacting という処理がなされそれまでの会話が圧縮される (= 記憶が断片的になる) が、基本的にはこれをすると指示を忘れたりするので、Context Window 上限に行かないように意識している。

Context Window を節約するためのコツ

基本的にはタスクの粒度をコントロールして、1 session をあまり長くしないようにする
どうしても長くなるタスクの場合は、重要な指示やコンテキストは別の md ファイルとかに逃がしておいて、それを Compacting やセッションをリセットしたときに都度読み込ませることで重要な情報は抜けないように工夫したりする

Context Window を効率よく利用できる、Subagent について

Context Window はできる限り汚染したくないということを説明した。

背景知識を与えるために必要なコンテキストは与えたい一方で、実装や作業のためにコンテキストを節約しておきたいという気持ちもあり、バランスを取るのが難しかったりするが、そこで出てくるのが Subagent である。
Subagent は「なにか特定の役割を持った別のセッションを作ることができる AI エージェント」であり、メインのセッションからは切り離された別のコンテキストを利用する。

ではどのようにメインのセッションと情報を共有するかというと、

メインのセッションから Subagent に対してプロンプトでやってほしいことを指示をする:
- 例: 「現在のプロフィール画面の実装について、実装済みの UI パーツを調査せよ」
Subagent が具体的なファイルを見に行って調査し、結果だけをメインのセッションに伝える:
- 例:「現在のプロフィール画面には A と B と C と D の UI パーツがありました！」
Subagent は種々のファイルを見に行っていてコンテキストを大量に消費したとしても、その過程はメインのセッションは知らないのでコンテキストを汚染しない

Claude Code や Codex には標準で Subagent が搭載されており、これは自動で呼び出される。
また、自分で Subagent を作ることもできて、途中の過程は不要で結果だけ分かればいいものは Subagent 化すると捗る。

Plan mode について

基本的に、何か具体的な作業をさせる際は Plan mode を利用するのがおすすめ。
Plan mode では

情報収集 (多角的に)
作業の計画を立てる
必要に応じて判断が必要であればユーザーに選択肢を与えて質問
最終的な計画書を Markdown で生成

というプロセスを踏む。

Best Practices for Claude Code - Claude Code Docs にも "Explore first, then plan, then code" と書いてあるように、いきなり作業をさせると行き当たりばったりなことをするので、まずは俯瞰させて計画してから作業を始めさせると筋が良い。

また、現状 Claude Code のみだが、Plan の md ファイル以外のセッションコンテキストを clear してから実装に進むという選択肢があり、基本的にはこれを選んでおけば計画を立てつつもその後の実装に必要なコンテキストも確保できるという素晴らしい機能がある。 (Codex にも早く来てほしい)