6日目のゴール
6日目のテーマは
「ボタンで“画面の状態”と“データの状態”を同時に動かす」 ことです。
ここまでであなたはすでに、
ボタンで関数を呼ぶ、入力を受け取る、レイアウトを整える、状態を切り替える、というところまで来ています。
6日目では一歩進んで、
「画面の見え方（どのエリアを見せるか）」
「アプリの中のデータ（何を持っているか）」
この二つを、ボタンを中心に連動させていきます。
言い換えると、
「ボタンで“画面遷移っぽいこと”と“一覧の更新”をやる」 です。
画面を「切り替える」という発想
1つのウィンドウの中に“複数の画面”を持つ
今までは、1つのウィンドウの中に
フォームやラベルを並べていました。
でも、アプリをイメージすると、
「入力画面」と「一覧画面」が分かれていることが多いはずです。
本格的な画面遷移は後でもできますが、
tkinter でも「それっぽいこと」は簡単にできます。
考え方はこうです。
入力用の Frame
一覧表示用の Frame
この二つを用意しておいて、
ボタンで「どちらを見せるか」を切り替える。
実際にコードで見てみましょう。
import tkinter as tk
def show_input_frame():
frame_list.pack_forget()
frame_input.pack(fill="both", expand=True)
def show_list_frame():
frame_input.pack_forget()
frame_list.pack(fill="both", expand=True)
root = tk.Tk()
root.title("画面切り替えの基本")
frame_menu = tk.Frame(root)
frame_menu.pack(fill="x")
button_to_input = tk.Button(frame_menu, text="入力画面", command=show_input_frame)
button_to_input.pack(side="left", padx=5, pady=5)
button_to_list = tk.Button(frame_menu, text="一覧画面", command=show_list_frame)
button_to_list.pack(side="left", padx=5, pady=5)
frame_input = tk.Frame(root, bg="#eef")
label_input = tk.Label(frame_input, text="ここが入力画面です")
label_input.pack(pady=20)
frame_list = tk.Frame(root, bg="#efe")
label_list = tk.Label(frame_list, text="ここが一覧画面です")
label_list.pack(pady=20)
frame_input.pack(fill="both", expand=True)
root.mainloop()
ここでの重要ポイントを丁寧に見ていきます。
frame_input と frame_list は、どちらも root の子です。
最初は frame_input だけを pack して表示しています。show_input_frame では frame_list.pack_forget() で一覧側を隠し、入力側を pack し直しています。show_list_frame ではその逆をしています。
pack_forget() は、
「この部品をレイアウトから外して、見えなくする」
という命令です。
これで、
ボタンを押すたびに「見えている Frame」が切り替わり、
画面が切り替わったように見えます。
ここで大事なのは、
「画面を消すのではなく、“見せる Frame を変えている”」
という感覚です。
「データの一覧」を画面に持つ
Listbox で“リストっぽいもの”を表示する
6日目では、
「ボタンでデータを追加して、一覧を更新する」
ところまで行きたいので、
一覧表示用に Listbox を使ってみます。
Listbox は、
縦に並んだ項目のリストを表示する部品です。
まずは、単体で動かしてみます。
import tkinter as tk
root = tk.Tk()
root.title("Listboxの基本")
listbox = tk.Listbox(root, height=5, width=30)
listbox.pack(padx=10, pady=10)
listbox.insert(tk.END, "りんご")
listbox.insert(tk.END, "バナナ")
listbox.insert(tk.END, "みかん")
root.mainloop()
ここで押さえておきたいのは、
Listbox を作るときに height と width で見た目のサイズを決めること。insert(位置, 文字列) で項目を追加すること。tk.END は「一番最後に追加して」という意味でよく使うこと。
です。
Listbox は、
「アプリの中のデータを、ユーザーに見せる窓」
だと思ってください。
ボタンで「データを追加して一覧を更新する」
入力画面と一覧画面をつなぐ
ここからが6日目の本番です。
やりたいことはこうです。
入力画面で「メモ」を入力して「追加」ボタンを押す
そのメモを内部のリストに保存する
一覧画面に切り替えると、そのリストの中身が Listbox に表示されている
つまり、
「ボタンでデータを増やし、ボタンで画面を切り替え、画面で一覧を見せる」
という流れです。
ミニアプリ：簡易メモ帳（一覧付き）
全体像のコード
まずコードを出してから、重要なところを分解して説明します。
import tkinter as tk
from tkinter import messagebox
memos = []
def add_memo():
text = entry_memo.get().strip()
if text == "":
messagebox.showinfo("情報", "メモを入力してください。")
return
memos.append(text)
entry_memo.delete(0, tk.END)
messagebox.showinfo("情報", "メモを追加しました。")
def refresh_listbox():
listbox_memos.delete(0, tk.END)
for memo in memos:
listbox_memos.insert(tk.END, memo)
def show_input_frame():
frame_list.pack_forget()
frame_input.pack(fill="both", expand=True)
def show_list_frame():
frame_input.pack_forget()
refresh_listbox()
frame_list.pack(fill="both", expand=True)
root = tk.Tk()
root.title("簡易メモ帳")
frame_menu = tk.Frame(root)
frame_menu.pack(fill="x")
button_to_input = tk.Button(frame_menu, text="メモ入力", command=show_input_frame)
button_to_input.pack(side="left", padx=5, pady=5)
button_to_list = tk.Button(frame_menu, text="メモ一覧", command=show_list_frame)
button_to_list.pack(side="left", padx=5, pady=5)
frame_input = tk.Frame(root)
label_memo = tk.Label(frame_input, text="メモを入力してください:")
label_memo.pack(pady=5)
entry_memo = tk.Entry(frame_input, width=40)
entry_memo.pack(pady=5)
button_add = tk.Button(frame_input, text="追加", command=add_memo)
button_add.pack(pady=10)
frame_list = tk.Frame(root)
label_list = tk.Label(frame_list, text="メモ一覧")
label_list.pack(pady=5)
listbox_memos = tk.Listbox(frame_list, height=8, width=40)
listbox_memos.pack(padx=10, pady=5)
frame_input.pack(fill="both", expand=True)
root.mainloop()
ここには、6日目で押さえたい要素が全部入っています。
データの「置き場所」と「見せ方」を分ける
memos というリストが“真実のデータ”
一番上にあるこれが、
アプリの中の「本物のデータ」です。
memos = []
ここに、追加されたメモをどんどん入れていきます。
Listbox はあくまで「表示用」であって、
本当の意味でのデータは memos にあります。
この「データの本体」と「表示」を分ける感覚は、
アプリを作るうえでとても大事です。
ボタンでデータを追加する関数
add_memo の役割を分解する
def add_memo():
text = entry_memo.get().strip()
if text == "":
messagebox.showinfo("情報", "メモを入力してください。")
return
memos.append(text)
entry_memo.delete(0, tk.END)
messagebox.showinfo("情報", "メモを追加しました。")
この関数は、
「追加ボタンが押されたときの一連の流れ」を担当しています。
Entry から文字列を取り出す。
空ならダイアログで知らせて終わる。
空でなければ memos に追加する。
入力欄を空に戻す。
「追加しました」とダイアログでフィードバックする。
ここでの重要ポイントは、
「画面をいじる部分」と「データをいじる部分」が混ざっていることを自覚すること です。
データをいじるのは memos.append(text) の1行だけ。
それ以外は、全部「ユーザーへの見せ方」です。
この意識があると、
後で「データの保存」「読み込み」を足すときに、
どこを触ればいいかが分かりやすくなります。
一覧を更新する関数
refresh_listbox の役割
def refresh_listbox():
listbox_memos.delete(0, tk.END)
for memo in memos:
listbox_memos.insert(tk.END, memo)
この関数は、
「今の memos の中身を、Listbox に反映する」
という一点だけを担当しています。
最初に delete(0, tk.END) で
Listbox の中身を全部消しています。
そのあとで、memos の中身を先頭から順に insert しています。
ここでの本質は、
Listbox は「表示用のコピー」であり、
本体はあくまで memos だということ。
だから、
「表示を更新したいときだけ refresh_listbox を呼ぶ」
という設計にしています。
画面切り替えと一覧更新をつなぐ
show_list_frame の中身がポイント
def show_list_frame():
frame_input.pack_forget()
refresh_listbox()
frame_list.pack(fill="both", expand=True)
ここでやっていることは三つです。
入力画面を隠す。
一覧の Listbox を最新の状態に更新する。
一覧画面を表示する。
つまり、
「画面を切り替えるタイミングで、一覧も更新する」
という設計になっています。
これがとても大事です。
もし add_memo の中で refresh_listbox() を呼んでしまうと、
「入力画面にいるのに裏で Listbox が更新されている」
という、ちょっと気持ち悪い状態になります。
「一覧画面に切り替えるときにだけ、一覧を更新する」
というルールを決めておくと、
アプリの流れが頭の中で整理されます。
ボタンは「画面」と「データ」の両方を動かす
6日目で見えてほしい全体像
このミニメモ帳アプリでは、
ボタンがそれぞれこういう役割を持っています。
「メモ入力」ボタン
入力画面を表示する（画面の状態を変える）
「メモ一覧」ボタン
入力画面を隠す
一覧を最新に更新する
一覧画面を表示する
「追加」ボタン
Entry から入力を取り出す
データ（memos）を更新する
入力欄をクリアする
ダイアログでフィードバックする
つまり、
ボタンが「画面の状態」と「データの状態」を橋渡ししている
という構造になっています。
ここまで来ると、
ボタンは単なる「クリックのきっかけ」ではなく、
アプリ全体の流れを動かす“司令塔”として
かなり本格的に機能し始めています。
6日目で絶対に押さえてほしい本質
「画面」と「データ」と「ボタン」の三角形
今日いちばん大事なのは、
頭の中にこの三角形を描けるようになることです。
画面（Frame, Label, Entry, Listbox）
データ（リストや変数）
ボタン（状態を変えるトリガー）
ボタンが押されると、
データが変わる。
画面が切り替わる。
一覧が更新される。
この流れを、自分で設計できるようになると、
「ちょっとした実用アプリ」なら
tkinter で十分作れるようになります。
7日目では、
今日のメモ帳のような構造に
エラーハンドリングや保存機能（JSONなど）を組み合わせて、
「中級者らしい GUI アプリの形」に仕上げていきましょう。
もし余力があれば、
このメモ帳に「削除ボタン」や「選択したメモの詳細表示」などを
自分で足してみてください。
そのときも必ず、
どのボタンが
どのデータを
どの画面に反映させるのか
を意識して書いてみると、一気にレベルが上がります。
