家族が生まれてから何日経過したかを計算する Web アプリを作った

自分は 30k という Chrome 拡張機能を入れている。コレは自分の生年月日を入れておくと、新規タブに「生まれてからの経過日数」を表示してくれるというモノだ。

人生80年とよく云われるが、コレを日数に直すと、人間の一生は大体3万日程度ということになる (3万日は、正確には82年1ヶ月)。ということでこの 30k は、「3万日目をゴールとした時の、自分の人生の残り日数」も表示してくれる。

この数字は結構危機感を覚えるモノで、「自分は何も出来ないまま1万日以上生きてしまった…」とか、「つい先日10,500日目だと思ったのにもう10,700日目！？」とか、色んな気付きを得られる。

30k は一つの生年月日しか保持できないので、自分以外の家族の生年月日および「経過日数」をリストアップできるようなアプリを作ってみた。その名も Birthdates。

目次

デモ・リポジトリ

アプリのデモは以下。

ソースコードは以下の GitHub リポジトリに置いてある。

カスタマイズするには、index.html を開き、HTML 部分に書いたコメントに沿って、.person 要素を人数分記述すれば良いだけ。

解説・特徴

氏名と生年月日を扱うので、ローカルで、インターネット環境がなくとも動作する方が良いかなと思い、シングルファイルで完結するよう実装した。HTML ファイル内に CSS を書き、JavaScript も外部パッケージを使ったり Ajax 通信をしたりすることなく、愚直に実装した。

予め記入しておくのは、表示用の名前と、YYYY-MM-DD 形式で表記した生年月日のみで良い。コレを好きな人数分だけ HTML ファイル内に記述しておけば良い。

その HTML ファイルを開くと、現在日付とともに経過日数を比較し、「A さんは生後1万日、3万日まで残り2万日だ」といった情報が確認できるようにしている。

また、生後10日・100日・1,000日・10,000日経った日付も分かるようにした。人間の寿命では10万日を迎えられないので、全ての桁上りを計算して表示するようにした。結果表示時はゴリゴリに DOM 操作している。

CSS フレームワーク等は入れていない。.container 要素に Flexbox を適用し、人ごとの情報が横並びになるようにした。改行を入れたい場合は .container 要素を複数用意すれば良いし、お好みで CSS Grid に実装し直してもらっても良いかと思う。

以上

moment.js などを使わず日付操作も自前でやってみた。欲しかったモノが作れたのでよきよき。