AIによる開発を体験してみよう（Clineを使った開発）

はじめに

AIを使った開発ツールが増えてきて、徐々に開発方法が変わってきています。
開発者としては、この波に乗らないと取り残されていってしまう危機感があります。
そこで、今回は話題のClineについて紹介します。

Clineとは

VSCodeやCursorの拡張機能として利用する、エージェント型の開発ツールになります。
人が指示を出すだけで、コーディング、コマンド実行、テストの実行等をAIが実施してくれます。
これだけやってくれると開発者が不要になってくるので、恐怖ですね。。

料金

Cline自体はオープンソースのため無料で利用できますが、利用するAIモデルのAPI料金が別途かかります。今回は、お試しということで、無料プランがあるGeminiを利用します。

Gemini APIキー取得

Geminiの料金体系は以下を参照してください。
https://ai.google.dev/pricing?hl=ja#2_0flash

今回は無料プランとするため、1分あたりのリクエスト数やトークン数に制限があります。連続して使うとすぐに制限にかかりますので注意してください。

まずは、Google AI StudioのAPIキー取得にアクセスします。
以下のような画面がでたら「Get API Key」を押下します。

続いて、「APIキーを作成」押下します。

作成されたAPIキーはあとで使用します。
以下のようにプランが無料となっていれば課金はされません。

Clineインストール

VSCodeの拡張機能で「Cline」を検索し、インストールします。

インストールすると左側のメニューにClineのアイコンができますので、クリックし設定画面を開きます。
設定画面で以下を設定します。

• API Provider：Google Gemini
• APIKey：作成したAPIKeyを入力
• Model：今回はgemini-2.0-flash-lightを選択
• Custom Instructions：speak in Japaneseを入力し日本語を使うことを記載しておきます
  

その他の設定として、Auto-approveを押下すると以下の設定が出てきます。

Auto-approveの設定は、自動で承認するかの設定ですが、今回は手動で承認作業をするためチェックは入れていません。
MaxRequestsの設定は、Geminiの無料プランの場合1分間のリクエスト数に制限があるため、10に変更しています。

これで準備は完了です。

Clineを触ってみよう

• 入力欄にやりたいことを入力します
  
  今回は雑にreactでオセロを作成してくださいと入力してみました
  

すると、LLMへ投げるためのプロンプトを自動で生成し、APIの結果からコマンドを作成してくれました。

作成されたコマンドを実行するとエラーが発生しましたが、すぐに修正方法を提示してくれます。

その後、Clineの指示どおりにボタンを押していくとあっという間にベースは出来上がりました。

が、表示がおかしいです。何度か修正するように指示をだしたのですが、正方形のオセロの盤面ができません。指示の出し方でうまくいくのかもしれないですが、最終的には軽く手直し（2行くらい）して、表示できるようになりました。

まとめ

Clineは人が指示を出すだけで、コードの生成、テスト、バグの修正まで行ってくれます。今回はGeminiの無料プランを使用していたため、連続して実行すると制限がかかりエラーとなりますが、少し間をあけて実行することで簡単なアプリであれば作成することが可能でした。
今後の開発はAIを使用するのが主流になってくるでしょう。開発者でAIに触れたことがない方は体験してみるのはいかがでしょうか。