最速の生年月日入力フォームを求めて

こんにちは。転職ドラフトでWebアプリケーションエンジニアをやっている@iwtnです。

転職ドラフトでは自社開発企業に特化したエージェントサービスを始めました。

agent.job-draft.jp

そこでサービスの申し込みフォームを作ったのですが、その中に生年月日の入力がありました。

生年月日ということは日付の入力。

ブラウザの実装もリッチになってきて、デフォルトでinputタグの type="date" を使うだけでカレンダーまで表示されます。素晴らしいですね！

しかしこの実装の問題は多くの人が指摘しています。実際あまりよいUIとは言えません。

動作はバラバラ、特にスマホでは入力しにくい

実装はブラウザに依存します。なので統一したUIをユーザーに提供できません。

caniuse.com

もちろん普段使っているブラウザで慣れていればそれがその人にとってのベストのUIにはなりえます。

しかしスマートフォンのブラウザでは、デフォルトのUI自体が相当悪いのです。

Androidの問題は、年を選択しにくいことです。

この画面でどこをタップすると年を選択できるかと言うと……

この画面で年を選択するためにクリックすべきは上部の小さい箇所です。初見の人はほとんどわかりません。 生年月日という年を入力することが重要な場合、このUIはとても良いものであるとは言えません。

iOSの問題は、年月を選択して「完了」を押してしまうと日付の選択が完了したことになってしまうことです。

これもAndroidよりは良いかもしれませんが、ボタンの配置がよくありません。

一般的には、セレクトボックスで年月日をそれぞれ選択するのが良いでしょう。月や閏年によって日数が多少変わりますが、ライブラリなどを使えばそのあたりは特に実装する必要はありません。

しかし、スマホ上で

セレクトボックスを選択
スクロールして選択
1〜2を年月日で3回繰り返す

という操作は、UIの切り替えも多くなかなか手間がかかります。

入れる前に入っているのが最速！？自動入力を検討する

モダンなブラウザでは、autocomplete属性を適切に設定しておくことで、様々な値の自動入力ができます。

実は生年月日も、WHATWGの仕様上は自動入力するためのオプションが存在します。

HTML Standard

しかし、Chromeでチェックしてみると、生年月日を保持していないようです。

Chromeの自動入力の設定画面 (chrome://settings/autofill より)

自動入力によって「入力しようと思ったときには、既に入力されていた」 そんなフォームは確かに最速かもしれませんが、実際誰も使えないのであれば仕方ありません。別の手段を探すことにします。

スマホ特化の最速生年月日入力フォームはこれだ

YYYYMMDD形式の8桁の数字をテンキーによって入力するフォームです。

なぜこれが最速になりえるのか

スマートフォンのUIの大きな特徴は、あたりまえですがタッチパネルによるキーボードの切り替えです。メールアドレス向けや数字入力に特化するなど、様々なキーボードが表示され入力をしやすくしてくれます。

そして生年月日はスケジュールなどの予定入力とは違って年の選択が重要になります。自分の年齢を忘れても生年月日はよく入力するので覚えている人が多いでしょう。

こういった要因により、西暦と月日の数字8桁で表現できる生年月日は、セレクトボックスを使って選択するよりもテンキー入力のほうが速いと考えました。入力中のUIの切り替えもありません。一般的な日付を選択するDatePickerとは違った生年月日という特別な日付だからこそできるUIだと思います。

JavaScript の invalid date に注意

ただ、DatePickerであれば確実に日付を指定して入力してくれますが、8桁の数字だとうまく行かない場合もあります。例えば、閏年以外の2月29日や、31日までない月で31日を指定されてしまう場合です。

そのためバリデーションに一工夫必要です。

// YYYY-MM-DD形式に変更
const dateString = eightDigits.slice(0, 4) + "-" + eightDigits.slice(4, 6) + "-" + eightDigits.slice(6, 8)

// 不正な日付か判定
const day = new Date(dateString)
if (Number.isNaN(day.getTime())) {
  // trueの場合不正な日付
}