はじめに
全6回にわたって、Claude Codeを使いながら麻雀学習アプリを作ってきました。
完成したのは、3種類のクイズモード（何切るクイズ・待ち牌クイズ・点数計算クイズ）＋タイマー＋戦歴＋BGM＋本物らしい牌画像を備えた、Netlifyで公開済みのWebアプリです。
最終回では、連載全体を振り返りながら「バイブコーディングって結局どういうものだったのか」を自分なりに総括したいと思います。
連載の振り返り
| 回 | やったこと | 一番の発見 |
|---|---|---|
| 第1回 | 何切るクイズのプロトタイプ作成 | 10分でそれっぽいアプリ完成（謎タイムアウトの洗礼あり） |
| 第2回 | 待ち牌クイズモードの追加 | 症状を伝えるだけでバグを直してくれた |
| 第3回 | UI改善＋点数計算・タイマー・戦歴・BGMを追加 | すべて問題なく実装できた |
| 第4回 | 牌画像の置き換え | 34種類のマッピングを一瞬でやってくれた |
| 第5回 | Netlifyでデプロイ | あっさり繋がった。Claude Codeよりブラウザで聞けばよかった場面も |
Claude Codeが得意だったこと・苦手だったこと
当初の目的は「Claude Codeの可能性を知ること」でした。6回やってみて、できることの多さに驚いた一方で、「これは人間がやるべきだな」と感じる場面もありました。
6回を通じて見えてきた、Claude Codeの「向いていること・向いていないこと」を整理します。
◎ 得意だったこと
0→1のプロトタイプ作成
「何切るクイズを作って」という一言から、向聴数計算つきの本格的なアプリが10分で動いた。アイデアを形にするスピードは圧倒的です。
規則性のある繰り返し作業
34種類の牌画像マッピングを一瞬で生成。人間がやると疲れてタイポが出る作業こそ、AIに任せる価値が最も高いです。
症状を伝えるだけのバグ修正
「新しい手牌が毎回同じになる」「字牌の画像が表示されない」と伝えるだけで、原因を調べて解決策を出してくれました。
BGMの自作
「BGMほしい」という一言に対して、外部ファイルなしにWeb Audio APIでメロディーを生成してきた。想定を超えた解決策を出してくることがある。
△ 苦手だったこと・人間が必要だったこと
実際に使って気づく問題の発見
「新しい手牌ボタンを連打してみたら毎回同じ」という発見は、人間が実際に触って初めて気づけました。
予測しにくいエッジケース
「大体は正確、でも完全に任せて終わりではない」という感覚が正しいです。牌画像のところでは、字牌4種が全滅してたりしましたしね。
「なんかこれじゃない」の判断
第1回の牌の見た目調整で、テキストラベル版・SVG自作版など何度か試したが「しっくりこない」という判断は人間にしかできませんでした。
実務目線での総括
今回は勉強用アプリを最後まで作り切りましたが、実務ではここまで作ったものが「たたき台」になるイメージでしょうか。「こういう動きでいいですか？」を素早く形にして確認する、その部分でClaude Codeは特に力を発揮しそうです。
そして、結果を左右するプロンプトについては、長さが問題ではないとも感じました。
今回も、第1回のプロンプトは少し長かったと思いますし、その他については「新しい手牌が毎回同じなんだけど」と一言で済ます場合もありました。長くても短くても、「自分が何を求めているか」が伝わるかどうかが全てですよね。これって、人間相手のコミュニケーションと同じだなと思います。
AIに投げる以前に「自分が何を作りたいか・何がおかしいか」を自分で分かっていることが前提になります。
なんでもゴール設定を明確にしてから、作りこむことが大事です！
最後に
全6回、読んでいただきありがとうございました！
まだClaude Codeに触ったことがないなーという方も、是非アプリを気軽に作って、その優秀さに魅了されてみてください！
完成したアプリはこちら：https://cheerful-liger-0e5064.netlify.app/