お誕生日アプリをつくった - コミュ障だから明日が僕らをよんだって返事もろくにしなかった

なぜ今お誕生日アプリなのか？

それは今日が僕のお誕生日だからで～す。そんなわけで皆さん祝ってください。

＼おめでと～／

みんな、ありがとう。これで僕もXXXX歳になりました～。

というわけで、誕生日を祝うロウソクが増えたというおめでたい話をしたところ悪いのですが、今日は僕の誕生日ではありません。そう、嘘だったのだ。どうしてこんな嘘をついてしまったのかと言えば、僕がよく利用するドットインストールにMoment.jsで誕生日アプリをつくろうってのがあったからです。

Moment.jsをさわろう

てなわけでドットインストールにMoment.js講座があったのでやってみました。Moment.js は日付いじるのに特化したJSライブラリです。それじゃあ、まずは Moment.js のどこがいいのかってところでDate のおさらいです。

※ 入力ボックスに日付文字列「YYYY-MM-dd」や「YYYY/MM/dd」を入れると、ボタンの下に「YYYY年MM月dd日」って表示されます。

こんな感じで Date だけだとバリデーション*1が弱いとかがあります。例えば、上の場合は何も入力しないでボタンを押すと変な値がでます。

ソースコード

<div id="dateTest">
  <input type="text">
  <button>Check</button>
  <p></p>
</div>
<script>
(() => {
  'use strict';
  const input = document.querySelector('div#dateTest input');
  const button = document.querySelector('div#dateTest button');
  const p = document.querySelector('div#dateTest p');

  button.addEventListener('click',() => {
    const d = new Date(input.value);
    p.textContent = `${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日`;
  });
})();
</script>

Moment.jsと関係ない話なんですけど、久しぶりに最新のドットインストールの JavaScript の書き方見ていたら、なんかめっちゃモダンな書き方になっていた。アロー関数、即時関数、const宣言（再代入不可）、テンプレートリテラルなどなど……。そして、ついでなんでこのモダンな書き方と関係ないことを言うと、「querySelector」ってのをさっき知りました。jQueryとか使わなくとも、DOMいじれたのか……。

んで、これをMoment.jsで書き直すとこんな感じになるようです。日付の操作に便利な機能がたくさんついてます。

他にもわちゃわちゃとメモ書きしてしまって見づらくなってるけど大体上に同じことやってます。JSFiddle、埋め込むと結果画面がすごく見づらくなりますね……。まあ、動作確認したい場合は手間ですが直接ページをみて確認してください。

そして、ちゃんとした日時操作が見たい場合は公式をみよう！
公式
Moment.js | Home