使いやすい日付入力を考えて実験して実装して終えて

本記事は「[DeNA Advent Calendar 2020](https://qiita.com/advent-calendar/2020/dena)」の9日目となります。

使いやすい日付入力を目指して取り組んだ開発過程と、そこで得た知見を紹介します。

## 手間のかかるUI
日付入力はもともとSP(スマートフォン)サイトで使っていましたが、PCサイトでも利用することになりました。
それが今回開発することになったきっかけです。

修正前は、`input[type="date"]` で実装しており、日付入力時にカレンダーUIが表示されていました。
カレンダーUIは入力に手間がかかるため、PCだけではなくSPも含めて見直すことにしました。

| SP | PC |
|:-:|:-:|
| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/7574da2b-814f-696d-443c-8dc11644ee49.gif" width="250" /> | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/57d81ba7-d870-1ebf-51c3-8e0de779dbf3.gif" width="250" /> |

- [Demo](https://css.yagisuke0209.now.sh/tags/input_date_lab/before/)
- [Code](https://github.com/yagisuke/css/blob/master/src/components/views/tags/input_date_lab/before/sample1.tsx)

## 入力方法の選定
開発する前にどういうUIが日付入力として良いのかを考えました。
思いついたのが「テキスト入力」と「セレクトボックス」です。

「使いやすい＝早く入力できる」と考え、どちらがより早く入力できるかを実験することにしました。

### キーボードの種類
SPでテキスト入力する場合はキーボードによって使いやすさが変わりそうです。
実験の前に、 `type属性` を変えてキーボードを見比べてみました。

日付入力に必要なのは数字だけです。数字が一番入力しやすそうな `type="tel"` を今回選びました。(ソースコード的には少し気持ち悪いが)

| type="text" | type="number" | type="tel" |
|:-:|:-:|:-:|
| ![40-text.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/13f0b84d-d9ce-de71-1fcf-350ca9eb8b0d.png) | ![40-number.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/396662ae-e113-498a-aba7-63b85c53fa14.png) | ![40-tel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/c2de91de-7f01-ed31-7557-902b3e50c445.png) |

- [Demo](https://css.yagisuke0209.now.sh/tags/input_date_lab/input_variation/)

### テキスト入力 vs セレクトボックス
「テキスト入力」と「セレクトボックス」の入力時間を計測してみました。
すると、SPもPCも「テキスト入力」の方が入力時間が早いことが分かりました。

「使いやすい＝早く入力できる」なので、今回は「テキスト入力」で作ることにしました。

| SPテキスト入力 | SPセレクトボックス | PCテキスト入力 | PCセレクトボックス |
|:-:|:-:|:-:|:-:|
| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/ee7e37d5-8649-eb95-09c6-d41ff0a4851f.gif" width="250" /> | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/e3dbc43f-85b8-4db4-6b0b-c58292cfe723.gif" width="250" /> | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/a7eed599-bcd1-7783-c99f-83c044d567fe.gif" width="250" /> | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/fd3c227a-2edb-1231-cb64-5fb3e13693bd.gif" width="250" /> |
| 6秒 | 11秒 | 5秒 | 8秒 |

- [Demo](https://css.yagisuke0209.now.sh/tags/input_date_lab/vs_selectbox/)

## ブラッシュアップ
日付入力のUIは「テキスト入力」に決めたので本格的な実装に移ります。
ここではブラッシュアップしていった過程を記載します。

### 全角数字での入力
ここまでの実装では半角数字しか入力できませんでした。
しかし、PCでは全角数字で入力する可能性もあります。

全角入力から半角入力に切り替えるにも時間を使うため、PC利用者のために全角数字の入力もできるようにしました。

| 修正前(半角数字に切り替えて入力) | 修正後(全角数字のまま入力) |
|:-:|:-:|
| ![80_full_width_numbers_before.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/4db05357-356e-64a7-9264-4c7b47149214.gif) | ![80_full_width_numbers.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/152e2ff3-4897-63f1-7ffc-11f8a9c2a72a.gif) |
| 11秒 | 8秒 |

- [Demo](https://css.yagisuke0209.now.sh/tags/input_date_lab/adjust_input_date/) | Full width numbers
- [Code](https://github.com/yagisuke/css/blob/master/src/components/views/tags/input_date_lab/adjust_input_date/sample1.tsx)

### 入力欄の移動をサポート
日付を入力していると、「年」から「月」へ、「月」から「日」へ、入力欄の移動に時間がかかっていそうでした。

試しに入力欄の移動を自動でおこなって計測したところ、SPもPCも入力時間を短縮することができました。

| 修正前 SP | 修正後 SP | 修正前 PC | 修正後 PC |
|:-:|:-:|:-:|:-:|
| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/ee7e37d5-8649-eb95-09c6-d41ff0a4851f.gif" width="250" /> | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/08e01a77-bfe9-0638-83df-89faded862c9.gif" width="250" /> | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/a7eed599-bcd1-7783-c99f-83c044d567fe.gif" width="250" /> |  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/d3f4478b-9928-b1cc-07f5-ec28b5fe3e62.gif" width="250" /> |
| 6秒 | 3秒 | 5秒 | 3秒 |

- [Demo](https://css.yagisuke0209.now.sh/tags/input_date_lab/adjust_input_date/) | Automatically move focus
- [Code](https://github.com/yagisuke/css/blob/master/src/components/views/tags/input_date_lab/adjust_input_date/sample2.tsx)

### SPキーボードの最適化
これまで `type属性` で数字が入力しやすいキーボードを選択していましたが、`inputmode属性` でブラウザのキーボードを選択できることを知り、試してみました。

#### type属性 vs inputmode属性

type="tel"指定時のキーボードと、inputmodeで数字が入力しやすそうなキーボードを並べてみました。すると、type="tel"より`inputmode="numeric"のキーボードの方が数字入力に適している`ことがわかりました。(ソースコード的にも少し幸せ)

| type="tel" | inputmode="tel" | inputmode="numeric" | inputmode="decimal" |
|:-:|:-:|:-:|:-:|
| ![40-tel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/c2de91de-7f01-ed31-7557-902b3e50c445.png)  | ![77_inputmode_tel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/33ce7c15-4cb7-2913-ee40-17135a9a7dfa.png)  | ![77_inputmode_numeric.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/148f8f56-e3e4-fd69-0efc-50976b836845.png)   |  ![77_inputmode_decimal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/2e1fbd76-aacc-31a6-67ed-30d280d7b69b.png) |

- [Demo](https://css.yagisuke0209.now.sh/tags/input_date_lab/input_mode_variation/)

#### inputmode属性の対応状況

気になるinputmode属性のブラウザの対応状況です。[Can I use...](https://caniuse.com/input-inputmode)によると少し赤が目立ちますが、主要なSPブラウザは対応しています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/5a5048fb-2b89-0997-8a56-21794cecd465.png" />

また、[WHATWG](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute)によると、inputmode属性をサポートしていない場合は、typeやpattern属性からキーボードを決定すると記載があるため、そこをサポートしておけば問題なさそうです。

念のため、inputmodeが対応していないSPのSafariを確認してみたところ許容できるキーボードとなっていました。もちろんPCブラウザでも問題ないことは確認しています。

| SP Safari 12.1 |
|:-:|
| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/33c32798-f669-6725-f561-35f2b20e4693.png" width="250" /> |

- [Demo](https://css.yagisuke0209.now.sh/tags/input_date_lab/input_mode/)
- [Code](https://github.com/yagisuke/css/blob/master/src/components/views/tags/input_date_lab/input_mode/sample1.tsx)

## 使いやすい日付入力
今回の開発を通して、利用者に使いやすい日付入力を提供するためには、下記のポイントをおさえることが大切だと学びました。

#### ポイント

・ 入力方式はテキスト入力にする
・ SPでは数字が入力しやすいキーボードを選択する
・ PC利用者のために全角数字でも入力できるようにする
・ 年の入力が終わったら月へ、月が終わったら日へ、フォーカスを自動で移動させる

#### 完成
そして、完成したものがこちらです。

| SP | PC |
|:-:|:-:|
| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/37d214a2-6a25-f0cd-0719-e4b40f3e1332.gif" width="250" /> | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191671/3d97badb-ad64-d889-057a-55f3cf6ea9af.gif" width="250" />  |
| 3秒 | 3秒 |

- [Demo](https://css.yagisuke0209.now.sh/tags/input_date_lab/input_mode/)
- [Code](https://github.com/yagisuke/css/blob/master/src/components/views/tags/input_date_lab/input_mode/sample1.tsx)

本記事が日付入力だけではなく、入力項目に対して`どういう入力方法が適切なのか`を考えたり、SPの場合は`どの入力キーボードが適切なのか`を見直すきっかけになれば幸いです。

## 最後に
この記事を読んで「面白かった」「学びがあった」と思っていただけた方、
よろしければ Twitter や facebook、はてなブックマークにてコメントをお願いします！
また DeNA 公式 Twitter アカウント [@DeNAxTech](https://twitter.com/DeNAxTech) では、
Blog記事だけでなく色々な勉強会での登壇資料も発信してます。ぜひフォローして下さい！

[Follow @DeNAxTech](https://twitter.com/DeNAxTech?ref_src=twsrc%5Etfw)