⚡

Claude Codeでも同じアプリを作ってみた——Clineとの違いはエージェントじゃなかった

に公開
AI
Node.js
Playwright
Cursor
Claude Code
tech

同じお題をClaude Codeで

前回は Clineを試した ので、今回は同じお題を Claude Code でやってみます。ターミナル上で動くAnthropicのAIエージェントです

同じ一文——「画像をアップロードするとプレビューを表示し、AIが自動でキャプションを生成するアプリを作成してください」——を投げて、Clineと何が違うのかを見てみます

事前準備：開発環境を整える

Claudeの契約

Claude AIのサブスクリプションが必要。

  1. https://claude.ai/ からアカウント登録
  2. ProプランまたはMaxプランにアップグレード

料金プラン（2025年6月25日時点）

  • Proプラン：月額 $20（年間契約の場合は月あたり $17）
    • Sonnet 4 が利用可能（Opus 4 は利用不可）
  • Maxプラン：使用量に応じて月額 $100（Proの約5倍）、または $200（Proの約20倍）
    • Sonnet 4 と Opus 4 の両方が利用可能

私はMaxプランを使っていますが、Proプランでも問題なく動きます

参考リンク

環境別セットアップ

Claude Codeの動作要件は環境によって異なる

Windows環境での手順

Windows環境では、WSL（Windows Subsystem for Linux）上で動かす

WSLとUbuntuのセットアップ

WSLが有効になっていることが前提。Claude Codeの動作にはUbuntu 20.04以降が必要。

  1. 管理者権限でPowerShellまたはコマンドプロンプトを開く

  2. Ubuntu-24.04をインストール
    Claude Codeの要件（Ubuntu 20.04以降）を満たすため、最新のUbuntu-24.04を入れる。
    （利用可能なディストリビューションはwsl --list --onlineで確認できる）

    wsl --install -d Ubuntu-24.04

  3. Ubuntuのユーザーアカウントを作成
    インストールが完了すると、デフォルトユーザーの作成を求められる。ユーザー名、パスワードの順に入力。

  4. インストール完了の確認
    入力が完了するとWSL上のUbuntu-24.04が立ち上がる。

    exitでログアウトしてコマンドプロンプトに戻る。再度入る場合はwsl -d Ubuntu-24.04。

  5. curlのインストール
    この後のnvmインストールで使うため、curlを入れておく。

    sudo apt-get install curl

Node.js環境の設定

Claude CodeはNode.js 18以上が必要。

環境別実行方法

  • Windows環境の場合：
    PowerShellまたはコマンドプロンプトでwslコマンドを実行してWSL内のターミナルで以下を実行
  • macOS・Linux環境の場合：
    ターミナルで直接実行
  1. NVM（Node Version Manager）をインストール
    Node.jsのバージョン管理ツール。プロジェクトごとにバージョンを切り替えられる
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
exec $SHELL
  1. Node.jsをインストール
nvm install --lts

Claude Codeのインストールとセットアップ

Claude Codeをインストールする。

インストール

環境別実行方法

  • Windows環境の場合：
    WSLのUbuntu上で実行
  • macOS・Linux環境の場合：
    ターミナルで直接実行
  1. Claude Codeをインストール
npm install -g @anthropic-ai/claude-code
  1. インストール確認
claude --version

バージョンが表示されればOK（2025年7月8日時点の最新は1.0.43）。

認証設定
  1. ログイン開始
claude "/login"
  1. ターミナル表示スタイルを選択
    指示に従ってお好みのスタイルを選ぶ。
    claude_code_display_style_setup.png
  2. 認証方法を選択
    サブスクリプション（ProまたはMaxプラン）を使うので、「1」を選択。
    claude_code_auth_method_selection.png
  3. ブラウザ認証
  • ブラウザが自動起動するので、Anthropicアカウントでログイン
  • ブラウザが起動しない場合は、表示されているURLを直接開く
    claude_code_login_start.png
  • 承認依頼が表示されるので、承認
    claude_code_browser_authorization.jpeg
  1. 認証トークンの入力
  • 承認完了後に表示される認証トークンをコピー
    claude_code_token_display.jpeg
  • ターミナルに戻り、トークンを入力
    claude_code_token_input.png
  1. セットアップ完了
  • 認証が成功したらEnterキーで続行
    claude_code_auth_success.png
  • セキュリティに関する注意事項が表示される。Enterキーで続行
    claude_code_security_notice.png
  • /exitコマンドでClaude Codeを終了
    claude_code_exit.png

これで準備は完了

アプリケーションの作成

前回のClineの記事と同じお題——画像キャプション生成アプリを作る。

プロジェクトの作成

  1. プロジェクトディレクトリを作成
mkdir ai-caption-app-claude
cd ai-caption-app-claude
mkdir tests
  1. テスト用画像の配置
    E2Eテスト用の画像tests/sample.jpgを配置しておく。Playwrightのテストで使う。

Windows環境の場合：WSLのディレクトリは、エクスプローラーのアドレスバーに\\wsl$を入力して開けます。

プロジェクトを開く

Windows環境での手順

  1. Cursor拡張機能をインストール
    拡張機能でCursor Remote WSLを検索してインストール。
    cursor_wsl_extension_install.png
  2. WSLに接続
    Cmd/Ctrl + Shift + Pでコマンドパレットを開き、WSL: Connect to WSL using Distroと入力してUbuntu-24.04を選択。
    cursor_wsl_connect.png
    cursor_ubuntu_selection.png
  3. 接続確認
    接続が成功すると、Cursor左下にWSL: Ubuntu-24.04と表示される。
    cursor_ubuntu_connected.png
  4. プロジェクトディレクトリを開く
    WSL接続が完了したら、Cursorの「Open project」からプロジェクトディレクトリを開く。
    cursor_open_project.png
    先の手順で作成した ai-caption-app-claude ディレクトリを選択。
    cursor_project_directory_selection.png

macOS・Linux環境での手順

macOS・Linux環境では、Cursorで直接プロジェクトディレクトリを開ける。
先の手順で作成した ai-caption-app-claude ディレクトリを開く。

プロジェクト設定ファイルの作成

プロジェクトのガイドラインを./CLAUDE.mdに記載する。Clineの.clinerulesと同じ役割で、技術スタックや設計方針を伝えるファイル。

前回とほぼ同じ内容だが、今回はE2Eテストの要件とWSL上でのテスト実行の注意点を追加している。

./CLAUDE.mdはプロジェクト単位の設定だが、全プロジェクト共通の設定も可能。詳細は公式ドキュメントで。

# プロジェクト概要

## 技術スタック
- フロントエンド: Vanilla JavaScript, HTML, CSS（外部ライブラリなし）
- バックエンド: Node.js, Express
- 画像アップロード: multer
- AI連携: @google/generative-ai
- モデル: gemini-2.5-flash（画像入力対応）
- 環境変数: dotenv
- E2Eテスト: Playwright

## プロジェクト構造
- /public: フロントエンド静的ファイル
- /: server.jsなどのバックエンド
- /tests: Playwrightのテストファイル

## コーディングガイドライン

### 一般
- コードはクリーンで読みやすく
- fetch APIでフロントとバックエンドを通信
- async/await + 適切なエラーハンドリング
- APIキーは`.env`に格納（ハードコーディングしない）

### 命名規則
- 変数・関数: camelCase
- 定数: UPPER_SNAKE_CASE
- ファイル名: 意味のある命名（例：imageHandler.js）

### E2Eテスト要件
- 画像アップロードには`tests/sample.jpg`を使用
- キャプション生成の動作を確認
- テスト結果のスクリーンショットは内容がわかるファイル名で保存
- **WSL環境での実行を考慮**：
  - WSLのUbuntu環境でPlaywrightを実行する場合、X11転送やVNC設定が不要なheadlessモードを使用
  - `playwright.config.js`でheadless: trueを設定し、WSLでの安定した実行を確保
  - WSLでのファイルパス（/mnt/c/など）やパーミッション問題に注意
  - 必要に応じて`sudo apt update && sudo apt install -y fonts-noto-cjk`でフォントをインストール

## 編集禁止ファイル
- "!.env"
- "!node_modules/"

Claude Codeの起動

  1. Claude Codeを起動
    コマンドパレット（Cmd/Ctrl + Shift + P）を開き、Run Claude Codeと入力して起動。
    cursor_claude_code_launch.png

  2. プロジェクトフォルダの信頼性を確認
    初回起動時に、フォルダの信頼性確認が表示される。プロジェクト内のファイルを読み取り・実行するための権限確認なので、自分で作成したプロジェクトなら「1. Yes, proceed」で続行。
    claude_code_trust_confirmation.png

アプリケーション開発とE2Eテストの作成

Claude Codeが起動したら、以下の指示を入力する

画像をアップロードするとプレビューを表示し、AIが自動でキャプションを生成するアプリを作成してください。

この1文で、バックエンド・フロントエンドの実装からE2Eテストまで全部進む。途中で質問があればClaude Codeが確認してくる

実際の開発プロセス

開発の様子を動画にした

https://www.youtube.com/watch?v=SjOkVDge_Fs

Claude Codeが最初に作ったタスクリスト。

Claude Codeタスクリスト

最初にタスクリストを作って、それに沿って順次作業を進めていました。Clineがいきなり実装に入ったのと比べると、計画を立ててから動くタイプ

セットアップと実行

Claude Codeの指示に従って、パッケージのインストールと環境設定。

npm install

.envファイルにGoogle Generative AIのAPIキーを設定。

GOOGLE_API_KEY=your_api_key_here

アプリケーションを起動するとこんな画面。

アプリ起動画面

アプリケーションの動作確認

実際に動かしてみた

https://www.youtube.com/watch?v=o-DA7SjS8t0

画像をアップロードするとプレビューが表示され、AIがキャプションを生成してくれる。UIも普通に使えるレベルで出てきた

E2Eテストの実行と問題解決

動作確認後、PlaywrightでE2Eテストを実行。初回はエラーが出た

E2Eテストエラー

このエラーをClaude Codeに報告したら、原因を特定して修正してくれた

https://www.youtube.com/watch?v=-PQ7WfB7suQ

修正後、再度テストを実行。今度は通った

E2Eテスト成功コマンド

スクリーンショットもtests/screenshots/に自動生成されている。

E2Eテスト完了画面

これでアプリの作成とテストは完了

同じお題で並べてみて

Clineと同じお題をClaude Codeでやってみた結果、 成果物の品質に大きな差はなかった。エージェントの違いより、裏で動いてるAIモデルの性能差のほうが結果に効いてくる印象

違いがあるとすれば、Claude Codeは最初にタスクリストを作ってから動くところと、ターミナルベースで動くところ。Clineのほうがエディタとの統合感はある。どっちが良いかは好みの範囲

Discussion