Claude ProでClaude Codeを使う
2025.06.05
Claude ProでClaude Codeを使うことができるみたいなので、やってみました！
準備
Claude Codeのインストールをする
$ npm install -g @anthropic-ai/claude-code
claudeを起動する
$ claude
サブスクリプションで使用する場合は1を選択する
ログインをして、サブスクリプションを契約していない場合はこの画面が出るので、Proにアップグレードします。
Proプランをサブスクリプションしていると接続の承認を聞かれるので、承認しましよう。
コード改修
自分のブログを改修してみることにします。
hajimemath.com
以前GitHub Copilot Agentで改修しようとして、うまくいかなかったastroのページネーションを行ってみます。
指示を与えてみると、Todoをリストアップしてステップバイステップで改修を行っています。
> 記事一覧ページで6件ごとにページネーションしたい
⏺ 記事一覧ページに6件ごとのページネーション機能を実装します。
⏺ Update Todos
⎿ ☐ 現在のindex.astroページの構造を確認
☐ microCMSから記事データ取得部分を調査
☐ Astroのページネーション機能を実装
☐ 動的ルーティングでページ番号を処理
☐ ページネーションUIコンポーネントを作成
⏺ Update Todos
⎿ ☐ 現在のindex.astroページの構造を確認
☐ microCMSから記事データ取得部分を調査
☐ Astroのページネーション機能を実装
☐ 動的ルーティングでページ番号を処理
☐ ページネーションUIコンポーネントを作成
⏺ Read(src/pages/index.astro)
⎿ Read 104 lines (ctrl+r to expand)
⏺ Read(src/library/microcms.ts)
⎿ Read 60 lines (ctrl+r to expand)
.
.
.
改修が終わるとどのような修正を行ったかを教えてくれます。
⏺ 6件ごとのページネーション機能が正常に実装されました。
- index.astro: 最初の6件を表示し、ページネーションUIを追加
- /page/[page].astro: 2ページ目以降の動的ルーティング
- ビルド成功：/page/1/ と /page/2/ のページが生成されました
現在10件の記事があるため、2ページ構成になっています。
localの状況を確認すると、ページネーションが実装されていて、しかもカードのデザインといい感じに合っているUIでページネーションボタンを実装してくれています。
CLAUDE.mdについて
claude code で/initを実行すると、プロジェクトコードを読み込んで、CLAUDE.mdを出力してくれます。
自動的にREADMEファイルみたいなものを出力してくれます。
https://github.com/hajimasa/portfolio_blog/blob/main/CLAUDE.md
また、CLAUDE.mdにアプリケーション仕様を記述することで、アプリケーションを開発することができるみたいです。
アプリケーションを作成してみるコスト感
自転車のレビューサイトを作ってみたかったので、以下の機能をclaudeと話し合いながら決めていきました。
# 自転車パーツレビューサイト仕様書
## プロジェクト概要
自転車パーツのレビューサイトをLaravelで開発する。初心者からプロまで幅広いユーザーを対象とし、パーツの詳細なレビューとアフィリエイト機能を持つプラットフォーム。
## 技術スタック
- **Backend**: Laravel (PHP)
- **Database**: Supabase PostgreSQL
- **Storage**: Supabase Storage
- **Authentication**: Supabase Auth (Google SSO)
- **Hosting**: Railway
- **Development**: Docker
- **Image Processing**: WebP変換
## 基本機能要件
### 自転車カテゴリ
- ロードバイク
- クロスバイク
- グラベルバイク
- マウンテンバイク
- シティサイクル
- 管理画面でカテゴリの追加・削除が可能
### パーツカテゴリ
- 2階層構造：自転車カテゴリ → パーツカテゴリ
- 例：ロードバイク → ホイール、マウンテンバイク → ホイール
- 細分化された分類を採用
### ユーザー機能
- **認証**: Google SSO必須（Supabase Auth使用）
- **プロフィール**: ユーザー情報表示、投稿履歴
- **フォロー機能**: ユーザー同士のフォロー
- **権限**: 会員登録必須、ゲストはレビュー不可
### レビュー機能
- **評価**: 5段階星評価 + テキストレビュー
- **画像**: 最大5枚、10MB制限、WebP変換
- **いいね機能**: レビューに対するいいね（返信機能は不要）
- **商品登録**: ユーザーがレビュー投稿時に商品名を入力してデータ蓄積
- **重複商品**: 同じ商品名でも別商品として扱う
- **表記ゆれ**: 特に対策しない
### 管理機能
- レビューの非表示機能のみ
- アフィリエイトID設定機能
### アフィリエイト機能
- Amazon Product Advertising API使用
- 商品名での自動検索・リンク生成
- 管理画面からアフィリエイトID登録
## データベース設計
### users（ユーザー）
```sql
- id (UUID, Primary Key)
- email (String, Unique)
- name (String)
- avatar_url (String, nullable)
- google_id (String, Unique)
- created_at, updated_at
```
### bike_categories（自転車カテゴリ）
```sql
- id (Primary Key)
- name (String) -- ロードバイク、マウンテンバイク等
- slug (String, Unique)
- is_active (Boolean)
- created_at, updated_at
```
### part_categories（パーツカテゴリ）
```sql
- id (Primary Key)
- name (String) -- ホイール、フレーム等
- bike_category_id (Foreign Key)
- slug (String)
- is_active (Boolean)
- created_at, updated_at
```
### products（商品）
```sql
- id (Primary Key)
- name (String) -- 商品名（ユーザー入力）
- part_category_id (Foreign Key)
- created_at, updated_at
```
### reviews（レビュー）
```sql
- id (Primary Key)
- user_id (UUID, Foreign Key)
- product_id (Foreign Key)
- rating (Integer, 1-5)
- title (String)
- content (Text)
- is_visible (Boolean, default: true) -- 管理者による非表示機能
- created_at, updated_at
```
### review_images（レビュー画像）
```sql
- id (Primary Key)
- review_id (Foreign Key)
- image_path (String) -- Supabase Storage内のパス
- image_url (String) -- 公開URL
- order (Integer) -- 表示順序
- created_at, updated_at
```
### user_follows（フォロー関係）
```sql
- id (Primary Key)
- follower_id (UUID, Foreign Key) -- フォローする人
- following_id (UUID, Foreign Key) -- フォローされる人
- created_at
- UNIQUE(follower_id, following_id)
```
### review_likes（レビューいいね）
```sql
- id (Primary Key)
- user_id (UUID, Foreign Key)
- review_id (Foreign Key)
- created_at
- UNIQUE(user_id, review_id)
```
## 開発環境・インフラ
### 開発環境
- Docker Compose
- Laravel Sail推奨
- ローカル開発用PostgreSQL
### 本番環境
- **App**: Railway
- **Database**: Supabase PostgreSQL
- **Storage**: Supabase Storage
- **Auth**: Supabase Auth
### Supabase設定項目
1. **Authentication**
- Google OAuth設定
- RLS（Row Level Security）設定
2. **Storage**
- レビュー画像用Bucket作成
- 画像アップロード制限設定（10MB）
3. **Database**
- 上記テーブル作成
- RLSポリシー設定
## 実装優先順位
1. **プロジェクト初期設定**
- Laravel + Docker環境構築
- Supabase接続設定
2. **認証システム**
- Google SSO実装
- ユーザープロフィール機能
3. **カテゴリ管理**
- 自転車・パーツカテゴリCRUD
- 管理画面
4. **レビュー機能**
- 商品登録機能
- レビュー投稿・表示
- 画像アップロード・WebP変換
5. **ソーシャル機能**
- フォロー機能
- いいね機能
6. **アフィリエイト機能**
- Amazon PA API実装
- 自動リンク生成
7. **管理機能**
- レビュー非表示機能
- アフィリエイトID設定
## 技術的注意事項
- PostgreSQL使用のためLaravel設定を適切に変更
- Supabase RLSを活用したセキュリティ設定
- 画像処理ライブラリ（Intervention Image等）でWebP変換
- Amazon PA API利用のための適切なエラーハンドリング
- レスポンシブデザイン対応
## 今後の拡張可能性
- レビュー検索・フィルタリング機能
- 通知機能（フォローユーザーの新レビューなど）
- レビューの並び順変更（新着、人気、評価順など）
- パーツの価格比較機能
- ユーザーランキング機能
この仕様を元にclaude codeにお願いしたところ、このようなtodoを作成して作業を進めてくれています。
⏺ Update Todos
⎿ ☒ プロジェクト初期設定 - Laravel + Docker環境構築
☒ Supabase接続設定
☒ Supabaseクライアントライブラリインストール
☒ 認証システム - Google SSO実装
☒ ユーザープロフィール機能
☒ カテゴリ管理 - 自転車・パーツカテゴリCRUD
☒ 管理画面作成
☒ レビュー機能 - 商品登録機能
☒ レビュー投稿・表示機能
☒ 画像アップロード・WebP変換機能
☒ ソーシャル機能 - フォロー機能
☒ いいね機能
☒ Amazon PA API Laravelパッケージインストール
☒ アフィリエイト設定データベーステーブル作成
☒ Amazon PA APIサービスクラス作成
☒ 商品自動検索機能実装
☒ アフィリエイトリンク表示機能
☒ 管理画面アフィリエイト設定機能
ほぼ全てうまくできているのですが、 ./vendor/bin/sail up -d だけパスの関係で実行できていませんでした。
かかったコスト
┌──────────────┬──────────────┬──────────────┬──────────────┬──────────────┬──────────────┬────────────┐
│ Date │ Input │ Output │ Cache Create │ Cache Read │ Total Tokens │ Cost (USD) │
├──────────────┼──────────────┼──────────────┼──────────────┼──────────────┼──────────────┼────────────┤
│ 2025-06-06 │ 504 │ 79,421 │ 592,130 │ 19,391,610 │ 20,063,665 │ $9.23 │
このアプリケーションを作成するためにかかったコストは大体$9.23になっています。
人間に頼んだら$10じゃあ無理だと思うので、格安でやってくれます。