フロントサイドの開発はjQueryを使っていたため、新しくJavaScriptのフレームワークを使ってみたいと思い、シンプルにやりたいことができそうなVue.jsを選択しました。
せっかくやるなら何か成果物を作りたいと思い、Chrome拡張機能を作ることを目標に勉強を進めていきました。ということで冬休みの時間を活用して、Vue.jsで電卓を作ってみました。
目次
作ったもの
シンプル電卓機 Simple Calculator
難しく簡単すぎない電卓を作ってみることにしました。仕事でもたまに使うので個人的に有用なツールになると思いました。
ポップアップで電卓機能を使えるため、すぐに計算をしたい時にとても便利です。実際に作った後、活用しています。
Vue.jsの環境は以下の記事を参考に構築しました。
Vue.js を vue-cli を使ってシンプルにはじめてみる #JavaScript - Qiita
電卓のボタン部分の実装
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <table align="center"> <tr> <td><button @click="clear()">C</button></td> <td><button @click="clearAll()">CA</button></td> <td><button @click="chooseArithmetic('%');">%</button></td> <td><button @click="chooseArithmetic('×');">×</button></td> </tr> <tr> <td><button @click="chooseNumber('7');">7</button></td> <td><button @click="chooseNumber('8');">8</button></td> <td><button @click="chooseNumber('9');">9</button></td> <td><button @click="chooseArithmetic('÷');">÷</button></td> </tr> <tr> <td><button @click="chooseNumber('4');">4</button></td> <td><button @click="chooseNumber('5');">5</button></td> <td><button @click="chooseNumber('6');">6</button></td> <td><button @click="chooseArithmetic('-');">-</button></td> </tr> <tr> <td><button @click="chooseNumber('1');">1</button></td> <td><button @click="chooseNumber('2');">2</button></td> <td><button @click="chooseNumber('3');">3</button></td> <td><button @click="chooseArithmetic('+');">+</button></td> </tr> <tr> <td><button @click="chooseNumber('0');">0</button></td> <td><button @click="chooseNumber('.');">.</button></td> <td><button @click="calculationResult();">=</button></td> </tr> </table> |
電卓のボタン部分です。数字や記号押下時にそれぞれのメソッドが発動します。必要最低限の四則演算機能を実装しました。
電卓の実装
電卓の計算表示部分の実装
computedは紐づいた値が変更されると、その値に依存している全てのバインディングが更新されます。
今回の電卓の場合は、ボタンを押下する度に入力値や四則演算記号が変わるため、以下のような実装となります。
選択した数字と計算結果の数字は、計算中かどうか(inputNumberFlgフラグ)で判定しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | computed: { showArithmetic() { return this.selectedArithmetic; }, showNumber() { let showNumber; if (this.inputNumberFlg) { var selectNumber = String(this.selectedNumber); showNumber = selectNumber.replace(/^0{1,}([^.])/, "$1"); } else { showNumber = this.chooseNumberArray.reduce((prevNumber, currenNumber, index, array) => { return this.calculateNumber(prevNumber, currenNumber, index - 1); }); } return Number(showNumber).toLocaleString(undefined, {maximumFractionDigits: 20}); } } |
計算処理の実装
計算部分はswitch文で判定し、実行しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | calculateNumber(prevNumber, currenNumber, index) { switch (this.chooseArithmeticArray[index]) { case "+": return prevNumber + currenNumber; break; case "-": return prevNumber - currenNumber; break; case "÷": return prevNumber / currenNumber; break; case "×": return prevNumber * currenNumber; break; case "%": return prevNumber % currenNumber; break; } } |
C(Clear)とCA(ClearAll)の削除処理の実装
C(Clear)ボタン押下時は選択した数字列から1つ前の数字を削除します。CA(ClearAll)ボタン押下時は全ての数字・記号を初期化します。
1 2 3 4 5 6 7 8 9 10 11 12 13 | // Clear押下時 clear() { if (this.selectedNumber === "0") return; this.selectedNumber = this.selectedNumber.slice(0, -1); }, // ClearAll押下時 clearAll() { this.chooseNumberArray = []; this.chooseArithmeticArray = []; this.selectedNumber = "0"; this.selectedArithmetic = ""; this.inputNumberFlg = true; } |
電卓のデザイン
電卓のボタンはキーボードのような雰囲気にしました。クリックするとキーが押されたような動きになっています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | button { height: 40px; min-width: 60px; padding: 0 10px; margin: 5px 5px; background: #EFF0F2; border-radius: 4px; border-top: 1px solid #F5F5F5; box-shadow: 0 0 25px #E8E8E8 inset, 0 1px 0 #C3C3C3, 0 2px 0 #C9C9C9, 0 2px 3px #333333; color: #AAAAAA; text-shadow: 0 1px 0 #F5F5F5; font: bold 14px arial; text-align: center; line-height: 41px; display: inline-block; } button:active { box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1); transform: translateY(2px); } |
Vue.jsで実装が完了したらビルドする
実装が完了したら以下のコマンドで、プロジェクトをビルドします。
1 | npm run build |
ビルドが成功すると以下のように表示されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | Hash: d37a099a70e29c8f2173 Version: webpack 3.12.0 Time: 16257ms Asset Size Chunks Chunk Names static/js/vendor.42fc6c515ccdfe89bd76.js 113 kB 0 [emitted] vendor static/js/app.293cb31b95d7a655e6e8.js 4.68 kB 1 [emitted] app static/js/manifest.2ae2e69a05c33dfc65f8.js 857 bytes 2 [emitted] manifest static/css/app.f9db14073482cd26a153303c43800d43.css 1.14 kB 1 [emitted] app static/css/app.f9db14073482cd26a153303c43800d43.css.map 2.45 kB [emitted] static/js/vendor.42fc6c515ccdfe89bd76.js.map 560 kB 0 [emitted] vendor static/js/app.293cb31b95d7a655e6e8.js.map 20.4 kB 1 [emitted] app static/js/manifest.2ae2e69a05c33dfc65f8.js.map 4.97 kB 2 [emitted] manifest index.html 527 bytes [emitted] Build complete. Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work. |
ビルド後、distディレクトリが作成されます。
あとはChrome拡張用にマニフェストファイルなどを追加し、zip化したら完成。今回の場合は、以下のようなディレクトリ構成になりました。
1 2 3 4 5 6 7 8 9 10 11 12 13 | images -16.png -19.png -38.png -48.png -128.png static -css -ビルドされたファイル -js -ビルドされたファイル index.html manifest.json |
imagesディレクトリにはChrome拡張機能のアイコンの画像がサイズごとに分けて格納されています。
マニフェストファイルの説明など、Chrome拡張機能登録に必要なことは以下の記事で詳しく説明しています。
以上、Vue.jsでChrome拡張開発をした流れを紹介しました。
よろしければ開発したシンプル電卓機 Simple Calculatorを使ってみてくださいね。