ゼロからはじめてみる日本語プログラミング「なでしこ」(81) 自作電卓のススメ - 自分だけのボタンを追加しよう

世の中には星の数ほど電卓がありますが、自作電卓を作る楽しみに勝ることはありません。自分好みのボタン配置にしたり、自分がよく使う計算をボタン一発で実行できたりするからです。それでは、なでしこを使って自作電卓制作に挑戦してみましょう。

オリジナル電卓を作ってみよう

電卓制作は難しくない

本物の実機の電卓を作るのはなかなか難しいものです。しかし、なでしこなどを利用してブラウザ上で動く電卓制作はそれほど難しくありません。電卓用のボタンを配置して、ボタンを押した時のイベントを処理するだけだからです。

それでは、早速電卓制作に必要となるポイントをいくつか見ていきましょう。

まずは基本的なボタンを作ってみよう

ボタンをたくさん作って、それをクリックした時に何か処理を行うプログラムは次のようになります。「なでしこ3簡易エディタ」を開いて、以下のプロブラムを貼り付けて実行ボタンを押してみましょう。

# ---
ボタン1＝「1」のボタン作成。
ボタン1をクリックした時には
　　「1を押しました」と表示。
ここまで。
# ---
ボタン2＝「2」のボタン作成。
ボタン2をクリックした時には
　　「2を押しました」と表示。
ここまで。
# ---
ボタン3＝「3」のボタン作成。
ボタン3をクリックした時には
　　「3を押しました」と表示。
ここまで。

すると、下記のように、[1][2][3]と3つのボタンが表示されます。ボタンを押すと「＊を押しました」と表示されます。

「ボタン作成」命令を使ったプログラム

このように「ボタン作成」命令でボタンを作成したら、「▲をクリックした時には…ここまで」と書くことで、クリックした時の処理を指定できます。

ボタンを押したらエディタに内容を追加する仕組みを作ろう

次に、数字ボタンを押したら、電卓のディスプレイに、数字が表示される仕組みを作ってみましょう。以下は、[1]と[2]のボタンだけですが、ボタンを押したら、エディタに数字を追加するというプログラムです。

# --- UIを作成 ---
表示エディタ＝「」のエディタ作成。
ボタン1=「1」のボタン作成。
ボタン1をクリックした時には
　　「1」を表示追加。
ここまで。
ボタン2＝「2」のボタン作成。
ボタン2をクリックした時には
　　「2」を表示追加。
ここまで。
# --- 共通処理 --- (*1)
●(F追加分を)表示追加とは
　　F既存=表示エディタのテキスト取得
　　F既存&F追加分を表示エディタにテキスト設定。
ここまで。

実行してみましょう。エディタと[1][2]のボタンが表示されます。そこで、数字ボタンを押すと、エディタの内容に数字が追記されます。

ボタンを押すとエディタに数字を追加するプログラム

ポイントは、(＊1)の部分、ボタンを押した時に実行される共通処理を行う関数「表示追加」にあります。「テキスト取得」命令でエディタに書き込まれている値を読み取り、「テキスト設定」命令で値を設定します。

あとは、「×」や「＋」の計算を行うボタンを作って、それらのボタンが押された時には計算処理を行うようにします。

大量のボタンを一括で作成しよう

なお、電卓にはたくさんのボタンがあり、それらのボタンを一つ一つ個別に作るのはとても大変です。そこで、「繰り返す」文を記述して一気に作成しましょう。

# --- ボタンを一気に作成する
ボタン一覧＝[]
Nを0から9まで繰り返す
　　ボタン一覧[N] = Nのボタン作成。
　　ボタン一覧[N]をクリックした時には
　　　　N=対象のテキスト取得。
　　　　「{N}が押されました」と表示。
　　ここまで。
ここまで。

上記のプログラムを実行すると、[0]から[9]までのボタンを作成します。大量のボタンを作成され、ボタンを押した時に「＊が押されました」と表示します。

たくさんのボタンを繰り返し作成したところ

ポイントは、ボタンをクリックした時のイベントが発生すると、どのボタンが押されたのかが特殊変数の「対象」に代入されるという点です。この「対象」を利用してボタンのラベルを取得できます。

電卓を作ってみよう

以上で、電卓を作成するのに必要な要素が揃いました。電卓を完成させましょう。

以下のプログラムが電卓のプログラムです。電卓の各キーを処理するため、ちょっと長くなりましたが66行で作ることができました。なお、なでしこのプログラムを保存できる「なでしこ3貯蔵庫」(こちら)に保存しました。貯蔵庫ですぐに動作を確認できます。

# === シンプル電卓 ===
# ボタンのキーの並びを定義 --- (*1)
電卓キー定義 = [
  "7", "8", "9", "÷",
  "4", "5", "6", "×",
  "1", "2", "3", "−",
  "0", "C", "＝", "＋"]
Fメモリ＝「」# 電卓の計算用に使う
F演算子＝「」
F表示用＝「」
# ボタンの大きさを予め定義 --- (*2)
DOM親要素に『<style> .nako3_div button { width: 5em; }
.nako3_div input[type=text] { width: 20em; } </style>』をHTML設定。
表示用エディタ＝「」のエディタ作成。改行作成。
# --- ボタンを一気に作成する --- (*3)
ボタン一覧＝[]
電卓キー定義を反復
　　I=対象キー
　　ボタン一覧[I] = 対象のボタン作成。
　　ボタン一覧[I]をクリックした時には
　　　　S=対象のテキスト取得。
　　　　Sのキー処理
　　ここまで。
　　もし、I%4=3ならば、改行作成。
ここまで。
# キーを押した時の処理 --- (*4)
●(Sの)キー処理とは
　　もしSが「C」ならば # リセットボタンの時
　　　　Fメモリ＝「」。F表示用＝「」
　　　　「」を表示用エディタにテキスト設定。
　　　　戻る。
　　ここまで。
　　もし(「＋−×÷」でSが何文字目)>0ならば # 演算ボタンの時
　　　　もし、Fメモリ＝「」ならば
　　　　　　Fメモリ＝F表示用
　　　　違えば
　　　　　　Fメモリ＝F表示用で計算処理
　　　　　　Fメモリを表示用エディタにテキスト設定。
　　　　ここまで。
　　　　F表示用＝「」
　　　　F演算子＝S
　　　　戻る。
　　ここまで。
　　もしS=「＝」ならば # 「＝」ボタンの時
　　　　Fメモリ＝F表示用で計算処理
　　　　戻る。
　　ここまで。
　　# 数字ボタンを押した時
　　F表示用＝F表示用&S
　　F表示用を表示用エディタにテキスト設定。
ここまで。
# 計算処理 --- (*5)
●（Vで）計算処理とは
　　答え＝0
　　F演算子で条件分岐
　　　「＋」ならば、答え＝Fメモリ＋V。。。
　　　「−」ならば、答え＝Fメモリ−V。。。
　　　「×」ならば、答え＝Fメモリ×V。。。
　　　「÷」ならば、答え＝Fメモリ÷V。。。
　　ここまで。
　　もし、答えが0ならば、答え＝「」
　　表示用エディタに答えをテキスト設定。
　　# 「@{答え}={Fメモリ}{F演算子}{V}」を表示
　　それは答え
ここまで。

プログラムを実行すると、計算機が表示されます。ボタンを押して一般的な電卓のように計算できます。