Vue.jsで令和対応、和暦変換コンバーターを作ってみた

  • 投稿日
  • 更新日
  • 著者 ともすた
  • カテゴリー ブログ

Vue.jsは、JavaScriptプログラムを簡単に作成できるライブラリーです。ここでは、Vue.jsを利用して西暦を和暦に変換できるコンバーターを作成してみました。

画面の上部に、西暦を入力するテキストエリアがあります。ここに年号を入力すると、リアルタイムで各和暦に変更してくれます。早速作っていきましょう。

HTMLを作ろう

まずは、HTMLを作っていきましょう。ここでは、Bootstrapを使って見た目を整えていきました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>和暦・西暦コンバーター</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body class="bg-light">
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <p><input type="number" name="year" id="year" class="mr-2">年は…</p>

                <table class="table">
                    <tr>
                        <th style="width: 5em">明治</th>
                        <td>xx年</td>
                    </tr>
                    <tr>
                        <th>大正</th>
                        <td>xx年</td>
                    </tr>
                    <tr>
                        <th>昭和</th>
                        <td>xx年</td>
                    </tr>
                    <tr>
                        <th>平成</th>
                        <td>xx年</td>
                    </tr>
                    <tr>
                        <th>令和</th>
                        <td>xx年</td>
                    </tr>                    
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Vue.jsを組みこもう

Vue.jsは公式サイトから、CDNのアドレスをコピーして、body要素の最後に貼り付けます。また、Vue.jsの基本的なテンプレートを書き込みましょう。

<script>
  var app = new Vue({
    el: "#app",
    data: {
    }
  })
</script>

HTMLの最初の「container」というdiv要素に、id属性で「app」を追加して、Vue.jsで制御できるようにします。

 <div id="app" class="container mt-5">

v-modelで変数化

そしたら、西暦を入力するテキストフィールドに「v-model」属性を追加して、Vue.js内で変数として扱えるようにします。

<p><input type="number" v-model="year" name="year" id="year" class="mr-2">年は…</p>

Vue.jsにも次のように書き込んで、変数を定義しましょう。

<script>
  var app = new Vue({
    el: "#app",
    data: {
      year: 2019
    }
  })
</script>

変数を計算する

Vue.jsが非常に便利なのは、表示するのと同時に簡単な計算などは行えてしまうことです。例えば、西暦が2019年の場合、令和は1年になるため、西暦から2018を引けば求めることができます。これを、直接HTML内に書き込めます。

<tr>
  <th>令和</th>
  <td>{{ year - 2018 }}年</td>
</tr>

あとは、各和暦で何年引き算をすれば良いかを調べればプログラムができあがります。次のようになります。

<tr>
  <th style="width: 5em">明治</th>
  <td>{{ year - 1867 }}年</td>
</tr>
<tr>
  <th>大正</th>
  <td>{{ year - 1911 }}年</td>
</tr>
<tr>
  <th>昭和</th>
  <td>{{ year - 1925 }}年</td>
</tr>
<tr>
  <th>平成</th>
  <td>{{ year - 1988 }}年</td>
</tr>
<tr>
  <th>令和</th>
  <td>{{ year - 2018 }}年</td>
</tr>

初期値を今年にする

これでプログラム自体は完成ですが、せっかくなので初期値を「今年」の年に変えておきましょう。来年になったら、自動で来年からスタートします。これには、Dateオブジェクトの「getFullYear」メソッドで得られる値を初期値にすれば良いでしょう。

<script>
    var date = new Date();
    var this_year = date.getFullYear();
    var app = new Vue({
        el: "#app",
        data: {
            year: this_year
        }
    })
</script>

Vue.jsはとにかく直感的で、わかりやすいのが特徴でプログラミングが楽しくなります。これからも、Vue.jsを使ったプログラムをご紹介していきましょう。

JavaScript