Claude CodeとのVibe Codingで1時間半でCLIを作ってみた
はじめに
Claude Codeを出来るだけ使い倒してやろうと、最近躍起になってるんです
実際に、結構アウトプット増えたなって気がしてきているんですが、パッとアウトプットの変化を見たいと思ってもリポジトリの「Insights」とか見るしかないのかなって思ってたんです。
でも、Insights見たとこで、複数プロジェクト同時に動かしたりするじゃないですか。
増減を知りたいとなると、横断して全部見てやりたいって思ったんですね。
多分調べれば、すぐ出てくるんだろうなと思いつつ、どうせならClaude Codeでなんか作って出させるかって思い、作り始めました。
そしたら、こんなのできました。
ここからは、claude codeの作業記録を元に
どのような流れでCLIを完成まで持ってきたかの記録です。
「GitHubの活動量を調べるサイトを作りたいんだけど...」
そんな一言から始まったプロジェクトが、約1時間20分後にはnpmでインストール可能なCLIツールとしてリリースされていました。しかも、コーディングからリリースまで、すべてAIと一緒に作業しました。
今回は、Claude CodeとVibe Codingを使って「gh-receipt」というGitHubの活動量をレシート風に表示するCLIツールを開発した経験をお話しします。
なぜCLIを選んだのか
最初は「GitHubの活動量を調べるWebサイト」を作ろうと考えていました。しかし、プライベートリポジトリの権限問題を考慮し、CLIツールに方向転換しました。
AIが提案してくれたのはgh CLI拡張機能として実装すること。理由は：
- 認証が簡単（
gh auth loginで設定済みの認証を使用） - GitHub エコシステムとの親和性が高い
-
gh apiコマンドでGraphQL APIに簡単にアクセスできる
小さなCLIだったこともあり、技術選定はとてもスムーズに進みました。
開発の流れ
16:20 - 初期実装（v1.0.0）
最初のバージョンは基本的な活動量表示機能のみ。カラフルなグラフ表示で、期間別サマリー（今日/今週/今月）とアクティブなリポジトリランキングを表示していました。
gh-activity nano72mkn
17:01 - 期間オプション追加（v1.1.0）
-w, --weekly # 週間レポート（7日間）
-m, --monthly # 月間レポート（30日間）
-y, --yearly # 年間レポート（365日間）
-d, --days N # カスタム期間
17:25 - レシート風デザインへ（v2.0.0）
ここが転換点でした。「レシート風にして」と依頼したら、一発で素晴らしいデザインが出てきました。
しかも、その後の機能追加でもデザインが崩れることなく、トンマナも一貫していました。
17:32 - 差分比較機能（v2.1.0）
gh-receipt -w --diff # 今週 vs 先週の比較
増加は緑色（+）、減少は赤色（-）で表示される機能を追加。
17:41 - プライバシーモード（v3.1.0）
SNS投稿を意識して、プライベートリポジトリを除外する--publicオプションを追加。
技術的な工夫
AIが実装してくれた技術的な工夫がいくつかあります：
クロスプラットフォーム対応
macOSとLinuxでdateコマンドの書式が異なる問題を自動的に解決：
if date -v -1d >/dev/null 2>&1; then
# macOS
FROM_DATE=$(date -v-${DAYS}d -u +%Y-%m-%dT%H:%M:%SZ)
else
# Linux
FROM_DATE=$(date -u -d "${DAYS} days ago" +%Y-%m-%dT%H:%M:%SZ)
fi
GitHub GraphQL APIの活用
必要最小限のデータのみを効率的に取得：
query($username: String!, $from: DateTime!, $to: DateTime!) {
user(login: $username) {
contributionsCollection(from: $from, to: $to) {
totalCommitContributions
restrictedContributionsCount
contributionCalendar {
totalContributions
}
}
}
}
Claude CodeとVibe Codingの活用ポイント
1. とにかく要望を伝える
「〇〇作りたいんだけど...」と伝えるだけで、AIが勝手に動いてくれます。構想から実装まですべて任せられました。
2. 技術選定の相談相手として
どんな仕組みを使うか（shellにするかNode.jsを使うか等）を適切に判断し、構想に適した技術を選定してくれました。
3. デザインパートナーとして
複数のデザイン案を提示してくれ、その中から選ぶという、まるで人間のデザイナーと相談しているような体験でした。
4. 継続的な改善
バージョンアップごとに機能を追加しても、全体の一貫性を保ちながら実装してくれました。
学んだこと
- 小さく始める重要性: CLIという小さなスコープだったからこそ、スムーズに開発できた
- AIとの対話の仕方: 具体的な要望を伝えれば、AIが適切な実装方法を提案してくれる
- デザインの一貫性: テキストベースのCLIは、AIが得意とする領域だった
まとめ
Claude CodeとVibe Codingを使えば、アイデアから実装、リリースまでを驚くほど短時間で実現できます。今回は約1時間20分でCLIツールを完成させることができました。
重要なのは、完璧を求めすぎずに「とりあえず作りたいものを伝えてみる」こと。AIが適切な技術選定から実装まで、すべてサポートしてくれます。
もし興味があれば、ぜひ試してみてください：
npx gh-receipt
Discussion