Cline×Claude 3.7 Sonnet やってみた（VSCode）
ちょっと出遅れた感はありますが、Claude 3.7 Sonnetを使ってClineを試してみたので、備忘録としてまとめておきます。
1. Clineとは
Clineは、VSCodeやCursorなどのエディタ上で動作するAIエージェント型の拡張機能です。
自然言語で指示を出すだけで、コードの生成、既存コードの修正、バグの修正、テストの実行などをAIがサポートしてくれます。
【参考】
cline/locales/ja/README.md at main · cline/cline · GitHub
2. Claude 3.7 Sonnet とは
Claude 3.7 Sonnetは、2025年2月にAnthropicが発表したAIモデルです。
Cline自体にはAIが内蔵されていないため、ClaudeなどのAPIキーを渡すことで、Cline経由でClaudeの機能を活用できます。
【参考】
Claude 3.7 Sonnet and Claude Code
3. VSCodeでClineを設定
早速、Clineの設定をしていきます。
VSCodeの拡張機能でClineをインストールします。
インストールが完了すると、左側のサイドバーにロボットのアイコンが追加されるので、そこをクリックします。
すると「Get Started For Free」というボタンが表示されるので、それをクリック。
アカウント作成画面に遷移しますが、Googleアカウントでログインすれば特に面倒な設定もなく、簡単に完了しました。
ログイン後はすぐに使える状態になります。
デフォルトで使用モデルが「Claude 3.7 Sonnet」になっていました。
無料枠がどれくらいあるかはわかりませんが、まずはこのまま試してみようと思います。
あとで見返して気づいたのですが、Custom Instructionsに「Speak in Japanese」と記載すれば、日本語で指示を出すこともできそうです。
ここでは英語で試しています。
4. Clineでプログラミング
英語で以下の指示を出してみました。
「HTML、CSS、JavaScriptでじゃんけんができるサイトを作成してください。」
すると、やるべきことを整理しながら、すぐに作業を開始してくれます。
作業を開始すると、リアルタイムでコードを書いていく様子が見ることができ、面白いです。
また、ファイルを1つ作成するたびに保存するか聞いてくるので、問題なければ「Save」を押して進めていきます。
すべてのファイルが作成されると、テストを実行するかどうかを聞いてきます。
問題なければ「Approve」を押して進めます。
実際に画面を操作しながらテストしている様子が見られて、これは驚きました。
完成したサイトはこんな感じになりました。
動作も問題なく、シンプルで見やすいデザインという印象です。
内容としてはごく簡単なサイトですが、これを知識なしで、しかもVSCode上でほんの数分で作れてしまうのは驚きです。
Clineのようなツールを活用するかどうかで、今後の開発効率に大きな差が生まれるなと感じました。
5. Clineの無料利用枠
次の指示を出そうとしたところ、エラーが表示されて実行できませんでした。
そこで、先ほどの「HTML、CSS、JavaScriptでじゃんけんができるサイトを作成してください」というタスクで、どれくらいのコストがかかったのか確認してみます。
（Total Promptions: $0.50 なのでこれが無料利用枠かなという感じですが）
結果は $0.4166
日本円にすると約 62.49円（$1 = 150円換算） の消費でした。
その前にも少し試していたので、おそらく無料利用枠は $0.5 くらいのようです。
6. AnthropicのAPI Key
Clineの無料利用枠を使い切ってしまったので、ここからはAnthropicのAPI Keyを使って進めてみることにしました。
（もともとこの方法で進める予定だったのですが、無料枠の存在を知らなかったので）
まずはAnthropicのサイトでアカウントを作成し、ログインします。
Googleアカウントでのログインが可能で、特にややこしい設定もなくスムーズに進められました。
ログイン後、API Keyを発行するには $5 分のクレジット購入 が必要です。
ここでクレジットカードの登録が必要になります。
クレジットの購入が完了すると、そのままAPI Keyの作成画面に進むので、そこでキーを生成してコピーしておきます。
続いて、VSCodeに戻り、Clineの設定を開きます。
API Provider を「Anthropic」に変更すると、APIキーの入力欄が表示されるので、先ほどコピーしたキーを貼り付けます。
これでClineがClaude 3.7 Sonnetと連携できるようになり、再び指示を出せるようになります。
7. サイトの改修
再び指示が出せるようになったので、先ほど作成したサイトをブラッシュアップしてもらうために、英語で以下の指示を出しました。
「おしゃれで動きのある日本人向けサイトにして」
ここからは先ほどと同様に、「Save」と「Approve」をクリックしながら進めていくだけです。
ただ、テストの段階で動作がうまくいかなかったようで、Cline側から以下のようなメッセージが表示されました。
このように、問題点を自動で検出し、修正提案までしてくれるのは非常に便利です。
しかし…今回は一発でエラーが解消されず、「Save」と「Approve」を何度も繰り返して対応を試みました。
結果として、Clineだけでは不具合を解決するのは難しそうだったため、途中で止めて、どんなものができているのかを確認してみました。
ぱっと見た感じでは、先ほどよりも全体的に明るい印象になっていて、雰囲気は良くなっています。
実際に触ってみると動きも加わっていて、サイトの質としては上がった感じがします。
軽く遊んでみた限りでは、基本的な動作には問題なさそうです。
では、Clineは一体どこで詰まっていたのか、ログを確認してみます。
（実際に使うときはその都度Clineの出力を見ながら進めてください。）
どうやら「リセットボタン」の挙動でずっとつまずいていたことがわかりました。
ただ、手動でリセットボタンを押してみたところ、特に問題なく動作しています。
確かに「結果がリセットされた後に画面がリフレッシュされる」という挙動にやや違和感はありますが、そこがClineにとって引っかかりだったのかどうかは不明です。
8. API Keyの費用
ここまでで、実際にどれくらいのコストがかかったのか確認してみます。
最終的な表示上のコストは $2.2770
最初に使った無料枠の $0.4166 を引くと、サイトのブラッシュアップにかかった費用は $1.8604 となります。
日本円にすると、約 279.06円（$1 = 150円換算） の計算です。
ただし、Anthropicのコンソールでクレジット残高を確認すると、残りは $3.10 です。
最初に $5.00 購入していたので、実際には $2.90 を消費していたことになります。
つまり、実際の消費額は約 435円（$1 = 150円換算）の計算となります。
このことからVSCode上で表示されるコストと、Anthropicの実際のクレジット消費に差異があることに注意が必要です。
今回は比較的シンプルな命令を、あまり深く考えずに何度も回した結果なので、このコストがClaudeの性能に対して妥当かどうかは、正直まだ判断がつきません。
とはいえ、実際に使ってみるとかなり便利だったので、お財布の許す範囲で、今後もいろいろ試してみたいと思います。
9. 最後に
とにかく便利であることはよくわかりました。
ただ、最もネックになるのはコストで、何も考えずに使い続けていると、気づかぬうちに高額のコストが発生します。
これはClineに限らず、AI全般に言えることだと思います。
とはいえ、だからといって使わないのは非常にもったいないと感じました。
そのため、これからはAIをいかに上手に使いこなすかが、エンジニアにとって必須のスキルになっていくのではないかと思います。
今回はClineを試してみましたが、機会があればCursorやDevinなどにも触れて、またブログにまとめてみようかなと考えています。
（とはいえ、Devinは最低でも月額500ドルなので、1か月使うだけでPS5が買えてしまいますし、実際に投稿されることはないと思いますが…）