1行もコード触らずに簡易麻雀アプリ作れた

2025/08/15

claude code
アプリ開発
麻雀アプリ

はじめに

生成AIを使えば、ゼロからプログラミングを始めても短時間でアプリが形になります。
今回は、Anthropic社のAI「Claude」を活用して、麻雀の点数計算アプリを作ったときの流れをまとめます。
手順は大きく分けて次の3ステップです。

  1. Claudeのセットアップ
  2. 仕様書の作成
  3. ローカルで表示させられるまで

1. Claudeのセットアップ

まずは作業環境の準備です。
Claude Code（Claudeの開発者向け対話機能）をローカルで使えるようにします。

インストール

npm install -g @anthropic-ai/claude-code

エラーが出た場合はNode.jsやnpmのバージョンを確認してアップデート。
claude コマンドが使えるようになれば準備完了です。

実際に起こった問題

①Claude Code導入前のつまずき

実は、Claude自体はすでに有料版で登録して使えていました。
しかし、今回使う「Claude Code」は別物で、これをローカルで動かすためには別途セットアップが必要でした。

最初の勘違い

  • Claude（Webブラウザやアプリから使う通常版AI）とClaude Codeは別サービス。
  • Claude CodeはNode.jsベースのCLIアプリとしてインストールし、ローカルプロジェクトとやり取りできる。

私は最初、この2つの違いを理解しておらず、
「Claudeが使えるんだから、そのままコード生成もローカルでできるだろう」と思い込んでいました。

最初のエラー
Claude Codeをインストール後、claude コマンドを叩いたら次のようなエラーが発生。

Error: Cannot find module './yoga.wasm'
Require stack:

/Users/xxx/.n/lib/node_modules/@anthropic-ai/claude-code/cli.js

原因はNode.jsのバージョンや、グローバルインストール時のパス設定が正しくなかったこと。
これを修正するために以下を実施しました。

  1. Node.jsを最新版に更新（nやnvmを使用）
  2. npm install -g @anthropic-ai/claude-code を再実行
  3. グローバルモジュールのパスをシェルに追加（~/.zshrc など）

確認ポイント
最終的に、以下のコマンドで正しくバージョン情報が表示されればOKです。

claude --version

この時点でようやく「Claude Codeのセットアップ完了」状態になり、
本格的に仕様書作成→コード生成の流れに進めるようになりました。

②Claude Codeのインストール時の問題
claude コマンドを打ったときに

Error: Cannot find module './yoga.wasm'

というエラーが出た。
原因は、@anthropic-ai/claude-code のインストール時に依存ファイルが正しく解決されていなかったこと。
Node.jsのバージョンやグローバルインストールの方法を見直して再実行し、解消。

プロジェクトフォルダ作成

mkdir mahjong
cd mahjong

Claude Codeを起動し、このフォルダ内で作業を進めます。

2. 仕様書の作成

Claudeに仕様書を伝えることで、コード生成の方向性が決まります。
今回は以下のような仕様書を作成しました。

# Project: 麻雀点数計算 CLI アプリ

## Goal
日本式リーチ麻雀の点数計算を行う CLI アプリケーションを作成する。  
ローカル環境（VSCode またはターミナル）で動作し、JSON 入力から点数計算結果をJSON出力する。

## Requirements

### Core Features
- 手牌、場況、ドラ、リーチ棒、本場数などを入力して点数を計算
- 役判定、翻数計算、符計算、点数丸め、支払い内訳の出力
- 親/子、ツモ/ロンの点数計算対応
- 切り上げ満貫・数え役満・役満複合などのルールオプションに対応
- 役満・数え役満の判定
- 説明配列（どの役で何符か、丸めや点数根拠）を返す

### Input Format
- JSON 形式
- 手牌 (`hand`) と和了牌 (`winning_tile`)
- 副露 (`melds`) の配列
- 場風 (`round_wind`)、自風 (`seat_wind`)
- ドラ表示牌（表・裏・槓ドラ）
- 本場数 (`honba`) と供託リーチ棒数 (`riichi_sticks`)
- ルールオプション（`kiriage_mangan`, `kazoe_yakuman`, `multiple_yakuman` など）

### Output Format
- 役一覧（役名、翻数、門前かどうか）
- ドラ内訳と枚数
- 合計翻数
- 符数
- 満貫/跳満/倍満/三倍満/役満などの区分
- 基礎点
- 点数支払い内訳（ツモなら各人支払い額、ロンなら放銃者支払い額）
- 本場加点、供託回収
- 説明配列（採用役や符計算根拠、丸め根拠）

### Non-functional Requirements
- Node.js（TypeScript）で実装
- ディレクトリ構成：`src/` と `test/`
- テストは vitest を使用、主要役・特殊形を含む 10 ケース以上
- モジュール分割：役判定、符計算、点数計算、ドラ計算、出力整形
- 可読性・拡張性重視

### Example JSON Input
```json
{
  "hand": "456m456p456s22p",
  "winning_tile": "2p",
  "melds": [],
  "win_type": "tsumo",
  "round_wind": "E",
  "seat_wind": "S",
  "dealer": false,
  "dora_indicators": [],
  "ura_indicators": [],
  "kan_dora_indicators": [],
  "kan_ura_indicators": [],
  "honba": 0,
  "riichi_sticks": 0,
  "options": {
    "kiriage_mangan": true,
    "kazoe_yakuman": false,
    "limit_sanbaiman_cap": false,
    "multiple_yakuman": true
  }
}

3. ローカルで表示させられるまで

①CLI版でロジック検証

まずはCLI（コマンドライン）から動くバージョンを作り、計算ロジックを確認しました。

pnpm dev calc -f 30 -h 2 -d -t

（例: 符30・2翻・親・ツモ）
この時点で計算結果が正しいことを確認。

②APIサーバー化

計算ロジックをExpressサーバーに組み込み、APIとして提供できる形にしました。

pnpm add express
pnpm server

これにより、ブラウザや他のアプリから POST /api/calc で点数計算ができるようになりました。

③Web UI表示

最後に、HTML + CSS + JavaScriptで入力フォームを作成し、APIと連携。
ブラウザで次のような画面を表示できるようになりました。

  • 符数・翻数などを入力
  • 「計算する」ボタンをクリック
  • 結果が即時表示される
    ローカルサーバーを起動すれば、いつでもブラウザから計算できます。

image_1.png

おわりに

今回の開発は、Claudeが仕様作成からコード生成までほぼ自動化してくれたおかげで、素人でも形にできました。
特に、コードの細かい修正や依存関係のインストールも「Yes」と答えるだけで進められるのはかなり快適です。

仕様書を結構適当に書いたので使うには機能が足りないアプリができてしまったので、
細かい修正を行っていきます。
次は、いつも麻雀をして成績表を作るとき,スプレッドシートを作って運用してるので、
この運用を簡単にできるアプリを作ろうと思います。