振り返れば奴(Cline)がいる

最近、AIエージェントの進歩と注目性があったので、奴(Cline)について調べた記事第一弾です。
Clineの概要および、セットアップに必要な手順と、軽くお題を用意して作ってもらった時の所感を書いています。

- Clineについて
- Clineの特徴
- Clineのセットアップ
- Clineの使い方
- 使ってみた

なお、使ってみた上でこれからClineをはじめとしたAIエージェントが業界や人材、ツール方面にどう関わっていくかを個人的にまとめています。

Transcript

1. 振り返れば奴がいる Cline
2. Clineについて Visual Studio Code(VS Code)の拡張機能として提供されるAIエージェント 予測補完などしてくれる コーディング支援 目標を達成するために 自ら必要なタスクを判断・実行
3. Cline https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev
4. Clineの機能 コーディング支援系ツールCursorと比較して、 オープンソース、拡張機能、従量課金、対応するAIエージェントが主な特徴 Cline Cursor 運営 オープンソース Anysphere社 提供形態 拡張機能 専用エディタ 料金体系 従量課金性 定額制 (月額固定) AIプロバイダー Anthropic, OpenAI, Google Gemini, AWS Bedrock など 内臓AIモデルを利用
5. Clineのセットアップ - インストール VS CodeでExtensions > Clineと入力したら出てくるので、Installをクリック
6. Clineのセットアップ - 初期表示 左パネルのClineアイコンをクリックしたら設定画面に (まずはAPIキーのセットが必要)
7. Clineのセットアップ - APIキーの設定 複数のLLMがサポートされているので、それぞれの会社のアカウントを作る (課金先管理) 本家のモデルでは利用回数の制限が厳しいとかもある https://docs.anthropic.com/en/api/rate-limits
8. Clineのセットアップ - OpenRouter OpenRouterを使うと、このアカウントに紐づく様々な会社の APIが使える →アカウントの一元管理 https://openrouter.ai/
9. Clineのセットアップ - OpenRouterのAPIキー取得 OpenRouterアカウントの登録後、右上から Keys > Create Key をクリック
10. Clineのセットアップ - OpenRouterのAPIキー取得 Create a Key で任意の名前を設定して Createボタン押下すると、右のような画面に APIキーが表示される
11. Clineのセットアップ - クレジットの追加購入 OpenRouterの右上メニューからCreditsを選択してクレジットを追加 請求先住所を設定すると支払い方法を入力して、追加するクレジット数を指定して購入
12. Clineのセットアップ - クレジットの追加完了 購入が完了するとこのような完了画面になる(今回は$20分を購入)
13. Clineのセットアップ - Cline拡張機能の設定 API Providerに “OpenRouter” が選択された状態で、 その下のAPI Keyに前のスライドで表示されたAPIキーをコピペして Let’s go!
14. Clineの使い方 - 基本操作 拡張機能のパネルで新規タスクを作成して、指示を入力して実行する クレジットが足りないと このようなエラーが
15. Clineの使い方 - 手順の明示と実行選択 タスクを元に具体で何をするのかの手順を明示し、 コマンドを実行して良いかを聞かれる 現時点でかかるAPIの費用が表示 問題なければRun Commandをクリック
16. Clineの使い方 - Auto Approve 都度コマンド実行を聞かれるのが面倒なら、 Auto Approveで自動的に進めて良いことをチェックして、 Saveをクリック
17. 使ってみた - お題と結果 Clineにリクエストしたお題 記事を作成、公開するアプリをTypeScriptで作ってください フロントエンド、サーバサイドにコードを分けて、記事の作成には WYSIWYGを使ったインターフェース を用意すること • 最初、ClineがTinyMCEを使おうとしてオープンソースの Tiptapに変更してもらった • 見た目がややイマイチ、デザイン改善どこまでできるか • 基本的な機能は、1時間もかからず割とできている • 作ったものもClineで動作確認してくれる • エラーになったらその対応も進めてくれる • 費用感は、実装と確認含め約$0.82 (日本円にして127円近く ※現時点の為替レートより)
18. 使ってみた - アウトプット
19. これからどうなる？ - プログラムの敷居・人材面 単純にプログラム書ける=エンジニアの価値ではなくなる ◦ 誰でもAIエージェントを使ってできる、デザイナーや PM、マーケターなど ◦ 採用の選択基準で「〇〇ができるエンジニア」が薄くなる ◦ 日本も少子化になりつつあり、人材の再配置的な流れになり得そう ▪ エンジニア養成やリスキリングなど関連事業に影響しそう ◦ 固有の技術、フレームワーク、ライブラリのこだわりはどこまで続くか ▪ AI駆動開発が進むとオープンソース界隈にどう影響するのか Webサービスなどで顧客側でAIエージェント使ってなんとかしようとする ◦ まだ知らないこともあるのだろうけど時間の問題 ◦ 下手したら中身わからずコードの中がごちゃついて改修不能になったら ... ▪ なんちゃって的にサービス作ってそんな事例も出てくるのかもしれない
20. これからどうなる？ - 開発スタイルの変遷 自分で書かない分、AIが書いたコードに対する確認比重が大きくなる ◦ コードリーディング追いつくか、動いてるしで雰囲気で流してしまうのか ◦ 個人情報、機密情報が漏出するようになっていないか ◦ 脆弱性を含む書き方が混在しないか ▪ 一定度のリテラシーは必要 ▪ いつかこういうインシデント起きそうな
21. これからどうなる？ - 開発スタイルの変遷 https://x.com/junya__okabe/status/1848666188693303668
22. これからどうなる？ - AIツールの方向性 専用ツール、あるいはプラグインとして ◦ Chat GPTやClaudeのようなプロンプトで返すだけだと、アウトプットをエディタなどの専 用ツールに移す作業が煩雑化する ◦ AIモデル内蔵型の専用ツールだったり、既存の専用ツールのプラグインへの活路 固定課金から従量課金の可能性 ◦ レンサバ→AWSのような流れでオンデマンド的に使う ◦ 全て任せる分だけ課金が増える ▪ 想定予算内に出来上がるか • 的確な状況説明と指示、コスト抑制のアプローチを知る必要がある
23. まとめ かなり迫ってた (振り返るどころかもう並んでそう) Cline (AI Agent) Engineer
24. 参考資料 • 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