見えないフロントエンド：プロダクトを救う小さな決断
最良のフロントエンドの仕事は、デモには決して現れない。
それをスクリーンショットに撮る人はいない。しかし、この仕事がなければ、ユーザーはプロダクトを離れてしまい、その理由さえ分からなくなる。この仕事は、画面と画面の間、タブの間、そしてバックエンドとの隙間で発生する。
ここに、大きな損失を防ぐための小さな修正の例を3つ挙げる。
- ログインエラーの修正 かつて、フロントエンドはログインが成功したかどうかを確認するために、statusフィールドをチェックしていた。バックエンドは有効なトークンを送信していたが、同時にstatusをnullとして送信していた。その結果、ユーザーはアクセス権があるにもかかわらず、アプリによって拒否されてしまった。
修正は簡単だった。現在、フロントエンドは成功を確認するためにトークンそのものをチェックしている。ドキュメント内の曖昧なフィールドが、ユーザーにとっての閉ざされたドアになってしまうのだ。
- 検証リンクの修正 ユーザーが新しいタブでリンクをクリックすると、元のタブは未認証のまま残ってしまう。そのため、元のタブはサーバーに更新をリクエストすることができない。
私はブラウザの storage イベントを利用した。あるタブが localStorage に書き込むと、他のすべてのタブが即座にそれを検知できる。これはタブ間の無料のメッセージバスとして機能する。これにより、オンボーディングにおける行き止まりを解消できる。
- クールダウンタイマーの修正 アプリの状態（app state）に保存された「30秒後にメールを再送」というタイマーは、ユーザーがページをリフレッシュするとリセットされてしまう。するとユーザーはボタンを連打することになり、メールのコストが増大してしまう。
修正策は、カウントダウンではなく期限（デッドライン）を保存することだった。
- クールダウンが終了する正確なタイムスタンプを保存する。
- リフレッシュのたびに、残りの秒数を再計算する。 これにより、悪用を防ぎ、予算を守ることができる。
なぜこれが創業者にとって重要なのか：
• ログインの修正は、ユーザーのアクティベーションを守る。 • タブ間のシグナルは、コンバージョン率を守る。 • クールダウンは、利益率を守り、悪用を防ぐ。
優れたエンジニアリングとは、単にインターフェースを美しくすることではない。隙間に執着することだ。これらの修正は、それぞれ50行未満のコードで済んだ。価値は、問題に気づき、適切な場所で修正することから生まれる。
出典: https://dev.to/virendra2902/the-invisible-frontend-small-decisions-that-quietly-save-a-product-1pkl