はじめに
今回はタイトルにある通り、麻雀アプリ作成×Claude Code×バイブコーディングについて書いていこうと思います。
突然ですが、最近麻雀の勉強を始めたものの、さっそく挫折気味です。
例えば14枚の牌を前にして「どれを切ればいいのかさっぱり分からない」という壁に激突しています。
そこで「よし、自分が勉強するためのアプリを、Claude Codeで作ったろ」と思い至りました。オンラインで対局する有名アプリはありますが、それだと時間がとられるし初学者には始めにくい側面もあると感じたからです。課題を解決するためのアプリ作成なんです、と体のいいことを言っておくことにします。
題材は麻雀ですが、この連載で検証したいのは 「Claude Code（AIエージェント）を使ったバイブコーディングの可能性」 です。そして「AIに何を任せると上手くいくか・いかないか」を実務目線で見ていきたいと思います。
前回のバイブコーディングの話をもう少し深堀りしていくイメージです。
Claude Codeをまだ触ったことがない方にも、少し試してみたけどよくわからなかった、という方にも、この連載では「こんなことできるんだ」というのが少しでも伝わればと思います！
この記事を読まれる方の想定像
・Claude Codeをなんとなく知ってはいて、使える環境にはあるが、実際に使ったことはない（もしくは少し触った程度）の人
・「自分でアプリを作ってみたい」という気持ちはあるけど、どこから始めればいいかわからない人
※麻雀に関しては、アプリの特性上、始めたばかり、またはルールをなんとなく知っている程度の人が対象です。
記事の中で度々麻雀用語が出てきますが、その解説を挟んでいると記事が麻雀解説記事になってしまうので、適宜以下のリンクなどを参考にしていただければ幸いです。
連載の全体構成
何回かに分けて解説を入れていきます。
| 回 | テーマ |
|---|---|
| 第1回（本記事） | 0→1のプロトタイプ：まずは動くものを短時間で作成 |
| 第2回 | 複雑ロジックの検証：待ち牌判定を丸投げする |
| 第3回 | 機能実装 : 細かい機能を実装し調整する |
| 第4回 | AIが最も輝く作業：34種類の牌画像マッピングをやらせる |
| 第5回 | ローカル→公開の壁：デプロイはうまくいくのか？ |
| 第6回 | 総括 |
予定ですので、もしかしたら内容がかなり変わるかもしれません。
環境・前提
- OS：Windows 11
-
使用ツール：Claude Code（ターミナル版）
※ターミナル版のClaude Codeを入れるなどの記事も過去書いておりますので、インストールがまだの方はそちらも是非参考にしてください。
『ClaudeCodeのターミナル版インストールについて』
https://qiita.com/Keiko_Abe/items/34a29a197bfc7fd80bad
プロジェクトフォルダを作って起動する
まず今回（第一回）の目標は『index.html 1ファイルで動く「何切るクイズ」の骨組みを作る』です！
まずPowerShellを開いて、プロジェクトフォルダを作ります。
こちらは任意の場所でOKです。
今回は麻雀アプリなので、そのまま『mahjong-app』というフォルダを作りました。
外套のフォルダに移動しておきます。
mkdir mahjong-app
cd mahjong-app
claude
claude と打つだけでClaude Codeが起動します。最初に「このフォルダで作業してもいいですか？」という確認が入るので、許可すればOKです。
対象のフォルダに移動してからClaudeを立ち上げないと、意味の分からない場所にファイルが作成されることがあります。私は実際にやらかしました……！プロジェクトフォルダを作成→そこに移動→Claudeを起動、という順番を意識してください。
最初のプロンプトを投げる
起動したら、以下のプロンプトをそのまま投げてみました。
投げたプロンプト：
麻雀初心者向けの「何切るクイズ」アプリのたたき台を、1ファイルの
index.html（CSSとJavaScript内包）で作成して。要件：
- 画面にはUnicodeの麻雀牌（🀇〜🀏、🀐〜🀘、🀙〜🀡、🀀〜🀆など）を使い、ランダムに14枚の手牌が並ぶ
- ユーザーがそのうちの1枚をクリックして「捨てる」と、それが正解（おすすめ）かどうかと、簡単な解説文が画面に表示される
- 背景は雀卓をイメージした深い緑（#1a5c38）でダークモード風にする
- まずはデザインの完成度よりも、動くロジックを優先して作成
ポイントは 「デザインよりロジック優先」と明示したこと です。最初から「綺麗にして」と言うと、AIはデザインにリソースを使いすぎてロジックが雑になることがあるみたいなので。
プロンプト自体は「麻雀初心者向けの『何切るクイズ』を作って」とだけ送ってもよいのですが、今回は最初の骨組みを作る大事な部分なので、少しだけきちんとした内容にしています。
「バイブコーディング＝適当に雑に投げる」というイメージがありますが、実際には要件を整理して言語化する力が必要だと思っています。短い指示で雑に投げると雑なものが返ってくる。「ちゃんとした指示を出せること」自体がスキルであり、それはそのまま要件定義の能力に直結するということですね。場面によっては雑でもいいと思いますので、使い分けですね！
結果：time outの洗礼を受ける
ここ最近何回かバイブコーディングの体感をする名目で好き勝手アプリを作りましたが、そんなに時間がかからなかったんですよね。しかし今回、時間がかかりました。
3時間30分です！！！
しかもそれだけ待ってtimeout……。やめて……。
再度チャレンジすると、次は10分くらいで返答が返ってきました。
なぜ同じプロンプトでこんなに時間差が出たのか……サーバー側の混雑状況が影響していたのかもしれません。Claude Codeはインターネット越しにAnthropicのサーバーと通信しているので、混んでいる時間帯はレスポンスが遅くなったり、タイムアウトしたりすることがあります。それで3時間？とも思いますが、ひとまず再挑戦で問題なく作成されたのでヨシとします。
※以下よりターミナル結果を何回か貼りますが、コードの内容は私もあまり理解できていません。向聴数計算というのが出てきますが、そんなものは初めて聞きました！というレベルです。
今回の記事の趣旨として、ターミナル結果の内容を細かく理解する必要はないため、こんなに色々やってくれたんだ、という程度で見流してください。
【ターミナルの結果】
● index.html を作成しました。
実装内容：
- 向聴数計算 — 再帰探索で標準手（4面子1雀頭）＋七対子を両方計算し、最小値を採用
- 最適解判定 — 14枚から1枚ずつ試して向聴数が最小になる捨て牌を列挙
- クリックで判定 — 正解は緑、不正解は赤、正解牌は黄色でハイライト
- 解説文 — 孤立字牌・孤立端牌・テンパイなど状況に応じた初心者向けコメント
- ヒントボタン — 正解牌を事前に光らせて確認可能
- 背景色 #1a5c38（雀卓グリーン）、Unicode 麻雀牌絵文字使用
✻ Crunched for 8m 50s
ブラウザで開いてみると、こんな画面が表示されました。
思ったよりいい感じです。
一度の指示でここまで作れるの、改めてすごいですよね。
牌をクリックすると解説が表示されます。
少し動かしてみて、麻雀初心者なりにいくつか気になる点を発見。
直してもらいます。
今度は思ったことをそのままつらつら連ねます。気持ちのままに。
【2回目のプロンプト】
① 牌に書かれた文字が少し薄いので見えづらい。
②『最良の捨て牌後の向聴数:3向聴』の意味を解説してほしい。
③ ヒントを押した後だと、牌を選べない仕様になってしまっている。
④ 捨てる牌の選択肢がありすぎるので、例えば立直にするにはとか、そういう選択肢を絞るような内容のほうがいい気がする。
すると、以下の通り変更を加えてくれました。
【ターミナルの結果】
● 主な変更点：
牌の見やすさ
- 絵文字の下に「二萬」「五筒」などテキストラベルを常時表示
- タイル背景を #f0ece0（少し濃いクリーム）+ 枠線追加でコントラスト改善
向聴数の解説
- ゴールボックス内に常時表示：「0向聴 = テンパイ（リーチできる！）/ 1向聴 = あと1枚でテンパイ / 2向聴 = あと2枚」
ヒント後も選択できるよう修正
- hintIdxs という変数でハイライト状態を管理し、locked クラスを付けないようにした
- ヒント後は「黄色い牌が正解です。選んで確認しよう！」と表示
目標の明確化
- 40回ランダム試行して一番テンパイに近い手牌を優先生成
- 向聴数に応じて問いが変わる：
- 0向聴 → 「1枚切ってテンパイ（リーチ）になろう！」
- 1向聴 → 「1枚切って一向聴にしよう！」
- 2向聴 → 「二向聴 → 一向聴に縮めよう！」
✻ Cogitated for 4m 28s
できたhtmlファイルを開きます！
かなりいい感じです！！
相変わらず各牌の絵文字の文字が薄いですが……Unicodeの麻雀牌を使ってくださいと言っているからでしょうか？
一応「各牌の絵文字の文字が薄いのでどうにかして」といった具合にプロンプトを投げて、再度作成してもらいました。
結果は以下の通りです。
わかりやすくはなったけど、やっぱりちゃんとした牌の柄（？）があったほうが雰囲気が出るんだよな～と惜しい気持ちになります。
もう少し頑張ってもらうことにして、「最初の牌の感じがよかった。各牌の絵文字の文字が薄かったのを濃くしてくれればOKです」的な内容でお願いします。
そしてできたのが以下です。
頑張ってくれたんだけど、これじゃない感じすごい。
何回か調整しましたが、どれもしっくりこず。
どうやらUnicodeの絵文字はフォントや表示環境に依存しているため、文字色を濃くしたり色を変えたりといった細かい調整ができない模様です。見た目をコントロールしたいなら、SVGで自作するか、オープンソースの牌画像アセットを別途用意するしかないということがわかりました。
ひとまずそういった細かい調整は第４回目でやることにして、今回は一旦、最初のUnicode 麻雀牌絵文字が一番良かった気がするので、それに直しておきます。
Claude Code観察メモ①
| 作業 | AIの得意度 | コメント |
|---|---|---|
| HTMLの骨格生成 | ◎ | 一発でそれなりのものが出てくる |
| 複雑なアルゴリズムの実装 | ◎ | 向聴数計算を再帰で書いてくれた |
| 初回生成の所要時間 | △ | 複雑な処理は時間がかかる場合がある |
| タイムアウトのリスク | △ | サーバー混雑時は止まることもある |
| 牌の見た目の調整 | △ | 何度か試行錯誤が必要 |
「ゼロから動くものを作る」という目的は達成できました。複雑なアルゴリズムが必要な処理でも、自分でゼロから書いた場合と比べると圧倒的に速いのは間違いないです。ただし、タイムアウトのリスクも含めて「Claude Codeは万能ではなく、インフラの影響も受けるリアルな道具だ」という認識は持っておく必要があります。
次回予告
簡単な指示で、動くベースができました。
正直、ここまでの内容を自分で書くなんて絶対できない……ありがとう、ClaudeCode。ありがとう、時代の進化。
第2回目では「待ち牌クイズ」モードを追加しながら、AIが複雑なロジックをどう実装するかを掘り下げます！（予定）