【Claude Code】Vibe Codingで自分用のQiita分析ツールを作ってみた

# はじめに

「自分のQiita投稿を分析できるツールがあったらいいな」

そんなアイデアが頭に浮かんだとき、あなたならどうしますか？これまでの私なら、こんなことを考えていました。

- とりあえず使い慣れたPythonで？
- データベースはどうする？最近よく触っているDuckDBかな？
- グラフライブラリは何を使おう？
- WebアプリにするならフレームワークはとりあえずStreamlit？

そして大抵、技術選定で飽きて「今度時間があるときに...」と先延ばしにしてしまっていました。

今回、話題のClaude Codeを使って開発してみたところ、この「アイデアから完成まで」の体験が劇的に変わりました。効率がよくなったのももちろんですが、**今まで形にできなかったアイデアが、実際に動くものになる**という体験ができました。
本記事では、Claude CodeでVive Codingして作ったものや、そのときの感想について書きたいと思います。

（脱線）初めての共同作業に感動する図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3921802/9988a1fb-9ff8-4e9f-ba3f-147f8126f31b.png)

# Claude Codeの導入

Claude Codeを始めるのは思っているより簡単です。

Anthropicの公式ドキュメントに従って進めれば、簡単に環境が整います。基本的な流れは以下の通りです。

1. WSL環境を準備（Windowsのため）
2. Claude Pro（またはTeam）プランに加入
3. npmでClaude Codeをインストール
4. アカウント情報の連携
5. プロジェクトフォルダを指定してスタート

特別な設定やAPI keyの取得なども不要で、すぐに使い始められました。詳細な手順は公式ドキュメントが分かりやすいので、そちらを参照してください。

https://docs.anthropic.com/en/docs/claude-code

### WSLならではの注意点

導入は簡単なのですが、1点だけハマったポイントがあります。それは、**適切な設定をしないと2回目以降のプロンプト（もしくはタスク）が実行されない**点です。

これは、APIへの接続時の設定による問題のようです。

詳細は以下記事を参照いただければと思います。（とても参考になりました。ありがとうございます！）

https://qiita.com/kabayan/items/413a98be123117825773

https://qiita.com/kazuki_adachi/items/ca63a2ce5f7952bf51e8

# Claude Codeとの開発体験

### 実際に作ったもの

今回作成したのは「Qiita分析ツール」です。指定したユーザーの投稿データを取得して、以下のような分析を行います。

- 基本統計（投稿数、いいね数、ストック数など）
- 投稿頻度分析（月別、曜日別、時間別のパターン）
- エンゲージメント推移（時系列でのいいね・ストック数変化）
- 人気記事ランキング
- よく使うタグの分析

最終的にはCLI版とStreamlitを使ったWeb版の両方が完成し、Web版では、グラフでデータを可視化できるダッシュボードになりました。それなりに見やすいものができたなという感想です。

#### CLI版

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3921802/7b14fcd9-5625-4e02-911e-2461ddfcb05a.png)

#### Web版

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3921802/8d905674-3e1a-4a2b-99bf-59ec639b4288.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3921802/399a040c-6522-4339-9581-f1f9ad3ca278.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3921802/ee4561c1-4866-49c2-9d31-e25122eba88d.png)

### 「相談しながら進められる」安心感

最初にClaude Codeに相談したのは、シンプルなCLIツールの作成でした。

最初に渡したプロンプトは以下の通りです。

```md
Qiita APIを使って、ユーザーの投稿情報を取得するプログラムをPythonで作成してほしい
取得したデータは、DuckDBを用いて分析することを想定している
投稿頻度やいいね数、ストック数、contributionなどの推移なども見たいと考えている
```

すると、ササっとtodoリストを作ってそれに基づいて実装を進めてくれました。

### 「実装コストの劇的削減」を体感

CLIツールが完成した後、私は漠然と「Webアプリ版もあったらいいな」「グラフで可視化できたら」と考えていました。

従来であれば以下のような部分で悩むなど時間がかかったと思います。
- Streamlit？React？フレームワーク選定で悩む
- Plotly？Chart.js？グラフライブラリの比較検討
- 公式ドキュメントを読みながら試行錯誤

しかし、Claude Codeを利用することで、「将来React移行も考慮して、まずはStreamlitで始めましょうか？グラフはPlotlyでインタラクティブに」といった提案をもらえました。

知識としては知っているけれど、実装方法を調べながら書くのが面倒な部分で、「調べ物タイム」がゼロになったのが一番大きいのかなと思いました。

### 「期待を超えるもの」が返ってくる

感動したのは、私が明確に指示していない部分まで、適切に実装してくれたことです。

例えば以下のような部分の実装は私は一言も指示していません。
- タブ式のUI設計（言ってない）
- エラーハンドリング（お任せ）
- 将来の拡張を考慮したプロジェクト構造（想定外）
  - 注）提案はしてくれたが、お願いするまで実施はしてくれなかったです

気がついたら、単なる分析ツールではなく、ある程度有用なダッシュボードアプリケーションが完成していました。

このあたりの「いい感じの実装」をやってくれるのもかなり魅力的に感じます。

# 「できる」範囲が拡張された実感

今回の開発で最も印象的だったのは、**技術的なハードルで諦めることがなくなった**ことです。

### Before（従来の開発）
アイデア → 技術調査 → 「飽きた...」→ 先延ばし → 諦め

### After（Claude Code）
アイデア → Claude Codeに相談 → 完成

エラーが出ても、Claude Codeが原因を特定して修正してくれます。KeyErrorで止まって「またデバッグかぁ」と萎えることもありません。（~~デバッグ作業も全く面白くないわけではありませんが…~~）

これは単なる効率化ではなく、**創作の入り口が劇的に下がった**という体験でした。

# 開発者の役割はどう変わる？

今回の体験を通じて感じたのは、開発者の役割が変化しているということです。

### 従来の開発者の時間配分
- 技術調査・選定：30%
- 実装・デバッグ：60%
- アイデア練り込み：10%

### 最新の開発者の配分
- 技術調査・選定：5%（相談で済む）
    - ※Web調査などを駆使して、丁寧に時間をかけてやろうと思えばやれる気はします
- 実装・デバッグ：20%（ほぼお任せ）
- アイデア練り込み：75%（ここが重要に）

つまり、「どう作るか（**How**）」から「何を作るか（**What**）」「なぜ作るか（**Why**）」により多くの時間を使えるようになったと言えるでしょう。

# 個人開発の今後

この体験から見えてきたのは、**アイデアがあれば誰でも形にできる時代**の到来です。

これまで「プログラミングはできないけど、こんなツールがあったらいいのに」と思っていた人たちも、Claude Codeのような AI開発ツールを使えば、実際に動くものを作れるかもしれません。

もちろん、すべてがAIで解決できるわけではありません。
- どんな問題を解決したいか
- ユーザーにとって本当に価値があるか

といった部分をしっかり考えて、AIの手綱を握る必要があるのではないかと感じています。（恐らく各所でいわれている話ではあると思いますが…）

# Claude Code使用時のポイント

実際に使ってみて感じた重要なポイントがいくつかありました。

### CLAUDE.mdでルール設定
プロジェクトルートに`CLAUDE.md`を配置して、開発方針や制約を明記しておくと効果的です。特に重要なのは以下のような内容は記載しておくとよいかもしれません。
- 使用するパッケージ管理ツール
- **Git操作の制約**：`git init`使用禁止など（既存の履歴削除を防ぐため）

:::note warn
Git操作の制約について、禁止事項をプロンプトとして渡すのはあまり効果的でないという話もあるので参考程度でお願いいたします。
:::

### 段階的な指示
一度にすべてを求めず、シンプルなものから段階的に発展させる方が良い結果が得られました。（意識しなくても勝手にやってくれているかもしれません）

:::note
私の場合は今後どうしたいかをプロンプトに入れることが多いです。
:::

### 生成されたコードの責任は開発者にある
自分の思うようにいろいろ開発をしていくのはよいですが、あくまでも責任は開発者である自分であることは忘れないようにしたいと思っています。

# おわりに

Claude Codeを使った開発は、単なる「効率化ツール」以上の体験でした。技術的な実装の壁が下がることで、**アイデアを形にできた喜び**をより感じやすくなったと思います。

もしあなたも「作りたいものはあるけれど、技術的なハードルで躊躇している」なら、一度試してみてください。きっと、今までにない感動を感じられるはずです。

また、実際に作成したQiita分析ツールは気が向けば公開したいと思います。

ありがとうございました。

# おまけ
まだ、実装途中ですが、Reactでの実装もかなりあっさり進めてくれています。すごい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3921802/55f61d8b-7ef5-443f-8fc0-75adb14d39eb.png)

こうなってくると、デザインの知識などもしないとだめかもなぁ…と思うようになっています。また何か気づきがあれば、整理して投稿したいと思います。
今度こそ終わりです。ありがとうございました。