N.Y.C. Tech Library

ホームページの制作テクニックや日常のハックを綴る

WEB制作

Vue初心者が和暦計算してみた【令和対応】

投稿日:2019年4月1日 更新日:

vueアイキャッチ

新元号が発表されましたね

新元号は「令和」だそうです。
大きな節目を前に気分新たな方も多いのでは?
私もこの節目をスタートダッシュにしたいと思っています。

さて、本題。
最近Vueの勉強をしていて、せっかくなので練習がてらVueで和暦計算してみました。
使いどころが謎ですが、何かのご参考になれば幸いです。

Vueで和暦計算してみた

日付を変更すると下の和暦が変わります。

See the Pen
Reiwa in Vue
by yabonary (@mtbk4919naoki)
on CodePen.

流れとしては以下のような感じです。

  1. まず、v-model=”dateInput” が更新されます。
  2. dataInputの更新に反応してcomputedのwarekiが再計算されます。※
  3. warekiが再計算されたことで{{wareki.name}}{{wareki.year}}が更新されます。

※computedには明治から令和まで対応した辞書が入っていて、dateInputの日付に当てはまる年号を抽出し、和暦の年数を計算しています。辞書には読み仮名や頭文字も入れてあるから、急な仕様変更も安心です!辞書は外部ファイルのjsonにするとなおよろしいかと思います。

これくらいならjQueryでいいのではってなりそうですが、リアクティブってだけで作るのが楽です。onclickだのonchangeだの書かなくていいのです。

ところで、和暦変換APIってないんでしょうか?

ありました。

http://ap.hutime.org/cal/index.html

令和にも対応してました!仕事早い!

これを使った成果を公表する場合は使用した旨の明記が必要なようですので、ご注意ください。

-WEB制作
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

4 × three =

関連記事