初心者向け No.25

フラッシュカードアプリ

単語・Q&Aを覚えるフラッシュカード学習アプリ。JSONによるデータ保存・読み込みを学びます。

🎯 難易度: ★★☆ 📦 ライブラリ: tkinter（標準ライブラリ） ⏱️ 制作時間: 30〜90分
📋 目次

1. アプリ概要

単語・Q&Aを覚えるフラッシュカード学習アプリ。JSONによるデータ保存・読み込みを学びます。

このアプリは管理カテゴリに分類される実践的なGUIアプリです。使用ライブラリは tkinter（標準ライブラリ） で、難易度は ★★☆ です。

Pythonでは tkinter を使うことで、クロスプラットフォームなGUIアプリを簡単に作成できます。このアプリを通じて、ウィジェットの配置・イベント処理・データ管理など、GUI開発の実践的なスキルを習得できます。

ソースコードは完全な動作状態で提供しており、コピーしてそのまま実行できます。まずは実行して動作を確認し、その後コードを読んで仕組みを理解していきましょう。カスタマイズセクションでは機能拡張のアイデアも紹介しています。

GUIアプリ開発は、プログラミングの楽しさを実感できる最も効果的な学習方法のひとつです。アプリを作ることで、変数・関数・クラス・イベント処理など、プログラミングの重要な概念が自然と身についていきます。このアプリをきっかけに、オリジナルアプリの開発にも挑戦してみてください。

2. 機能一覧

  • フラッシュカードアプリのメイン機能
  • 直感的なGUIインターフェース
  • 入力値のバリデーション
  • エラーハンドリング
  • 結果の見やすい表示
  • キーボードショートカット対応

3. 事前準備・環境

ℹ️
動作確認環境

Python 3.10 以上 / Windows・Mac・Linux すべて対応

以下の環境で動作確認しています。

  • Python 3.10 以上
  • OS: Windows 10/11・macOS 12+・Ubuntu 20.04+

4. 完全なソースコード

💡
コードのコピー方法

右上の「コピー」ボタンをクリックするとコードをクリップボードにコピーできます。

app25.py
import tkinter as tk
from tkinter import ttk, messagebox
import json
import os
import random


class App25:
    """フラッシュカードアプリ"""

    DEFAULT_CARDS = [
        {"q": "Pythonのリスト追加メソッドは？", "a": "append()"},
        {"q": "辞書のキー一覧を取得するメソッドは？", "a": "keys()"},
        {"q": "文字列を大文字に変換するメソッドは？", "a": "upper()"},
        {"q": "リストの要素数を返す組み込み関数は？", "a": "len()"},
        {"q": "ファイルを読み込むための関数は？", "a": "open()"},
    ]
    SAVE_FILE = "flashcards.json"

    def __init__(self, root):
        self.root = root
        self.root.title("フラッシュカードアプリ")
        self.root.geometry("500x440")
        self.root.configure(bg="#f8f9fc")
        self.cards = self._load_cards()
        self.current_idx = 0
        self.showing_answer = False
        self._build_ui()
        self._show_card()

    def _load_cards(self):
        if os.path.exists(self.SAVE_FILE):
            with open(self.SAVE_FILE, encoding="utf-8") as f:
                return json.load(f)
        return list(self.DEFAULT_CARDS)

    def _save_cards(self):
        with open(self.SAVE_FILE, "w", encoding="utf-8") as f:
            json.dump(self.cards, f, ensure_ascii=False, indent=2)

    def _build_ui(self):
        title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
        title_frame.pack(fill=tk.X)
        tk.Label(title_frame, text="フラッシュカード",
                 font=("Noto Sans JP", 16, "bold"),
                 bg="#3776ab", fg="white").pack()

        main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=20, pady=12)
        main_frame.pack(fill=tk.BOTH, expand=True)

        # カード表示
        self.card_frame = tk.Frame(main_frame, bg="white", relief=tk.RAISED, bd=1)
        self.card_frame.pack(fill=tk.X, ipady=20)

        self.side_label = tk.Label(self.card_frame, text="問題",
                                   bg="white", fg="#3776ab", font=("Noto Sans JP", 10))
        self.side_label.pack(anchor="w", padx=14, pady=(10, 0))

        self.card_label = tk.Label(self.card_frame, text="",
                                   bg="white", font=("Noto Sans JP", 15),
                                   wraplength=420, justify="center")
        self.card_label.pack(expand=True, pady=10, padx=14)

        self.progress_label = tk.Label(main_frame, text="", bg="#f8f9fc",
                                       font=("Noto Sans JP", 10), fg="#888")
        self.progress_label.pack(anchor="e", pady=(4, 0))

        # ナビゲーション
        nav_frame = tk.Frame(main_frame, bg="#f8f9fc")
        nav_frame.pack(pady=8)
        ttk.Button(nav_frame, text="◀ 前", command=self.prev_card, width=8).pack(side=tk.LEFT, padx=4)
        ttk.Button(nav_frame, text="答えを見る", command=self.flip, width=12).pack(side=tk.LEFT, padx=4)
        ttk.Button(nav_frame, text="次 ▶", command=self.next_card, width=8).pack(side=tk.LEFT, padx=4)
        ttk.Button(nav_frame, text="シャッフル", command=self.shuffle, width=10).pack(side=tk.LEFT, padx=4)

        # カード追加
        add_frame = ttk.LabelFrame(main_frame, text="カードを追加", padding=8)
        add_frame.pack(fill=tk.X, pady=(4, 0))
        row = tk.Frame(add_frame, bg=add_frame.cget("bg"))
        row.pack(fill=tk.X)
        tk.Label(row, text="問:", bg=add_frame.cget("bg")).pack(side=tk.LEFT)
        self.q_entry = ttk.Entry(row, width=20, font=("Noto Sans JP", 10))
        self.q_entry.pack(side=tk.LEFT, padx=4, fill=tk.X, expand=True)
        tk.Label(row, text="答:", bg=add_frame.cget("bg")).pack(side=tk.LEFT)
        self.a_entry = ttk.Entry(row, width=16, font=("Noto Sans JP", 10))
        self.a_entry.pack(side=tk.LEFT, padx=4)
        ttk.Button(add_frame, text="追加", command=self.add_card).pack(anchor="e", pady=(4, 0))

    def _show_card(self):
        if not self.cards:
            self.card_label.config(text="カードがありません")
            self.progress_label.config(text="")
            return
        card = self.cards[self.current_idx]
        self.showing_answer = False
        self.side_label.config(text="問題", fg="#3776ab")
        self.card_label.config(text=card["q"], fg="#222")
        self.progress_label.config(
            text=f"{self.current_idx + 1} / {len(self.cards)}")

    def flip(self):
        if not self.cards:
            return
        card = self.cards[self.current_idx]
        self.showing_answer = not self.showing_answer
        if self.showing_answer:
            self.side_label.config(text="答え", fg="#27ae60")
            self.card_label.config(text=card["a"], fg="#27ae60")
        else:
            self.side_label.config(text="問題", fg="#3776ab")
            self.card_label.config(text=card["q"], fg="#222")

    def prev_card(self):
        if self.cards:
            self.current_idx = (self.current_idx - 1) % len(self.cards)
            self._show_card()

    def next_card(self):
        if self.cards:
            self.current_idx = (self.current_idx + 1) % len(self.cards)
            self._show_card()

    def shuffle(self):
        random.shuffle(self.cards)
        self.current_idx = 0
        self._show_card()

    def add_card(self):
        q = self.q_entry.get().strip()
        a = self.a_entry.get().strip()
        if not q or not a:
            messagebox.showwarning("警告", "問題と答えを両方入力してください")
            return
        self.cards.append({"q": q, "a": a})
        self._save_cards()
        self.q_entry.delete(0, tk.END)
        self.a_entry.delete(0, tk.END)
        self.current_idx = len(self.cards) - 1
        self._show_card()


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

5. コード解説

フラッシュカードアプリのコードを詳しく解説します。クラスベースの設計で各機能を整理して実装しています。

クラス設計とコンストラクタ

App25クラスにアプリの全機能をまとめています。__init__メソッドでウィンドウの基本設定を行い、_build_ui()でUI構築、process()でメイン処理を担当します。この分離により、各メソッドの責任が明確になりコードが読みやすくなります。

import tkinter as tk
from tkinter import ttk, messagebox
import json
import os
import random


class App25:
    """フラッシュカードアプリ"""

    DEFAULT_CARDS = [
        {"q": "Pythonのリスト追加メソッドは？", "a": "append()"},
        {"q": "辞書のキー一覧を取得するメソッドは？", "a": "keys()"},
        {"q": "文字列を大文字に変換するメソッドは？", "a": "upper()"},
        {"q": "リストの要素数を返す組み込み関数は？", "a": "len()"},
        {"q": "ファイルを読み込むための関数は？", "a": "open()"},
    ]
    SAVE_FILE = "flashcards.json"

    def __init__(self, root):
        self.root = root
        self.root.title("フラッシュカードアプリ")
        self.root.geometry("500x440")
        self.root.configure(bg="#f8f9fc")
        self.cards = self._load_cards()
        self.current_idx = 0
        self.showing_answer = False
        self._build_ui()
        self._show_card()

    def _load_cards(self):
        if os.path.exists(self.SAVE_FILE):
            with open(self.SAVE_FILE, encoding="utf-8") as f:
                return json.load(f)
        return list(self.DEFAULT_CARDS)

    def _save_cards(self):
        with open(self.SAVE_FILE, "w", encoding="utf-8") as f:
            json.dump(self.cards, f, ensure_ascii=False, indent=2)

    def _build_ui(self):
        title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
        title_frame.pack(fill=tk.X)
        tk.Label(title_frame, text="フラッシュカード",
                 font=("Noto Sans JP", 16, "bold"),
                 bg="#3776ab", fg="white").pack()

        main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=20, pady=12)
        main_frame.pack(fill=tk.BOTH, expand=True)

        # カード表示
        self.card_frame = tk.Frame(main_frame, bg="white", relief=tk.RAISED, bd=1)
        self.card_frame.pack(fill=tk.X, ipady=20)

        self.side_label = tk.Label(self.card_frame, text="問題",
                                   bg="white", fg="#3776ab", font=("Noto Sans JP", 10))
        self.side_label.pack(anchor="w", padx=14, pady=(10, 0))

        self.card_label = tk.Label(self.card_frame, text="",
                                   bg="white", font=("Noto Sans JP", 15),
                                   wraplength=420, justify="center")
        self.card_label.pack(expand=True, pady=10, padx=14)

        self.progress_label = tk.Label(main_frame, text="", bg="#f8f9fc",
                                       font=("Noto Sans JP", 10), fg="#888")
        self.progress_label.pack(anchor="e", pady=(4, 0))

        # ナビゲーション
        nav_frame = tk.Frame(main_frame, bg="#f8f9fc")
        nav_frame.pack(pady=8)
        ttk.Button(nav_frame, text="◀ 前", command=self.prev_card, width=8).pack(side=tk.LEFT, padx=4)
        ttk.Button(nav_frame, text="答えを見る", command=self.flip, width=12).pack(side=tk.LEFT, padx=4)
        ttk.Button(nav_frame, text="次 ▶", command=self.next_card, width=8).pack(side=tk.LEFT, padx=4)
        ttk.Button(nav_frame, text="シャッフル", command=self.shuffle, width=10).pack(side=tk.LEFT, padx=4)

        # カード追加
        add_frame = ttk.LabelFrame(main_frame, text="カードを追加", padding=8)
        add_frame.pack(fill=tk.X, pady=(4, 0))
        row = tk.Frame(add_frame, bg=add_frame.cget("bg"))
        row.pack(fill=tk.X)
        tk.Label(row, text="問:", bg=add_frame.cget("bg")).pack(side=tk.LEFT)
        self.q_entry = ttk.Entry(row, width=20, font=("Noto Sans JP", 10))
        self.q_entry.pack(side=tk.LEFT, padx=4, fill=tk.X, expand=True)
        tk.Label(row, text="答:", bg=add_frame.cget("bg")).pack(side=tk.LEFT)
        self.a_entry = ttk.Entry(row, width=16, font=("Noto Sans JP", 10))
        self.a_entry.pack(side=tk.LEFT, padx=4)
        ttk.Button(add_frame, text="追加", command=self.add_card).pack(anchor="e", pady=(4, 0))

    def _show_card(self):
        if not self.cards:
            self.card_label.config(text="カードがありません")
            self.progress_label.config(text="")
            return
        card = self.cards[self.current_idx]
        self.showing_answer = False
        self.side_label.config(text="問題", fg="#3776ab")
        self.card_label.config(text=card["q"], fg="#222")
        self.progress_label.config(
            text=f"{self.current_idx + 1} / {len(self.cards)}")

    def flip(self):
        if not self.cards:
            return
        card = self.cards[self.current_idx]
        self.showing_answer = not self.showing_answer
        if self.showing_answer:
            self.side_label.config(text="答え", fg="#27ae60")
            self.card_label.config(text=card["a"], fg="#27ae60")
        else:
            self.side_label.config(text="問題", fg="#3776ab")
            self.card_label.config(text=card["q"], fg="#222")

    def prev_card(self):
        if self.cards:
            self.current_idx = (self.current_idx - 1) % len(self.cards)
            self._show_card()

    def next_card(self):
        if self.cards:
            self.current_idx = (self.current_idx + 1) % len(self.cards)
            self._show_card()

    def shuffle(self):
        random.shuffle(self.cards)
        self.current_idx = 0
        self._show_card()

    def add_card(self):
        q = self.q_entry.get().strip()
        a = self.a_entry.get().strip()
        if not q or not a:
            messagebox.showwarning("警告", "問題と答えを両方入力してください")
            return
        self.cards.append({"q": q, "a": a})
        self._save_cards()
        self.q_entry.delete(0, tk.END)
        self.a_entry.delete(0, tk.END)
        self.current_idx = len(self.cards) - 1
        self._show_card()


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

LabelFrameによるセクション分け

ttk.LabelFrame を使うことで、入力エリアと結果エリアを視覚的に分けられます。padding引数でフレーム内の余白を設定し、見やすいレイアウトを実現しています。

import tkinter as tk
from tkinter import ttk, messagebox
import json
import os
import random


class App25:
    """フラッシュカードアプリ"""

    DEFAULT_CARDS = [
        {"q": "Pythonのリスト追加メソッドは？", "a": "append()"},
        {"q": "辞書のキー一覧を取得するメソッドは？", "a": "keys()"},
        {"q": "文字列を大文字に変換するメソッドは？", "a": "upper()"},
        {"q": "リストの要素数を返す組み込み関数は？", "a": "len()"},
        {"q": "ファイルを読み込むための関数は？", "a": "open()"},
    ]
    SAVE_FILE = "flashcards.json"

    def __init__(self, root):
        self.root = root
        self.root.title("フラッシュカードアプリ")
        self.root.geometry("500x440")
        self.root.configure(bg="#f8f9fc")
        self.cards = self._load_cards()
        self.current_idx = 0
        self.showing_answer = False
        self._build_ui()
        self._show_card()

    def _load_cards(self):
        if os.path.exists(self.SAVE_FILE):
            with open(self.SAVE_FILE, encoding="utf-8") as f:
                return json.load(f)
        return list(self.DEFAULT_CARDS)

    def _save_cards(self):
        with open(self.SAVE_FILE, "w", encoding="utf-8") as f:
            json.dump(self.cards, f, ensure_ascii=False, indent=2)

    def _build_ui(self):
        title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
        title_frame.pack(fill=tk.X)
        tk.Label(title_frame, text="フラッシュカード",
                 font=("Noto Sans JP", 16, "bold"),
                 bg="#3776ab", fg="white").pack()

        main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=20, pady=12)
        main_frame.pack(fill=tk.BOTH, expand=True)

        # カード表示
        self.card_frame = tk.Frame(main_frame, bg="white", relief=tk.RAISED, bd=1)
        self.card_frame.pack(fill=tk.X, ipady=20)

        self.side_label = tk.Label(self.card_frame, text="問題",
                                   bg="white", fg="#3776ab", font=("Noto Sans JP", 10))
        self.side_label.pack(anchor="w", padx=14, pady=(10, 0))

        self.card_label = tk.Label(self.card_frame, text="",
                                   bg="white", font=("Noto Sans JP", 15),
                                   wraplength=420, justify="center")
        self.card_label.pack(expand=True, pady=10, padx=14)

        self.progress_label = tk.Label(main_frame, text="", bg="#f8f9fc",
                                       font=("Noto Sans JP", 10), fg="#888")
        self.progress_label.pack(anchor="e", pady=(4, 0))

        # ナビゲーション
        nav_frame = tk.Frame(main_frame, bg="#f8f9fc")
        nav_frame.pack(pady=8)
        ttk.Button(nav_frame, text="◀ 前", command=self.prev_card, width=8).pack(side=tk.LEFT, padx=4)
        ttk.Button(nav_frame, text="答えを見る", command=self.flip, width=12).pack(side=tk.LEFT, padx=4)
        ttk.Button(nav_frame, text="次 ▶", command=self.next_card, width=8).pack(side=tk.LEFT, padx=4)
        ttk.Button(nav_frame, text="シャッフル", command=self.shuffle, width=10).pack(side=tk.LEFT, padx=4)

        # カード追加
        add_frame = ttk.LabelFrame(main_frame, text="カードを追加", padding=8)
        add_frame.pack(fill=tk.X, pady=(4, 0))
        row = tk.Frame(add_frame, bg=add_frame.cget("bg"))
        row.pack(fill=tk.X)
        tk.Label(row, text="問:", bg=add_frame.cget("bg")).pack(side=tk.LEFT)
        self.q_entry = ttk.Entry(row, width=20, font=("Noto Sans JP", 10))
        self.q_entry.pack(side=tk.LEFT, padx=4, fill=tk.X, expand=True)
        tk.Label(row, text="答:", bg=add_frame.cget("bg")).pack(side=tk.LEFT)
        self.a_entry = ttk.Entry(row, width=16, font=("Noto Sans JP", 10))
        self.a_entry.pack(side=tk.LEFT, padx=4)
        ttk.Button(add_frame, text="追加", command=self.add_card).pack(anchor="e", pady=(4, 0))

    def _show_card(self):
        if not self.cards:
            self.card_label.config(text="カードがありません")
            self.progress_label.config(text="")
            return
        card = self.cards[self.current_idx]
        self.showing_answer = False
        self.side_label.config(text="問題", fg="#3776ab")
        self.card_label.config(text=card["q"], fg="#222")
        self.progress_label.config(
            text=f"{self.current_idx + 1} / {len(self.cards)}")

    def flip(self):
        if not self.cards:
            return
        card = self.cards[self.current_idx]
        self.showing_answer = not self.showing_answer
        if self.showing_answer:
            self.side_label.config(text="答え", fg="#27ae60")
            self.card_label.config(text=card["a"], fg="#27ae60")
        else:
            self.side_label.config(text="問題", fg="#3776ab")
            self.card_label.config(text=card["q"], fg="#222")

    def prev_card(self):
        if self.cards:
            self.current_idx = (self.current_idx - 1) % len(self.cards)
            self._show_card()

    def next_card(self):
        if self.cards:
            self.current_idx = (self.current_idx + 1) % len(self.cards)
            self._show_card()

    def shuffle(self):
        random.shuffle(self.cards)
        self.current_idx = 0
        self._show_card()

    def add_card(self):
        q = self.q_entry.get().strip()
        a = self.a_entry.get().strip()
        if not q or not a:
            messagebox.showwarning("警告", "問題と答えを両方入力してください")
            return
        self.cards.append({"q": q, "a": a})
        self._save_cards()
        self.q_entry.delete(0, tk.END)
        self.a_entry.delete(0, tk.END)
        self.current_idx = len(self.cards) - 1
        self._show_card()


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

Entryウィジェットとイベントバインド

ttk.Entryで入力フィールドを作成します。bind('', ...)でEnterキー押下時に処理を実行できます。これにより、マウスを使わずキーボードだけで操作できるUXが実現できます。

import tkinter as tk
from tkinter import ttk, messagebox
import json
import os
import random


class App25:
    """フラッシュカードアプリ"""

    DEFAULT_CARDS = [
        {"q": "Pythonのリスト追加メソッドは？", "a": "append()"},
        {"q": "辞書のキー一覧を取得するメソッドは？", "a": "keys()"},
        {"q": "文字列を大文字に変換するメソッドは？", "a": "upper()"},
        {"q": "リストの要素数を返す組み込み関数は？", "a": "len()"},
        {"q": "ファイルを読み込むための関数は？", "a": "open()"},
    ]
    SAVE_FILE = "flashcards.json"

    def __init__(self, root):
        self.root = root
        self.root.title("フラッシュカードアプリ")
        self.root.geometry("500x440")
        self.root.configure(bg="#f8f9fc")
        self.cards = self._load_cards()
        self.current_idx = 0
        self.showing_answer = False
        self._build_ui()
        self._show_card()

    def _load_cards(self):
        if os.path.exists(self.SAVE_FILE):
            with open(self.SAVE_FILE, encoding="utf-8") as f:
                return json.load(f)
        return list(self.DEFAULT_CARDS)

    def _save_cards(self):
        with open(self.SAVE_FILE, "w", encoding="utf-8") as f:
            json.dump(self.cards, f, ensure_ascii=False, indent=2)

    def _build_ui(self):
        title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
        title_frame.pack(fill=tk.X)
        tk.Label(title_frame, text="フラッシュカード",
                 font=("Noto Sans JP", 16, "bold"),
                 bg="#3776ab", fg="white").pack()

        main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=20, pady=12)
        main_frame.pack(fill=tk.BOTH, expand=True)

        # カード表示
        self.card_frame = tk.Frame(main_frame, bg="white", relief=tk.RAISED, bd=1)
        self.card_frame.pack(fill=tk.X, ipady=20)

        self.side_label = tk.Label(self.card_frame, text="問題",
                                   bg="white", fg="#3776ab", font=("Noto Sans JP", 10))
        self.side_label.pack(anchor="w", padx=14, pady=(10, 0))

        self.card_label = tk.Label(self.card_frame, text="",
                                   bg="white", font=("Noto Sans JP", 15),
                                   wraplength=420, justify="center")
        self.card_label.pack(expand=True, pady=10, padx=14)

        self.progress_label = tk.Label(main_frame, text="", bg="#f8f9fc",
                                       font=("Noto Sans JP", 10), fg="#888")
        self.progress_label.pack(anchor="e", pady=(4, 0))

        # ナビゲーション
        nav_frame = tk.Frame(main_frame, bg="#f8f9fc")
        nav_frame.pack(pady=8)
        ttk.Button(nav_frame, text="◀ 前", command=self.prev_card, width=8).pack(side=tk.LEFT, padx=4)
        ttk.Button(nav_frame, text="答えを見る", command=self.flip, width=12).pack(side=tk.LEFT, padx=4)
        ttk.Button(nav_frame, text="次 ▶", command=self.next_card, width=8).pack(side=tk.LEFT, padx=4)
        ttk.Button(nav_frame, text="シャッフル", command=self.shuffle, width=10).pack(side=tk.LEFT, padx=4)

        # カード追加
        add_frame = ttk.LabelFrame(main_frame, text="カードを追加", padding=8)
        add_frame.pack(fill=tk.X, pady=(4, 0))
        row = tk.Frame(add_frame, bg=add_frame.cget("bg"))
        row.pack(fill=tk.X)
        tk.Label(row, text="問:", bg=add_frame.cget("bg")).pack(side=tk.LEFT)
        self.q_entry = ttk.Entry(row, width=20, font=("Noto Sans JP", 10))
        self.q_entry.pack(side=tk.LEFT, padx=4, fill=tk.X, expand=True)
        tk.Label(row, text="答:", bg=add_frame.cget("bg")).pack(side=tk.LEFT)
        self.a_entry = ttk.Entry(row, width=16, font=("Noto Sans JP", 10))
        self.a_entry.pack(side=tk.LEFT, padx=4)
        ttk.Button(add_frame, text="追加", command=self.add_card).pack(anchor="e", pady=(4, 0))

    def _show_card(self):
        if not self.cards:
            self.card_label.config(text="カードがありません")
            self.progress_label.config(text="")
            return
        card = self.cards[self.current_idx]
        self.showing_answer = False
        self.side_label.config(text="問題", fg="#3776ab")
        self.card_label.config(text=card["q"], fg="#222")
        self.progress_label.config(
            text=f"{self.current_idx + 1} / {len(self.cards)}")

    def flip(self):
        if not self.cards:
            return
        card = self.cards[self.current_idx]
        self.showing_answer = not self.showing_answer
        if self.showing_answer:
            self.side_label.config(text="答え", fg="#27ae60")
            self.card_label.config(text=card["a"], fg="#27ae60")
        else:
            self.side_label.config(text="問題", fg="#3776ab")
            self.card_label.config(text=card["q"], fg="#222")

    def prev_card(self):
        if self.cards:
            self.current_idx = (self.current_idx - 1) % len(self.cards)
            self._show_card()

    def next_card(self):
        if self.cards:
            self.current_idx = (self.current_idx + 1) % len(self.cards)
            self._show_card()

    def shuffle(self):
        random.shuffle(self.cards)
        self.current_idx = 0
        self._show_card()

    def add_card(self):
        q = self.q_entry.get().strip()
        a = self.a_entry.get().strip()
        if not q or not a:
            messagebox.showwarning("警告", "問題と答えを両方入力してください")
            return
        self.cards.append({"q": q, "a": a})
        self._save_cards()
        self.q_entry.delete(0, tk.END)
        self.a_entry.delete(0, tk.END)
        self.current_idx = len(self.cards) - 1
        self._show_card()


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

Textウィジェットでの結果表示

結果表示にはtk.Textウィジェットを使います。state=tk.DISABLEDでユーザーが直接編集できないようにし、表示前にNORMALに切り替えてからinsert()で内容を更新します。

import tkinter as tk
from tkinter import ttk, messagebox
import json
import os
import random


class App25:
    """フラッシュカードアプリ"""

    DEFAULT_CARDS = [
        {"q": "Pythonのリスト追加メソッドは？", "a": "append()"},
        {"q": "辞書のキー一覧を取得するメソッドは？", "a": "keys()"},
        {"q": "文字列を大文字に変換するメソッドは？", "a": "upper()"},
        {"q": "リストの要素数を返す組み込み関数は？", "a": "len()"},
        {"q": "ファイルを読み込むための関数は？", "a": "open()"},
    ]
    SAVE_FILE = "flashcards.json"

    def __init__(self, root):
        self.root = root
        self.root.title("フラッシュカードアプリ")
        self.root.geometry("500x440")
        self.root.configure(bg="#f8f9fc")
        self.cards = self._load_cards()
        self.current_idx = 0
        self.showing_answer = False
        self._build_ui()
        self._show_card()

    def _load_cards(self):
        if os.path.exists(self.SAVE_FILE):
            with open(self.SAVE_FILE, encoding="utf-8") as f:
                return json.load(f)
        return list(self.DEFAULT_CARDS)

    def _save_cards(self):
        with open(self.SAVE_FILE, "w", encoding="utf-8") as f:
            json.dump(self.cards, f, ensure_ascii=False, indent=2)

    def _build_ui(self):
        title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
        title_frame.pack(fill=tk.X)
        tk.Label(title_frame, text="フラッシュカード",
                 font=("Noto Sans JP", 16, "bold"),
                 bg="#3776ab", fg="white").pack()

        main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=20, pady=12)
        main_frame.pack(fill=tk.BOTH, expand=True)

        # カード表示
        self.card_frame = tk.Frame(main_frame, bg="white", relief=tk.RAISED, bd=1)
        self.card_frame.pack(fill=tk.X, ipady=20)

        self.side_label = tk.Label(self.card_frame, text="問題",
                                   bg="white", fg="#3776ab", font=("Noto Sans JP", 10))
        self.side_label.pack(anchor="w", padx=14, pady=(10, 0))

        self.card_label = tk.Label(self.card_frame, text="",
                                   bg="white", font=("Noto Sans JP", 15),
                                   wraplength=420, justify="center")
        self.card_label.pack(expand=True, pady=10, padx=14)

        self.progress_label = tk.Label(main_frame, text="", bg="#f8f9fc",
                                       font=("Noto Sans JP", 10), fg="#888")
        self.progress_label.pack(anchor="e", pady=(4, 0))

        # ナビゲーション
        nav_frame = tk.Frame(main_frame, bg="#f8f9fc")
        nav_frame.pack(pady=8)
        ttk.Button(nav_frame, text="◀ 前", command=self.prev_card, width=8).pack(side=tk.LEFT, padx=4)
        ttk.Button(nav_frame, text="答えを見る", command=self.flip, width=12).pack(side=tk.LEFT, padx=4)
        ttk.Button(nav_frame, text="次 ▶", command=self.next_card, width=8).pack(side=tk.LEFT, padx=4)
        ttk.Button(nav_frame, text="シャッフル", command=self.shuffle, width=10).pack(side=tk.LEFT, padx=4)

        # カード追加
        add_frame = ttk.LabelFrame(main_frame, text="カードを追加", padding=8)
        add_frame.pack(fill=tk.X, pady=(4, 0))
        row = tk.Frame(add_frame, bg=add_frame.cget("bg"))
        row.pack(fill=tk.X)
        tk.Label(row, text="問:", bg=add_frame.cget("bg")).pack(side=tk.LEFT)
        self.q_entry = ttk.Entry(row, width=20, font=("Noto Sans JP", 10))
        self.q_entry.pack(side=tk.LEFT, padx=4, fill=tk.X, expand=True)
        tk.Label(row, text="答:", bg=add_frame.cget("bg")).pack(side=tk.LEFT)
        self.a_entry = ttk.Entry(row, width=16, font=("Noto Sans JP", 10))
        self.a_entry.pack(side=tk.LEFT, padx=4)
        ttk.Button(add_frame, text="追加", command=self.add_card).pack(anchor="e", pady=(4, 0))

    def _show_card(self):
        if not self.cards:
            self.card_label.config(text="カードがありません")
            self.progress_label.config(text="")
            return
        card = self.cards[self.current_idx]
        self.showing_answer = False
        self.side_label.config(text="問題", fg="#3776ab")
        self.card_label.config(text=card["q"], fg="#222")
        self.progress_label.config(
            text=f"{self.current_idx + 1} / {len(self.cards)}")

    def flip(self):
        if not self.cards:
            return
        card = self.cards[self.current_idx]
        self.showing_answer = not self.showing_answer
        if self.showing_answer:
            self.side_label.config(text="答え", fg="#27ae60")
            self.card_label.config(text=card["a"], fg="#27ae60")
        else:
            self.side_label.config(text="問題", fg="#3776ab")
            self.card_label.config(text=card["q"], fg="#222")

    def prev_card(self):
        if self.cards:
            self.current_idx = (self.current_idx - 1) % len(self.cards)
            self._show_card()

    def next_card(self):
        if self.cards:
            self.current_idx = (self.current_idx + 1) % len(self.cards)
            self._show_card()

    def shuffle(self):
        random.shuffle(self.cards)
        self.current_idx = 0
        self._show_card()

    def add_card(self):
        q = self.q_entry.get().strip()
        a = self.a_entry.get().strip()
        if not q or not a:
            messagebox.showwarning("警告", "問題と答えを両方入力してください")
            return
        self.cards.append({"q": q, "a": a})
        self._save_cards()
        self.q_entry.delete(0, tk.END)
        self.a_entry.delete(0, tk.END)
        self.current_idx = len(self.cards) - 1
        self._show_card()


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

例外処理とmessagebox

try-except で ValueError と Exception を捕捉し、messagebox.showerror() でユーザーにわかりやすいエラーメッセージを表示します。入力バリデーションは必ず実装しましょう。

import tkinter as tk
from tkinter import ttk, messagebox
import json
import os
import random


class App25:
    """フラッシュカードアプリ"""

    DEFAULT_CARDS = [
        {"q": "Pythonのリスト追加メソッドは？", "a": "append()"},
        {"q": "辞書のキー一覧を取得するメソッドは？", "a": "keys()"},
        {"q": "文字列を大文字に変換するメソッドは？", "a": "upper()"},
        {"q": "リストの要素数を返す組み込み関数は？", "a": "len()"},
        {"q": "ファイルを読み込むための関数は？", "a": "open()"},
    ]
    SAVE_FILE = "flashcards.json"

    def __init__(self, root):
        self.root = root
        self.root.title("フラッシュカードアプリ")
        self.root.geometry("500x440")
        self.root.configure(bg="#f8f9fc")
        self.cards = self._load_cards()
        self.current_idx = 0
        self.showing_answer = False
        self._build_ui()
        self._show_card()

    def _load_cards(self):
        if os.path.exists(self.SAVE_FILE):
            with open(self.SAVE_FILE, encoding="utf-8") as f:
                return json.load(f)
        return list(self.DEFAULT_CARDS)

    def _save_cards(self):
        with open(self.SAVE_FILE, "w", encoding="utf-8") as f:
            json.dump(self.cards, f, ensure_ascii=False, indent=2)

    def _build_ui(self):
        title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
        title_frame.pack(fill=tk.X)
        tk.Label(title_frame, text="フラッシュカード",
                 font=("Noto Sans JP", 16, "bold"),
                 bg="#3776ab", fg="white").pack()

        main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=20, pady=12)
        main_frame.pack(fill=tk.BOTH, expand=True)

        # カード表示
        self.card_frame = tk.Frame(main_frame, bg="white", relief=tk.RAISED, bd=1)
        self.card_frame.pack(fill=tk.X, ipady=20)

        self.side_label = tk.Label(self.card_frame, text="問題",
                                   bg="white", fg="#3776ab", font=("Noto Sans JP", 10))
        self.side_label.pack(anchor="w", padx=14, pady=(10, 0))

        self.card_label = tk.Label(self.card_frame, text="",
                                   bg="white", font=("Noto Sans JP", 15),
                                   wraplength=420, justify="center")
        self.card_label.pack(expand=True, pady=10, padx=14)

        self.progress_label = tk.Label(main_frame, text="", bg="#f8f9fc",
                                       font=("Noto Sans JP", 10), fg="#888")
        self.progress_label.pack(anchor="e", pady=(4, 0))

        # ナビゲーション
        nav_frame = tk.Frame(main_frame, bg="#f8f9fc")
        nav_frame.pack(pady=8)
        ttk.Button(nav_frame, text="◀ 前", command=self.prev_card, width=8).pack(side=tk.LEFT, padx=4)
        ttk.Button(nav_frame, text="答えを見る", command=self.flip, width=12).pack(side=tk.LEFT, padx=4)
        ttk.Button(nav_frame, text="次 ▶", command=self.next_card, width=8).pack(side=tk.LEFT, padx=4)
        ttk.Button(nav_frame, text="シャッフル", command=self.shuffle, width=10).pack(side=tk.LEFT, padx=4)

        # カード追加
        add_frame = ttk.LabelFrame(main_frame, text="カードを追加", padding=8)
        add_frame.pack(fill=tk.X, pady=(4, 0))
        row = tk.Frame(add_frame, bg=add_frame.cget("bg"))
        row.pack(fill=tk.X)
        tk.Label(row, text="問:", bg=add_frame.cget("bg")).pack(side=tk.LEFT)
        self.q_entry = ttk.Entry(row, width=20, font=("Noto Sans JP", 10))
        self.q_entry.pack(side=tk.LEFT, padx=4, fill=tk.X, expand=True)
        tk.Label(row, text="答:", bg=add_frame.cget("bg")).pack(side=tk.LEFT)
        self.a_entry = ttk.Entry(row, width=16, font=("Noto Sans JP", 10))
        self.a_entry.pack(side=tk.LEFT, padx=4)
        ttk.Button(add_frame, text="追加", command=self.add_card).pack(anchor="e", pady=(4, 0))

    def _show_card(self):
        if not self.cards:
            self.card_label.config(text="カードがありません")
            self.progress_label.config(text="")
            return
        card = self.cards[self.current_idx]
        self.showing_answer = False
        self.side_label.config(text="問題", fg="#3776ab")
        self.card_label.config(text=card["q"], fg="#222")
        self.progress_label.config(
            text=f"{self.current_idx + 1} / {len(self.cards)}")

    def flip(self):
        if not self.cards:
            return
        card = self.cards[self.current_idx]
        self.showing_answer = not self.showing_answer
        if self.showing_answer:
            self.side_label.config(text="答え", fg="#27ae60")
            self.card_label.config(text=card["a"], fg="#27ae60")
        else:
            self.side_label.config(text="問題", fg="#3776ab")
            self.card_label.config(text=card["q"], fg="#222")

    def prev_card(self):
        if self.cards:
            self.current_idx = (self.current_idx - 1) % len(self.cards)
            self._show_card()

    def next_card(self):
        if self.cards:
            self.current_idx = (self.current_idx + 1) % len(self.cards)
            self._show_card()

    def shuffle(self):
        random.shuffle(self.cards)
        self.current_idx = 0
        self._show_card()

    def add_card(self):
        q = self.q_entry.get().strip()
        a = self.a_entry.get().strip()
        if not q or not a:
            messagebox.showwarning("警告", "問題と答えを両方入力してください")
            return
        self.cards.append({"q": q, "a": a})
        self._save_cards()
        self.q_entry.delete(0, tk.END)
        self.a_entry.delete(0, tk.END)
        self.current_idx = len(self.cards) - 1
        self._show_card()


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

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

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

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

    新しいファイルを作成して app25.py と保存します。

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

    App25クラスを定義し、__init__とmainloop()の最小構成を作ります。

  3. 3
    タイトルバーを作る

    Frameを使ってカラーバー付きのタイトルエリアを作ります。

  4. 4
    入力フォームを実装する

    LabelFrameとEntryウィジェットで入力エリアを作ります。

  5. 5
    処理ロジックを実装する

    _calculate()メソッドに計算・処理ロジックを実装します。

  6. 6
    結果表示を実装する

    TextウィジェットかLabelに結果を表示する_show_result()を実装します。

  7. 7
    エラー処理を追加する

    try-exceptとmessageboxでエラーハンドリングを追加します。

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

基本機能を習得したら、以下のカスタマイズに挑戦してみましょう。少しずつ機能を追加することで、Pythonのスキルが飛躍的に向上します。

💡 ダークモードを追加する

bg色・fg色を辞書で管理し、ボタン1つでダークモード・ライトモードを切り替えられるようにしましょう。

💡 データのエクスポート機能

計算結果をCSV・TXTファイルに保存するエクスポート機能を追加しましょう。filedialog.asksaveasfilename()でファイル保存ダイアログが使えます。

💡 入力履歴機能

以前の入力値を覚えておいてComboboxのドロップダウンで再選択できる履歴機能を追加しましょう。

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

❌ 日本語フォントが表示されない

原因：システムに日本語フォントが見つからない場合があります。

解決法：font引数を省略するかシステムに合ったフォントを指定してください。

❌ ウィンドウのサイズが変更できない

原因：resizable(False, False)が設定されています。

解決法：resizable(True, True)に変更してください。

9. 練習問題

アプリの理解を深めるための練習問題です。難易度順に挑戦してみてください。

  1. 課題1：機能拡張

    フラッシュカードアプリに新しい機能を1つ追加してみましょう。どんな機能があると便利か考えてから実装してください。

  2. 課題2：UIの改善

    色・フォント・レイアウトを変更して、より使いやすいUIにカスタマイズしてみましょう。

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

    入力値や計算結果をファイルに保存する機能を追加しましょう。jsonやcsvモジュールを使います。

🚀
次に挑戦するアプリ

このアプリをマスターしたら、次のNo.26に挑戦しましょう。