はじめに
前回の記事では、待ち牌クイズモードを追加し、タブ切り替えで2モードを使えるアプリにしました。
見た目は第1回の時点で雀卓グリーン（#1a5c38）のダークUIにしていたので、それなりの雰囲気は出ています。でも細かいところがまだ気になる。
- 正解・不正解の色分けがパッとしない
- 永遠にただ問題を解くだけで、正解数や間違い数なども出ないから、成長が見えない
- 全体的にもう少しゲームっぽい雰囲気にしたい
こうした内容をお願いしてみます。
前回同様に記事の中で度々麻雀用語が出てきますが、その解説を挟んでいると記事が麻雀解説記事になってしまうので、適宜以下のリンクなどを参考にしていただければ幸いです。
もう少し細かい修正を頼んでみる
考えついたことを、特に整えずにそのまま投げます。
大事な最初の骨格を作る部分などは少し具体的な要件を書いたりしましたが、ある程度できあがってきていますので、ここは気持ちそのまま、バイブコーディングらしく指示出しをします。
投げたプロンプト：
- 正解・不正解の色分けがパッとしない
- 永遠にただ問題を解くだけで、正解数や間違い数なども出ないから、成長が見えない
- 全体的にもう少しゲームっぽい雰囲気にしたい
結果は……きちんと反映されました。
何問かチャレンジしましたが、特にバグもなさそうでした。
ここでお願いしているのは、大きく分けると「色」「スコア表示」「雰囲気」の3つです。
特に「正解・不正解の色分け」は、ユーザーに結果を直感的に伝えるための重要な仕組みなので、実装してよかった点です。
実装された以下を見ると、すぐに正解か不正解かわかりますよね。
「正解したら緑、不正解なら赤」のように、処理結果によってUIの見た目を変えるというのは、麻雀アプリに限らずあらゆるアプリで使われる基本的な考え方だと思います。
「条件によってクラスを付け替える」という考え方は、後述でも出て来るのですが、タイマーの残り時間表示など、このアプリのあちこちで使われています。
「処理結果をどう見せるか」を考えることが、ユーザーにとって使いやすいアプリ作りの第一歩なんだな、と改めて気づかされました。
そしてこちらの意図通りにしっかりとそれを組み上げてくれるClaude Code、やはり最強すぎます。
①点数計算クイズモードを追加
続いて、機能そのものを増やしていきます。
投げたプロンプト：
点数計算クイズモードを追加して。
「30符4翻（子）なら何点？」のような4択クイズ。
→ 問題なく仕上がる！
しかも計算式の解説まで表示してくれました。良質なひっかけ選択肢も自然に生成されています。
麻雀の点数計算のルールをちゃんと理解した上でクイズを作っているの、凄すぎますね！
②制限時間（30秒タイマー）を追加
投げたプロンプト：
クイズに制限時間（30秒）を追加して。
タイマーが0になったら自動で不正解扱いにして。
→ 問題なく仕上がる！
残り時間が少なくなると数字が赤っぽくなっていき、緊張感が出る演出まで入っていました。
時間切れのときもきっちり実装されている。完璧です。
指示したのは「制限時間を追加して、0になったら不正解にして」だけです。「残り時間に応じて色を変えて」とは一切言っていない。それでも気を利かせてUXまで考えてくれる。天才です。
③10問区切りの戦歴表示＋BGMを追加
投げたプロンプト：
1回10問区切りにして、戦歴を見られるようにして。BGMもほしい。
→ 問題なく仕上がる！
そしてBGMについて。フリー素材を持ってくるのかな？著作権とか面倒だよな……と思っていたのですが、なんとコードを見るとWeb Audio APIで音符を直接生成していました。
以下のコードは、理解する必要は全くなく、私もよくわかっていませんが、あまりに凄いなと思ったので参考に載せておきます。
// D minor-ish pentatonic: D4 F4 G4 A4 C5 D5
const SEQ = [
[392,.5],[440,.5],[523,.5],[587,.75],
[523,.5],[440,.5],[392,.75],[330,.25],
// ...メロディーが続く
];
function note(f, s, d) {
const o = ctx.createOscillator();
o.type = 'sine';
o.frequency.value = f; // ← 周波数で音程を指定
// ...
}
外部ファイルを一切使わず、JavaScriptだけで音楽を鳴らしています。
「著作権フリー」どころか「自作曲」です。しかもちゃんとそれっぽい曲になっている。
【豆知識】Web Audio API
ブラウザに標準搭載された音声処理の仕組み。外部ライブラリなしに音の生成・加工ができる。
「392Hz = ソの音」のように周波数で音程を指定して、メロディーを組み立てられる。
全部問題なく実装できる！
3つの機能追加を終えましたが、UIは一切崩れておらず、既存の機能もすべて正常に動いています。
あれこれやっても壊れないんですね。実は色々追加していったら壊れるんじゃないか、という裏テーマもありつつ今回進めていたのですが、Claude Code、お見事でした。
なぜこんなに正確に成果を出せるのかというと、ファイル全体を「書き直す」のではなく「差分で編集する」アプローチを取っているからとのこと。命令のたびにすべてを書き換えるような大幅な変更を加えていたら、確かにその分おかしなコードになる可能性がありそうな気がしますよね。
実際、Claude Codeがターミナルに出力するログを見ると：
● Update(index.html)
⎿ Added 4 lines
のように、変更箇所だけを記録しています。既存のコードを読んで、追加・変更が必要な箇所だけをピンポイントで書き換えるので、前半のCSSが「うろ覚えで上書きされる」という問題が起きにくいのです（長くなればなるほど前半の内容があいまいになっていく、というのはClaude Codeのコンテキストウィンドウの特性上避けられない話ですが、差分編集のアプローチがその弱点をうまくカバーしています）
Claude Code観察メモ③
| 観察 | 内容 |
|---|---|
| 3連続の機能追加 | ◎ 一度も崩れなかった |
| BGMの実装 | ◎ 外部ファイルなしにWeb Audio APIで自作曲を生成 |
| 指示していない演出の追加 | ◎ 残り時間の色変化など、UXまで気が利く |
| 差分編集アプローチ | ◎ 全体再生成しないから既存コードが守られる |
次回予告
アプリに機能が揃ってきました。
次はまだUnicodeの絵文字のままになっている牌を、よりよい画像に置き換えていきます。