GoogleAppsScript(GAS)電卓を作ってみた

GoogleAppsScript(GAS)電卓を作ってみた
GoogleAppsScript(GAS)電卓を作ってみた
ビジネス

はじめに

どうも、bzbot(ビジボット)です。
今回作成するのは、絶対に使う事はないんだけどそこにボタンがあるから人は押したくなる電卓?!を作ってみようと思います。
最初から宣言しておきますが、コード自体は相当イケてない無理やり書いたコードになってます。
でも、この綺麗に書くことよりまずは泥臭く処理を一つ一つ書いていくってことにも初心者として通るべき道だと思ってますので、ぜひ泥臭くコードを書いてもらえればと思います!(笑)

書いててほんとに気持ち悪いコードすぎて泣きそうでした。。。(笑)

それでは早速始めていきます!

1.絶対に使わない電卓を作成

まず電卓のベースを作成します。
セルB2は計算結果が表示されるよう大きめにします。

その後、『挿入』 > 『図形描画』にて好きな図形を組み込みます。
今回は10個の番号を作るとかなりのイケてないコードが増えちゃうので、一旦3までとさせてください!(笑)

計算結果が表示される窓 - ビジボット
計算結果表示ウィンドウ - bzbot(ビジボット)
計算結果表示ウィンドウ – bzbot(ビジボット)

それぞれ作ったらシート名は「電卓」とします。
次に何もデータが入ってないシート「電卓DB」を用意します。合計2シートですね。

2.数字を押したら動く関数を追加

それではまず簡単なコードから追加していきます。

グローバル変数とローカル変数

今回記述している変数で、グローバル変数とローカル変数の違いを簡単に説明します!ローカル変数は関数の中で宣言した変数であり、その関数内でしか参照できません。しかし、グローバル変数は関数の外で宣言した変数であり、どの関数でも参照することができるメリットがあります。
その為、シート名はまずグローバル変数に入れて各関数から呼び出す形で記述します。

さらに今回ボタンの数だけ最低数の関数を作る必要がある為、関数の呼び出しについても記述しておきます。

作成した関数の呼び出し

このタイミングでは2つの関数を用意します。
– function myFunction()
→電卓に結果を表示する為の関数

– function b1()
→ボタン1が押された時に実行される関数

今回はボタン1が押されたときに1がしっかりと電卓上に表示されることが目標なので、関数b1→myFunctionに値を渡す必要があります。

関数の呼び出し方法は呼び出したい関数名『myFunction();』を記載すれば呼び出せます。さらに、『myFunction(joinDate);』と引数を入れることで、該当の関数に渡したい値を渡すことができます!

引数で値の受け渡しについてLogger.log()関数を入れているので結果をみてみましょう!

実際のコード

以下のように、関数b1で生成されたデータを別関数に引数と一緒に渡した場合、与えたデータがしっかりと渡されていることが確認できます。

ログ結果

3.スクリプトの割り当て

作成したスクリプトをボタン1を押した時の挙動にしたいので、ボタンにスクリプトをセットします。
スクリプト名は関数名と同じ意味なので、作成した『b1』を入力して完了です。

ボタンクリックアクション追加 - ビジボット
スクリプトを割り当て - bzbot(ビジボット)
スクリプトを割り当て – bzbot(ビジボット)

これでボタン1を押すと2…3…と、数字を表示する第一段階を作成できました。
しかし、次は10の桁を表示することができません。
1を押したら1のままです。。その為11と表示したり、12と表示したりする仕掛けが必要です。

4.文字列結合

数値でデータを取り扱う場合には、意図しない計算が先に行われてしまう場合がある為、必要な部分は文字列として扱う必要があります。

さらに、事前に入力した値を保持した形で表示をしないと行けない為、直前で入力した値を別で保持する必要がある。そこで別途用意した『電卓DB』という大層なシートを使っていく。

【やりたいこと】『1』を押した次に『1』を押すと『11』になる

実際のコード

上記を2回実行してみた結果が以下しっかりと11という値になっていることがわかる。

ログ結果

5.演算を追加

今回はシンプルに『+』を押したときの動作とその処理について追加していく。
『+』ボタンを押した際に、変数 joinDate には文字列の+マークがセットされ、myFunction()の引数に指定されて『電卓に表示させる関数』が表示されます。

上記実行した場合、電卓DBシートはプラスを処理する前の数値的データが入っており、電卓の画面上は『+』マークが表示される。
※DBシートをプラスで上書きしてしまうと、そのあと計算する値がなくなってしまうので注意

6.if文追加

ボタン1を押した時の挙動を改めてカスタムする必要が出てきました。先ほどまでは前提として値が入っている、もしくは値が入っていないことが想定されてましたが、今回は『+』マークが入っている前提も考慮する必要があるのでif文を使って処理を分岐させていきます。

if文は『if(ここの式がTRUEだったら処理を実行)』の部分に条件式を記載します。
elseはTRUE以外の全てFALSEに該当する処理が以下です。

実際のコード

上記追加したコードで『1』を押した時の挙動は以下です。

ログ結果

上記追加したコードで『+』を押した時の挙動は以下です。

ログ結果

それぞれ合計した結果が電卓DBシートにセットされたりと、デバックしながらみていくとすごく楽です。

7.最後に

クリアボタンと、2と3のボタンについても増やしてみます!

実際のコード

以上で終了です!

やって気づきましたが、『+』を押して2回目の桁を入力するとき2桁以上の数字を入力することができないので『=』とか追加しないとな。。と少し反省。
まぁ、私だったら絶対電卓として使わないですが、。。。(笑)
プログラムの書き方やあり方については相当イケてないコードですが、ぜひプログラムの勉強としてやってみてはいかがでしょうか?(笑)

最後までお付き合いいただき、ありがとうございました!