はじめに
先日のCode with Claudeにて発表された内容にClaude Codeの正式リリースがありました。Claude Codeは、開発者がターミナルから直接Claudeに複雑なコーディングタスクを委譲できるAIエージェントツールです。さらにVSCodeなどのIDEとClaude Codeを直接統合できるようになり、開発体験が向上しました。
今回はそんなClaude CodeをVSCodeに統合して実際にAIチャットボットの開発を行ってみました。
Claude Code自体については以前書いた記事に詳細を載せていますのでそちらも参照してください。
今回はIDE統合された点を重点的に記載していきます。
導入
Claude Codeのセットアップ
Claude Codeの設定については以前書いた上記のブログを参照してください。
VSCodeに統合
Claude Codeのセットアップが完了したら次はVSCodeに統合します。
公式ドキュメントは以下のリンクです。
手順はたったこれだけです。
- VSCodeを開く
- 統合ターミナルを開く
- claudeを実行する - 拡張機能が自動インストールされます
VSCodeの画面の右上にこのようなClaudeのマークが表示されていたら問題なく完了しています。
あとはコンソールで使用していたのと同じ感覚でVSCode上のコンソールからClaude Codeに指示を出していくだけです。
実際に開発してみた
今回はVSCode + Claude Codeを利用して本当に基本的なAIチャットボットのWebアプリケーションを作ってみました。
開発したアプリケーションの概要
今回作成したものはこちらのリポジトリに公開してあります。
このリポジトリではプログラムだけでなく環境の整備やドキュメントも人間が1行も書くことなく全てClaude Codeによって作成しました。
IDE統合の利点
IDE統合をするとこのようにIDEの差分ツールを利用して修正された差分を確認しながら開発を進めることができます。
Claude Code自体はこれまでと変わらずとても優秀なAIエージェントです。
IDE統合することで変わってくるのは以下の点です：
- 視覚的な開発体験: コンソール上でClaude Codeを使用するよりもより直感的
- 差分の確認: VSCodeの差分表示機能により変更内容を詳細に確認可能
- ファイル管理: プロジェクト構造を視覚的に把握しながら開発を進められる
- デバッグ効率: IDEのデバッグ機能と連携して問題箇所を特定しやすい
他のAIエージェントとの比較
筆者個人的な感想ですが、CursorやCline、devinなど様々なコーディング用のAIエージェントと比較してClaude Codeは手戻りが少ないという印象を持っています。
Claude Codeの優位点
- 理解精度: 指示した内容を的確に読み取り適切なアウトプットを生成
- 修正頻度: AIのアウトプットに対して修正指示やり直し指示が比較的少ない
- コード品質: 生成されるコードの品質が安定している
まとめ
Claude Codeが正式にリリースされIDEと統合したことにより、これまで以上に使いやすいAIエージェントになったと思います。特に手戻りの少なさとIDE統合による視覚的な開発体験は大きなメリットです。現時点では各種あるAIエージェントの中でもClaude Codeは安定した開発体験を提供していると考えています。
ぜひ、まだClaude Codeを試したことがないという方はこれを機に試してみてください。
ただし、各ツールとも日々アップデートが繰り返されており、機能が強化されている点に注意しなければいけません。
今日一番良いと思っても明日になればまた違うツールで良いものが登場するというのが今のAI界隈の状況です。継続的な情報収集と実際の検証が重要だと感じています。
関連リンク
Claude Codeのアップデート内容を調べてみた
Amazon Bedrock経由でClaude Codeを使ってみよう
Discussion