Vue.js で 計算電卓アプリを作る
Vue.jsが流行っているので、
ちょこちょこ勉強していたのですが、
簡単なアプリならさくっと出来るなーと思い、
練習がてら電卓アプリを作ってみました。
巷で転がっている電卓アプリはeval()を使いまくっていてとても簡単そうだったのですが
evalはあまり推奨されていないのと、セキュリティ的にも良く無さそうなので、
あえて使いませんでした。
お陰で、jsを書くのが少し大変でしたが勉強にはなりました。。
完成品
仕様
- 基本はiphoneの電卓の仕様と同じ
- 「AC」ボタンは全部クリア、「C」 ボタンは入力中の数字のみクリア
- 「=」連続押しでの、計算の反復は今回は無し（やりたかったけど、結構めんどくさい）
感想
面倒だったのが、値のデータ型で、それをいちいち変換しないといけない所です。
表示上Stringじゃないとうまくいかない所、
例えば
Numberのままだと0.00 が 0になったり1.00が1になったりします。
入力中はStringで、計算するときはNumberで、のように
Number <--> String と行き来するのがやっかいでした。
javascriptは型には寛大だけど、バグの温床になりそうですね。
Typescriptで書いた方がいいのだろうか。。
正直Vue.jsの恩恵はこの規模だとそんなに与れないかもしれないですが
このデータバインディングがめちゃくちゃ便利だと感じました。
しかし、codesandboxは素振りやモックには最高のサービスですね。
