目次みたいな
2部構成で、
最初に結論を話してあとは苦労話が続く
- cc-sddについて簡単な説明
- 実際にWebアプリ作る工程を説明
cc-sdd is 何？
- 日本製の仕様駆動開発(sdd)ツール
- claude codeやgeminiに対応
- 仕様書が日本語で出力されるから読みやすいぞ
私 is 誰？
- Calude Code Proに課金中
- Kiroは気になるけど課金に躊躇している
- 今の状態でも使えるKiroライクなツールがあると聞いて使ってみた
使ったみた感想
よかった点
- 次に何を命令すればよいか明確
- 雑な仕様でもくみ取ってくれる
つらい点
- エントリークラスで課金してるとすぐリミットに到達する
- 月n万円の課金しないとストレスかも
- GeminiとClaudeどちらも使って実装してもどっちも上限に達した
ここから使い方と実装
インストール手順
- 環境
- OS: Ubuntu 24.04.3 LTS on WSL2
- Node.js: v24.11.0
Claude Codeの場合
npx cc-sdd@latest --lang ja
Geminiの場合
npx cc-sdd@latest --gemini --lang ja
ここで「--lang ja」を指定するの忘れると日本語で出してくれない
作りたかったもの
- 部活動のイベント募集アプリ
- イベントで人を集めるためのアプリあったら素敵やん
- FacebookとかLINEとかで募集している人もいるけど、使いづらい
- 社内限定とかにしても良い
- 難易度としてもそこまで高くなかろうと思った
何が必要か
イベント募集アプリを作るにあたっては最低限以下の機能が必要
- ユーザ登録機能
- ログイン機能
- イベント登録機能
- イベント参加機能
まずはプロジェクトを学習
/kiro:steering
README.mdや階層なんかをみて学習してくれる。
こんなのを生成する。
.kiro
└── steering
├── product.md <--- プロダクト概要
├── structure.md <--- ディレクトリの説明
└── tech.md <--- テックスタックとか
以下、補足
先にREADME.mdを雑でいいので書いておくといい。
それもClaudeCodeに書かせてしまう。
README.mdを書いてください
部活動のイベント募集用のプラットフォームです
- Pythonでつくる
- poetryで仮想環境を作成
- Djangoフレームワークを使用する
主要機能
- ユーザ登録機能
- ログイン機能
- イベント登録機能
- イベント参加機能
これでできたREADME.mdを読ませて作ったsteering/product.mdはこちら
product.md
# Product Overview
## Product Description
**km-club-hub** は、様々なクラブ活動の募集情報を掲載し、興味のある人が簡単に参加申込できるWebプラットフォームです。スポーツ、文化、趣味など、あらゆる種類のクラブ活動の情報を一元管理し、新しいメンバーとクラブをつなげます。
Kiro スタイルの仕様駆動開発を採用し、Claude Code を活用した構造化された開発プロセスで実装されます。
## Core Features
### クラブ活動管理機能
- **クラブ募集投稿**
- 募集情報の作成・編集・削除
- クラブのカテゴリ分類（スポーツ、文化、趣味など）
- 活動内容、日時、場所の詳細情報
- 画像アップロード機能
- **参加申込機能**
- クラブへの参加申込
- 申込状況の確認
- 申込者管理（クラブオーナー向け）
- **検索・フィルタリング**
- カテゴリ別検索
- キーワード検索
- 地域・日時でのフィルタリング
### ユーザー管理機能
- **ユーザー登録・認証**
- 会員登録（メールアドレス認証）
- ログイン/ログアウト
- プロフィール管理
## Target Use Case
### 主要なユースケース
1. **クラブ活動の主催者**
- 新しいメンバーを募集したいクラブオーナー
- 活動内容を広く告知し、適切なメンバーを集めたい
- 申込者を効率的に管理したい
2. **クラブ活動の参加者**
- 興味のあるクラブ活動を探している人
- 自分の好みや条件に合ったクラブを見つけたい
- 簡単に参加申込をしたい
3. **不特定多数のユーザー**
- 登録なしでクラブ情報を閲覧（一部機能）
- 気になる活動があれば会員登録して参加
- スポーツ、文化、趣味など多様な活動を探索
## Key Value Proposition
### ユニークな利点
1. **一元的なクラブ活動プラットフォーム**
- あらゆる種類のクラブ活動を一箇所で管理
- カテゴリ分類で目的の活動を素早く発見
- 募集から参加申込までワンストップで完結
2. **簡単な募集投稿と申込プロセス**
- 直感的なインターフェースで募集情報を作成
- 画像付きで魅力的に活動内容を紹介
- シンプルな申込フローで参加障壁を低減
3. **効率的な申込者管理**
- クラブオーナーは申込者を一元管理
- 申込状況の可視化
- 参加者とのスムーズなコミュニケーション
4. **柔軟な検索とフィルタリング**
- 多様な検索条件で最適なクラブを発見
- 地域、日時、カテゴリでの絞り込み
- キーワード検索で素早く目的の活動にアクセス
5. **オープンなプラットフォーム**
- 不特定多数のユーザーが利用可能
- 誰でも気軽にクラブ活動を始められる
- 地域コミュニティの活性化に貢献
## Development Approach
このプロジェクトは Kiro スタイルの仕様駆動開発で構築されています：
- Claude Code による AI 支援開発
- 段階的な要件定義と設計承認プロセス
- ドキュメント駆動の開発ワークフロー
- 高品質でメンテナンス可能なコードベース
ユーザ登録とログイン機能を作成してみよう
Claude Codeで以下のコマンドを実行してユーザ登録やログインを作成していく
-
/kiro:spec-init "ユーザ認証機能": 初期化 -
/kiro:spec-requirements user-authentication: 要件定義 -
/kiro:spec-design user-authentication: 設計ドキュメント作成 -
/kiro:spec-tasks user-authentication: タスク生成 -
/kiro:spec-impl user-authentication [task-numbers]: 実装実行
/kiro:spec-init "ユーザ認証機能" : 初期化
実行するとできるもの
.kiro
├── specs
│ └── user-authentication <--- 各機能のディレクトリが作成
│ ├── requirements.md <--- 要件定義のテンプレ
│ └── spec.json <--- 仕様メタデータ
└── steering
├── product.md
├── structure.md
└── tech.md
/kiro:spec-requirements user-authentication : 要件定義
このコマンドで要件定義を作ってくれる。
問題あれば追加でエージェントに相談、もしくは「requirements.md」を手動更新する
問題なければ承認するためのコマンドを入力 /kiro:spec-design [機能名] -y
こんな感じのを作ってくれる。わかりやすい。
requirements.md
## Requirements
### Requirement 1: ユーザー登録機能
**Objective:** ユーザーとして、メールアドレスとパスワードでアカウントを作成できるようにしたい。そうすることで、クラブの募集投稿や参加申込などのサービスを利用できる。
#### Acceptance Criteria
1. WHEN 未登録ユーザーが登録フォームにアクセスする THEN km-club-hub SHALL 登録フォームページを表示する
2. WHEN ユーザーが有効なメールアドレス、パスワード、パスワード確認を入力して登録ボタンをクリックする THEN km-club-hub SHALL 新しいユーザーアカウントを作成する
3. WHEN ユーザーアカウントが作成される THEN km-club-hub SHALL 登録したメールアドレスに確認メールを送信する
4. IF メールアドレスが既に登録済みである THEN km-club-hub SHALL エラーメッセージを表示し、登録を拒否する
5. IF パスワードが8文字未満である THEN km-club-hub SHALL 「パスワードは8文字以上必要です」というエラーメッセージを表示する
6. IF パスワードとパスワード確認が一致しない THEN km-club-hub SHALL 「パスワードが一致しません」というエラーメッセージを表示する
7. WHEN ユーザーがメール内の確認リンクをクリックする THEN km-club-hub SHALL メールアドレスを検証済みとしてマークし、ログインページにリダイレクトする
8. IF メール確認リンクが24時間以上経過している THEN km-club-hub SHALL 「確認リンクの有効期限が切れています」というエラーメッセージを表示する
/kiro:spec-design user-authentication : 設計ドキュメント作成
実行するとdesign.mdが作成される
問題なければタスク分解のフェーズへ。
design.md
### 概要
ユーザー認証機能は、km-club-hub のクラブ活動募集サイトにおける基盤となるセキュアな認証・認可システムです。Django の標準認証フレームワークをベースに、メールアドレスベースの登録、ログイン、プロフィール管理、パスワード管理の機能を提供します。
### ビジネス目標
- 不特定多数のユーザーが安全にアカウントを作成・管理できる
- クラブオーナーと参加者を識別し、適切なアクセス制御を実現
- メール認証により信頼性の高いユーザーベースを構築
- セキュアなセッション管理により、共有デバイスでも安全に利用可能
### 技術スタック
- **バックエンド**: Django 4.x + Python 3.11+
- **データベース**: PostgreSQL (本番) / SQLite (開発)
- **認証**: Django 標準認証システム (django.contrib.auth)
- **パスワードハッシュ化**: PBKDF2 (Django デフォルト)
- **フロントエンド**: Django テンプレート + Bootstrap 5
- **メール送信**: Django メールバックエンド (SMTP)
/kiro:spec-tasks user-authentication : タスク生成
チェックリストでタスクが生成される
tasks.md
## 実装計画
### フェーズ1: プロジェクト基盤構築
- [ ] 1. Django プロジェクトとアプリケーションのセットアップ
- [x] 1.0 Poetry による仮想環境のセットアップ
- pipx を使って poetry をインストール（`pipx install poetry`）
- poetry で新規プロジェクトを初期化（`poetry init`）
- poetry で仮想環境を作成
- _Requirements: すべての要件に必要な基盤_
- [x] 1.1 Django プロジェクトの初期化とユーザーアプリの作成
- poetry で Django をインストール（`poetry add django`）
- Django プロジェクト `km_club_hub` を作成
- `users` アプリケーションを作成
- プロジェクト設定ファイルに `users` アプリを登録
- 基本的なディレクトリ構造を確立
- _Requirements: すべての要件に必要な基盤_
/kiro:spec-impl user-authentication [task-numbers] : 実装実行
-
/kiro:spec-impl user-authentication 1<-- タスク1を実行する場合
この場合だとpoetry環境を作ってDjangoをインストールしてくれる。
最後のタスクでテスト実行とかになってるはず。
それができて完了となる。
が、この辺でClaudeCodeのlimitが来てしまう。。。
途中でタスクが止まったとしても、チェックリストから続きを把握してくれるので便利
苦労してできたもの(1)
ユーザ登録画面
苦労してできたもの(2)
プロフィール編集画面
まとめ&どこまで出来たの
思い立って1日でできたのが
- ユーザ登録
- ログイン
イベント登録までは上述のリミットが来て作れなかった。
途中でGeminiに有料プラン（無料期間1か月を利用）に入ったけど、それでもGeminiでリミットが来た。
ClaudeCodeだけで頑張るならKiroで作ったほうがよかったかもしれない。
今度課金して比較してみようと思います。