formの送信ログから反省する、本当は必要だったvalidationや機能たち
https://gyazo.com/e79470e5f5d486fddbccf7f83b315687
スライド
サンプルソース
設定画面や記録画面にたくさんのフォームをつくってる
業務支援なので毎日使われるようなもの
高いレベルのユーザビリティを実現する
機能改善や検証のスピードが求められる
フロントエンドの組織ができた
お店の経営アシスタント
管理業務の効率化・利益最大化支援
機能
売上／コスト分析機能
改善提案機能
日報機能
SNS的な機能
構成
分析や提案の制度をあげるためにデータ入力や設定が必要
毎日やってると入力ミスはめっちゃある
数値入力で日本語
空欄で送信
とりえない値
等
犯した罪
入力しづらい
打ち間違えてしまう
0と「お」が近い位置にある
対策
Input要素にtype属性
キーボードから打たせない
固まる
再レンダリングが原因
対策
PureComponentやMemoを使う
リアルタイムで入力するのを見せる場合
入力とレンダリングが同時
Submitによっては対応が難しい
ビジネスサイドと相談したほうがいいかも
修正しづらい
不正な値を送れる
複雑なバリデーションをしていなかった
JSのライブラリ
いつバリデーションするか？
入力時に判定していた
しかし全角数字を打てなかった
入力後をonBlurでハンドリングするようにした
注意点
type指定すると勝手にバリデーションされる
不具合のようにみえる
入力間違いに気づけない
送信させない
disabled属性
フィードバックする
SucessやFailをトーストで通知
サーバーでバリデーションする
小数点やeを紛れ込ませる
別タブでフォームを開く
cURLで直接サーバーを叩ける
しょうもないバグに気づけない
実装されるべき機能が漏れがち
実装されるべき機能が多い
取捨選択を誤るとUXバグにつながる
気づける仕組みで担保する取り組み
ガイドライン・デザインシステム・コンポーネント定義
@air-kit/air-kit
Input要素の振る舞いをサービス群で統一
QA項目をUIに対するインテグレーションテスト実施
dom-testing-libraryという解決策
react-reduxやrouterなどつないだままテストできる
APIにつないだテストもできる
ロギング
バリデーションできたことを監視
Reduxのmiddlewareでどうアクションが発火したのか監視
集計
https://gyazo.com/742a18cb3a48c65b08deaad53cb45269
個人情報が絡むのはとらない
ロギングの再生
ログを見やすいようにする
時系列に再生
親切機能を盛りすぎるとバグの温床にもなりうる