ひらがな練習

1. アプリ概要

ひらがなを表示してローマ字で入力する練習アプリ。制限時間付きで正解数・スピードを計測する。

このアプリはtoolsカテゴリの実践的なPythonアプリです。使用ライブラリは tkinter（標準ライブラリ）、難易度は ★★☆ です。

このアプリは「ツール」カテゴリです。日々の作業を自動化する実用ツールは Python が最も得意とする領域です。短いコードで実用性のある成果物が作れる点が魅力です。tkinter（標準ライブラリ） を活かして実装するこの構造は、他のアプリにも応用が効きます。

完成形を見てから細部の解説に進む流れが効果的です。実行→気になる箇所を解説で確認→自分の手で改造、というサイクルで定着が早まります。

カスタマイズ章では具体的な拡張アイデアを示しています。一つ実装するごとに動作確認することで、変更が予期せぬ副作用を起こさないかも体感できます。

2. 機能一覧

• 「スタート」ボタン（start()）・「判定」ボタン（_check()）・「リセット」ボタン（reset()）で操作
• キー <Return> から _check() を実行
• after(500, ...) による500ミリ秒間隔の _tick() 呼び出し（画面の自動更新）
• messagebox.showinfo() によるダイアログ通知
• ウィンドウはタイトル「ひらがな練習」・サイズ 640x460 で起動

3. 事前準備・環境

Windows 11（実機）で起動と基本操作を確認しています（全機能の網羅テストではありません）。Linux Mint 22.3（仮想マシン）では起動と画面表示を確認しました。macOS は標準ライブラリの範囲で動作する想定ですが、未検証です。

• Python 3.10 以上
• OS: Windows 11（実機で起動・基本操作を確認）・Linux Mint 22.3（仮想マシンで起動・画面表示を確認）

4. 完全なソースコード

import random
import time
import tkinter as tk
from tkinter import messagebox, ttk


# ひらがな → ローマ字 (主要なものを網羅)
HIRA_ROMA = {
    "あ": "a", "い": "i", "う": "u", "え": "e", "お": "o",
    "か": "ka", "き": "ki", "く": "ku", "け": "ke", "こ": "ko",
    "さ": "sa", "し": "shi", "す": "su", "せ": "se", "そ": "so",
    "た": "ta", "ち": "chi", "つ": "tsu", "て": "te", "と": "to",
    "な": "na", "に": "ni", "ぬ": "nu", "ね": "ne", "の": "no",
    "は": "ha", "ひ": "hi", "ふ": "fu", "へ": "he", "ほ": "ho",
    "ま": "ma", "み": "mi", "む": "mu", "め": "me", "も": "mo",
    "や": "ya", "ゆ": "yu", "よ": "yo",
    "ら": "ra", "り": "ri", "る": "ru", "れ": "re", "ろ": "ro",
    "わ": "wa", "を": "wo", "ん": "n",
    "が": "ga", "ぎ": "gi", "ぐ": "gu", "げ": "ge", "ご": "go",
    "ざ": "za", "じ": "ji", "ず": "zu", "ぜ": "ze", "ぞ": "zo",
    "だ": "da", "ぢ": "ji", "づ": "zu", "で": "de", "ど": "do",
    "ば": "ba", "び": "bi", "ぶ": "bu", "べ": "be", "ぼ": "bo",
    "ぱ": "pa", "ぴ": "pi", "ぷ": "pu", "ぺ": "pe", "ぽ": "po",
}


class App086:
    """ひらがな練習"""

    def __init__(self, root):
        self.root = root
        self.root.title("ひらがな練習")
        self.root.geometry("640x460")
        self.root.configure(bg="#f8f9fc")
        self.time_limit = 60  # 秒
        self.start_ts = None
        self.current = None
        self.correct = 0
        self.miss = 0
        self.running = False
        self._build_ui()

    def _build_ui(self):
        """UI を構築する"""
        title = tk.Frame(self.root, bg="#3776ab", pady=12)
        title.pack(fill=tk.X)
        tk.Label(title, text="ひらがな練習", font=("Noto Sans JP", 16, "bold"),
                 bg="#3776ab", fg="white").pack()

        info = tk.Frame(self.root, bg="#f8f9fc")
        info.pack(pady=10)
        self.time_label = tk.Label(info, text=f"残り時間: {self.time_limit}秒",
                                   font=("Noto Sans JP", 12), bg="#f8f9fc")
        self.time_label.pack(side=tk.LEFT, padx=10)
        self.score_label = tk.Label(info, text="正解: 0  ミス: 0",
                                    font=("Noto Sans JP", 12), bg="#f8f9fc")
        self.score_label.pack(side=tk.LEFT, padx=10)

        self.q_label = tk.Label(self.root, text="開始ボタンを押してね",
                                font=("Noto Sans JP", 60, "bold"),
                                bg="white", fg="#3776ab", width=4, height=1,
                                relief=tk.GROOVE)
        self.q_label.pack(pady=15)

        self.entry = ttk.Entry(self.root, font=("Arial", 18), justify="center", width=12)
        self.entry.pack(pady=5)
        self.entry.bind("<Return>", lambda e: self._check())

        btns = tk.Frame(self.root, bg="#f8f9fc")
        btns.pack(pady=10)
        ttk.Button(btns, text="スタート", command=self.start).pack(side=tk.LEFT, padx=4)
        ttk.Button(btns, text="判定", command=self._check).pack(side=tk.LEFT, padx=4)
        ttk.Button(btns, text="リセット", command=self.reset).pack(side=tk.LEFT, padx=4)

        self.status = tk.Label(self.root, text="", bg="#f8f9fc", fg="#555")
        self.status.pack()

    def start(self):
        """ゲームを開始する"""
        self.correct = 0
        self.miss = 0
        self.start_ts = time.time()
        self.running = True
        self.entry.delete(0, tk.END)
        self.entry.focus_set()
        self._next_question()
        self._tick()

    def reset(self):
        """状態をリセットする"""
        self.running = False
        self.start_ts = None
        self.q_label.config(text="-")
        self.entry.delete(0, tk.END)
        self.time_label.config(text=f"残り時間: {self.time_limit}秒")
        self.score_label.config(text="正解: 0  ミス: 0")
        self.status.config(text="")

    def _next_question(self):
        """新しい問題を出題する"""
        self.current = random.choice(list(HIRA_ROMA.keys()))
        self.q_label.config(text=self.current)
        self.entry.delete(0, tk.END)

    def _check(self):
        """入力されたローマ字を判定する"""
        if not self.running or self.current is None:
            return
        ans = self.entry.get().strip().lower()
        expected = HIRA_ROMA[self.current]
        if ans == expected:
            self.correct += 1
            self.status.config(text=f"正解！ ({self.current} = {expected})", fg="green")
            self._next_question()
        else:
            self.miss += 1
            self.status.config(text=f"ミス: 正解は {expected}", fg="red")
            self.entry.delete(0, tk.END)
        self.score_label.config(text=f"正解: {self.correct}  ミス: {self.miss}")

    def _tick(self):
        """1秒ごとにタイマー更新"""
        if not self.running or self.start_ts is None:
            return
        elapsed = time.time() - self.start_ts
        remain = self.time_limit - int(elapsed)
        if remain <= 0:
            self.running = False
            self.time_label.config(text="残り時間: 0秒")
            speed = self.correct / (self.time_limit / 60)  # 文字/分
            messagebox.showinfo("結果",
                                f"終了！\n正解: {self.correct}  ミス: {self.miss}\n"
                                f"スピード: {speed:.1f} 文字/分")
            return
        self.time_label.config(text=f"残り時間: {remain}秒")
        self.root.after(500, self._tick)


if __name__ == "__main__":
    root = tk.Tk()
    app = App086(root)
    root.mainloop()

5. コード解説

ひらがな練習のコードを、実際に書かれている実装に沿って解説します。

6. ステップバイステップガイド

このアプリをゼロから自分で作る手順を解説します。コードをコピーするだけでなく、実際に手順を追って自分で書いてみましょう。

1. 1
   ファイルを作成する

   新しいファイルを作成して app086.py と保存します。使うのは random・time・tkinter だけなので、追加インストールは不要です。

2. 2
   クラスの骨格を作る

   App086 クラスを定義し、__init__ と、末尾の root = tk.Tk() ～ mainloop() の最小構成を書いて、まず空のウィンドウが出ることを確認します。

3. 3
   ウィンドウを設定する

   title("ひらがな練習")・geometry("640x460")・configure(bg="#f8f9fc") をコンストラクタで設定します。

4. 4
   画面部品を並べる

   _build_ui() の中で、tk.Frame×3・tk.Label×5・ttk.Entry・ttk.Button×3 を作って配置します（掲載コードと同じ並び順で書くとレイアウトが一致します）。まず表示だけ確認しましょう。

5. 5
   イベントを接続する

   「2. 機能一覧」で挙げた各ボタンを command= で対応するメソッド（start()・_check()・reset()）につなぎます。bind("<Return>", ...) の登録も忘れずに。

6. 6
   中心になるメソッドを実装する

   アプリの本体である _tick()（16行）・_check()（15行）・start()（10行）・reset()（9行） を実装します。定期処理は after(500, ...) で自分自身を予約し続ける形にします。

7. 7
   動作確認する

   python app086.py で起動し、各ボタンが反応すること・表示が自動で更新されること・キー操作（<Return>）が効くことを確認します。

7. カスタマイズアイデア

基本機能を習得したら、以下のカスタマイズに挑戦してみましょう。

8. よくある問題と解決法

9. 練習問題

アプリの理解を深めるための練習問題です。気になるものから挑戦してみてください（課題3は定型の発展課題です）。

1. 課題1：ローマ字の別の書き方も正解にする

   いまの判定は HIRA_ROMA に登録された1通りだけを正解にしています。「し」は shi のみ正解で、si と打つとミスになります。よく使われる別の書き方も受け付けましょう。

   期待結果：「し」の問題で si と打つと、いまは「ミス: 正解は shi」と出る。別表記を足すと正解になり、正解数が1増えて次の問題へ進む。

   合格条件

   • 「し」で si と打っても正解になる
   • 「し」で shi と打った場合も今までどおり正解
   • 「か」で si と打てば、いままでどおりミスになる

   ヒント①（どこを触るか）: 触るのは2か所です。モジュール先頭の HIRA_ROMA の下に別表記の辞書を1つ足し、_check() の if ans == expected: を書き換えます。_next_question() は触りません。
   ヒント②（使うもの）: ALT_ROMA = {"し": ["si"], "つ": ["tu"], "ち": ["ti"], "ふ": ["hu"]} のような辞書を作り、判定を if ans == expected or ans in ALT_ROMA.get(self.current, []): に変えます。正解表示は expected を使うので、代表の書き方が出たままになります。
   つまずきやすい点: HIRA_ROMA の値そのものを書き換えると、出題の答えと画面の表示が同時に変わります。なお「じ」と「ぢ」はどちらも ji、「ず」と「づ」はどちらも zu で登録されているため、入力だけではこの2組を区別できません。

2. 課題2：残り時間が10秒を切ったら色で知らせる

   残り時間はいま文字だけの表示で、終わりが近いことに気づきにくい作りです。_tick() はもともと0.5秒ごとに呼ばれているので、そこで文字色も切り替えましょう。

   期待結果：スタートから50秒たつと「残り時間: 10秒」の表示が赤くなる。もう一度スタートを押せば残り60秒から始まるため、色は元に戻る。

   合格条件

   • 残り10秒以下で文字が赤くなる
   • 開始直後（残り60秒）は赤くならない
   • 一度赤くなったあと、スタートを押し直すと色が戻る

   ヒント①（どこを触るか）: 触るのは _tick() の末尾にある self.time_label.config(...) の1か所です。after(500, self._tick) の行はそのままにします。reset() にも同じラベルを書き戻す行がありますが、次のスタートで _tick() が色を上書きするので触らなくても動きます。
   ヒント②（使うもの）: config() に色の指定を足すだけです。self.time_label.config(text=f"残り時間: {remain}秒", fg="red" if remain <= 10 else "black") の形にします。remain は、その少し上で計算済みの残り秒数です。
   つまずきやすい点: 赤にする指定だけを書くと、一度赤くなったラベルは次のゲームでも赤いままになります。fg は指定したときだけ変わるので、戻す色も必ず書いてください。残り0秒のときは手前の if で return するため、この行は通りません。

3. 課題3：保存機能の追加

   処理結果をファイルに保存する機能を追加しましょう。