【要約】timer画面の本実装 - テーブル描画と非同期通信の試行錯誤 - Day 12 [Zenn_Python] | Summary by TechDistill
> Source: Zenn_Python
Execute Primary Source
// Problem
開発者がtimer画面の実装において、DOM操作の仕様と非同期通信の制御に課題を感じた。
- ・
forEachの戻り値がundefinedであるため、配列操作の設計に誤りがあった。 - ・
stopボタン押下時のtimerEndTimerStopPost()にawaitが欠落していた。 - ・バックエンドの書き込み完了前に読み取りが実行される、データ不整合のリスクが生じた。
// Approach
開発者は、実装中に発生した不具合を特定し、以下の手法を用いて解決を図った。
- ・
forEach内で直接DOM操作を行う設計へ切り替え、戻り値の問題を回避した。 - ・描画時に
this.csv_body.innerHTML = ''を実行し、行の重複を防止した。 - ・非同期処理の順序を保証するため、API呼び出しに
awaitを導入する修正方針を立てた。
// Result
開発者は、実装上の課題を解決し、次工程への準備を整えた。
- ・テーブル描画におけるデータの重複問題が解消された。
- ・非同期処理におけるRace Conditionの可能性を特定し、修正計画を策定した。
- ・統計エリアの実装に向けた、UIコンポーネントの基盤構築を完了した。
Senior Engineer Insight
> フロントのタイマーをUX専用とし、実計測をバックエンドに委ねる設計は、信頼性の観点から妥当である。しかし、非同期処理における
awaitの欠落は、大規模システムでは致命的なデータ不整合を招く。状態遷移の厳密な管理と、Race Conditionを排除する設計が不可欠である。