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

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

eighteen − 11 =

関連記事

【CSS設計】今さら聞けないBEMの基本【初心者・入門】

今回は今さら聞けないBEMの基本ということで、CSS設計にまつわるエントリです。 「この要素にはなんてクラス名をつけたらいいんだ・・・」という悩みはWebコーダーが必ずぶつかる課題だと思います。 その …

【lazyload】lazysizes.jsの使い方 – 基本編

javascript 前回は画像の遅延読み込み(lazyload)の概要をご紹介しました。 今回は画像の遅延読み込みを実現するlazysizes.jsの基本的な使い方をご紹介します。 目次 準備npm …

ストロークフォント風アニメーションを作ろう

前回はsvgラインアニメーションをご紹介しました。 今回はsvgアニメーションを使ったストロークフォント風アニメーションです。 See the Pen lineAnimation by vivus-i …

svgラインアニメーションを使おう

さて、皆さんsvg使ってますか? 少しとっつきにくいsvgですが、使えると表現の幅が広がります。 今回は、簡単に使えるsvgラインアニメーションをご紹介します。 svgの詳しい仕様についてはW3Cのド …

cssBattle

CSS Battleをやってみた!

目次 CSS Battleとはどこが難しいの?やってみた感想攻略のコツは?【Point 1】 不要なスペースやコメントアウトは削除する。【Point 2】 ショートハンドを活用する。【Point 3】 …