Accenture Japan (有志)
📱

【Claude Codeチャレンジ日誌5】Claude-Code SDK×Djangoで実現！AIがWebアプリを自動拡張する未来

shinya.hara
に公開
Django
Python
sdk
Claude Code
tech

はじめに

こんにちは！Claude Code チャレンジ日誌第5弾です。

今回は、Claude-Code SDK（Python）とDjangoを組み合わせて、WebアプリケーションにClaude-Codeを組み込んでみました。

🎯 今回試したこと

  1. Django × Claude-Code SDKでAIチャットアプリを構築
  2. Webアプリ内からClaude-Codeに指示を出してページを自動生成

🚀 実際に試してみた！AIによるページ自動生成

デモの内容

ClaudeCodeを搭載したWebアプリ上で以下の指示を投げてみました：

以下は、それぞれひよことうさぎのAIエージェントが執筆しているNote記事です。
この二人を魅力的に紹介するDjangoのWEBページを1画面作成してください。
作成したWEBページは、画面の[AI Chat」の右側にリンクボタンを配置して、クリックしたら画面遷移できるようにしてください。

Claude-Codeが自動的に以下を処理：

  1. ✅ リンクサイトを分析して画面構成を考える
  2. ✅ 新しいDjangoビューを作成
  3. ✅ HTMLテンプレートを生成
  4. ✅ URLルーティングを追加
  5. ✅ ナビゲーションにリンクボタンを配置

出来上がったWEBページ

実際に依頼した際のデモ動画

https://youtu.be/x37uYFz1K6Q

🏗️ アーキテクチャ概要

システム構成

claude-sdk-tutorial/
├── chat/                    # メインアプリケーション
│   ├── models.py           # データベースモデル
│   ├── views.py            # ビジネスロジック  
│   ├── claude_service.py   # Claude-Code SDK統合
│   └── templates/          # HTMLテンプレート
├── config/                 # Django設定
└── static/                 # CSS/JavaScript

データフロー図解

シンプルな流れ：

  1. ユーザーがWebアプリでメッセージ入力
  2. DjangoがClaude-Code SDKにAI処理を依頼
  3. AIの応答をリアルタイムでブラウザに配信
  4. 会話履歴はデータベースに保存

🔧 Claude-Code SDK統合の仕組み

1. Claude Service（実際のコア実装）

Claude Service（実際のコア実装）
# chat/claude_service.py の主要部分
from claude_code_sdk import query
from claude_code_sdk.types import ClaudeCodeOptions

class DetailedClaudeService:
    async def stream_chat_with_logs(self, message: str):
        """詳細ログ付きストリーミングチャット"""
        
        # Claude-Code SDK 設定
        options = ClaudeCodeOptions(
            permission_mode="bypassPermissions"  # 自動承認モード
        )
        
        # Claude-Code SDKからのストリーミング応答処理
        response_generator = query(prompt=message, options=options)
        
        async for response in response_generator:
            # レスポンスタイプ別に処理
            response_type = type(response).__name__
            
            if response_type == 'AssistantMessage':
                # AI応答テキストを抽出して送信
                content = self._extract_content(response)
                yield {
                    'type': 'assistant_message',
                    'content': content,
                    'icon': '🤖'
                }
            elif response_type == 'SystemMessage':
                # 処理状況を通知
                yield {
                    'type': 'status',
                    'content': '考えています...',
                    'icon': '🧠'
                }

2. Django Viewでのストリーミング実装

2. Django Viewでのストリーミング実装
# chat/detailed_views.py
from django.http import StreamingHttpResponse

async def detailed_streaming_api(request):
    """Server-Sent Eventsでリアルタイム配信"""
    
    message = json.loads(request.body).get('message')
    
    # StreamingHttpResponseでSSE配信
    response = StreamingHttpResponse(
        detailed_stream_generator(message, session_id),
        content_type='text/event-stream'
    )
    
    # キャッシュ無効化とバッファリング無効化
    response['Cache-Control'] = 'no-cache'
    response['X-Accel-Buffering'] = 'no'
    
    return response

async def detailed_stream_generator(message, session_id):
    """ストリーミングジェネレーター"""
    
    # セッション管理とメッセージ保存
    session = await get_or_create_demo_session(session_id, message)
    
    # Claude-Code SDKからのストリーミング
    async for log_entry in claude_service.stream_chat_with_logs(message):
        # Server-Sent Events形式で送信
        yield f'data: {json.dumps(log_entry)}\n\n'

3. フロントエンドでのEventSource実装

3. フロントエンドでのEventSource実装
// static/js/chat.js
function streamMessage(message) {
    const eventSource = new EventSource('/api/detailed-stream/');
    
    eventSource.onmessage = (event) => {
        const data = JSON.parse(event.data);
        
        if (data.type === 'assistant_message') {
            // AI応答をリアルタイム表示
            appendToMessage(data.content);
        } else if (data.type === 'status') {
            // 処理状況を表示
            showStatus(data.content);
        }
    };
}

🤔 考察と今後の可能性

良かった点

開発効率の劇的向上：自然言語でページ追加ができる

課題と注意点

  1. 権限管理：本番環境では厳格な権限管理が必須
  2. コード検証：生成されたコードのレビューは必要
  3. セキュリティ：任意のコード実行リスクへの対策

未来への展望：実装手順書駆動開発の時代へ

今回の実験で感じたのは、AIエージェント機能を標準搭載したWebアプリが当たり前になる未来です。

🚀 これからの開発フロー

想像してみてください。機能追加や改修作業が、こんな風に変わる世界を：

  1. 実装手順書の準備

    ## ユーザー管理機能の追加

### 要件
- ユーザー登録・ログイン機能
- プロフィール編集
- パスワードリセット

### 実装詳細
1. Djangoの認証システムを使用
2. メール認証を実装
3. ソーシャルログイン対応

  2. AIエージェントに投入

    「この実装手順書に従って機能を追加して」

  3. 自動実装と確認

    • AIがコードを生成
    • テストを実行
    • プルリクエストを作成

🔮 実装手順書駆動開発のメリット

  • 仕様の明文化：実装前に要件が整理される
  • 再現性：同じ手順書で何度でも実装可能
  • 知識の共有：手順書がドキュメントとして残る
  • 品質の均一化：AIが規約に沿ったコードを生成

🌐 さらなる未来

もしかすると、近い将来こんなことも：

# app-config.yaml
features:
  - name: "ダークモード"
    implementation: "auto"
    priority: "high"
    
  - name: "多言語対応"
    languages: ["ja", "en", "zh"]
    implementation: "auto"
    
  - name: "決済機能"
    provider: "stripe"
    implementation: "guided"  # 人間の確認が必要

このような設定ファイルを用意するだけで、AIエージェントが必要な機能を順次実装していく...そんな世界がすぐそこまで来ているのかもしれません。

開発者の役割の変化

このような未来において、開発者の役割は：

  1. アーキテクト：システム全体の設計
  2. キュレーター：AIが生成したコードの品質管理
  3. イノベーター：新しい価値の創造に集中

つまり、**「コードを書く」から「何を作るか考える」**へのシフトが加速するでしょう。

🎬 まとめ

Claude-Code SDK × Djangoの組み合わせは、AIアシスタント機能をWebアプリに統合する強力な手段です。特に、AIが自分自身のWebアプリを拡張できるという点は、開発の概念を変える可能性を秘めています。

ただし、大いなる力には大いなる責任が伴います。セキュリティとコード品質の管理は、これまで以上に重要になるでしょう。

📚 参考リンク

Claude Codeチャレンジは続きます！次回もお楽しみに👋

Accenture Japan (有志)
Accenture Japan (有志)

アクセンチュア株式会社に所属する社員有志による運営です。アクセンチュアの社員による様々な発信をまとめています。なお、投稿内容は社員個人の見解であり、所属する組織を代表するものではありません。

Discussion