はじめに
本記事では、Claude Code を使って「どこまで任せられるのか」「どこから人が考えるべきか」という観点で「ラッコツールズ風ツール」を作りました。その時の気づきや、上司とのやり取りで勉強になった点をまとめてみました。同じようにつまづいたり、これから触っていこうという方の参考になれば嬉しいです。
① 作ったもの（計6機能）
基本3機能（クローン）
| ツール | 一言説明 |
|---|---|
| 文字数カウンター | 入力テキストの文字数・改行数・単語数・段落数をリアルタイム表示 |
| QR作成 | テキスト入力 → QRコード画像を生成・ダウンロード可能 |
| 命名規則変換 | camelCase / snake_case / PascalCase を相互変換 |
追加3機能（オリジナル）
| ツール | 一言説明 |
|---|---|
| MBTI診断 | 10問の3択でE/I・S/N・T/F・J/Pを判定、16タイプを表示 |
| パスワード生成 | 文字種・文字数を指定してランダム生成 |
| タイピングゲーム | 日本語お題を入力、ミス回数・精度・S〜Dランク評価 |
② どんな流れで作ったか
自然言語ベースでゴールから会話を始めた
最初に「ラッコツールズに似た機能を3つ作りつつ、オリジナルで3機能追加したい」と相談。
デザインの方向性を共有した状態でスタートしました。
作るものはあらかじめ決めていたので、候補として提示してそのまま採用。
技術選定や、画面レイアウト配置も自然言語や、候補の中からGUIで選ぶ形で行いました。
Gitについては会話の流れでセットアップしてもらい、修正のたびにコミットするつもりでいました。
しかし、コミットを忘れていたりしたので、自動化までするべきだったと反省しています。
技術選定の理由
バニラJS vs Vite + React
まずClaudeに「この規模のツールサイトを作るなら何が向いているか」と相談し、以下の候補が挙がりました。
- バニラJS
- Vite + React
- Next.js
- Svelte
バニラJSは最もシンプルで、既存のHTMLをそのまま拡張できるため、短時間で実装可能です。一方で今回の目的は「AIを活用した実務レベルの開発フローを体験すること」でもあったため、ある程度構造を持った開発環境を選びたいと考えました。
Next.jsはSEOやSSRなどの観点で優れていますが、今回のようなツール集にはややオーバースペックと判断しました。
その中で、Vite + Reactは以下の理由から採用しました。
- 実務でも使われる構成であり、今後の学習コストが無駄にならない
- コンポーネント単位での修正がしやすく、Claude Codeとの相性が良い
- バニラJSよりも拡張性があり、Next.jsほど重くない
「AIに選択肢を出させつつ、自分で判断する」というプロセス自体も、今回の学びの一つでした。
なぜ Claude Codeか
1. Gitとの相性が良い
「修正したらコミット」の流れをそのまま会話で指示できた。
2. ファイルを直接読み書きしてくれる
例えば、「このHTMLに追記して」と言えば、コピペなしでそのまま変更される。Web版だとコードをコピーして自分で貼る手間がある。
3. エラーが出たらターミナルのログを貼るだけで解決しようとしてくれる
ブラウザのコンソールエラーをそのまま投げると、該当箇所を特定して修正してくれる。
③ よかった点
✔ 開発スピードが圧倒的に速い
6機能のツールを実装しましたが、最初の会話から最初の機能完成まで1時間もかかりませんでした。
その後、レイアウト調整や追加機能、エラー修正を含めても合計で数時間程度で形になりました。
従来の開発と比べると、初速の立ち上がりが非常に速いと感じました。
✔ 診断ロジックの設計もある程度任せられる
MBTI診断では、質問内容や判定ロジックをClaudeに設計してもらいました。
細部まで検証したわけではありませんが、実際に使ってみると大手診断サイトと近い結果が出るケースもあり、実用上問題ないレベルの精度だと感じました。
大手サイトでも筆者は「ENFP・ESFP」のどちらかだったが、今回は「ENFP」と表示された
「ロジック設計まである程度任せられる」という点は大きな発見でした。
④ 学び・気づき
✔ AIは設計までできるが、品質は担保しない
一通り動くものはすぐに出来上がる一方で、想定外の操作をすると崩れるケースがありました。
一見問題なさそうでも、内部にバグを抱えているケースが多く、「動く＝正しい」ではないことを実感しました。
✔ モデル選択で結果が大きく変わる
軽量モデル（Haiku）ではバグ修正のラリーが続いたのに対し、デフォルトモデル（Sonnet）に切り替えた途端に一発で解決するケースがありました。
- 軽量モデル：部分的な修正は得意だが、全体の整合性が崩れやすい
- 高性能モデル：全体を踏まえた修正が得意
タスクの複雑さに応じてモデルを使い分ける重要性を感じました。
✔ AIは「優秀な新人」として扱うとちょうどいい
上司の「ちょっと頑張る新入社員くらいに思うと良い」という言葉がしっくりきました。
ある程度は任せられるが、最終的な判断と品質担保は人間側が担う必要があります。
エラーのラリーが多かった → 原因はモデルだった
バグ修正のやり取りが10回近く続くことがあり、「なかなか解決しないな」と感じていました。よく見ると、Haiku（軽量モデル）で動かしていたのが原因でした。
→Sonnet（デフォルトモデル）に切り替えたところ、同じ問題が1発で解決。
タスクの複雑度に応じてモデルを使い分けることの重要さを実感しました。
さっきまで動いていたのに！
基本的な動きまでは正常に動いて問題ないと思っていたのですが、ちょっと変わった操作をすると、意図しない挙動やレイアウトになり、そこから全体に波及して総崩れになることがあった。一見良さそうに見えて、潜在的なバグを多く抱えていたのです。
→今回は自然言語で現状を伝えたり、スクショをそのままターミナルに貼り付けることで解決を図ったが、複数回ラリーする必要があった。
⑤エラー解決時のテクニック
「プランモード」を活用する
軽量モデル以外を使ったり、何回もラリーして地道に直すのも手段として良いと思いますが、状況に応じて使いこなしたいものが、「プランモード」です。
shift+tabキーを押すと入力画面の下に「plan mode on」と表示される
その状態で
「タイピングゲームを作ったけど、文字数カウントがおかしい。他にもそういったバグを洗い出して欲しい。」
とプロンプトとして投げると、ソースを分析し、バグの一覧と、修正方法と検証方法をかなりみやすい形でまとめてくれました。
バグ分析と一覧化
修正方法と検証方法の提案
あとは、プロンプトでお願いするだけでソース修正まで行ってくれました。
bug 3以外を直して
「/simplify」を活用する
/simplify は、変更したコードを自動レビューして問題を修正するスキルです。
Claude Codeに最初から付属しているバンドルスキルです。
「/simplify」の活用例の一部
今回のフローでは、
- バグの原因が不明なとき → plan mode
- 修正後の品質担保 → /simplify
といった形で活用しました。
⑥まとめ
今回の検証から、Claude Codeは「実装ツール」ではなく「設計〜実装まで伴走する開発パートナー」として活用できると感じました。
一方で、以下のポイントを意識することで、品質をより高められると感じました。
- 作るものを事前に決めておくことで、AIの提案がブレなくなる
- 当たり前かもしれないが、モデル選択は重要（複雑なタスクはSonnet以上）
- 一見動いてもバグは潜んでいるため、検証工程は必須
- plan modeと/simplifyを使い分けると修正効率が上がる
AIに任せる範囲と、人が責任を持つ範囲を切り分けることで、開発スピードと品質のバランスを取れると感じました。今回は自然言語で作り上げていき、後からCLAUDE.mdを作りました。最初に薄く書いておけばもっと効率的でした。Haikuでつまずいたのも、CLAUDE.mdに禁止事項を書いておけば、同じミスを防げた可能性があると感じました。