振り返れば奴がいる Cline

Clineについて Visual Studio Code(VS Code)の拡張機能として提供されるAIエージェント 予測補完などしてくれる コーディング支援 目標を達成するために 自ら必要なタスクを判断・実行

Cline https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev

Clineの機能 コーディング支援系ツールCursorと比較して、 オープンソース、拡張機能、従量課金、対応するAIエージェントが主な特徴 Cline Cursor 運営 オープンソース Anysphere社 提供形態 拡張機能 専用エディタ 料金体系 従量課金性 定額制 (月額固定) AIプロバイダー Anthropic, OpenAI, Google Gemini, AWS Bedrock など 内臓AIモデルを利用

Clineのセットアップ - インストール VS CodeでExtensions > Clineと入力したら出てくるので、Installをクリック

Clineのセットアップ - 初期表示 左パネルのClineアイコンをクリックしたら設定画面に (まずはAPIキーのセットが必要)

Clineのセットアップ - APIキーの設定 複数のLLMがサポートされているので、それぞれの会社のアカウントを作る (課金先管理) 本家のモデルでは利用回数の制限が厳しいとかもある https://docs.anthropic.com/en/api/rate-limits

Clineのセットアップ - OpenRouter OpenRouterを使うと、このアカウントに紐づく様々な会社の APIが使える →アカウントの一元管理 https://openrouter.ai/

Clineのセットアップ - OpenRouterのAPIキー取得 OpenRouterアカウントの登録後、右上から Keys > Create Key をクリック

Clineのセットアップ - OpenRouterのAPIキー取得 Create a Key で任意の名前を設定して Createボタン押下すると、右のような画面に APIキーが表示される

Clineのセットアップ - クレジットの追加購入 OpenRouterの右上メニューからCreditsを選択してクレジットを追加 請求先住所を設定すると支払い方法を入力して、追加するクレジット数を指定して購入

Clineのセットアップ - クレジットの追加完了 購入が完了するとこのような完了画面になる(今回は$20分を購入)

Clineのセットアップ - Cline拡張機能の設定 API Providerに “OpenRouter” が選択された状態で、 その下のAPI Keyに前のスライドで表示されたAPIキーをコピペして Let’s go!

Clineの使い方 - 基本操作 拡張機能のパネルで新規タスクを作成して、指示を入力して実行する クレジットが足りないと このようなエラーが

Clineの使い方 - 手順の明示と実行選択 タスクを元に具体で何をするのかの手順を明示し、 コマンドを実行して良いかを聞かれる 現時点でかかるAPIの費用が表示 問題なければRun Commandをクリック

Clineの使い方 - Auto Approve 都度コマンド実行を聞かれるのが面倒なら、 Auto Approveで自動的に進めて良いことをチェックして、 Saveをクリック

使ってみた - お題と結果 Clineにリクエストしたお題 記事を作成、公開するアプリをTypeScriptで作ってください フロントエンド、サーバサイドにコードを分けて、記事の作成には WYSIWYGを使ったインターフェース を用意すること ● 最初、ClineがTinyMCEを使おうとしてオープンソースの Tiptapに変更してもらった ● 見た目がややイマイチ、デザイン改善どこまでできるか ● 基本的な機能は、1時間もかからず割とできている ● 作ったものもClineで動作確認してくれる ● エラーになったらその対応も進めてくれる ● 費用感は、実装と確認含め約$0.82 (日本円にして127円近く ※現時点の為替レートより)

使ってみた - アウトプット

これからどうなる？ - プログラムの敷居・人材面 単純にプログラム書ける=エンジニアの価値ではなくなる ○ 誰でもAIエージェントを使ってできる、デザイナーや PM、マーケターなど ○ 採用の選択基準で「〇〇ができるエンジニア」が薄くなる ○ 日本も少子化になりつつあり、人材の再配置的な流れになり得そう ■ エンジニア養成やリスキリングなど関連事業に影響しそう ○ 固有の技術、フレームワーク、ライブラリのこだわりはどこまで続くか ■ AI駆動開発が進むとオープンソース界隈にどう影響するのか Webサービスなどで顧客側でAIエージェント使ってなんとかしようとする ○ まだ知らないこともあるのだろうけど時間の問題 ○ 下手したら中身わからずコードの中がごちゃついて改修不能になったら ... ■ なんちゃって的にサービス作ってそんな事例も出てくるのかもしれない

これからどうなる？ - 開発スタイルの変遷 自分で書かない分、AIが書いたコードに対する確認比重が大きくなる ○ コードリーディング追いつくか、動いてるしで雰囲気で流してしまうのか ○ 個人情報、機密情報が漏出するようになっていないか ○ 脆弱性を含む書き方が混在しないか ■ 一定度のリテラシーは必要 ■ いつかこういうインシデント起きそうな

これからどうなる？ - 開発スタイルの変遷 https://x.com/junya__okabe/status/1848666188693303668

これからどうなる？ - AIツールの方向性 専用ツール、あるいはプラグインとして ○ Chat GPTやClaudeのようなプロンプトで返すだけだと、アウトプットをエディタなどの専 用ツールに移す作業が煩雑化する ○ AIモデル内蔵型の専用ツールだったり、既存の専用ツールのプラグインへの活路 固定課金から従量課金の可能性 ○ レンサバ→AWSのような流れでオンデマンド的に使う ○ 全て任せる分だけ課金が増える ■ 想定予算内に出来上がるか ● 的確な状況説明と指示、コスト抑制のアプローチを知る必要がある

まとめ かなり迫ってた (振り返るどころかもう並んでそう) Cline (AI Agent) Engineer

参考資料 ● https://zenn.dev/acntechjp/articles/4ee8b08fa6ed5f ● https://www.ai-souken.com/article/what-is-cline ● https://qiita.com/minorun365/items/b2990a7228e8cc4ed025 ● https://youtu.be/Fd_UK0zhhAQ?si=SF5OO4a0KB_CncKk