最近、AIにアンテナの高いエンジニア界隈でClineというツールが話題です。

これは元々Claude Devと呼ばれていた、VS Codeの拡張機能です。

サイドバーで生成AIとチャットしながら開発補助をしてもらえて、自分のリポジトリから必要なファイルを読み込んで理解してくれたり、ターミナルでコマンドを実行して出力を確認してくれたり、さらには必要なコードを書いたりしてくれます。

似たようなツールでCursor（カーソル）も結構前から人気ですが、Clineのいいところは

• いつものVS Codeに拡張入れるだけでそのまま使える
• どこまで手動/自動で補助してもらうか、好きな具合にカスタマイズできる
• 結果、コーディングしながらChatGPTやClaude.aiとエディタを往復する手間が省ける

ことが大きなメリットです。私も秒でトリコになりました。

実際に試してみよう！

VS Codeに拡張機能「Cline」をインストールします。

サイドバーにおじさん？ではなくロボットが生えました。
ClineのAIエンジンとなる、生成AIツールのAPI認証情報を入れましょう。ここは自分で好きなLLMのアカウントなどを用意する必要があります。

※Cline自体はOSSなので、コストとしてはこのAPI利用料が発生する形となります。

私はAWSを使っているので、Amazon Bedrock用のIAM認証情報を入れました。アクセスキー＆シークレットキーか、セッショントークンのいずれかを入力しましょう。Bedrockの場合、クロスリージョン推論を有効にするのも忘れずに。

カスタムインストラクションは、私の場合以下のように設定しています。（私の環境では、なぜかCLIの実行結果を読み取ってくれないので、その対応も含めています）

必ず日本語で応対してください。
また、ターミナルのコマンド実行結果が確認できない場合は、ユーザーが貼り付けて教えるので、そこで止めてユーザーに依頼してください。

設定後は、チャットボックス上部の自動承認設定もカスタマイズしておきましょう。
最初は「ファイルの読み取り」のみ選択して、Auto-approveを有効にしておくのがとっつきやすいかなと思います。

いざ、コーディング！

それでは実際に使ってみます。

何かをゼロから作るケースよりも、既存のアプリケーションを継続開発するようなシーンの方が多いと思うので、私も開発中のアプリの修正に活用してみます。

このアプリ、AWSに関するアウトプットを貼り付けるとレベル判定してくれるのですが、AIによる判定時間が10秒程度かかる間、ボタンが暗転するのみなのでユーザーに少しストレスを与えてしまいます。

そこで、プログレスバーをつけるにはどうすればいいか、Clineに聞いてみましょう。

一度チャットを打つだけで、Clineが自分でフロントエンドのファイルを覗いて理解し、追加ライブラリーのインストールコマンドが必要なところでユーザーの判断を仰いでくれます。

コマンドを実行すると、エラーが出たのでClineに教えてあげます。
（ここは本来、自動でClineが確認してくれます。私の環境ではなぜかzshへのアクセスが上手くいきません）

何度か往復していると、うまくコンポーネントのインストールが成功しました。続けると次のタスクを教えてくれます。

今度はフロントエンドのコード修正箇所を提案してくれました。
差分が一目瞭然で、かつ気に入らない部分はユーザーが自分で直すことができます。Clineに設定しない限り、勝手にファイルが変更されてしまうことがないので安心です。

変更箇所をすべて目で見て、問題なさそうなので承認します。
すると、保存後の構文エラーを自分で検知して、インポートが必要な不足ファイルの新規作成を提案してくれました。

ただしコードを確認したところ、おかしな記述があったので質問してみると、ハルシネーションが含まれていたようです。
（一定のプログラミングスキルがないと、こういうのが積み重なってよく分からないコードになってしまうので、AI時代にも開発スキルは必要ですね）

作業が完了すると、ご丁寧にサマリーを報告してくれます。

さて、本当に動くのか。実際にデプロイしてみましょう。

すごい！！ 一発合格です。
デザインバランスも普通にいい感じですね。

かかったコストは常時、スレッドトップに更新されていくので安心です。
ここまでの変更で、およそ80円程度のBedrock API課金が発生しています。これを安いとみるか高いとみるかは、あなた次第。

ちなみにコストを抑えるコツは、あまりスレッドを長く続けすぎず、こまめに新規スレッドへ移動することです。コンテキスト長が節約できます。

おまけ：最新情報を参照させたい場合

なお、自動でのWeb検索機能はないのですが、質問の際に「@」コマンドでコンテキスト（ファイルやURLなど）を追加することができます。
最新の技術について質問したいときは、公式ドキュメントのURLなどを付加してあげるとよさそうです。