新元号が発表されましたね
新元号は「令和」だそうです。
大きな節目を前に気分新たな方も多いのでは？
私もこの節目をスタートダッシュにしたいと思っています。
さて、本題。
最近Vueの勉強をしていて、せっかくなので練習がてらVueで和暦計算してみました。
使いどころが謎ですが、何かのご参考になれば幸いです。
Vueで和暦計算してみた
日付を変更すると下の和暦が変わります。
See the Pen
Reiwa in Vue by yabonary (@mtbk4919naoki)
on CodePen.
流れとしては以下のような感じです。
- まず、v-model=”dateInput” が更新されます。
- dataInputの更新に反応してcomputedのwarekiが再計算されます。※
- warekiが再計算されたことで{{wareki.name}}{{wareki.year}}が更新されます。
※computedには明治から令和まで対応した辞書が入っていて、dateInputの日付に当てはまる年号を抽出し、和暦の年数を計算しています。辞書には読み仮名や頭文字も入れてあるから、急な仕様変更も安心です！辞書は外部ファイルのjsonにするとなおよろしいかと思います。
これくらいならjQueryでいいのではってなりそうですが、リアクティブってだけで作るのが楽です。onclickだのonchangeだの書かなくていいのです。
ところで、和暦変換APIってないんでしょうか？
ありました。
http://ap.hutime.org/cal/index.html
令和にも対応してました！仕事早い！
これを使った成果を公表する場合は使用した旨の明記が必要なようですので、ご注意ください。
