開発技術フロントサイドの開発はjQueryを使っていたため、新しくJavaScriptのフレームワークを使ってみたいと思い、シンプルにやりたいことができそうなVue.jsを選択しました。やるなら何か成果物を作りたいと思い、Chrome拡張機能を作ることを目標に勉強を進めていきました。いうことで冬休みの時間を活用して、Vue.jsで電卓を作ってみました。ウェブストア電卓として使うことができます。した計算や確認がすぐに実行できて便利です。chrome.google.com難しく簡単すぎない電卓を作ってみることにしました。仕事でもたまに使うので個人的に有用なツールになると思いました。ポップアップで電卓機能を使えるため、すぐに計算をしたい時にとても便利です。実際に作った後、活用しています。Vue.jsの環境は以下の記事を参考に構築しました。@click="calculationResult();">=</button></td></tr></table>電卓のボタン部分です。数字や記号押下時にそれぞれのメソッドが発動します。必要最低限の四則演算機能を実装しました。電卓の計算表示部分の実装computedは紐づいた値が変更されると、その値に依存している全てのバインディングが更新されます。今回の電卓の場合は、ボタンを押下する度に入力値や四則演算記号が変わるため、以下のような実装となります。選択した数字と計算結果の数字は、計算中かどうか(inputNumberFlgフラグ)で判定しています。計算部分はswitch文で判定し、実行しています。currenNumber;break;}}C(Clear)とCA(ClearAll)の削除処理の実装C(Clear)ボタン押下時は選択した数字列から1つ前の数字を削除します。CA(ClearAll)ボタン押下時は全ての数字・記号を初期化します。true;}電卓のデザイン電卓のボタンはキーボードのような雰囲気にしました。クリックするとキーが押されたような動きになっています。translateY(2px);}Vue.jsで実装が完了したらビルドする実装が完了したら以下のコマンドで、プロジェクトをビルドします。buildビルドが成功すると以下のように表示されます。work.ビルド後、distディレクトリが作成されます。あとはChrome拡張用にマニフェストファイルなどを追加し、zip化したら完成。今回の場合は、以下のようなディレクトリ構成になりました。12345678910111213images-16.png-19.png-38.png-48.png-128.pngstatic-css-ビルドされたファイル-js-ビルドされたファイルindex.htmlmanifest.jsonimagesディレクトリにはChrome拡張機能のアイコンの画像がサイズごとに分けて格納されています。マニフェストファイルの説明など、Chrome拡張機能登録に必要なことは以下の記事で詳しく説明しています。【Chrome拡張機能】シンプルなToDoリスト・メモ帳を開発してみた個人的に開発して使っていたToDoリストをたくさんの方に使ってもらうにはどうした...mintaku-blog.net以上、Vue.jsでChrome拡張開発をした流れを紹介しました。Calculatorを使ってみてくださいね。ウェブストア電卓として使うことができます。した計算や確認がすぐに実行できて便利です。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。