【ITニュース解説】How I cut Claude Code & Cursor's SaaS boilerplate token burn by 50%..!

近年、AI技術の進化により、ソフトウェア開発の現場ではAIを活用したコーディングアシスタント（エージェントと呼ばれることもある）が普及し始めている。これらのエージェントは、まるで熟練のプログラマーのようにコードを生成したり、デバッグを手伝ったりしてくれるため、開発効率の大幅な向上が期待されている。しかし、このような強力なツールにも、実は見過ごされがちな課題があった。それが、AIが不必要な情報を処理するために「トークン」を大量に消費してしまうという問題だ。

トークンとは、AIが情報を理解・生成する際に用いる最小単位のことで、文章における単語や記号のようなものだと考えるとわかりやすい。AIとのやり取りが増えれば増えるほど、このトークン消費量も増加し、最終的には利用コストに直結する。特に、SaaS（Software as a Service）と呼ばれるサービス型のアプリケーションを開発する際、AIエージェントが特定の処理を何度も繰り返すことで、このトークン消費が無駄に膨れ上がってしまうケースが頻繁に発生していた。

具体的には、新しいプロジェクトを開始するたびに、AIエージェントはアプリケーションの構造を理解するために、数十ものファイルを読み込み、ルーティング（ウェブサイトのURLとコードの紐付け）、認証（ユーザーが正当なユーザーかを確認する仕組み）、データベース操作に関するコードがどこにあるのかを探し出す作業に、約20,000トークン以上を費やしてしまう。さらに、支払い処理やクレジット管理、認証ミドルウェア（認証を行うプログラム）といった、SaaSアプリで必ず必要となる共通の機能をゼロからコーディング・デバッグする際には、35,000から50,000ものトークンを消費することがある。しかも、せっかくコードを生成しても、古いSDK（ソフトウェア開発キット）のメソッドを提案したり、APIキー（外部サービス連携に必要な鍵）が設定されていないためにローカル環境で動作しなかったりといった問題も頻繁に起こり、結果的に無駄な時間とコストが発生していたのだ。

このような状況を受け、筆者はAIエージェントが同じような作業を何度も繰り返すのを目の当たりにし、この非効率なプロセスを根本から改善するためのツール「vstacks」を開発した。vstacksは、CLI（コマンドラインインターフェース）と呼ばれるコマンド入力で操作するツールと、AIエージェントがプロジェクトを理解しやすくするための「SKILL.md」という指示ファイルで構成されている。これらを活用することで、一回の開発セッションあたり約45,000から60,000ものトークンを節約できるようになる。vstacksには主に四つの機能があるため、それぞれ詳しく説明しよう。

第一に、「vstacks map」という機能がある。これは、従来のAIエージェントがプロジェクトのファイル構成を一つ一つ手探りで調べていた非効率なプロセスを改善するものだ。AIエージェントがチャットセッションを開始するたびに、まるで初めての場所を探索するかのようにディレクトリツリー（フォルダの階層構造）を巡回し、30ファイルものコードを読み込んでいた作業は、非常に時間がかかり、多くのトークンを消費していた。vstacks mapコマンドを実行すると、JavaScriptやTypeScriptで書かれたリポジトリ（コードの保管場所）をわずか229ミリ秒という短時間でスキャンし、プロジェクト全体の構造をまとめた「.vstacks/MAP.md」というファイルを自動で生成する。このMAP.mdファイルは、SKILL.mdと連携して、AIエージェントがセッションの最初の段階で読み込むことで、すぐにプロジェクト全体の状況を把握できるようになる。具体的には、インストールされているすべてのルーティングやAPIエンドポイント、データベースのテーブルとそのスキーマ（構造の定義）、利用している支払いサービスやAIサービスのFacade（後述）、そして必要な環境変数キーまで、あらゆる情報が一目でわかるようになるため、AIエージェントは無駄なファイル探索をすることなく、すぐに本質的な作業に取り掛かれるようになるのだ。

第二に、「vstacks new」という機能は、「Zero API Key」Local Money Loopと呼ばれ、ローカル開発環境のセットアップを劇的に簡素化する。多くのボイラープレート（定型的なプロジェクトの雛形）は、Supabase（バックエンドサービス）、StripeやDodoなどの決済サービス、OpenAIなどのAIサービスを利用するために、npm run dev（開発サーバーを起動するコマンド）を実行する前に、12個もの環境変数キーを設定しなければならず、これらが設定されていないとすぐにエラーで動作しなくなってしまう。しかし、vstacks newコマンドを使うと、Next.jsのApp Router（ウェブアプリケーションのルーティング機能）、Supabase、Tailwind（CSSフレームワーク）を組み合わせたクリーンなプロジェクトの雛形を生成し、これらの設定を一元的にsrc/config.tsファイルで管理できるようにする。さらに重要なのは、APIキーを一つも設定していなくても、この雛形が動作する点だ。APIキーが空白の場合でも、.vstacks/dev-db.jsonというファイルを使ってローカルでの状態を管理し、クレジットのテストや、ワンクリックで支払いウェブフック（決済サービスからの通知を受け取る仕組み）をシミュレーションしてユーザーをプロプランにアップグレードしたり、AIチャットの応答をシミュレーションしたりできるインタラクティブな開発コントロールパネルがsrc/app/page.tsxに組み込まれている。これにより、複雑なAPIキー設定に煩わされることなく、すぐに主要な機能をテストできる。また、利用規約やプライバシーポリシーのページ、サイトマップ、robots.txt、ウェイティングリストモードなどもあらかじめ用意されているため、開発者は本質的な機能開発に集中できる。

第三に、「vstacks swap」という機能は、プロバイダーの切り替えを1秒で行えるようにする。通常、Stripeで支払い機能を実装した後、Dodo PaymentsやPolar、LemonSqueezyといった別の決済サービスに切り替えたい場合、あるいはOpenAIからAnthropic、Gemini、OpenRouterといった別のAIプロバイダーに変更したい場合、AIエージェントはAPIルートやUIコンポーネント（画面の部品）をまるごと書き換える必要があった。vstacksでは、これらのプロバイダーを「ファサード」と呼ばれる設計パターンで抽象化している。ファサードとは、複雑なシステムを単純なインターフェースで覆い隠すことで、利用者がその複雑さを意識せずに済むようにする手法のことだ。このファサードとTypeScriptの型定義（コードのデータ型を定義する仕組み）のおかげで、vstacks swap payments stripeやvstacks swap payments dodo-paymentsといった簡単なコマンドを実行するだけで、基盤となるファイルを瞬時に切り替えることができる。これにより、データベースのマイグレーション（データベースの構造変更履歴）も維持され、TypeScriptのエラーも発生せず、アプリケーションコードを一切変更することなく、プロバイダーの切り替えが完了する。

最後に、「vstacks check」という機能は、アプリケーションをデプロイ（公開）する前に品質とセキュリティを確保するための「Pre-Ship Guardrails（出荷前ガードレール）」として機能する。AIエージェントは、インタラクティブなコンポーネントの先頭に"use client"というディレクティブ（指示）を付け忘れたり、クライアントサイドのUIコード（ウェブブラウザ上で動くコード）の中に、誤ってサーバーサイドでしか使えないSDKをインポートしてしまったりといったミスを犯しやすい。vstacks check --fixコマンドは、このような"use client"の不足を自動的に修正し、.envファイルに定義された環境変数キーを同期させ、ファサードを迂回した（W_FACADE_BYPASS）コードがないかを警告する。さらに、vstacks check --shipコマンドを実行すると、デプロイ前のセキュリティ監査を実施する。この監査では、ライブ環境の秘密鍵（例:sk_live_で始まる文字列）が漏洩していないか、クライアントサイドでプライベートな環境変数にアクセスしていないか、ハードコードされたlocalhostのURL（開発環境でのみ使うアドレス）が残っていないか、そして検証されていないウェブフックルートがないかなどを厳しくチェックし、本番環境への安全なデプロイをサポートする。

vstacksは、AIエージェントを活用したSaaSアプリケーション開発における無駄なトークン消費と、それに伴う開発時間のロスを大幅に削減するための包括的なツールキットだ。これらの機能により、開発者はAIとの協調作業をより効率的かつ経済的に進められるようになり、アプリケーションの本質的な価値を創造することに集中できるようになるだろう。