javaScriptでiOS風の電卓を作りました

javaScriptの勉強中です。何か作りながらのほうが楽しいので、電卓を作ってみました。 iOSやmacに標準装備されている電卓風にしてみました。

ただ、この電卓、いくつか動かない機能が……(^^;)　+/-や小数点はちょっと面倒だったので未実装です。

電卓のcodepenはこちら！

上記はピュアなjavaScriptを勉強したかったためjQueryなどのライブラリは使っていません。でもjQueryの勉強もしたいため、これをForkしてjQueryで書き直しました。

jQueryで書き直したcodepenはこちら！

せっかくjsとjQueryの両方で作ったので、それぞれの差を検証しました。

• jsの文字数
• 可読性

javaScriptの文字数

今回は演算やら代入やらが多いコードなのであまり差は出ませんでしたが、jQueryを使うことによりコード量を約15%削減できました。

可読性

特に見やすくなったところを抜粋します。まず、javaScriptのコード。

let numbersElem = document.getElementsByClassName('command is-number');

for (let i = 0; i < numbersElem.length; i++) {
  numbersElem.item(i).onclick = displayNumber;
}

続いてjQueryのコード。

let numbersElem = document.getElementsByClassName('command is-number');

for (let i = 0; i < numbersElem.length; i++) {
  numbersElem.item(i).onclick = displayNumber;
}

forループを書く必要がなくなりとてもシンプルになりました。クリック時のイベントを定義したいだけなので、ループなどの制御構文がなくたって良いですよね。
ただ、java出身の私としては単一エレメントと複数エレメントがあまり区別されていない仕様に若干違和感を感じるのですが……。

時代は終わったなどと言われるjQueryですが、やっぱり便利だなーと実感しました。