生年月日から入学・卒業年を計算する「Calc Resume Years」を作った
自分は小学校をいつ卒業したんだっけ？自分の子供は、いつ大学を卒業するんだ？
自分は1月の早生まれなので、こうした入学年・卒業年の計算が他人様とちょっと違って、毎回混乱してしまう。
そこで、そうした入学年・卒業年を生年月日から計算して表を出力する「Calc Resume Years」というシングル HTML の Web アプリを作ってみた。
デモサイトは以下。
GitHub リポジトリは以下。
元々は以下のサイトを利用していて、機能的には十分だったのだけど、西暦・和暦の扱いを勉強したく、自分でも作ってみることにした。
コードは全然見ておらず、全て独力で実装した。
今回調べていて改めて知ったのだが、「4月1日生まれ」は「一日前の3月31日生まれ」と同じ入学年であり、「翌日の4月2日生まれ」より1年先に入学する、という区切りになっているらしい。
法的に年齢を重ねるのが「誕生日の前日の正午」だったのは知っていたけど (うるう年生まれのための考慮)、入学年が4月2日からの判断だったのは忘れていた。
UI 的には、生年月日を西暦でも和暦でも入力できるようにして、リアルタイムにバリデーションを実行、エラーがなければ計算して表を出力する、という動きにした。
バリデーションはゴリゴリ実装した。未入力・数値のみ許容・桁数上限・存在しない日付などをチェックした。
CSS に関しても、外部ライブラリは使わずスクラッチ。button・input[type="text"]・select の見た目・高さを揃えるために色々苦心した。PC の Chromium 系ブラウザと iOS Safari で表示確認したが、それ以外のブラウザで表示崩れがあったらお知らせくだしあ。直します。
入力可能な生年月日の範囲は、横着したくて開発工数を抑えるため、昭和の開始から令和99年末 (2117年) とした。大正生まれって2021年からしたらもう94歳以上だからこんなウェブアプリ使わんやろー、という思い、令和99年なんて俺が126歳になってる頃じゃねえかそんな死後の世界知らんわー、という思い。大正の考慮を省き、「和暦が3桁になる可能性」を省いておくと、バリデーションも楽になるので。ｗ
バリデーションや画面描画、イベント設定などは const funcName = () => {}; と、関数式で記述した。一方、以下で紹介する「西暦・和暦変換」や「年表作成」などのビジネスロジックは function funcName() {} と、関数宣言で記述してみた。関数の定義の仕方で、アプリ固有の処理 (ビューに近い内容) なのか、もう少し汎用的なロジックなのか、を見た目で区別できるようにしてみた次第。別にそれ以上の意味はないけど、シングル HTML 内に JS をゴリゴリ書いていくとどうしても JS が肥大化するので、こういった区切り方は責務の分割、保守性のためにも大事かな。
西暦から和暦に変換するには、現在の JavaScript には Intl.DateTimeFormat() という便利な API があるので、コレを使った。
const date = new Date(1992, 8 - 1, 25); // 生年月日を西暦で指定した Date オブジェクトを作る
const parts = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', { era:'long' }).formatToParts(date);
const japaneseEraName = parts.find(part => part.type === 'era' ).value; // 元号 ('平成' など) が取れる
const rawJapaneseYear = parts.find(part => part.type === 'year').value; // 年数が取れる。1年は '元' で返される
こんな感じで使える。「元年」だけ数字じゃないので注意。
一方、和暦から西暦に変換する際は、JavaScript の組み込み API だけでは上手く変換できそうになかったので、元号の定義を持ち、そこから計算することにした。
- 昭和 : 1926-12-25 ～ 1989-01-07
- 平成 : 1989-01-08 ～ 2019-04-30
- 令和 : 2019-05-01 ～ 2117-12-31 (終了日は令和99年末を仮で指定)
こんな感じの定義を JS 内にしておいて、開始年から計算して西暦の年数を返す関数を作った。ここらへん、なんかダサいんだが、他に方法なさそうだった。
参考にしたサイトにはない機能として、「入力した生年月日を URL パラメータに保持する」仕組みを作った。僕がシングル HTML ファイルの Web アプリを作る時によくやりがちなヤツである。
どういうことかというと、指定した生年月日で年表を初期表示できるようにしてあるワケである。
デモサイトを開いてもらい、任意の生年月日を入力すると、その時点で年表が表示されるが、その状態で「計算」ボタンを押す。
すると、URL に以下のような各種パラメータが付くので、コレをブックマークしてやろう。
- URL パラメータの例
次回、この URL を直接開けば、最初からその生年月日で年表が開かれる。
「計算」ボタンを押して URL を生成し、自分の年表、家族の年表をそれぞれブックマークしておけば、いつでもブックマークを開くだけでそれぞれの情報が確認できるワケだ。
シングル HTML ファイルで、外部リソースの読み込みは一切なし。GitHub リポジトリから HTML ファイルを取得し、AdSense コードなどを除去してもらったら、どこにでもご自由に配備してご利用ください。
