この記事でできること
一覧画面に「いいね」「興味なし」のようなトグルボタンがあり、押すとAPIに送信して応答後に一覧・件数・アイコン状態を更新する、よくある作りを実装するとき。この処理は、モード切替やページ送りと組み合わさると「応答待ちの間にユーザーが別の操作をする」ケースで壊れやすくなります。この記事は、個人開発している技術記事キュレーションサービスDevPickで実際に1日で8回踏んだ不具合をもとに、実装時に確認すべき3つの観点を整理したものです。
背景:なぜ気づきにくいか
自分で動作確認するときは、ボタンを押してから応答が返るまでの数百msの間、たいてい次の操作をせず待ってしまいます。そのため「応答待ちの間に画面を触る」パターンはローカルの手動確認では再現しづらく、レビューや実際のユーザー操作で初めて見つかることが多くなります。
確認1:応答後の処理は、ボタンを押した瞬間の情報を持ったままになっていないか
トグル操作の応答が返ってきたあとに実行する処理(一覧の再取得・件数の増減など)が、「今どのモードを見ているか」「今何ページ目か」「今の件数はいくつか」を、ボタンを押した瞬間の情報のまま使っていないか確認します。応答が届くまでの数百msの間にユーザーがモードを切り替えたりページを送ったりすると、その情報は古くなります。古い情報のまま「取り直す一覧」や「次に見せるページ番号」を決めると、ユーザーが今見ている画面とは違う内容で上書きしてしまいます。
応答後の処理では、ボタンを押した時点の情報ではなく、そのときどきの最新の情報を見るようにします。
確認2:1箇所直したら、同じ作りの処理を横展開して洗い出したか
このバグは1箇所直して終わりではありませんでした。「いいねボタン」と「興味なしボタン」、「一覧側から押した場合」と「その一覧自体を見ている状態で押した場合」など、似た作りの処理が複数箇所に分かれていると、1箇所だけ直しても他の箇所に同じ問題が残ります。1つ見つかった時点で、同じ考え方が当てはまる別の処理がないか洗い出すようにします。
確認3:ページ送り中に母集団が減った場合、空ページに固定されないか
一覧の件数が途中で減る(他の操作での解除、保持期間切れの自動削除など)ケースを考慮します。取得結果が空でも要求したページ番号をそのまま採用してしまうと、「該当ページの記事は0件だが総件数は0ではない」という状態のままページネーションのUIも描画されなくなり、ユーザーが手動で前のページへ戻る手段がなくなることがあります。取得結果が空だった場合は、総件数から導いた有効な最終ページへ戻して取り直すようにします。
まとめ
- 応答後の処理は、ボタンを押した瞬間の情報ではなく、そのときどきの最新の情報を見るようにする
- 似た作りの処理が複数あるときは、1箇所の指摘で終わらせず、同じ考え方で他の箇所も洗い出す
- 取得結果が空でも要求ページをそのまま採用せず、総件数から有効な最終ページへ戻して取り直す
これらに行き着くまでの経緯(1日で同じ種類の指摘を8回受けた話)はZenn版にまとめています。