見えないフロントエンド：プロダクトを救う小さな決断
最高のフロントエンドの仕事は、デモには決して現れない。
私が最も価値を置く仕事は、目に見えないものだ。誰もそのスクリーンショットを撮ったりはしない。しかし、この仕事がなければ、ユーザーは離れていく。そして、なぜ彼らが去ったのか、あなたは決して気づかないかもしれない。
この仕事は「隙間」で行われる。画面と画面の間、そしてバックエンドと実在する人間の間で起こるのだ。
ここに、大きな問題を防ぐための小さな修正の例を3つ挙げる。
- ログインエラーの修正
問題：フロントエンドは、ログインが成功したかどうかを判断するためにステータスフィールドをチェックしていた。しかし、バックエンドは有効なトークンとともに null のステータスを送信していた。その結果、ユーザーは正しくログインしたにもかかわらず、エラーが表示されてしまった。
修正：フロントエンドは、ステータス文字列ではなく、トークンの存在を確認するようにした。
教訓：技術仕様書における曖昧なフィールドは、ユーザーにとっての「閉ざされた扉」となる。
- 確認リンクのハンドリング
問題：ユーザーが新しいタブで確認リンクを開いたとき、元のタブが止まったままになってしまう。最初のタブにはログイントークンがないため、サーバーへのポーリング（polling）が失敗する。
修正：ブラウザの storage event を使用する。あるタブが local storage を更新すると、他のすべてのタブが即座にそのメッセージを受け取る。これは、タブを同期させるための、無料で即時的な方法だ。
- 再送ボタンのクールダウン
問題：「30秒後にメールを再送」というタイマーがコンポーネントの状態（state）に保存されていた。ユーザーがページをリフレッシュすると、タイマーがゼロにリセットされてしまう。その結果、ユーザーがボタンを連打し、メール送信コストが増大した。
修正：カウントダウンを保存するのではなく、期限のタイムスタンプを保存する。
クールダウンが終了する正確な時刻を保存することで、タイマーはページのリフレッシュ後も維持される。リロードによってリセットされることは不可能になる。
なぜ創業者がこれを重視すべきなのか：
• ログインの修正は、ユーザーのアクティベーションを守る。 • タブの同期は、コンバージョン率を守る。 • クールダウンは、悪用から予算を守る。
優れたエンジニアリングとは、単に画面を綺麗にすることではない。隙間に執着することだ。これらの修正にかかったコードは、合計で50行にも満たない。価値は、問題に気づき、それを正しい場所で修正することから生まれる。
出典: https://dev.to/virendra2902/the-invisible-frontend-small-decisions-that-quietly-save-a-product-1pkl