日付ピッカーをどう実装すべきかのガイド「Pikaday」

フォームにおける日付入力といえば、JavaScriptで作成された日付ピッカーが多く実装されていました。しかし、複雑なUIは入力ミスやフォーム離脱の原因となることがあります。開発者のDavid Bushell氏が公開した「Pikaday」は、JavaScriptの日付ピッカーに頼らない、よりユーザーフレンドリーな日付入力コンポーネントを解説するガイドです。

Pikaday
https://pikaday.dbushell.com/

◆ほとんどの場合、JavaScript日付ピッカーは不要
JavaScriptで動作する日付ピッカーは、ほとんどの場合、誰も必要としていません。複雑なUIはエラーを増やし、フォームの放棄につながります。ネイティブな日付入力を実装することでユーザーフレンドリーなインターフェースへと導くことを目指しています。

◆ネイティブの日付・時刻入力を活用する
現在利用されているほぼすべてのブラウザはネイティブの日付・時刻入力をサポートしています。プログレッシブエンハンスメントを常に考慮し、JavaScriptを必須要件にしないことが重要となります。

・日付入力
日付入力タイプを使用すると、ネイティブの日付選択機能が利用できます。

・時間入力
時間入力タイプを使用すると、ユーザーは時間と分を指定できます。

・日時入力
日時入力タイプを使用すると、ユーザーは日付と時間の両方を指定できます。

◆分離された入力フィールド
単一の日付ピッカーは操作が難しい場合があります。記憶に残る日付については、分離された入力フィールドを使用することで使いやすさが向上します。GOV.UKの日付入力コンポーネントをベースにした例では、日・月・年を個別に入力できます。

◆セレクト要素の活用
選択できるデータが限定されている場合、セレクト要素の使用により、操作回数を減らし入力エラーを排除できます。ただし、表記方法には注意が必要です。スクリーンリーダーが1月1日を「1月の1日」と誤って読み上げる場合があるためです。

ホテルや施設などの利用では限られた時間選択があることが多く、相対的な日付の方が理解しやすい場合があります。

追加の属性として、
・inputmode="numeric"：デバイスに数字キーパッドを優先表示する。
・maxlength：入力文字数を制限する。
・patternと:user-invalid：組み合わせて即座に検証フィードバックを提供する。
・min、max：日付けと数値の範囲を制限する。
・type="number"：すべての数値データに最適な選択肢とは限りません。

◆マスク入力
日付ピッカーの一般的な代替手段として、プレースホルダーマスクを持つ単一入力があります。これは完全または部分的な日付に使用でき、JavaScriptで体験を向上させることができます。ただし、JavaScriptで入力値を更新すると、ネイティブの取り消し・やり直し機能が壊れる可能性があるため注意が必要です。

有効期限（MM／YY）と生年月日（DD／MM／YYYY）の例では、クライアント側での検証が行われ「2月の有効な日を入力してください（1から28）」などのエラーが表示されます。

マスク入力を使用する際の注意点として、placeholder属性を単独で使用してはならず、常にフィールドと期待される形式を説明する永続的なlabel要素を含める必要があります。また、日付形式は地域によって異なり、米国では月／日（MM/DD）を好むため、国際的に使用されるウェブサイトではマスク入力が混乱を招く可能性があります。

CSSを使用することで、複数の入力フィールドを視覚的に1つに統合して表示することも可能です。

◆範囲選択と限定オプション
利用可能な日付を選択する必要がある場合は、ラジオボタンのグループで対応できます。

◆フリーテキストと提案
正確な日付や時刻を指定しづらいケースでは、基本的なテキスト入力を利用します。

datalist要素を利用することで、自由な書き込みだけではなくリストから選択ができるようになります。

◆よくある質問
・ReactのようなJavaScriptフレームワークを使用する場合は？
優れたJavaScriptフレームワークはすべてネイティブHTML要素の使用を許可するので、すべてをカスタムコンポーネントにする必要はありません。ネイティブのinput eventsはフレームワークのコールバックと統合でき、valueのような属性を双方向の状態バインディングに使用できます。

・ネイティブ日付ピッカーをスタイリングする方法は？
ページ上のinput要素は部分的にスタイリングできますが、他の部分はスタイリングできません。しかし、ネイティブなシステムのUIはユーザーにとって馴染み深いものです。OSやブラウザ間で異なる見た目をしますが、あえて別のデザインを追加する必要はないのです。

・関係者がJavaScriptによる日付ピッカーを要求している場合、どう説得すればよいですか
最終目標はフォームの送信を成功させることです。構造が複雑でエラーが発生する可能性のあるUIより、ネイティブな入力方法を組み合わせる方が、よりユーザーフレンドリーになる可能性があります。欧州アクセシビリティ法のような規制に抵触する可能性を考慮すると、シンプルな実装にすることが成功への鍵となります。

・アクセシビリティをテストし保証するには？
関連するアクセシビリティガイドラインを理解することが重要です。カスタムUIをコーディングしようとして間違いを犯さないよう、既存のウェブ標準を活用してください。ブラウザの開発者ツールには、間違いを特定するのに役立つ組み込みのアクセシビリティ機能がありますが、どのツールも完璧ではありません。確実に知るための唯一の方法は、ユーザーテストを実施することです。アクセシビリティオーバーレイは強く推奨されず、状況を悪化させる可能性があります。

・日付ピッカーのアクセシビリティについてもっと学ぶには？
以下のリソースが参考になります。
Collecting dates in an accessible way by Graham Armfield
What makes an accessible date picker? Is it even possible? by Russ Weakley
Maybe You Don't Need a Date Picker by Adrian Roselli
Date Picker Dialog Example by ARIA Authoring Practices Guide
Designing The Perfect Date And Time Picker by Vitaly Friedman

・JavaScriptの日付ピッカーを推奨してもらえませんか？
申し訳ありませんができません。最もシンプルな方法で目標を達成するよう努めてください。

Bushell氏は「実際のユーザーからテストとフィードバックを集めることを忘れずに」とアドバイスしています。なお、以前開発していたJavaScript製のPikadayはGitHubで公開されています。