pythonで電卓を作ってtkinterの使い方をマスターしよう！

こんにちは、こちょすです。

今日はPythonで電卓を作ってみようと思います！💪

参考にするのはMacに標準搭載されている電卓です。皆さんも一度は使ったことはあるのではないでしょうか？？？

プログラミングを勉強し始めると、一番始めに学ぶような文字列操作や配列操作を学びつつ、役立つものを作れるので楽しいですよ！

それにエンジニアを目指す方なら自分でコードがかけるのは強いです！

コーディングスキル意外にもエンジニアに必要なスキルが知りたい方は以下の記事もみてくださいね🙏

では一緒にがんばっていきましょう🔥

Mac電卓の機能を整理していこう！

pythonのtkinterの使い方を学ぶ前に、まずはゴールを明確にしましょう！何を実装すればOKなんだっけ？？

というのを明確にする必要があります。ちなみにこの作業をSE的にいうと要件定義といいます。

ぽちぽち電卓をいじりながら、要件を洗い出してみましょう！

こんなところかなと思います！

全部は洗い出せないよーと心配になる方もいるかもしれません。仕事だと確かに漏れなく実装することが求められることもあるかもしれません（ウォーターフォールなら尚更）

しかし今回は遊びでやってみているだけなので、あまり気にせず進みましょう！

あとで気づけば直せばいいだけです！💪

tkinterを使って実装してみよう！

上で整理した要件に合わせて早速実装してみましょう！

今回はまずは全コードを出して、次の章で要点を説明していこうと思います。

もしできる方はまずは見ないで書いてみましょう！

# ライブラリインポート
import tkinter as tk
from tkinter import ttk

# 計算用配列の宣言
entry_list = []
entry_list_str = []
entry_list_join = []
calc_list_a = [0]
calc_list_b = [0]
operand_list = ['']
list_calc = []
list_calc_join = []
list_calc_result = []

# 数値入力処理
def add_number(num):
    display_list.set('')
    entry_list.append(num)
    entry_list_str = map(str, entry_list)
    entry_list_join.append(''.join(entry_list_str))
    display_list.set(entry_list_join[-1])

# 計算処理
def calc_function():
    if calc_list_b == '':
        pass
    else:
        if operand_list[-1] == '':
            pass
        else:
            calc_result.set(eval(str(calc_list_b[-1]) +
                                 str(operand_list[-1]) + str(calc_list_a[-1])))
            if calc_result.get()[-2:] == '.0':
                calc_result.set(calc_result.get()[:-2])
            display_list.set(calc_result.get())
            calc_list_a.append(display_list.get())

# 加算処理
def plus_function():
    calc_list_b.append(calc_list_a[-1])
    calc_list_a.append(entry_list_join[-1])
    calc_function()
    operand_list.append('+')
    entry_list.clear()

# 減算処理
def minus_function():
    calc_list_b.append(calc_list_a[-1])
    calc_list_a.append(entry_list_join[-1])
    calc_function()
    operand_list.append('-')
    entry_list.clear()

# 乗算処理
def multiply_function():
    calc_list_b.append(calc_list_a[-1])
    calc_list_a.append(entry_list_join[-1])
    calc_function()
    operand_list.append('*')
    entry_list.clear()

# 除算処理
def devide_function():
    calc_list_b.append(calc_list_a[-1])
    calc_list_a.append(entry_list_join[-1])
    calc_function()
    operand_list.append('/')
    entry_list.clear()

# イコール押下時処理
def equal_function():
    calc_result.set(
        eval(str(calc_list_a[-1]) + str(operand_list[-1]) + str(entry_list_join[-1])))
    clear_function()
    display_list.set(calc_result.get())

# クリア処理
def clear_function():
    entry_list.clear()
    calc_list_a.clear()
    calc_list_b.clear()
    operand_list.clear()
    calc_list_a.append('0')
    calc_list_b.append('0')
    operand_list.append('')
    display_list.set('0')

# 符号変換処理
def sign_change_function():
    display_list.set(eval(str(display_list.get()) + ' * -1'))
    calc_list_a.append(display_list.get())


# Tkインスタンスの生成
root = tk.Tk()

# windowのタイトル設定
root.title("Calculator")

# Tkインスタンスを引数としてフレームインスタンスの生成
mainframe = ttk.Frame(root, padding="3 3 12 12")

# フレームのグリッドを指定
mainframe.grid(column=0, row=0, sticky=("N", "W", "E", "S"))
root.columnconfigure(0, weight=1)
root.rowconfigure(0, weight=1)

display_list = tk.StringVar()
calc_result = tk.StringVar()


# ラベルとボタンを生成
ttk.Label(mainframe, textvariable=display_list).grid(
    column=2, row=1, sticky=("W", "E"))

ttk.Button(mainframe, text="0", command=lambda: add_number(0)).grid(
    column=1, row=6, sticky="W")
ttk.Button(mainframe, text="1", command=lambda: add_number(1)).grid(
    column=1, row=5, sticky="W")
ttk.Button(mainframe, text="2", command=lambda: add_number(2)).grid(
    column=2, row=5, sticky="W")
ttk.Button(mainframe, text="3", command=lambda: add_number(3)).grid(
    column=3, row=5, sticky="W")
ttk.Button(mainframe, text="4", command=lambda: add_number(4)).grid(
    column=1, row=4, sticky="W")
ttk.Button(mainframe, text="5", command=lambda: add_number(5)).grid(
    column=2, row=4, sticky="W")
ttk.Button(mainframe, text="6", command=lambda: add_number(6)).grid(
    column=3, row=4, sticky="W")
ttk.Button(mainframe, text="7", command=lambda: add_number(7)).grid(
    column=1, row=3, sticky="W")
ttk.Button(mainframe, text="8", command=lambda: add_number(8)).grid(
    column=2, row=3, sticky="W")
ttk.Button(mainframe, text="9", command=lambda: add_number(9)).grid(
    column=3, row=3, sticky="W")

ttk.Button(mainframe, text="+", command=lambda: plus_function()).grid(
    column=4, row=5, sticky="W")
ttk.Button(mainframe, text="-", command=lambda: minus_function()).grid(
    column=4, row=4, sticky="W")
ttk.Button(mainframe, text="×", command=lambda: multiply_function()).grid(
    column=4, row=3, sticky="W")
ttk.Button(mainframe, text="÷", command=lambda: devide_function()).grid(
    column=4, row=2, sticky="W")
ttk.Button(mainframe, text="=", command=lambda: equal_function()).grid(
    column=4, row=6, sticky="W")
ttk.Button(mainframe, text="C", command=lambda: clear_function()).grid(
    column=1, row=2, sticky="W")
ttk.Button(mainframe, text="+/-", command=lambda: sign_change_function()).grid(
    column=2, row=2, sticky="W")

for child in mainframe.winfo_children():
    child.grid_configure(padx=0, pady=0)


root.mainloop()

tkinterの使い方解説　処理をブロックごとにみていこう！

上のコードをみてしまうと「うっ、、、」となってしまう方もいると思います。

まずはどういう構造になっているか、ざっくり書いておくと、以下のような流れで書かれています。

というわけで、ブロック単位でどんな処理をしているのかみていきましょう！🔥

tkinterの使い方解説　その１：①ライブラリのインポート〜②変数の宣言

# ライブラリのインポート
import tkinter as tk
from tkinter import ttk

# 計算用配列の宣言
entry_list = []
entry_list_str = []
entry_list_join = []
calc_list_a = [0]
calc_list_b = [0]
operand_list = ['']
list_calc = []
list_calc_join = []
list_calc_result = []

インポートしているのはtkinterと、tkinterモジュールの中のtkinterライブラリです。
紛らわしいのですが、ttkとしてインポートしているtkinter.tkinterを使うことで、ボタンやラベルなどがOSに合わせていい感じに表示されます。

ここはそんなに難しくありませんが、1つポイントがあります。

計算結果を入れる箱は変数ではなく、配列にしている
pythonでは、変数は一度値を代入してしまうと、その値は変更できません。
この特徴を、「immutable（イミュータブル）である」といいます。
電卓では、計算を何度も行うので、計算結果を繰り返し入れられる箱があると便利ですが、普通に変数を宣言してしまうと、エラーになってしまします。
これを解決する方法はいくつかあります。
１つはクラスを使うことです。クラスを使ってインスタンス化したオブジェクトを使えば、再利用可能となります。
もう１つは配列を使うことです。これは直接的な解消方法ではありませんが、計算結果を次から次へと配列に追加してしまえば、上書き更新とか気にしなくていいですね。

今回は配列を使っています。その理由は機能拡張を意識しました。今回はMacの電卓を作ってみていますが、windowsの電卓を作りたいと思う人もいると思います。
windowsの電卓の場合、バージョンにもよりますが、計算の履歴を表示することができたりします。
配列を使っていると、過去の情報を持てるので、こういった機能を実装しやすくなると考えました。
今回はそこまでやりませんが、ぜひ挑戦してみてくださいね💪

tkinterの使い方解説　その２：③関数の宣言

# 数値入力処理
def add_number(num):
    display_list.set('')
    entry_list.append(num)
    entry_list_str = map(str, entry_list)
    entry_list_join.append(''.join(entry_list_str))
    display_list.set(entry_list_join[-1])

これは数字ボタンが押された時の挙動を定義しています。

ここで配列に入れ、それをentry_list_join.append(''.join(entry_list_str))で結合しています。

それぞれの変数に、どんな値が入っているのかはprintなどを使って適宜確認しながら進めてみることをお勧めします！

# 計算処理
def calc_function():
    if calc_list_b == '':
        pass
    else:
        if operand_list[-1] == '':
            pass
        else:
            calc_result.set(eval(str(calc_list_b[-1]) +
                                 str(operand_list[-1]) + str(calc_list_a[-1])))
            if calc_result.get()[-2:] == '.0':
                calc_result.set(calc_result.get()[:-2])
            display_list.set(calc_result.get())
            calc_list_a.append(display_list.get())

計算処理のコアの部分です。といってもそんなに複雑なことはしていないですのでご安心を！

ポイントはeval関数です、この関数を使って、数字2つと、演算子（operand)の計算結果を出しています。

eval関数は文字列を引数としてとるので、str関数を使って、文字列変換をしています。

また、割り算をした際に、計算結果が整数になった場合、eval関数は小数第一位まで返します。（ex:4/2 = 2.0)

しかしMacの電卓で実施してみるとわかりますが、この場合には「２」が表示され、小数点は表示されません。

これを実現するためにif calc_result.get()[-2:] == '.0':配下を実装しています。

pythonでは文字列を配列のように扱うことが可能なので、右から2byte取得し、整数かどうかを判断しています。

今回は文字列操作や配列操作を織り混ぜたかったので上記のようにしていますが、float.is_integer()関数などを使ってみてもいいと思います✍️

# 加算処理
def plus_function():
    calc_list_b.append(calc_list_a[-1])
    calc_list_a.append(entry_list_join[-1])
    calc_function()
    operand_list.append('+')
    entry_list.clear()

四則演算は考え方は同じなので、加算処理を使って説明します。
計算時には3つの要素が必要となります。

２の2回目の入力結果は画面に表示されているので、それをcalc_list_aに入れます。（calc_list_a.append(entry_list_join[-1])）

１の1回目の入力結果は、前回四則演算ボタンを押したタイミングでcalc_list_aに入っているので、これをcalc_list_bに移します。

ここでポイント！

tkinterの使い方解説　その３：④tkinterオブジェクトの生成

# Tkインスタンスの生成
root = tk.Tk()

# windowのタイトル設定
root.title("Calculator")

# Tkインスタンスを引数としてフレームインスタンスの生成
mainframe = ttk.Frame(root, padding="3 3 12 12")

# フレームのグリッドを指定
mainframe.grid(column=0, row=0, sticky=("N", "W", "E", "S"))
root.columnconfigure(0, weight=1)
root.rowconfigure(0, weight=1)

# tkinterクラスの宣言（文字列型）
display_list = tk.StringVar()
calc_result = tk.StringVar()


# ラベルとボタンを生成
ttk.Label(mainframe, textvariable=display_list).grid(
    column=2, row=1, sticky=("W", "E"))
ttk.Button(mainframe, text="0", command=lambda: add_number(0)).grid(
    column=1, row=6, sticky="W")
ttk.Button(mainframe, text="1", command=lambda: add_number(1)).grid(
    column=1, row=5, sticky="W")
ttk.Button(mainframe, text="2", command=lambda: add_number(2)).grid(
    column=2, row=5, sticky="W")
ttk.Button(mainframe, text="3", command=lambda: add_number(3)).grid(
    column=3, row=5, sticky="W")
ttk.Button(mainframe, text="4", command=lambda: add_number(4)).grid(
    column=1, row=4, sticky="W")
ttk.Button(mainframe, text="5", command=lambda: add_number(5)).grid(
    column=2, row=4, sticky="W")
ttk.Button(mainframe, text="6", command=lambda: add_number(6)).grid(
    column=3, row=4, sticky="W")
ttk.Button(mainframe, text="7", command=lambda: add_number(7)).grid(
    column=1, row=3, sticky="W")
ttk.Button(mainframe, text="8", command=lambda: add_number(8)).grid(
    column=2, row=3, sticky="W")
ttk.Button(mainframe, text="9", command=lambda: add_number(9)).grid(
    column=3, row=3, sticky="W")
ttk.Button(mainframe, text="+", command=lambda: plus_function()).grid(
    column=4, row=5, sticky="W")
ttk.Button(mainframe, text="-", command=lambda: minus_function()).grid(
    column=4, row=4, sticky="W")
ttk.Button(mainframe, text="×", command=lambda: multiply_function()).grid(
    column=4, row=3, sticky="W")
ttk.Button(mainframe, text="÷", command=lambda: devide_function()).grid(
    column=4, row=2, sticky="W")
ttk.Button(mainframe, text="=", command=lambda: equal_function()).grid(
    column=4, row=6, sticky="W")
ttk.Button(mainframe, text="C", command=lambda: clear_function()).grid(
    column=1, row=2, sticky="W")
ttk.Button(mainframe, text="+/-", command=lambda: sign_change_function()).grid(
    column=2, row=2, sticky="W")

tkinterの部品を配置する部分です。パーツの配置の仕方は、gridを使っています。

これはrow(行）とcolumn(列）を使って、何行何列目に配置するかを指定する方法です。
他にもpackなどの配置方法があるので、気になる方は是非調べてみてくださいね🔥

ここでの１番のひっかかりポイントはボタンの部分だと思います。

tkinterの使い方解説　その４：⑤tkinterオブジェクトの配置

for child in mainframe.winfo_children():
    child.grid_configure(padx=0, pady=0)


root.mainloop()

最後に上で定義したパーツを、forループで取得し、grid_configureで配置したら完成です！

いかがでしたでしょうか？

最初は「うっ」となるようなコードでも、分解してみるとそんなに難しいことはしていないと思ってもらえたら嬉しいです。

何万、何百万STEPの大きなコードでも、こうして小さなコード群が組み合わさって作られているので、分解しながら読み進められるようになれば怖いもの無しです！💪