はじめに
こんにちは！
株式会社C&Pの武智と申します✨
最近Claude CodeやCursorをはじめ、目まぐるしいスピードでAIコーディングツールや便利な機能が増えてきましたね！
AWS「Kiro」の発表や、Cursor有料プランの突然な変更 も記憶に新しいと思います。
私は「固定料金」のサブスク形式が予期せぬ出費の可能性がないので安心しますが、
せっかくなので従量課金制だったらどれぐらいトークンが減っていくのが、そして最近鉄板となっているClaude Sonnet4を1日ヘビーに使ったらコストはいくら掛かるのかも検証したくなりました。
この機会に、どんな選択肢があるのか調べてみた結果「Kilo Code」なるものを見つけたので試した結果を報告しようと思います！
AIエージェント「Kilo Code」って何？
Kilo Codeは「VS Code」や「Cursor」等のIDEに導入可能な、オープンソースのAIエージェント拡張機能です。（WindsurfやTrae AIでも使用可能とのことです。）
Gemini 2.5 Pro, Claude Sonnet4/Opus, GPT4/5等、主要のAPIプロバイダが提供するモデルの他にも、聞いたことのあるモデルはほぼ全部使える形でした。
金額はチャージ制度で、Kilo Codeへの課金一つで、APIキーの管理をせずに好きなモデルを選べるのは使い勝手良さそうですね！
上記のAPIプロバイダ以外にも、PCのCPU・RAM・GPUのメモリ次第ですが、ローカルでオープンソースのモデルを使用して実質無料で運用できるようです（...機材高いじゃん！）
さて、次は実際の機能に触れていきます。
主に5つのモードが存在
モードを用途別で使い分けることで、より効果的な出力が期待できるとのことです。
- Code: 一般的なコーディングタスク全般に活用できる
- Architect: 技術的な計画立案や設計をサポートする
- Ask: 質問に答えたり、情報を提供したりする
- Debug: 問題を体系的に診断し、解決策を見つける
- Orchestrator: 複数のエージェントモードを連携させて、複雑なプロジェクトを小さなタスクに分解し、最適なAIエージェントに振り分けて一連の作業として実行してくれます
他に、セキュリティ監査・パフォーマンス最適化・ドキュメント作成など、特定のタスクに特化したカスタムモードを自由に作成できるようです！
「その数のモード、いちいち選ぶの煩わしくないの？」
この機能を見て最初そう思いましたが、使ってみると意外とそうでもなかったです！
とりあえずOrchestratorモード(複数エージェント)に投げておけば大丈夫ですし、
Architect(設計)モードで質問を投げて、実装要望を決めたら自動的に仕様に関しての質問モードに移行し、いくつかの質問に答えたら自動的にCodeモードで実装が始まりました！
他機能
- 過去の作業内容やユーザーの好みを「メモリバンク」に保存し、今後の作業に活かす機能もあります。（トークン量節約してくれることを期待したい）
- Cursorのようにグローバルルールとプロジェクトごとのルールを、ホームディレクトリとプロジェクトディレクトリにファイルを作成することで設定可能
- このあたりの仕様はCursor同様に変化することがあるので、最新のドキュメントをご確認ください！
「あんちゃん、説明はその辺で...」
それでは、「Kilo Code」を使用して簡単なタスク管理アプリを作成してみようと思います。
今回は初回登録時にもらえる$20のクレジットを使用して、実際にどこまでアプリが作れるのかを検証します！
※この記事は2025年8月8日時点のものであるため、内容が実際とは異なる可能性があります。
導入
現時点で対応するエディタは以下の通りでした：
今回はVS Codeを選択しました。
アラートが出てきたので、許可してVS Code拡張機能のインストールを進めます。
完了したら、下記のサイドバーが使用できるようになります。
（いつまで実施しているか不明ですが、無料アカウント登録で$20のクレジットを無料でゲットできるキャンペーンをやっていました！）
「むむ...このサイドバー、ファイルブラウザの邪魔だからCursorやCopilotと同じで右側に移動できないかな...」
「Kiloアイコンを右クリック」→「移動先」→「セカンダリサイドバー」で出来ました！
ツールバーの最下部で、モデル名をクリックして選択できます。
お目当ての「AnthropicのClaude Sonnet 4」を使用します。（Opusだと一瞬でクレジット消し飛びそうですね💧）
今回作成するSPA
プロジェクト概要：
- アプリ名： Goal in One（目標管理アプリ）
- 技術スタック： Laravel 12、Vue3、TypeScript、Vite、Pinia、MariaDB
- 機能： 目標・タスク管理SPA
主な機能仕様：
- 目標（Goals）とタスク（Tasks）の管理
- 期限付きタスク対応
- 統計データをダッシュボードに表示
- ユーザー認証（登録・ログイン・ログアウト・削除）
- 連番IDに対するDBのセキュリティ要望（内部ID整数型、外部UUID使用）
- アニメーション付きの「美しいUI」
空のディレクトリでスタート
詳細な設計・1行もコードは書かず、「仕様の一部に対する要望」だけした後は、丸投げしようと思います。要望を満たした最低限動くアプリ・テストコードを用意してくれるかを期待します。
何も入っていない空のディレクトリを作成し、Architectモードで実装したいアプリを相談するところから始めてみようと思います。
実際に以下のプロンプトを使用しました：
<task>
Laravel 12、Vue3、TypeScript、Vite、Pinia、MariaDB LTS 10.5 を使用した Web プロジェクトを作成したいと考えています。開発環境はすでに Laravel Herd（PHP 8.2）を使用してセットアップ済みです。
* 上記の技術スタックにおける互換性の問題を考慮してください。
* プロジェクトファイル名：`goal-in-one`
* アプリの説明：
* この SPA アプリは、ユーザーの目標とタスクをゲーミフィケーションしたものになります。
* 目標（Goals）：達成に時間と労力がかかるため、各目標の下に 0 個以上のタスクを作成できるようにする必要があります。
* タスク（Tasks）：
* 単純なタスク、または日次／週次／月次／期限付きのタイプに対応。
* 編集・削除が可能。
* マイルストーン達成や、進捗および過去の目標達成状況などの統計をダッシュボードで確認可能。
* ログイン／ログアウト／ユーザー登録／アカウント削除機能を含みます。
* ID：内部的には整数型、外部公開用には UUID を使用し、セキュリティに配慮します。
* デザイン：美しく魅力的な UI、アニメーション付き。全機能はダッシュボードからアクセスでき、ログイン中のユーザー名は上部バーに表示されます。
* 環境変数（※反映されるかの確認用）：
```env
APP_NAME="Goal in One"
APP_URL=https://goal-task-app.test
APP_LOCALE=ja
APP_FALLBACK_LOCALE=en
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=goal_task_app
CACHE_STORE=database
プロンプト入力後、初のご対面
おぉ、これがプロンプトごとに減っていく従量課金スタイルなんですね！
今送ったプロンプトを処理するのにいくらかかったか教えてくれて、親切だと感じると同時に漠然とした緊張感を感じます...（笑）
Todo List（タスクリスト）
要望を分解して、早速タスクリストを作成してくれました（各タスクに適したエージェントへタスクを投げてくれます！）。
※Gemini 2.5 Proで試したら、別のタスクリストが生成されました。
お願いしていないのに、ER図まで生成してくれます
表向きのページで使うテーブルには、要望通りUUIDが追加されていました！
DBテーブルの補足・質疑応答タイム
ここで仕様に関していくつか質問されるので、答えていきます！
質問に答えたり、要望のチャットを送ると、仕様とToDoリストに反映してくれます。
※「やっぱりゲミフィケーション(ゲーム化)要素はいらない！」と言ったら計画と仕様から省いてくれました。
フロントエンドのディレクトリ構造・APIエンドポイントの設計も描画
要望したPiniaとTSを使用する想定で構成されておりました。
新しい質問が来なくなったので、ここで最低限欲しい機能が揃ったとします（※本当はもっと要望ぶっつけたかったですが、$20以内のリミットがあるのでここまでとします）。
「実装を続けてください →code」を選択すると、Architectモードからコーディング補助のCodeモードに自動的に移行し、タスクリストにあった「Laravel12プロジェクトの初期化とディレクトリ構造作成」が開始しました。
始まる自動実装
プロジェクトの作成コマンド、APP_KEYの生成と最初のプロンプトで要望したENV変数が.envに書き込まれていき、composer install、npm installが実行され、着々と初期作成が進みます。
（※実行キャンセルしてyarnを使用したい旨を伝えれば、そちらでのコマンドを実行してくれます。）
自動で実行されて良いコマンドは指定できる
「え...待って、コマンドが勝手に実行されるの怖くない！？」
そう思われるかもしれませんが、実はKilo Codeには便利な機能があります！
サイドバーの設定項目で、自動で実行されて良いコマンドを指定できます！
設定（歯車マーク） →自動承認 →実行
僕は「yarn dev」を毎回聞かれるのが嫌だったので、自動実行OKのリストに追加しました。
お金が...
このあとmigration生成とモデル生成がされますが、既に$0.97です。
（プロンプトの適当さと丸投げしたツケが回ってきたのでしょうか...）
そしてどんどん進む実装
ここからはほぼ「コマンドを実行して良いですか？」と「次のTodoリストの項目に進んで良いですか？」の繰り返しや、微調整をしただけなので、割愛します。
UIは、Tailwind.cssで実装してくれましたが、途中でエラーに詰まってTailwindCSS4ではなく、3.7にダウングレードして解決(?)しておりました。（ここはバージョン指定した方が良かったですね！）
この時点で、Laravel Sanctum使用したログインページができており、シーダーの作成・実行もお願いしたらやってくれました。
CSSの修正依頼
若干背景のアイコンがはみ出ていたため、どのように修正するか伝えずにお願いしたら、アイコンが収まるようになりました（若干位置が気になりますが！）
TypeScriptエラーの修正
TSエラーも実際にAI自身に確認するコマンドを打っていただき、その修正も行ってもらった結果、無事テストが通るようになりました。（修正後も同じコマンドを実行して再度確認しておりました）
ログイン後のページでの問題を確認するために、Kilo Codeのサイドバー内でブラウザでログイン・確認してくれます
統計ページの仕様には何も言及しなかったため、ガワだけのページになりました。
統計ボタンが機能してない事に言及すると：
①Kilo Codeのサイドバー内でENVのAPP_URL使ってURLにアクセスし、
②ブラウザ描画モードに入り、
③Seederで作成したアイパスを使ってログインし
④問題のある統計ページに遷移して問題を確認し、
⑤修正が開始しました！
スピードは遅めですが、見ていて少し感動しました。
コンソールエラー丸投げしても、JSライブラリに対応
統計ページでは線グラフが棒グラフに変わるボタンが機能していなかったので、コンソールエラーを丸投げしてみました。
Chart.jsというグラフのJSライブリが絡むファイルが修正されて、コンソールエラーが消え、棒グラフへの切り替えが可能になっておりました。
PHPUnitテストはフィーチャーテストのみ
提示した会員登録/ログイン・目標・タスク機能のフィーチャーテストは作成してくれましたが、単体テストは明確に指示してないためか、作成されておりませんでした。
また、テスト失敗後ですが、ファクトリーが不足していたので作成してくれました。
出来上がったSPA
会員登録画面
何も指示しておりませんが、小文字・大文字・数字・特殊文字・文字数を考慮した「パスワード強度チェッカー」も導入してくれましたが、こちらもコンソールエラー吐かずに動いておりました！
まぐれかもしれませんが、Laravel Sanctum + Vue.jsの機能を使って一発で会員登録できたのも嬉しかったです。
ダッシュボード
目標管理画面・目標作成モーダル
一つ気になった点としては、目標管理画面から初回タスクを作成した後、この画面では2つ目以降が作成できないことでした。
わざわざタスク管理画面に入ってから２個目以降を作成する必要があります！（笑）
タスク管理画面・タスク作成モーダル
プロフィール設定
（アカウント削除項目）
ログアウト・パスワード変更・プロフィール編集・アカウント削除もちゃんと機能しておりました。✅
プロンプトや仕様に対する質問で、特に触れていない統計ページはほぼ未実装
ただし、共通ヘッダーのログアウトと目標達成率・タスク完了率は実際に正しく動いておりました！
使ってみた感想
✅ 成功した部分
基本的なアプリケーション構造
- 単体テスト以外、欲しい機能は全て実装されていた
- Laravel + Vue.js + TypeScript + Piniaの環境が正常に構築された
- データベースマイグレーション、モデル、コントローラー、Featureテスト、Seederが適切に生成された
- SPA用のルーティング設定が正しく実装されているた
- 認証システムがしっかりと機能していた
UI/UXデザイン
- レスポンシブデザインが適用されたダッシュボードの見た目は意外と良かった
- ロード時の微妙にコンポーネントが動くアニメーションと、ホバー時の効果が効いていた
- コンポーネント設計
セキュリティ対応
- 内部ID（整数型）と外部UUID の適切な使い分け
- CSRF保護・Laravel Sanctum・バリデーションが実装済み
⚠️ 未実装部分
- cronで動く定期タスクスケジュラー
- ベルマークの通知
- 統計ページの機能（ガワ以外）
完成した体でタスクが終わりましたが、プロンプトや仕様で触れていない統計ページ等のボタンやチャートの機能はconsole.logで実装予定の旨を示す形になっておりました。
これ自体は問題ないのですが、それについての言及があればな尚良かったです！
⚠️ 注意が必要な点
- コスト管理：足りていない機能追加やバグ修正まで行うとクレジットを多く消費する
- 細かい調整：生成後の細かいカスタマイズは手動対応が必要
- プロダクション対応：セキュリティや最適化は別途必要
- UX考慮：目標管理画面で初回タスクを作成した後、2つ目以降のタスクがこの画面では作成できなかった
🚀 総合評価
プロトタイプ作成や概念実証（PoC）にはお手軽に使用できて、便利だと感じました！
使って欲しい技術スタックと機能を使用し、DBのIDを外向き用にUUID化をしてくれて、env変数もちゃんと読み込んでくれたので、もっと設計も詳細に記載すれば品質が高いものを作ってくれそうですね。
$20のクレジット制限内での開発だったため、優先度の高い基本機能を可能なだけ実装するつもりでしたが、ほんの少しクレジットが足りなかったですね。
この実装で$20USDは少し高く感じるかもしれませんが、今後はClaude Sonnet4よりトークンコストが低い通常のGPT-5、そして格段にお安くなるGPT-5の派生モデルに期待しております！！
今後やってみたいこと
バグの修正能力も、Claude Sonnet4で十分に対応可能でしたが、GPT-5モデルを使用したKilo Codeの場合は潜在的なバグ検知・修正能力に期待している自分がいます...
今回は有料APIを使用しましたが、Kilo Codeは無料のオープンソースモデルを使用できるので、試してみたいです！（ハードのスペックが高くないとアウトプットの質が担保されないので、そこが悩みどころになりそうですね！）
もし試された方がいれば、ぜひ感想を教えてください！