はじめに
Day 11では、swagger-typescript-apiを用いたAPIクライアント自動生成の導入について書きました。
今回はtimer画面の本実装について書きます。テーブル描画の実装過程でハマったポイントと、非同期通信の問題を記録します。
画面の構成
今回のツールは機能ごとにメインエリアを切り替える仕様です。timer画面は以下のエリアで構成されています。
| エリア | 役割 |
|---|---|
| タイマーエリア | カウントアップ表示 |
| ボタンエリア | start・stopボタン |
| ボタンログエリア | startボタン押下時のバックエンド戻り値表示 |
| CSV表示エリア | 当日分の記録をテーブル形式で表示 |
| 統計エリア | NN機能による統計データ表示（未実装） |
タイマーエリア
タイマーはフロントエンド側でカウントアップを描画しています。startボタン押下時にsetIntervalで1秒ごとにカウントを進め、stopボタン押下時にclearIntervalでカウントを停止します。
実際の時間計測はバックエンドのstart_checker・end_checkerが行っています。フロントのカウンターは表示専用であり、計測結果はバックエンドがCSVに保存します。再始動時はカウントを0に戻してから再開する設計にしています。
this.start_timer.addEventListener("click", () => {
if(isTracking === true){
alert('It has already started.')
return
}
clearInterval(this.timer_click)
count = 0
this._click_button()
isTracking = !isTracking
this.timer_click = setInterval(() => {
count++;
const h = Math.floor(count / 3600)
const m = Math.floor((count % 3600) / 60)
const s = count % 60
this.timer.textContent = String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0')}, 1000)
})
// stop
this.end_timer.addEventListener("click", () => {
if(isTracking === false){
alert('Not started')
return
}
api.timer.timerEndTimerStopPost()
isTracking = !isTracking
clearInterval(this.timer_click)
this._csv_log()
})
ボタンログエリア
ボタンログエリアには、startボタン押下時のバックエンド戻り値を表示しています。
CSV表示エリアはstopを押下してはじめて更新されるため、startが正しく押下されているかを即座に確認できません。この問題を解消するため、startボタン押下時にstart_checkerの戻り値をそのまま表示する領域を設けました。バックエンドへの保存は行わず、表示専用の役割です。
private async _click_button(){
const start_data = (await api.timer.timerStartTimerStartGet()).data
this.button_log.append(start_data + '\n')
}
CSV表示エリアの実装
CSV表示エリアには当日分の記録をテーブル形式で表示しています。当日分のフィルタリングはバックエンドのimport_to_csvが行っており（Day 10参照）、フロントは受け取ったデータをそのまま描画します。
表示するのはstart-time・end-time・totalの3カラムのみです。当日分のみを表示する仕様のため日付カラムは除外しており、インデックス指定（row[1]・row[3]・row[4]）でカラムを取り出しています。
private async _csv_log(){
const csv_data = (await api.timer.todayTimerTimerTodayGet()).data
this.csv_body.innerHTML = ''
csv_data.forEach((row: String) => {
const tr = document.createElement('tr')
const data1 = row[1]
const data3 = row[3]
const data4 = row[4]
const td1 = document.createElement('td')
td1.classList.add('td1')
const td3 = document.createElement('td')
td3.classList.add('td3')
const td4 = document.createElement('td')
td4.classList.add('td4')
td1.textContent = data1 +' / '
td3.textContent = data3 +' / '
td4.textContent = data4
tr.appendChild(td1)
tr.appendChild(td3)
tr.appendChild(td4)
this.csv_body.appendChild(tr)
});
}
this.csv_body.innerHTML = ''でtbodyを初期化してから描画しています。初期化を行わないとstopのたびに行が追記され重複が発生するため、この処理が必要でした。
ハマったポイント
forEachの戻り値
実装当初、APIレスポンスを処理する際にforEachの戻り値を変数に代入しようとしていましたが、forEachはundefinedを返すため意図した動作になりませんでした。配列の各要素に対してDOM操作を行う場合は戻り値を使わず、ループ内で直接操作する方針に切り替えました。
統計エリア
統計エリアは現時点では領域の確保のみを行っています。NN機能によるタスク進捗の統計グラフを表示する予定ですが、NN機能の実装完了後に対応します。
おわりに
今日はtimer画面の本実装について書きました。
テーブル描画はシンプルな処理に見えて、tbody初期化・非同期処理の順序・forEachの扱いと詰まる箇所が重なりました。awaitの問題は引き続き修正予定です。
Day 13ではgoals画面の仮実装について書く予定です。timer画面との構造の違いと、レイアウト設計の判断を記録します。
この記事は連載「クラウドに依存しないマイルストーン管理ツール開発記」のDay 12です。