【Claude Code】ccusageの料金情報をVSCodeステータスバーに表示するプラグインを1時間で作ってみた
1. はじめに
Claude Codeを使っていると、「今どれくらいトークンを使って、料金はどのくらいかかっているのか？」が気になることがありませんか？
ccusageというCLIツールを使えばコストの可視化はできるのですが、表示領域を1つのツールが占有してしまうのが少しストレスでした。エディタはコードとエクスプローラに集中したいのに、料金情報の表示で画面が狭くなってしまう。かといって料金情報も常に把握しておきたい。そんなわがままな要求を満たすために、VSCodeのステータスバーにccusageの情報を表示するプラグインを作ってみました。
Claude Code自体がコード生成に非常に優秀なので、この拡張機能もClaude Codeを使って1時間程度でサクッと作ることができました。開発体験がとても良かったので、作ったものの紹介と合わせて記事にしてみます。
2. Claude Codeとccusageについて
Claude Code
Claude Code[1]は、Anthropic社が提供するAI駆動の開発環境です。インタフェースはCLIで提供されるためghコマンドなどを叩かせれば自分でタスク分解し、issueを上げ、それに対する解決策をワークスペース内のコードを参照しながら実装していくことも可能な、設定次第でだいぶお任せで実装させていけるCoding Agentといえます。
従来のChatGPTやCopilotと異なり、実際にファイルを操作しながら開発を進められるため、プロトタイプ作成や小規模なプロジェクト開発に特に威力を発揮します。
ccusage
ccusage[2]は、Claude CodeのAPI使用量とコストを可視化するCLIツールです。現在のトークン使用量、料金、使用中のモデルなどを確認できます。
# 基本的な使用方法
npx ccusage@latest
# リアルタイム表示
npx ccusage@latest blocks --live
非常に便利なツールなのですが、表示領域を占有してしまうため、エディタにエクスプローラとコードだけを表示させてコーディングに集中したいときには少し邪魔に感じることがありました。
3. CCUsage Status Bar Extension
そこで、ccusageの情報をVSCodeのステータスバーに表示するプラグインを作成しました。
ccode-vscode-plugin
主な機能
- ステータスバー表示: ccusageの出力結果をVSCodeの下部ステータスバーにコンパクトに表示
- 自動更新: 設定可能な間隔（デフォルト30秒）で情報を自動更新
- クリックアクション: ステータスバーをクリックするとリアルタイム表示コマンドを叩くターミナルを起動
表示例
ステータスバーには以下のような形式で情報が表示されます：
🤖 sonnet-4 🎯 13.44K Tkns 💰 $2.31 📈 $5.06
リミットまで残りどれくらいかという目安表示は、リアルタイム表示で参照することができますが、まずは今どれくらいAPIを叩いているかを確認するだけのツールとして作成しました。
インストール方法
あくまで個人用ツールとして作っているのでストア公開予定は今のところありません。
この拡張機能はVSIXファイルとして配布していますので、自己の責任において以下の手順でインストールできます：
-
VSIXファイルの取得: プロジェクトのルートディレクトリにある
ccode-vscode-plugin-0.0.1.vsixをダウンロード -
VSCodeでのインストール:
- VSCodeでコマンドパレット（
Ctrl+Shift+P/Cmd+Shift+P）を開く -
Extensions: Install from VSIX...を選択 - ダウンロードしたVSIXファイルを選択
- VSCodeでコマンドパレット（
- 拡張機能の有効化: インストール後、VSCodeを再起動すれば自動的に有効になります
設定項目
VSCodeの設定から以下の項目をカスタマイズできます：
-
ccusageStatusBar.command: 実行するccusageコマンド（デフォルト: "npx ccusage@latest blocks"） -
ccusageStatusBar.interval: 実行間隔（ミリ秒）（デフォルト: 30000） -
ccusageStatusBar.maxLength: ステータスバーに表示する最大文字数（デフォルト: 50） -
ccusageStatusBar.enabled: エクステンションの有効/無効化（デフォルト: true）
4. Claude Codeを使用したツール開発の感想
開発アプローチの発見
最初は「全部任せる」スタイルでプロジェクト作成を試したところ、エラーが続出してしまいました。そこで方針を変更し、VSCode公式の「Your First Extension」ガイド[3]に従って手動で雛形を作成し、その後の実装をClaude Codeに任せるという「サンドボックスを与えて好きに暴れさせる」アプローチに切り替えたところ、非常にスムーズに進みました。
Claude Codeは環境構築は苦手ですが、既存のプロジェクト構造を理解した上でのコード生成や、具体的な機能実装については非常に優秀でした。「環境が整った状態での開発パートナー」として活用するのがベストだと感じています。
実用性と満足度
完成したツールは期待以上に便利で、当初の目的だった「表示領域を占有する問題」は完全に解決しました。Claude Codeでコーディングしている最中に、ステータスバーを見るだけで現在のコスト状況が把握できるのは非常に快適です。
また、自分の作業フローに最適化された専用ツールを短時間で作れたことで、「思いついたアイデアをすぐに形にできる」というAI開発の醍醐味を実感しました。
おわりに
今回、Claude Codeを使ってccusageの情報をVSCodeステータスバーに表示するプラグインを開発しました。1時間程度という短時間で実用的なツールが作れたのは、Claude Codeの強力なサポートがあったからこそです。
個人的には、AIツールを使った開発の醍醐味は「思いついたアイデアをすぐに形にできる」ことだと思います。従来なら、VSCode拡張の開発方法を調べて、ドキュメントを読んで、試行錯誤して...という工程に数日かかっていたかもしれません。しかし、Claude Codeがあれば、アイデアから動作するプロトタイプまでを短時間で作ることができます。
また、自分の作業フローに最適化された小さなツールを作ることの価値も再認識しました。既存のソリューションで「だいたい」満足していても、「自分専用」に調整されたツールの使い勝手は格別です。
エンジニアが要らなくなるなんて話もありますが、「ちょっとしたツール作成」がより身近になってきた分、その昔自作PCを組みながら特に使いもしないファンコントローラをつけたりしていた 自分専用に環境をカスタマイズ する楽しさを感じているので、開発していく楽しさというのはさらに向上していくのではないでしょうか。AIと一緒に開発する未来は、想像以上に便利で楽しいものだと感じています。
Discussion
とても良いです