注意
vue.jsを使ってみた感想記事なので技術的な部分にはあまり触れません。
vue.jsを学ぶ一環で何かSPAを作りたいな～と思い立ち、自課題として「52週貯金チャレンジ」の日本語版を作ってみました。vue.jsで作る前にネイティブJSでも作成したので、その違いを比較してみました。
そんな訳で今回作成したSPAがこちら。
作成の経緯と「52週貯金チャレンジ」とは
以下ライフハッカーより引用。
やり方はとても簡単。毎週、貯金する額を少しずつ増やしていき、1年間の貯金額の成長を見守るだけです。
簡単に言うと少額の積立貯金です。
調べた限りスタートからゴールまでの金額を算出できるサイトが外貨換算のみ（見た感じドルがほとんど）で円換算のサイトが無く、それなら作ろう！と思った次第です。
実装要件
今回のSPAに実装した機能はこんな感じ。
メイン要件
- 週毎の金額の算出
- 貯金する週の日付の出力
- 最初の週から最終週までの金額の合計
- 金額入力欄のバリデート
（全角・数字以外入力、未入力からのフォーカスアウトでエラー表示） - 正しく入力されたらエラー非表示
- 三桁以上の金額はカンマ区切り
そのほか
- 52週貯金を説明する為のモーダル実装
- スタイルはtailwindを使用
ネイティブJSで作ってみる
vue.jsを使用するのが初めてだったのでまず素のJavaScriptで作って実装のイメージを固めました。
計算と出力の役割を持つ要素をそれぞれ指定して、それらに実装要件の処理を書いていく～というまぁ通常の実装ですね。
vue.jsで作成する際気を付けた事
vue.jsはJavaScriptライブラリです。
ネイティブJSで書いてる時と違い、当然ライブラリ独自の作法というものがあって、これに則って書かないとこれまた当然意味が無い。
なのでネイティブJSで書いた処理をvueが持つ機能と照らし合わせてどう書き換えるかを意識しながら作成に取り組みました。
vue.jsとネイティブJSの違い
素のJavaScriptである程度組んだ後に改めてvue.jsで組んでみて最初に思ったのは「めっちゃ便利じゃん！」という事。
まずネイティブJSだと①計算と出力の役割を持つ要素の指定、②イベントを指定した上で処理を書く。（DOM取得とイベントリスナー）
しかしvue.js（React.jsなども）だとこの二つの工程が省略できる。
実行したい処理を書いて、vueの作法に則て書いていけばアラ不思議！でした。
jQueryが手間の簡易化ならvueやReactはそれすらも無くせられるといった感じです。
ただ逆に言うと、、、というか当然ですが①②の工程を省略するためにはvueの公式ドキュメントやリファレンスを読み解いていかないとせっかくの便利な機能を活かした制作ができない。
前提知識（JavaScriptに対する理解）と、それ以上にドキュメントを読み進める力（ある意味勇気）が無いと難しいなあといった感じです。
終わりに
技術的なところを大分端折ってしまいましたが、通常のコーディングとライブラリ（フレームワーク）を使用した場合とでどう違うか、またメリットデメリットについて参考になれば幸いです。
最後にもう一度、今回作成したSPAを紹介↓
2024年4月4日追記
金額を入力する欄に数字以外が入力、計算出来てしまうバグを修正いたしました。
他、スマホでアクセス時にキーボードが数字入力になるようにも調整。
@mogamoga1337 様ご連絡ありがとうございました 