はじめに
AIエージェントを用いての開発、世の中で実践されている会社さんが多いですね。
そうした開発が注目される中、
個人プロジェクトでAgenticCodingを実践してきました。
体感でドキュメント作成時間が1/4程度になるなど効果を実感しています。
AgenticCoding
明確に定義された実装タスクをエージェントに委任し、人間がより本質的な問題解決に集中することを可能にする開発アプローチ
この経験を踏まえ、チーム開発に導入する際ドキュメントがどう変化すべきか、何を準備すべきかをまとめました。
アジェンダ
第1部：現状認識
- 身の回りの自動化レベル
- AIエージェントの自動運転レベル
第2部：実践編
- AgenticCodingでドキュメントはどう変化するか
- 各開発工程における人間とAIの作業分担
第3部：導入準備
- 実践時の課題
- 実践に向けた準備事項
第4部：運用と未来
- 保守・運用でのAIとの向き合い方
- まとめと今後の展望
身の回りの自動化レベル
洗濯機
- 全自動ではあるが、人間が操作する
自動車
- 運転支援〜自動運転に進化している
- 車の場合、ドライバー席を譲る時代がすぐそこに
コーディングは今どのレベルでしょうか？
AIエージェントの自動運転レベル
車の自動運転と同じように、コーディングも段階的に自動化が進んでいる現状と考える
AgenticCording実践にあたって、ドキュメントはどう変化するのか
単純に、AIを使えば開発が劇的に変化するか、と言われれば、否である。
開発プロセス自体は、変わらず、人間と、AIが作業分担する形になると考えている
AgenticCordingを実践するためには、基盤を整備した上で進める必要があると考える。
AIが理解しやすいよう、ドキュメントはリポジトリ内に配置するのが良いようです。
具体的には、以下のようなイメージで進めてみています
これは、AIが仕様を理解するために、情報をできるだけ近い位置に配置することが良い、とされているためです。
AIとの作業分担と、各工程で作成するドキュメントがどう変化するのか?
各開発工程における人間とAIの作業分担
現時点での私の理解では、以下の分担になるであろう、と考えている
AIは、あくまで「思考の補助輪」であって答えを出すものではない。
人間が得意なところ、AIが得意なところを見極めて「協働」していく必要がある
その上で、
各開発工程で作成するドキュメントがどう変化すると、現時点で考えているのか紹介します
（現に、次の案件で実践しようと見積もり前提にて宣言している）
要件定義書
前述の通り、リポジトリ内に配置される。
AIが理解しやすいようmarkdown形式のファイルに変化する
内容的にはよくある要件定義書と同じである
サンプル
# 業務経歴書管理システム 要件定義書
## 1. システム概要
### 1.1 システム名称
業務経歴書管理システム
### 1.2 システムの目的
エンジニアの業務経歴を効率的に管理し、技術スキルの累積経験を可視化することで、スキルレベルを直感的に把握できるWebアプリケーションを提供する。
### 1.3 システムの背景
- エンジニアの経歴管理は紙やExcelでの管理が主流で非効率
- 技術スタックごとの経験年数を正確に把握することが困難
- スキルレベルを客観的に示す指標が不足
### 1.4 期待される効果
- 業務経歴の一元管理による効率化
- スキルの可視化による自己評価の向上
- 転職活動や案件参画時の経歴提示の簡素化
## 2. システムの範囲
### 2.1 対象ユーザー
- 主要ユーザー：エンジニア（フロントエンド、バックエンド、フルスタック）
- 利用想定人数：個人利用を前提
### 2.2 対象業務
- 業務経歴の登録・管理
- 技術スキルの可視化
- 経歴データの出力
## 3. 機能要件
### 3.1 認証機能
#### 3.1.1 ユーザー認証
- **機能ID**: AUTH-001
- **機能名**: Google OAuth認証
- **説明**: Google OAuth 2.0を使用したセキュアなログイン機能
- **詳細要件**:
- Googleアカウントによるシングルサインオン
- 初回ログイン時の自動ユーザー登録
- セッション管理
### 3.2 案件管理機能
#### 3.2.1 案件登録
- **機能ID**: PROJECT-001
- **機能名**: 案件情報登録
- **説明**: 新規案件情報を登録する機能
- **入力項目**:
- プロジェクト名（必須、最大100文字）
- 担当ポジション（必須、選択式）
- 開始日（必須、日付型）
- 終了日（任意、日付型）
- 使用技術スタック（必須、複数選択可）
- プロジェクト概要（任意、最大1000文字）
#### 3.2.2 案件編集
- **機能ID**: PROJECT-002
- **機能名**: 案件情報編集
- **説明**: 登録済み案件情報を編集する機能
- **詳細要件**:
- 全項目の編集が可能
- 変更履歴の保持
#### 3.2.3 案件削除
- **機能ID**: PROJECT-003
- **機能名**: 案件情報削除
- **説明**: 登録済み案件情報を削除する機能
- **詳細要件**:
- 削除確認ダイアログの表示
- 論理削除の実装
#### 3.2.4 案件一覧表示
- **機能ID**: PROJECT-004
- **機能名**: 案件一覧表示
- **説明**: 登録済み案件の一覧を表示する機能
- **表示項目**:
- プロジェクト名
- 期間
- 担当ポジション
- 主要技術スタック
- **機能要件**:
- ページネーション（10件/ページ）
- ソート機能（開始日順、終了日順）
- 検索機能（プロジェクト名、技術スタック）
### 3.3 スキル可視化機能
#### 3.3.1 技術スタック経験期間計算
- **機能ID**: SKILL-001
- **機能名**: 累積経験期間自動計算
- **説明**: 技術スタックごとの累積経験期間を自動計算する機能
- **計算ロジック**:
- 同一技術スタックを使用した全案件の期間を合計
- 重複期間は1回のみカウント
#### 3.3.2 スキルレベル表示
- **機能ID**: SKILL-002
- **機能名**: スキルレベル星表示
- **説明**: 経験年数に応じた星表示でスキルレベルを可視化
- **レベル定義**:
- ⭐️: 1年未満
- ⭐️⭐️: 1-3年
- ⭐️⭐️⭐️: 3-5年
- ⭐️⭐️⭐️⭐️: 5-7年
- ⭐️⭐️⭐️⭐️⭐️: 7年以上
#### 3.3.3 スキルマトリックス表示
- **機能ID**: SKILL-003
- **機能名**: スキルマトリックス
- **説明**: 技術カテゴリ別にスキルを整理して表示
- **カテゴリ例**:
- フロントエンド技術
- バックエンド技術
- データベース
- インフラ・DevOps
- その他ツール
### 3.4 マスタ管理機能
#### 3.4.1 技術スタックマスタ
- **機能ID**: MASTER-001
- **機能名**: 技術スタックマスタ管理
- **説明**: 選択可能な技術スタックのマスタデータ管理
- **管理項目**:
- 技術名
- カテゴリ
- アイコン
- 説明
#### 3.4.2 ポジションマスタ
- **機能ID**: MASTER-002
- **機能名**: ポジションマスタ管理
- **説明**: 選択可能なポジションのマスタデータ管理
- **ポジション例**:
- フロントエンドエンジニア
- バックエンドエンジニア
- フルスタックエンジニア
- インフラエンジニア
- プロジェクトマネージャー
## 4. 非機能要件
### 4.1 性能要件
- **応答時間**: 画面遷移3秒以内
- **同時接続数**: 10ユーザー（個人利用想定）
- **データ容量**: ユーザーあたり最大1000案件
### 4.2 セキュリティ要件
- **認証**: OAuth 2.0による認証
- **通信**: HTTPS通信の強制
- **データ保護**: 個人情報の暗号化
- **アクセス制御**: ユーザーごとのデータ分離
### 4.3 可用性要件
- **稼働率目標**: 95%以上（個人利用のため緩和）
- **バックアップ**: 日次バックアップ
- **リカバリ**: RPO 24時間、RTO 4時間
### 4.4 保守性要件
- **ログ**: アプリケーションログの出力
- **監視**: エラー監視の実装
- **ドキュメント**: 開発・運用ドキュメントの整備
### 4.5 移植性要件
- **ブラウザ対応**: Chrome、Firefox、Safari、Edge（最新版）
- **レスポンシブ対応**: PC、タブレット、スマートフォン対応
機能一覧
前述の通り、リポジトリ内に配置される。
AIが理解しやすいようmarkdown形式のファイルに変化する
詳細は以下参照
# 業務経歴書管理システム 機能一覧
## 1. 大機能：案件管理
### 1.1 中機能：案件情報の登録
- **小機能：プロジェクト名入力**
- テキスト入力フィールド
- 必須項目バリデーション
- 最大文字数制限
- zod + VeeValidate
- **小機能：担当ポジション選択**
- 選択肢：フロントエンド、バックエンド、フルスタック、インフラ、PM, PL, その他
- ドロップダウン選択
- 複数選択可能
- **小機能：期間設定**
- 開始日カレンダー選択
- 終了日カレンダー選択
- **小機能：使用技術スタックの複数選択**
- 技術タグの検索・選択
- 新規技術の追加機能
- カテゴリ別表示（言語、フレームワーク、ツール等）
- **小機能：プロジェクト概要入力**
- リッチテキストエディタ
- マークダウン対応
- プレビュー機能
- **小機能：入力バリデーション**
- 必須項目チェック
- 日付の論理チェック
- リアルタイムエラー表示
### 1.2 中機能：案件情報の編集
- **小機能：既存案件の検索**
- キーワード検索
- 期間フィルタ
- 技術スタックフィルタ
- **小機能：案件選択・表示**
- 一覧からの選択
- 詳細情報の表示
- 編集モード切替
- **小機能：各項目の更新**
- 既存データの読み込み
- 変更内容の確認画面
- 保存処理
- **小機能：変更履歴の記録**
- 更新日時の自動記録
- 変更項目の記録
- 変更前後の値の保存
### 1.3 中機能：案件情報の削除
- **小機能：削除対象の選択**
- 案件一覧からの選択
- 複数選択対応
- **小機能：削除確認ダイアログ**
- 削除対象の詳細表示
- 確認メッセージ
- キャンセル機能
- **小機能：ソフトデリート**
- 論理削除フラグの設定
- 削除データの復元機能
- 完全削除オプション
### 1.4 中機能：案件一覧表示
- **小機能：一覧表示**
- テーブル形式表示
- カード形式表示切替
- 表示項目のカスタマイズ
- **小機能：ソート機能**
- 開始日・終了日順
- プロジェクト名順
- 更新日時順
- **小機能：フィルタリング**
- 技術スタック別
- ポジション別
- 期間範囲指定
- **小機能：ページネーション**
- 表示件数設定
- ページ番号表示
- 前後ページ遷移
## 2. 大機能：スキル可視化
### 2.1 中機能：技術スタック経験期間の自動計算
- **小機能：期間集計処理**
- 案件ごとの使用期間抽出
- 月単位での集計
- 年数への変換
- **小機能：重複期間の処理**
- 同時期の複数案件での使用検出
- 重複排除ロジック
- 実質経験期間の算出
- **小機能：リアルタイム更新**
- 案件情報変更時の再計算
- バックグラウンド処理
- キャッシュ管理
### 2.2 中機能：スキルレベル表示
- **小機能：⭐️レベル判定**
- 1年未満：⭐️
- 1-3年：⭐️⭐️
- 3-5年：⭐️⭐️⭐️
- 5-7年：⭐️⭐️⭐️⭐️
- 7年以上：⭐️⭐️⭐️⭐️⭐️
- **小機能：スキル一覧ダッシュボード**
- 技術スタック別表示
- 経験レベル視覚化
- スキルマップ表示
- **小機能：技術カテゴリ別グルーピング**
- プログラミング言語
- フレームワーク・ライブラリ
- データベース
- インフラ・ツール
- その他
### 2.3 中機能：スキル詳細表示
- **小機能：技術別使用案件一覧**
- 該当案件のリスト表示
- 各案件での使用期間
- 役割・ポジション表示
- **小機能：経験タイムライン**
- 時系列グラフ表示
- 案件の重なり可視化
- ズーム・スクロール機能
- **小機能：スキル統計情報**
- 総経験月数
- 最初/最後の使用時期
- 使用頻度分析
## 3. 大機能：認証機能
### 3.1 中機能：ユーザー認証
- **小機能：Google OAuth 2.0ログイン**
- Googleアカウント選択
- 認証フロー処理
- アクセストークン管理
- **小機能：初回ログイン処理**
- ユーザー情報の取得
- プロフィール初期設定
- 利用規約同意
- **小機能：セッション管理**
- ログイン状態の保持
- セッションタイムアウト
- 自動更新機能
- **小機能：ログアウト機能**
- セッション破棄
- リダイレクト処理
- ローカルデータクリア
### 3.2 中機能：アクセス制御
- **小機能：ユーザーごとのデータ分離**
- ユーザーIDベースのフィルタリング
- データアクセス権限チェック
- 他ユーザーデータの非表示
- **小機能：認証エラーハンドリング**
- 未認証アクセスの検出
- ログイン画面へのリダイレクト
- エラーメッセージ表示
- **小機能：APIアクセス制御**
- JWTトークン検証
- APIエンドポイント保護
- 認証ヘッダーチェック
## 4. 将来的な拡張機能（参考）
### 4.1 エクスポート機能
- PDF形式での経歴書出力
- Excel/CSV形式でのデータエクスポート
- 職務経歴書テンプレート対応
### 4.2 共有機能
- 公開用URL生成
- 閲覧権限設定
- SNS共有連携
### 4.3 分析機能
- スキルトレンド分析
- キャリアパス提案
- 市場価値診断
画面一覧
前述の通り、リポジトリ内に配置される。
AIが理解しやすいようmarkdown形式のファイルに変化する
詳細は以下参照
# 業務経歴書管理システム 画面一覧
## 画面一覧表
| No. | 画面ID | 大機能 | 中機能 | 画面 | 処理概要 |
|-----|--------|--------|--------|------|----------|
| 1 | SC001 | 認証機能 | ユーザー認証 | ログイン画面 | Google OAuth 2.0によるログイン処理、アクセストークン取得 |
| 2 | SC002 | 認証機能 | ユーザー認証 | 初回登録画面 | 初回ログイン時のプロフィール設定、利用規約同意 |
| 3 | SC003 | 認証機能 | アクセス制御 | セッションタイムアウト画面 | セッション切れ時の再ログイン促進 |
| 4 | SC004 | 案件管理 | 案件一覧表示 | 案件一覧画面 | 案件のテーブル/カード表示、ソート、フィルタリング、ページネーション |
| 5 | SC005 | 案件管理 | 案件情報の登録 | 案件登録画面 | プロジェクト情報入力、技術スタック選択、バリデーション |
| 6 | SC006 | 案件管理 | 案件情報の編集 | 案件編集画面 | 既存案件データの更新、変更履歴記録 |
| 7 | SC007 | 案件管理 | 案件一覧表示 | 案件詳細画面 | 選択した案件の詳細情報表示 |
| 8 | SC008 | 案件管理 | 案件情報の削除 | 削除確認画面 | 削除対象の確認、ソフトデリート実行 |
| 9 | SC009 | スキル可視化 | スキルレベル表示 | ダッシュボード画面 | スキルサマリー表示、経験レベル可視化 |
| 10 | SC010 | スキル可視化 | スキルレベル表示 | スキル一覧画面 | 技術カテゴリ別グルーピング、⭐レベル表示 |
| 11 | SC011 | スキル可視化 | スキル詳細表示 | スキル詳細画面 | 技術別使用案件一覧、経験統計情報表示 |
| 12 | SC012 | スキル可視化 | スキル詳細表示 | スキルタイムライン画面 | 経験の時系列グラフ表示、案件の重なり可視化 |
| 13 | SC013 | 共通機能 | プロフィール管理 | プロフィール設定画面 | ユーザー情報の編集、アカウント設定 |
| 14 | SC014 | 共通機能 | エラーハンドリング | 404エラー画面 | ページが見つからない場合の表示 |
| 15 | SC015 | 共通機能 | エラーハンドリング | 500エラー画面 | サーバーエラー時の表示 |
画面仕様書
前述の通り、リポジトリ内に配置される。
AIが理解しやすいようmarkdown形式のファイルに変化する
詳細は以下参照
# 業務経歴書管理システム 画面項目定義書
## 1. ログイン画面
### 画面基本情報
- 画面ID: SC001
- 画面名: ログイン画面
- 概要: Google OAuth 2.0によるログイン処理、アクセストークン取得
### 入力項目
なし（Google認証へリダイレクト）
### 表示項目
| 項目名 | 型 | 表示形式 | 備考 |
|--------|-----|----------|------|
| システムロゴ | 画像 | PNG/SVG | ヘッダー中央 |
| システム名 | テキスト | 見出し | 業務経歴書管理システム |
| ログインボタン | ボタン | プライマリボタン | "Googleでログイン" |
### アクション
| アクション | トリガー | 処理内容 |
|-----------|---------|----------|
| Googleログイン | ログインボタンクリック | Google OAuth認証画面へリダイレクト |
### 画面遷移
- 成功時: 初回→初回登録画面(SC002)、2回目以降→ダッシュボード画面(SC009)
- エラー時: 同画面に留まる
## 2. 初回登録画面
### 画面基本情報
- 画面ID: SC002
- 画面名: 初回登録画面
- 概要: 初回ログイン時のプロフィール設定、利用規約同意
### 入力項目
| 項目名 | 型 | 必須 | 最大文字数 | その他バリデーション | 初期値 | DBカラム |
|--------|-----|------|------------|-------------------|--------|----------|
| ユーザー名 | テキスト | ◯ | 255 | - | Googleアカウント名 | users.name |
| 利用規約同意 | チェックボックス | ◯ | - | チェック必須 | 未チェック | - |
### 表示項目
| 項目名 | 型 | 表示形式 | データソース |
|--------|-----|----------|--------------|
| メールアドレス | テキスト | 読み取り専用 | Googleアカウント情報 |
| プロフィール画像 | 画像 | アバター | Googleアカウント情報 |
### アクション
| アクション | トリガー | 処理内容 |
|-----------|---------|----------|
| 登録 | 登録ボタンクリック | ユーザー情報をDBに登録 |
| キャンセル | キャンセルボタンクリック | ログイン画面へ遷移 |
### 画面遷移
- 成功時: ダッシュボード画面(SC009)
- キャンセル時: ログイン画面(SC001)
## 3. セッションタイムアウト画面
### 画面基本情報
- 画面ID: SC003
- 画面名: セッションタイムアウト画面
- 概要: セッション切れ時の再ログイン促進
### 入力項目
なし
### 表示項目
| 項目名 | 型 | 表示形式 | 備考 |
|--------|-----|----------|------|
| メッセージ | テキスト | 警告メッセージ | "セッションがタイムアウトしました" |
| 説明文 | テキスト | 本文 | "再度ログインしてください" |
### アクション
| アクション | トリガー | 処理内容 |
|-----------|---------|----------|
| 再ログイン | ボタンクリック | ログイン画面へ遷移 |
### 画面遷移
- ログイン画面(SC001)
## 4. 案件一覧画面
### 画面基本情報
- 画面ID: SC004
- 画面名: 案件一覧画面
- 概要: 案件のテーブル/カード表示、ソート、フィルタリング、ページネーション
### 入力項目
| 項目名 | 型 | 必須 | 最大文字数 | その他バリデーション | 初期値 | DBカラム |
|--------|-----|------|------------|-------------------|--------|----------|
| 検索キーワード | テキスト | - | 100 | - | 空 | - |
| 開始日From | 日付 | - | - | YYYY-MM-DD形式 | 空 | - |
| 開始日To | 日付 | - | - | YYYY-MM-DD形式、From以降 | 空 | - |
| ステータス | セレクト | - | - | 選択肢: 全て/進行中/完了 | 全て | - |
### 表示項目
| 項目名 | 型 | 表示形式 | データソース |
|--------|-----|----------|--------------|
| プロジェクト名 | テキスト | リンク | projects.name |
| 概要 | テキスト | 省略表示(100文字) | projects.description |
| 期間 | テキスト | YYYY/MM〜YYYY/MM | projects.start_date, end_date |
| ポジション | タグ | 複数表示 | positions.name (project_positions経由) |
| 技術スタック | タグ | 複数表示(最大5個) | technologies.name (project_technologies経由) |
### アクション
| アクション | トリガー | 処理内容 |
|-----------|---------|----------|
| 新規登録 | ボタンクリック | 案件登録画面へ遷移 |
| 詳細表示 | 行クリック | 案件詳細画面へ遷移 |
| 編集 | 編集アイコンクリック | 案件編集画面へ遷移 |
| 削除 | 削除アイコンクリック | 削除確認画面へ遷移 |
| ページング | ページ番号クリック | 該当ページを表示（20件/ページ） |
| ソート | カラムヘッダクリック | 昇順/降順切替 |
### 画面遷移
- 案件登録画面(SC005)
- 案件詳細画面(SC007)
- 案件編集画面(SC006)
- 削除確認画面(SC008)
## 5. 案件登録画面
### 画面基本情報
- 画面ID: SC005
- 画面名: 案件登録画面
- 概要: プロジェクト情報入力、技術スタック選択、バリデーション
### 入力項目
| 項目名 | 型 | 必須 | 最大文字数 | その他バリデーション | 初期値 | DBカラム |
|--------|-----|------|------------|-------------------|--------|----------|
| プロジェクト名 | テキスト | ◯ | 255 | - | 空 | projects.name |
| 概要 | テキストエリア | - | 65535 | - | 空 | projects.description |
| 開始日 | 日付 | ◯ | - | YYYY-MM-DD形式 | 空 | projects.start_date |
| 終了日 | 日付 | - | - | YYYY-MM-DD形式、開始日以降 | 空 | projects.end_date |
| ポジション | チェックボックス | ◯ | - | 1個以上選択必須 | 未選択 | project_positions |
| 技術スタック | タグ入力 | - | - | マスタから選択 | 空 | project_technologies |
### 表示項目
| 項目名 | 型 | 表示形式 | データソース |
|--------|-----|----------|--------------|
| ポジション選択肢 | チェックボックス | 垂直リスト | positions（マスタ）|
| 技術候補 | オートコンプリート | ドロップダウン | technologies（マスタ）|
### アクション
| アクション | トリガー | 処理内容 |
|-----------|---------|----------|
| 登録 | 登録ボタンクリック | バリデーション→DB登録→履歴記録 |
| キャンセル | キャンセルボタンクリック | 案件一覧画面へ遷移 |
### 画面遷移
- 成功時: 案件一覧画面(SC004)
- キャンセル時: 案件一覧画面(SC004)
## 6. 案件編集画面
### 画面基本情報
- 画面ID: SC006
- 画面名: 案件編集画面
- 概要: 既存案件データの更新、変更履歴記録
### 入力項目
| 項目名 | 型 | 必須 | 最大文字数 | その他バリデーション | 初期値 | DBカラム |
|--------|-----|------|------------|-------------------|--------|----------|
| プロジェクト名 | テキスト | ◯ | 255 | - | 既存値 | projects.name |
| 概要 | テキストエリア | - | 65535 | - | 既存値 | projects.description |
| 開始日 | 日付 | ◯ | - | YYYY-MM-DD形式 | 既存値 | projects.start_date |
| 終了日 | 日付 | - | - | YYYY-MM-DD形式、開始日以降 | 既存値 | projects.end_date |
| ポジション | チェックボックス | ◯ | - | 1個以上選択必須 | 既存値 | project_positions |
| 技術スタック | タグ入力 | - | - | マスタから選択 | 既存値 | project_technologies |
### 表示項目
| 項目名 | 型 | 表示形式 | データソース |
|--------|-----|----------|--------------|
| 更新日時 | テキスト | 読み取り専用 | projects.updated_at |
| 作成日時 | テキスト | 読み取り専用 | projects.created_at |
### アクション
| アクション | トリガー | 処理内容 |
|-----------|---------|----------|
| 更新 | 更新ボタンクリック | バリデーション→DB更新→変更履歴記録 |
| キャンセル | キャンセルボタンクリック | 案件詳細画面へ遷移 |
### 画面遷移
- 成功時: 案件詳細画面(SC007)
- キャンセル時: 案件詳細画面(SC007)
## 7. 案件詳細画面
### 画面基本情報
- 画面ID: SC007
- 画面名: 案件詳細画面
- 概要: 選択した案件の詳細情報表示
### 入力項目
なし
### 表示項目
| 項目名 | 型 | 表示形式 | データソース |
|--------|-----|----------|--------------|
| プロジェクト名 | テキスト | 見出し | projects.name |
| 概要 | テキスト | 本文 | projects.description |
| 期間 | テキスト | YYYY/MM/DD〜YYYY/MM/DD | projects.start_date, end_date |
| ポジション | タグ | リスト表示 | positions.name |
| 技術スタック | タグ | カテゴリ別グループ表示 | technologies.name, category |
| 作成日時 | テキスト | 日時 | projects.created_at |
| 更新日時 | テキスト | 日時 | projects.updated_at |
| 変更履歴 | テーブル | 時系列リスト | project_histories |
### アクション
| アクション | トリガー | 処理内容 |
|-----------|---------|----------|
| 編集 | 編集ボタンクリック | 案件編集画面へ遷移 |
| 削除 | 削除ボタンクリック | 削除確認画面へ遷移 |
| 戻る | 戻るボタンクリック | 案件一覧画面へ遷移 |
### 画面遷移
- 案件編集画面(SC006)
- 削除確認画面(SC008)
- 案件一覧画面(SC004)
## 8. 削除確認画面
### 画面基本情報
- 画面ID: SC008
- 画面名: 削除確認画面
- 概要: 削除対象の確認、ソフトデリート実行
### 入力項目
なし
### 表示項目
| 項目名 | 型 | 表示形式 | データソース |
|--------|-----|----------|--------------|
| 確認メッセージ | テキスト | 警告 | "以下の案件を削除しますか？" |
| プロジェクト名 | テキスト | 強調表示 | projects.name |
| 概要 | テキスト | 本文 | projects.description（先頭100文字） |
### アクション
| アクション | トリガー | 処理内容 |
|-----------|---------|----------|
| 削除実行 | 削除ボタンクリック | is_deleted=true、deleted_at記録 |
| キャンセル | キャンセルボタンクリック | 元の画面へ戻る |
### 画面遷移
- 削除成功時: 案件一覧画面(SC004)
- キャンセル時: 呼び出し元画面
## 9. ダッシュボード画面
### 画面基本情報
- 画面ID: SC009
- 画面名: ダッシュボード画面
- 概要: スキルサマリー表示、経験レベル可視化
### 入力項目
なし
### 表示項目
| 項目名 | 型 | 表示形式 | データソース |
|--------|-----|----------|--------------|
| 総案件数 | 数値 | カード | projects COUNT |
| 進行中案件数 | 数値 | カード | end_date IS NULL COUNT |
| 使用技術数 | 数値 | カード | DISTINCT technologies COUNT |
| 経験年数 | 数値 | カード | MIN(start_date)から計算 |
| スキルチャート | グラフ | レーダーチャート | カテゴリ別技術使用頻度 |
| 技術ワードクラウド | グラフ | ワードクラウド | technologies使用頻度（project_technologies COUNT）|
| 最近の案件 | リスト | カード×5 | projects ORDER BY updated_at |
### アクション
| アクション | トリガー | 処理内容 |
|-----------|---------|----------|
| 案件一覧へ | リンククリック | 案件一覧画面へ遷移 |
| スキル一覧へ | リンククリック | スキル一覧画面へ遷移 |
| 案件詳細へ | カードクリック | 案件詳細画面へ遷移 |
| 技術詳細へ | ワードクラウド内の技術名クリック | スキル詳細画面(SC011)へ遷移 |
### 画面遷移
- 案件一覧画面(SC004)
- スキル一覧画面(SC010)
- 案件詳細画面(SC007)
- スキル詳細画面(SC011)
### 技術ワードクラウドの実装仕様
**使用ライブラリ**: vuewordcloud (npm)
**表示仕様**:
- 文字サイズ: 使用案件数に比例（5段階）
- 10件以上: 最大サイズ
- 7-9件: 大サイズ
- 4-6件: 中サイズ
- 2-3件: 小サイズ
- 1件: 最小サイズ
- 表示技術数: 上位20件まで
**色分け（技術カテゴリ別）**:
- フロントエンド: 青系（#3B82F6）
- バックエンド: 緑系（#10B981）
- インフラ: 紫系（#8B5CF6）
- データベース: オレンジ系（#F59E0B）
- その他: グレー系（#6B7280）
**インタラクション**:
- ホバー時: ツールチップで「技術名: 使用案件数○件」を表示
- クリック時: スキル詳細画面（SC011）へ遷移
- アニメーション: フェードインエフェクト
## 10. スキル一覧画面
### 画面基本情報
- 画面ID: SC010
- 画面名: スキル一覧画面
- 概要: 技術カテゴリ別グルーピング、⭐レベル表示
### 入力項目
| 項目名 | 型 | 必須 | 最大文字数 | その他バリデーション | 初期値 | DBカラム |
|--------|-----|------|------------|-------------------|--------|----------|
| カテゴリフィルタ | セレクト | - | - | マスタから選択 | 全て | - |
| ソート順 | セレクト | - | - | 使用回数順/名前順/最終使用日順 | 使用回数順 | - |
### 表示項目
| 項目名 | 型 | 表示形式 | データソース |
|--------|-----|----------|--------------|
| 技術名 | テキスト | リンク | technologies.name |
| カテゴリ | タグ | 色分け | technologies.category |
| 使用案件数 | 数値 | バッジ | project_technologies COUNT |
| 経験レベル | アイコン | ⭐×1〜5 | 使用期間から算出 |
| 最終使用日 | テキスト | 相対時間 | MAX(projects.end_date) |
### アクション
| アクション | トリガー | 処理内容 |
|-----------|---------|----------|
| 詳細表示 | 技術名クリック | スキル詳細画面へ遷移 |
| フィルタ適用 | 選択変更 | 表示内容を更新 |
### 画面遷移
- スキル詳細画面(SC011)
## 11. スキル詳細画面
### 画面基本情報
- 画面ID: SC011
- 画面名: スキル詳細画面
- 概要: 技術別使用案件一覧、経験統計情報表示
### 入力項目
なし
### 表示項目
| 項目名 | 型 | 表示形式 | データソース |
|--------|-----|----------|--------------|
| 技術名 | テキスト | 見出し | technologies.name |
| カテゴリ | タグ | 色分け | technologies.category |
| 総使用期間 | テキスト | X年Yヶ月 | 案件期間の合計 |
| 使用案件数 | 数値 | 大きめ表示 | project_technologies COUNT |
| 使用案件リスト | テーブル | 時系列 | projects（関連のみ） |
| 同時使用技術 | タグクラウド | 頻度別サイズ | 共起する技術TOP10 |
### アクション
| アクション | トリガー | 処理内容 |
|-----------|---------|----------|
| 案件詳細へ | 案件名クリック | 案件詳細画面へ遷移 |
| タイムライン表示 | ボタンクリック | スキルタイムライン画面へ遷移 |
| 戻る | 戻るボタンクリック | スキル一覧画面へ遷移 |
### 画面遷移
- 案件詳細画面(SC007)
- スキルタイムライン画面(SC012)
- スキル一覧画面(SC010)
## 12. スキルタイムライン画面
### 画面基本情報
- 画面ID: SC012
- 画面名: スキルタイムライン画面
- 概要: 経験の時系列グラフ表示、案件の重なり可視化
### 入力項目
| 項目名 | 型 | 必須 | 最大文字数 | その他バリデーション | 初期値 | DBカラム |
|--------|-----|------|------------|-------------------|--------|----------|
| 表示期間 | レンジ | - | - | 開始〜終了の期間指定 | 全期間 | - |
| 技術選択 | マルチセレクト | - | - | 最大10個まで選択可 | 現在の技術 | - |
### 表示項目
| 項目名 | 型 | 表示形式 | データソース |
|--------|-----|----------|--------------|
| タイムライン | グラフ | ガントチャート風 | projects期間 |
| 案件バー | 横棒 | 色分け | projects（技術使用案件） |
| 期間軸 | 軸 | 年月表示 | - |
| 凡例 | リスト | 技術名と色 | 選択された技術 |
### アクション
| アクション | トリガー | 処理内容 |
|-----------|---------|----------|
| 案件詳細へ | バークリック | 案件詳細画面へ遷移 |
| 期間変更 | スライダー操作 | グラフ再描画 |
| 技術追加 | セレクト選択 | グラフに追加表示 |
### 画面遷移
- 案件詳細画面(SC007)
## 13. プロフィール設定画面
### 画面基本情報
- 画面ID: SC013
- 画面名: プロフィール設定画面
- 概要: ユーザー情報の編集、アカウント設定
### 入力項目
| 項目名 | 型 | 必須 | 最大文字数 | その他バリデーション | 初期値 | DBカラム |
|--------|-----|------|------------|-------------------|--------|----------|
| ユーザー名 | テキスト | ◯ | 255 | - | 現在値 | users.name |
### 表示項目
| 項目名 | 型 | 表示形式 | データソース |
|--------|-----|----------|--------------|
| メールアドレス | テキスト | 読み取り専用 | users.email |
| GoogleID | テキスト | 読み取り専用 | users.google_id |
| プロフィール画像 | 画像 | アバター | users.avatar_url |
| 登録日時 | テキスト | 日時 | users.created_at |
### アクション
| アクション | トリガー | 処理内容 |
|-----------|---------|----------|
| 保存 | 保存ボタンクリック | ユーザー情報更新 |
| キャンセル | キャンセルボタンクリック | ダッシュボードへ遷移 |
### 画面遷移
- 成功時: ダッシュボード画面(SC009)
- キャンセル時: ダッシュボード画面(SC009)
## 14. 404エラー画面
### 画面基本情報
- 画面ID: SC014
- 画面名: 404エラー画面
- 概要: ページが見つからない場合の表示
### 入力項目
なし
### 表示項目
| 項目名 | 型 | 表示形式 | 備考 |
|--------|-----|----------|------|
| エラーコード | テキスト | 大文字 | "404" |
| メッセージ | テキスト | 見出し | "ページが見つかりません" |
| 説明文 | テキスト | 本文 | "お探しのページは存在しないか、移動した可能性があります" |
### アクション
| アクション | トリガー | 処理内容 |
|-----------|---------|----------|
| ホームへ戻る | ボタンクリック | ダッシュボード画面へ遷移 |
### 画面遷移
- ダッシュボード画面(SC009)
## 15. 500エラー画面
### 画面基本情報
- 画面ID: SC015
- 画面名: 500エラー画面
- 概要: サーバーエラー時の表示
### 入力項目
なし
### 表示項目
| 項目名 | 型 | 表示形式 | 備考 |
|--------|-----|----------|------|
| エラーコード | テキスト | 大文字 | "500" |
| メッセージ | テキスト | 見出し | "サーバーエラー" |
| 説明文 | テキスト | 本文 | "申し訳ございません。サーバーでエラーが発生しました" |
### アクション
| アクション | トリガー | 処理内容 |
|-----------|---------|----------|
| リロード | ボタンクリック | ページ再読み込み |
| ホームへ戻る | ボタンクリック | ダッシュボード画面へ遷移 |
### 画面遷移
- ダッシュボード画面(SC009)
個人プロジェクトでの実践結果
私が個人プロジェクトでAgenticCodingを3ヶ月実践した結果：
- ドキュメント作成時間が体感で75%短縮
- 特に効果的だったのは、markdown形式での要件定義
- AIへの指示が明確になり、手戻りが激減
この経験から、チーム開発でも同様の効果が期待できると考えています。
ただ、これをチーム開発で実践しようと思うといくつかの課題を発見しました。
実践に向けた課題
より効率的に「AIと協働」「AIの自働化」を実現するためには？
- AgenticCordingは確かに強力
- 活用するためには、適切な準備と運用が必要
- 効率化と、品質保証・リスク管理をどう両立させるか考える必要がある
- 個人実践なら暗黙的な自分ルールがあった
- チームで実践するには一定の作成基準・ドキュメントイメージの可視化が必要
実践に向けた準備事項
より効率的に「AIと協働」「AIの自働化」を実現するためには
- 作業スピードが速いだけで、処理コストは人間と同じ
- AI活用するからといって、根本的なプロジェクトの進行フローは変わらない
- 設計を行い、指示しやすい、理解させやすいタスク分解・タスクマネジメントを行う
- ClaudeCodeをより効率的に使用できるよう基盤を準備
- ドキュメントをなるべくソースベースに近い場所へ配置
- チームのナレッジを逐次ClaudeCodeに反映し、「自働化」を支援
安全に、そして、品質を向上するために
3つのレイヤーで、一定の品質を担保しつつ、outputを高速化させる
（＝「ガードレールの整備」、と認識している）
- 予防層
- 権限管理で危険な操作を制限
- 機密情報を除外する設定
- 検証層（AIエージェントによる生成後）
- 自動lint/テストでコード品質を担保
- 機密情報が含まれていないかチェックし、漏洩防止
- CI整備。自動検証できる環境を整備
- 確認層（人間判断）
- 成果物ベースの効率的なレビュー
- storybookやプレビュー環境など
- 成果物ベースの効率的なレビュー
保守・運用に際してAIエージェントとの向き合い方
ドキュメントを常に最新に
- AIエージェントの理解となるドキュメントがあって、その生成結果のソースコードがある
- 何らかの仕様変更、あるいは、機能開発を行った場合は、ドキュメントも最新にする
AIの思考の基盤となるドキュメント群を常に最新に保つことが、システムの健全性を維持する
「Agentic Cording」という進め方への理解
- 生成された成果物は、「人間」の代わりに作業した結果であることを理解
最終的なプロダクトの品質や、責任は「人間」にあることを常に意識する
（＝AI特性を理解し、自己解決能力（AIが出力したコードの意図や副作用を自分で理解・修正できる力）も大切！）
まとめ
AgenticCordingを進めてみて、
どういう形で進めていけばいいのか、朧げながら形が見えてきたように感じます。
AgenticCordingは開発プロセスを根本から変えるものでないにせよ、変化は生じてくるでしょう。
ただ単純に「AIに任せる」ことのではなく、「AIと協働する」心構え・仕組みづくりが肝心ですね。
これを実践して、何が発見できるのか、どの程度プロジェクトで効率が上がるか変化を楽しみたいと感じます
この記事が、AgenticCoding導入を検討している方の参考になれば幸いです。
実践された方は、ぜひ結果を共有してください！
参考資料