初心者向け No.06

ストップウォッチ

スタート・ストップ・リセット機能付きストップウォッチ。after()メソッドによる定期処理の実装を学びます。

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

📋 目次

1. アプリ概要
2. 機能一覧
3. 事前準備・環境
4. 完全なソースコード
5. コード解説
6. ステップバイステップガイド
7. カスタマイズアイデア
8. よくある問題と解決法
9. 練習問題

1. アプリ概要

スタート・ストップ・リセット機能付きストップウォッチ。after()メソッドによる定期処理の実装を学びます。

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

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

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

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

ストップウォッチ実行画面（Linux Mint） — 実行画面（Linux Mint）

2. 機能一覧

「▶ スタート」ボタン（start_stop()）・「⏱ ラップ」ボタン（record_lap()）・「⟳ リセット」ボタン（reset()）で操作
after(10, ...) による10ミリ秒間隔の _tick() 呼び出し（画面の自動更新）
tk.Listbox による一覧表示（スクロールバー付き）
ウィンドウはタイトル「ストップウォッチ」・サイズ 400x320 で起動

3. 事前準備・環境

ℹ️

動作確認環境

Python 3.10 以上 / Windows 11（実機）で起動・基本操作を確認／ Linux Mint 22.3（仮想マシン）で起動・画面表示を確認（macOS は未検証）

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

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

4. 完全なソースコード

💡

コードのコピー方法

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

✅ 追加インストール不要（標準ライブラリのみ使用）

app06.py

import tkinter as tk
from tkinter import ttk


class App06:
    """ストップウォッチ"""

    def __init__(self, root):
        self.root = root
        self.root.title("ストップウォッチ")
        self.root.geometry("400x320")
        self.root.minsize(400, 320)
        self.root.configure(bg="#f8f9fc")
        self.running = False
        self.elapsed = 0  # ミリ秒
        self._after_id = None
        self._build_ui()

    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=20)
        main_frame.pack(fill=tk.BOTH, expand=True)

        # 時刻表示
        self.time_label = tk.Label(main_frame, text="00:00.00",
                                   font=("Courier", 42, "bold"),
                                   bg="#f8f9fc", fg="#222")
        self.time_label.pack(pady=(10, 20))

        # ボタン（スタート／ラップ／リセットを横並び）
        btn_frame = tk.Frame(main_frame, bg="#f8f9fc")
        btn_frame.pack()
        self.start_btn = ttk.Button(btn_frame, text="▶ スタート",
                                    command=self.start_stop, width=12)
        self.start_btn.grid(row=0, column=0, padx=6)
        self.lap_btn = ttk.Button(btn_frame, text="⏱ ラップ",
                                  command=self.record_lap, width=12)
        self.lap_btn.grid(row=0, column=1, padx=6)
        ttk.Button(btn_frame, text="⟳ リセット",
                   command=self.reset, width=12).grid(row=0, column=2, padx=6)

        # ラップ一覧
        lap_frame = ttk.LabelFrame(main_frame, text="ラップ", padding=6)
        lap_frame.pack(fill=tk.BOTH, expand=True, pady=(16, 0))
        self.lap_listbox = tk.Listbox(lap_frame, font=("Courier", 11),
                                      bg="white", relief=tk.FLAT, height=4)
        self.lap_listbox.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
        scrollbar = ttk.Scrollbar(lap_frame, command=self.lap_listbox.yview)
        self.lap_listbox.configure(yscrollcommand=scrollbar.set)
        scrollbar.pack(side=tk.RIGHT, fill=tk.Y)
        self.lap_count = 0

    def start_stop(self):
        if self.running:
            self.running = False
            self.start_btn.config(text="▶ スタート")
            if self._after_id:
                self.root.after_cancel(self._after_id)
        else:
            self.running = True
            self.start_btn.config(text="⏸ ストップ")
            self._last_tick = self.root.tk.call("clock", "milliseconds")
            self._tick()

    def _tick(self):
        if not self.running:
            return
        now = self.root.tk.call("clock", "milliseconds")
        self.elapsed += now - self._last_tick
        self._last_tick = now
        self._update_display()
        self._after_id = self.root.after(10, self._tick)

    def _update_display(self):
        total_cs = self.elapsed // 10
        minutes = total_cs // 6000
        seconds = (total_cs % 6000) // 100
        centiseconds = total_cs % 100
        self.time_label.config(text=f"{minutes:02d}:{seconds:02d}.{centiseconds:02d}")

    def record_lap(self):
        if self.elapsed == 0:
            return
        self.lap_count += 1
        total_cs = self.elapsed // 10
        minutes = total_cs // 6000
        seconds = (total_cs % 6000) // 100
        centiseconds = total_cs % 100
        self.lap_listbox.insert(tk.END, f"Lap {self.lap_count:02d}  {minutes:02d}:{seconds:02d}.{centiseconds:02d}")
        self.lap_listbox.see(tk.END)

    def reset(self):
        self.running = False
        if self._after_id:
            self.root.after_cancel(self._after_id)
        self.elapsed = 0
        self.start_btn.config(text="▶ スタート")
        self.time_label.config(text="00:00.00")
        self.lap_listbox.delete(0, tk.END)
        self.lap_count = 0


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

5. コード解説

ストップウォッチのコードを、実際に書かれている実装に沿って解説します。

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

App06 クラスにアプリの全機能をまとめています（メソッド7個・全111行）。__init__ ではタイトル「ストップウォッチ」とウィンドウサイズ 400x320 を設定します。あわせて状態を保持する変数（self.running・self.elapsed・self._after_id）を初期化し、最後に _build_ui() で画面を組み立てます。