Devanagari Quest — ヒンディー語(デーヴァナーガリー文字)学習アプリ
日本語の五十音表(「あいうえお」→「かさたなはまやらわ」→濁音・拗音)と同じ発想で、
デーヴァナーガリー文字を Step1〜12 で学ぶゲーム感覚のフラッシュカード学習アプリ。React + Vite、バックエンド不要。
Stepにロックは無く、どのStepからでも自由に始められる。
npm install
npm run dev # http://localhost:5173
npm run build # dist/ を出力
学習カリキュラム(全62文字)
母音の基本形→長音・複合、子音は「かさたなはまやらわ」に相当する代表音を行を横断して先に一巡し、
そのあとで各行の有気音・濁音・鼻音を「代表音との重ね比較」付きで深掘りする構成。
代表音一巡は14字と多いため、破裂音+鼻音(前半7字)/半母音+摩擦音(後半7字)の2Stepに分けている。
| Step | 内容 | 文字数 |
|---|
| 1 | 母音(基本) — 「あいうえお」に相当 अ इ उ ए ओ | 5 |
| 2 | 母音(長音・複合) — 基本形に線が増えるだけ आ ई ऊ ऐ औ | 5 |
| 3 | 特殊母音記号 ऋ अं अः | 3 |
| 4 | 子音・代表音① — 「か・た・な・ぱ・ま」行の破裂音+鼻音 क च ट त न प म | 7 |
| 5 | 子音・代表音② — 「や・ら・わ・さ・は」行の半母音+摩擦音 य र ल व श स ह | 7 |
| 6 | क行の深掘り ख ग घ ङ | 4 |
| 7 | च行の深掘り छ ज झ ञ | 4 |
| 8 | ट行の深掘り(そり舌・最難関) ठ ड ढ ण | 4 |
| 9 | त行の深掘り थ द ध | 3 |
| 10 | प行+摩擦音の深掘り फ ब भ ष | 4 |
| 11 | マートラ(母音記号) ★最重要 ा ि ी ु ू ृ े ै ो ौ ं ः | 12 |
| 12 | 頻出結合文字 क्ष त्र ज्ञ श्र | 4 |
Step4・5 で各行の基本子音(そり舌音・摩擦音も含む)を先に一巡してしまうので、
「文字を五十音のように一通り見渡してから、細部(有気音・濁音)を詰める」という進み方になる。
Step6〜10 の深掘りでは、新しく出てくる文字を必ず Step4/5 で覚えた代表音と「重ね比較」で結び付ける
(例: Step6 の ख は क と重ねて「息が強くなった分だけ形が増える」ことを見せる)。
Stepにロックは無く、StepMapのどのカードからでも自由に始められる。★はStepクイズで
正答率80%以上を取った達成度の表示であり、次のStepを開放する条件ではない。
機能
- フラッシュカード — 大きなデーヴァナーガリー文字 / カナ近似 / IAST / IPA / 解説。タップで裏返し、
← → で移動、Space で反転。カード切替時に自動発音。
- 重ね比較(GlyphDiff) — 2文字を実際のフォントで描画してピクセル差分を取り、共通部分・増えた部分・消えた部分を色分けして重ねて見せる。「形がどう変わったか」を文章の説明抜きで一目で伝えるための機能。フラッシュカード下に表示され、該当ペアが複数あればタブで切替。クイズで誤答したときも、選んだ字と正解を重ねて表示する。ペア定義は
src/data/pairs.js。
length — 母音の基本形→長音(अ→आ など)matra — マートラの長短(ि→ी など、子音 क に付けた音節で比較)derived — 子音の代表音→有気音/濁音/鼻音(क→ख/ग/घ など)lookalike — そり舌音 vs 歯音など、形も音も紛らわしい字同士
- Stepは自由選択 — ロックは無く、StepMapのどのカードからでも始められる。Stepクイズの正答率に応じて★1〜3が付き、達成度として残る。
- 双方向4択クイズ — 「文字 → 発音」と「発音 → 文字」を交互に出題。ダミー選択肢は同じ調音位置グループから優先的に選ぶため、そり舌音 ट と歯音 त のような紛らわしい対比が自然に練習できる。
- マートラ実験室(Step11) — 子音 × マートラを自由に組み合わせて音節を合成。選んだ子音の全12音節を一覧再生できる。クイズも「क + ा = ?」形式の組み合わせ問題を6割の比率で重点出題。
- 復習モード — 実際に一度でも解答した文字の中から、誤答回数と最終学習日時で優先度を計算する簡易スペースドリペティション。間違えた文字ほど、久しく見ていない文字ほど先に出る。
- ポップ(マージゲーム) — 「Kana Pop」のデーヴァナーガリー版。文字メダルを落として、同じ文字どうしを合体させて次の文字に進化させる(スイカゲーム型)。落とす・合体するたびにその文字を hi-IN で読み上げる。
- 1ステージ=5文字(全12ステージ: 母音①② / क行 / च行 / ट行 / त行 / प行 / 半母音 / 摩擦音 / 結合文字 / マートラ①②)。元の「かなポップ」(あいうえお/かきくけこ…)と同じ。デーヴァナーガリーは各行がちょうど5文字なのでそのまま対応する。5文字なのは、クリアに最終形が16個必要で、文字数が増えると必要数が倍々になってクリアできなくなるため。
- 降ってくる文字は、ステージの5文字すべて(最後の文字=最終形も、文字面で1周に1回)をシャッフルした袋から1周ずつ出すのでまんべんなく覚えられる(同じ文字は連続しない)。最終形が降ってこないと最後の文字(例: ङ)を見る機会が少なく学習できなかったため。
- 2つのモード(タイトルで切り替え): 📖 読みモード(既定)は、メダルに「文字面」(क)と「読み面」(ka)があり、同じ文字の文字面+読み面のペアだけが合体する。色と大きさは全員同じで、盤面のメダルのローマ字は読み面にだけ出るので、文字を読まないと進めない(形合わせでは進めない)。上の進化バーには5文字すべての読みを常に表示する(参照用)。合体で生まれるメダルの面は、同じ段階の相手が足りない側が選ばれ、ペアが作れず行き詰まらないようにしてある。最終形になった後は面を問わず同じバッジどうしで合体し、同じバッジの最終形は弱く引き寄せ合う(最終形は消えず動かせないので、ペアが必要だと離れて詰まりクリアできなかったため。ボットで 0/6 → 10/10 クリア)。メダルの半径は32で全員同じ。🫧 ふつうは元の「かなポップ」と同じ(同じ文字どうしが合体、レベル別の色と大きさ)。ベスト/クリア記録はモードごとに別。
- 最終形の進化とステージクリア(元ゲームと同じ): 最終形+最終形 → 👑最終形 → (👑+👑) 💎最終形 → (💎+💎) 🌈最終形 → (🌈+🌈) ステージクリアで次のステージへ自動で進む。バッジは 1→👑2→💎4→🌈8 で、同じバッジどうしだけが合体する。最終形は近づくと吸い付き、自動では消えない。🌈ができると虹ボーナス+300点。最終ステージをクリアすると ALL CLEAR。
- 読みコンボと演出: 合体を続けるとコンボになり、3コンボごとに得点倍率が上がる(×1〜×5)。読みモードのコンボは時間では途切れない(考える時間を奪わない)代わりに、読み間違いで途切れる。読み間違いは「落としたメダルが最初に触れた相手が、別の文字の反対の面で、本当の相手が盤面にいる」ときだけ判定し(山の中で偶然触れただけでは罰しない)、途切れるときに2文字の読み(क = ka ／ ख = kha)を表示する。ふつうモードは6秒以内に次の合体が続かないと途切れる。演出は、合体の衝撃波・得点の浮き上がり・画面の揺れ・コンボ中の枠の光・コンボ段階が上がる音と光・最終形の進化とステージクリアのフラッシュ/紙吹雪・軽い振動(対応端末)。OSの「視差効果を減らす」設定では揺れ・振動・紙吹雪を出さない。結果画面に最大コンボ(自己ベストはモード別に保存)と読み間違いの回数を表示。
発音再生
src/lib/speech.js が次の順で再生を試みる。
speechSynthesis に hi-* の音声がある → Web Speech API(lang="hi-IN", rate=0.75)で再生- なければ
/audio/<id>.mp3 を再生(devanagari-data.json の audioUrl)
- どちらも失敗 → ボタンが「🔇 音声なし」表示に変わる
mp3 は同梱していない。安定させたい場合は public/audio/README.md の手順で 62 ファイルを配置する。
mp3 が無くても、hi-IN 音声を持つ環境(macOS / iOS / Android / Chrome の多く)では問題なく動作する。
データ構造
src/data/devanagari-data.json の 1 エントリ:
{
"id": "ka",
"devanagari": "क",
"iast": "ka",
"ipa": "/kə/",
"kana": "カ",
"group": "velar",
"step": 4,
"speak": "क",
"series": "無声無気",
"note": "日本語の「カ」。息を強く出さない。5行それぞれの代表音のうち1つ目。",
"audioUrl": "/audio/ka.mp3"
}
マートラは追加で display(◌ा のような点線円つき表示)、matraFor、example / exampleRead、
position(付く位置)、keepInherent を持つ。
keepInherent はアヌスヴァーラ ं とヴィサルガ ः に付き、これらが固有母音 a を置き換えない
(क + ं = कं は kṃ ではなく kaṃ)ことを表す。音節合成は syllable()(src/data/steps.js)で行う。
Step番号を直接参照するコードは無く、マートラ・結合文字のStepは src/data/steps.js の
MATRA_STEP / CONJUNCT_STEP としてSTEPS配列から自動算出している(カリキュラムを組み替えても
コード側の修正が要らないようにするため)。
構成
src/
├── data/devanagari-data.json 全62文字のデータ
├── data/steps.js Step メタ情報・検索ヘルパー・音節合成
├── data/pairs.js 重ね比較(GlyphDiff)のペア定義
├── data/popStages.js ポップの6ステージ定義(文字・半径・色)
├── lib/popEngine.js ポップ本体(matter-js 物理 + Canvas 描画)
├── lib/popFx.js ポップの演出(揺れ・浮き上がる得点・衝撃波・フラッシュ)とコンボ倍率
├── lib/popFinal.js ポップの最終形の進化段階(👑💎🌈)の定義と飾りの描画
├── lib/popStore.js ポップの進捗(Lv/経験値/ベスト/クリア)
├── lib/speech.js 発音(TTS + mp3フォールバック)
├── lib/quiz.js 出題生成(双方向4択・マートラ組み合わせ)
├── lib/srs.js 復習優先度スコア
├── lib/storage.js localStorage 入出力・連続日数・カリキュラム移行
├── hooks/useProgress.js 進捗ステート(XP/Lv/Stepクリア判定)
└── components/ HUD / StepMap / Flashcards / Quiz / MatraLab / GlyphDiff / SpeakButton / PopGame
デプロイ
vercel.json を同梱。Vercel にインポートすればそのままビルドされる(SPA なので全パスを /index.html に rewrite)。
