AI / ML

【AI】Vive Coding始めました(Claude Code)

AI / ML
スポンサーリンク

どうも、Reveです。最近、AIを使ったコーディング、ペアプログラミングが巷で話題となっていますが、会社でも本格的に導入されて我々も遅ればせながら使い始めました。
そんなわけで、今回は(何番煎じか分かりませんが)バイブコーディングの環境構築を記事のテーマにしてみました。

AIとのペアプログラミング

いわゆる生成AI、特に大規模言語モデル(LLM)の進歩に伴いAIを取り巻く状況や環境も劇的に変化しており、関連技術も含めてあらゆる分野で数えきれない程のAIサービスが出ていますが、その波はプログラミングにも及んでいます。

かつてAIといえば、決められたルールやアルゴリズムを実装したプログラムに従って物事を処理するものでしたが、今のAIはプログラム自体を作ることも可能な段階までたどり着きました(もちろん、条件や制約もまだまだありますが)。

以前のAIコーディング

かつては(といっても1年くらい前の話ですが)、ChatGPTClaudeなどの対話型AIに聞いて答えたコードを開発環境で作成して実行するものでした。
特にGPT4モデル以降は、日本語も含めた言語処理能力が大幅に向上し、コード生成も含めて精度の高い回答が可能になりました。

その後、CURSORやRoo Codeなどの統合開発環境(IDE)と連携するものが出現して開発効率も上がりましたが、Claude開発元のAnthropico社はさらに革新的なサービス「Claude Code」を打ち出しました。

Claude Codeとは

Claude CodeはAnthropic社が提供するコマンドライン型のAIコーディングツールです。ターミナルから直接Claudeにコーディングタスクを委託でき、より効率的な開発を可能としました。

が、その真価は、複雑なロジック処理が可能なモデルOpus4、そしてPro/Maxというサブスクリプションと組み合わせる事で「積極的にAIを活用したプログラム開発」を可能とした事です。詳細は後述しますが、従量課金のAPIでは使い方次第で何十万円にもなったものが月に数万円で使えるのは、経済的にも心理的にも大きいものです。

Claude Code時代のソフトウェアエンジニア生存戦略|suthio
Claude Codeが変えた開発の風景 Claude Codeを使い始めて約1ヶ月経ちますが「Claude Codeを使ってから、開発の概念が根本的に変わった」と僕は思ってる。 ClineやCursor Agentの登場でもでも相当変わったと思う。でもClaude Codeはそれ以上の変化だと僕は感じている。何が...
Claude Code による技術的特異点を見届けろ

環境構築

では、そんなAIペアプログラミングの新時代を切り開くClaude Codeの環境構築を詳しく解説します。

前提条件

  • Windows 10以上
  • Node.js(バージョン16以上推奨)
  • Visual Studio Code
  • ターミナル(PowerShell、Command Prompt、Git Bashなど)

Claudeサブスクリプションの契約

まずはClaudeのサブスクリプションプランに入ります。

Just a moment...

サイトにアクセスして、アカウント作成をします。googleアカウントかメールアドレスが必要ですが、筆者の場合はgoogleアカウントを選びました。

SMSによるアカウント連携の認証があるので、電話番号を入れ認証コードを送信します。

サブスクリプションプランは Free / Pro / Max($100 か $200) の4種類です。

プランを選び支払い手続きを済ませたら、晴れてClaudeサブスクリプションが有効になります。

どのプランにすべきか?

確かに個人で使うには安くない金額ではありますが、下記の理由から業務で本格的に活用するならMax($200)プランが最適です。

  • FreeプランではClaude Codeを使えない(試用クレジットあり)
  • ProではOpus4モデルが使えない
  • 上限(リミット)に達する利用量が、同じMaxでも$100がProの5倍に対し、$200では20倍

APIを使う場合は?

実は、Anthropic APIはClaudeと別の画面から手続きする必要があります。

Just a moment...

上記のURLにアクセスし、アカウント手続きをすることでAPIキーが作成できます。しかし、先述の通り従量課金なので使った分だけ請求額が増える点には要注意です。

Claude Codeのインストール

続けて、PowerShellまたはCommand Promptを管理者権限で開き、以下のコマンドを実行します。

Claudeアカウントとの認証

サブスクリプションに加入(もしくはAPIキーを作成)したら、Claude Codeで認証します。実行できない場合、ユーザー環境変数CLAUDE_CODE_GIT_BASH_PATHを作成し、git-bash.exeの絶対パスを通しておきましょう。

コマンドを実行すると初期設定の画面に入ります。ここは見た目を決める画面なので、好きなモードを選びます。

するとログイン画面に入ります。ここで選択肢が 1. サブスクリプション加入済みのアカウント か 2.APIキー とあるので1を選びます。

選択するとブラウザが開き認証に入ります…が、別のアカウントにログイン中などの原因で失敗することがあります。

その場合、コンソール画面の表示が変わりURLが出るので、それをClaudeアカウントにログインした状態のブラウザで開きます。自動で認証を求められ、承諾すると長い文字列が表示されるので、それをコンソールに入力するとClaude Codeと連携できます。

これでClaude Codeがコンソールで使えるようになります。

Visual Studio Codeとの連携

Claude Code単体でもプログラム開発はできますが、IDEと連携することでさらに効果を発揮します。Visual Studio Codeの拡張機能「Roo Code」は以前からChatGPTやAnthropic APIなど様々なモデル・APIを利用できましたが、とうとうClaude Codeにも対応しました。

まずは拡張機能で「Roo Code」を調べ、一番上の候補をインストールします。

そして、設定画面でAPIの提供元とモデルを選択します。

  • API Provider: Claude Code
  • Model: claude-opus-4…

以上で、VS CodeとClaude Codeによるバイブコーディング環境が構築できました。あとは、適当なフォルダをVS Codeで開いて作りたいソフトウェアを指示すれば、Claude Codeが良しなに設計やコードを提案してくれます。

余談

これだけでもすごい時代になったと感じますが、今ではMCPというLLMが外部ソフトとデータを連携するためのプロトコルも出てきたことで、さらに他のツールと連携した開発も可能になっています。例えば、ゲーム開発にはUnityやUnreal Engineというゲームエンジンが使われていますが、ゲームエンジン向けMCPも有志での開発が進んでおり、AIによるゲーム開発も決して不可能ではない所まで来ています。

【UnityMCP】Claude Desktopを使ってコードを一切書かずに5時間でゲームを作った話 - Qiita
概要 unityroomのゲームジャムイベント、unity1weekに参加しました。 今回Claude DesktopとUnity用のMCPサーバーを利用し、1日でゲームを作りました。 その備忘録を残しておこうと思います。 作ったゲームはこちら 経緯 unity...

ちなみに、自分がいくらAPIにつぎ込んだか計算してくれるツールもあります。Claudeサブスクなら定額なので、たくさん使えばAPIと比べていくら得したか分かってニヤニヤできますよ。

Claude Codeの使用料金を可視化するCLIツール「ccusage」を作った

参考

[アップデート] Claude CodeがWindows(WSLなし)で使えるようになりました | DevelopersIO
Windows での Claude Code利用が WSL不要になったので試してみた(ローカルインストールで試す) - Qiita
はじめに 以下でポストしていた件です これまで、Windows で Claude Code を使う場合は WSL との組み合わせが必要だったりしたのが、Windows で直接扱えるようになったらしいので、さっそく試してみました。 (X のタイムラインに、そのような情...
【Claude Maxユーザー必見】Roo CodeにClaude Codeが統合!
タイトルとURLをコピーしました