🗒️

こんなフォームを作らないで

2022/04/10に公開約2,100字

はじめに

こんなフォームが実装されるのは嫌だけど、うっかり作られそうなものをピックアップします。

備考: このテーマに含めないこと

  • React, TypeScript, CSS, UIデザイン, 情報設計, ライティング

題材

1ページ単位に配置される登録系フォーム (画面の隅にある検索バーみたいなものは対象外)

基礎編

1. 二重送信できる

送信ボタンをクリックしたら、サーバに問い合わせ中でも2度も3度もクリックできてしまう。

問題

通信速度は様々な環境で変わる可能性があり、待機中のUIを不明にする選択はあり得ません。また言わずもがなバックエンドの整合性が狂います。

解決策

ローディング中はdisabled属性を有効にし、通信成功または通信エラーが確定したら元に戻しましょう。またその間のインタラクションを検討しましょう。

2. 通信後のエラーが作り込まれていない

バックエンドから返ってきたエラーの表示が手抜き。

問題

公開されているWebサービスでよくあるものが空で送信するとワードプレスやWebFW固有のエラーページがドーンと出る場合。セキュリティに不安を覚えるので忘れずに対策して欲しい。SQLログがたまに出るものも見ますが論外。

解決策

通信後にエラーが返ってきたときのエラーメッセージを表示するUIを実装しましょう。CSSをサボらないこと。

マークアップ編

3. ラベルが反応しない

ラベルの部分をクリックしても入力フィールドにカーソルがセットされない。

問題

入力フィールドしか有効でない状態はクリック可能な領域が狭くユーザビリティが不足します。input要素ならそれほど問題ではないですが、ラジオボタンやチェックボックスで同じことをやらかすとアウトです。

解決策

入力フィールドのラベルにはlabel要素を使い、label要素のfor属性を使って項目を紐付けましょう。

4. Enter/Returnを押して送信できない

Enter/Returnキーを押して送信できず、送信用ボタンをクリックするしか手段がない。

問題

入力が終わった状態ならボタンにフォーカスせずとも手早く送信できるのが望ましいです。正しくマークアップされていればこうなりませんが、稀にそうでないログインフォームを見かけます。

解決策

フォームのまとまりは適当にdiv等を選ばずformタグを正しく使いましょう。

バリデーション編

5. フロントエンドのバリデーションがない

フォームの値が適切かチェックする処理が簡単(e.g. 桁数や正規表現とか。DBと照合とか除く)なのに、バックエンドとやり取りしないと結果が出ない。

問題

サーバに問い合わせする必要のない検証はそうしないように済ますべきです。

解決策

APIと通信する前にバリデーションを行う仕組みを追加しましょう。

6. HTML属性のメッセージが使われている

送信ボタンをクリックすると「このフィールドを入力してください。」というぎこちないメッセージが表示され、ポップアップも位置計算なしで見づらい。色々調べると別のブラウザではまた別のメッセージが出るよう。

問題

HTMLバリデーションのrequied属性を追加すると、必須項目と判定して自動的に検証してくれます。しかしメッセージ表示が自動的に上記のように決まっています。「フィールドを...」のような日常的でないキーワード等が手抜きされた雰囲気を醸し出します。

解決策

個人ブログならまだしも、商用のシステムにはrequied属性で定められたメッセージを出力する状態を止めて、プログラマが指定するメッセージでフィードバックを表示できるよう実装しましょう。

番外編

バックエンドでバリデーションされていない

番外編だけどこれが最も重大。絶対にこの状態で1機能のチケットをクローズしないように。

問題

クライアントサイドは信用するべきでなく、リクエストを受け付けるレイヤーで検証することは基本中の基本です。またAPIを事前に固めておくとフロントエンドで何が足りているか、足りていないかのチェックも手際よくできます。

解決策

リクエストボディをチェックするモジュールを追加し、検証結果にエラーがあればエラーステータスコードと専用のレスポンスを返す処理を実装しましょう。
フレームワーク付属のバリデーション機構があればそれを使い、Express.jsのようにそれが無い場合は任意のライブラリか自前実装でやります。

1. リクエストを受け取る
2. リクエストボディを検証、不合格ならエラーを返す <-- 追加
3. リクエストボディでデーターソースにアクセスして本処理を実行

おわりに

フォームの実装で何をやるか路頭に迷ったら最低限これらを確認しましょう。

Discussion

ログインするとコメントできます