fix: 日をまたいだ際に日時の表示を更新するように修正 #4750

marugorou · 2025-08-11T06:35:47Z

概要

日をまたいだ際に日時の表示を更新する処理を追加しました。

なぜこの PR を入れたいのか

close #4606

動作確認の手順

日付が変わるのを待ち、日時の表示が変わることを確認する。（タイムゾーンをいじると楽かもしれないです。）

UI 変更部分のスクリーンショット

before

after

PR を出す前の確認事項

（機能の追加なら）追加することの合意がチームで取れている
- 取れていない場合はチェックを外して PR にすれば OK
動作確認ができている
自分で一度コードを眺めて自分的に問題はなさそう

見てほしいところ・聞きたいことなど

MessageHeaderごとに更新の処理が走るので、少し非効率な気がします。

github-actions · 2025-08-11T06:35:55Z

Preview (prod) → https://4750-prod.traq-preview.trapti.tech/
Preview (dev) → https://4750-dev.traq-preview.trapti.tech/

codecov · 2025-09-02T10:21:56Z

Codecov Report

❌ Patch coverage is 0% with 49 lines in your changes missing coverage. Please review.
✅ Project coverage is 13.49%. Comparing base (db66cd0) to head (523d9e8).

Files with missing lines	Patch %	Lines
src/composables/useDateRepresetation.ts	0.00%	28 Missing ⚠️
...nts/Main/MainView/MessageElement/MessageHeader.vue	0.00%	21 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4750      +/-   ##
==========================================
- Coverage   13.54%   13.49%   -0.05%     
==========================================
  Files         704      705       +1     
  Lines       31691    31800     +109     
  Branches      676      676              
==========================================
- Hits         4293     4292       -1     
- Misses      27386    27496     +110     
  Partials       12       12

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot

Pull Request Overview

Adds automatic date display updates when the day changes for message headers in the application.

Introduces a new useDateRepresentation composable that automatically updates date display when crossing midnight
Replaces the static computed date property with a reactive date that updates via scheduled timeouts
Implements proper cleanup of timers on component unmount to prevent memory leaks

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-01T14:47:15Z

src/components/Main/MainView/MessageElement/MessageHeader.vue

+<script lang="ts">
+import { ref, onMounted, onUnmounted, watchEffect } from 'vue'
+import { getDateRepresentation } from '/@/lib/basic/date'
+
+const useDateRepresentation = (updatedAt: string) => {


The useDateRepresentation function is defined in a separate script block but should be moved to a composables directory (e.g., /@/composables/useDateRepresentation.ts) for better code organization and reusability across components.

Copilot · 2025-10-01T14:47:16Z

src/components/Main/MainView/MessageElement/MessageHeader.vue

+import { ref, onMounted, onUnmounted, watchEffect } from 'vue'
+import { getDateRepresentation } from '/@/lib/basic/date'
+
+const useDateRepresentation = (updatedAt: string) => {
+  const dateTimeout = ref<ReturnType<typeof setTimeout>>()
+  const date = ref<string>('')
+  watchEffect(() => {
+    date.value = getDateRepresentation(updatedAt)
+  })
+  const subscribeDateChange = () => {
+    const now = new Date()
+    const tomorrow = new Date()
+    tomorrow.setDate(now.getDate() + 1)
+    tomorrow.setHours(0, 0, 0, 0)
+    dateTimeout.value = setTimeout(() => {
+      date.value = getDateRepresentation(updatedAt)
+      subscribeDateChange()
+    }, tomorrow.getTime() - now.getTime())
+  }
+  onMounted(() => subscribeDateChange())
+  onUnmounted(() => clearTimeout(dateTimeout.value))


Each MessageHeader component creates its own timer, which could be inefficient with many messages. Consider using a global timer that broadcasts date changes to all components instead of creating individual timers per component.

Suggested change

import { ref, onMounted, onUnmounted, watchEffect } from 'vue'

import { getDateRepresentation } from '/@/lib/basic/date'

const useDateRepresentation = (updatedAt: string) => {

const dateTimeout = ref<ReturnType<typeof setTimeout>>()

const date = ref<string>('')

watchEffect(() => {

date.value = getDateRepresentation(updatedAt)

})

const subscribeDateChange = () => {

const now = new Date()

const tomorrow = new Date()

tomorrow.setDate(now.getDate() + 1)

tomorrow.setHours(0, 0, 0, 0)

dateTimeout.value = setTimeout(() => {

date.value = getDateRepresentation(updatedAt)

subscribeDateChange()

}, tomorrow.getTime() - now.getTime())

}

onMounted(() => subscribeDateChange())

onUnmounted(() => clearTimeout(dateTimeout.value))

import { ref, onMounted, onUnmounted, watchEffect, computed } from 'vue'

import { getDateRepresentation } from '/@/lib/basic/date'

// Global midnight tick composable

const midnightTick = ref(new Date())

let midnightTimeout: ReturnType<typeof setTimeout> | null = null

function scheduleNextMidnightTick() {

const now = new Date()

const tomorrow = new Date()

tomorrow.setDate(now.getDate() + 1)

tomorrow.setHours(0, 0, 0, 0)

const msUntilMidnight = tomorrow.getTime() - now.getTime()

midnightTimeout = setTimeout(() => {

midnightTick.value = new Date()

scheduleNextMidnightTick()

}, msUntilMidnight)

}

if (typeof window !== 'undefined' && !midnightTimeout) {

scheduleNextMidnightTick()

}

const useMidnightTick = () => midnightTick

const useDateRepresentation = (updatedAt: string) => {

const tick = useMidnightTick()

const date = ref<string>(getDateRepresentation(updatedAt))

watchEffect(() => {

// Recompute date when tick or updatedAt changes

date.value = getDateRepresentation(updatedAt)

})

Copilot · 2025-10-01T14:47:16Z

src/components/Main/MainView/MessageElement/MessageHeader.vue

+    }, tomorrow.getTime() - now.getTime())
+  }
+  onMounted(() => subscribeDateChange())
+  onUnmounted(() => clearTimeout(dateTimeout.value))


The timeout cleanup doesn't check if dateTimeout.value is defined. If the component unmounts before subscribeDateChange is called, this could attempt to clear an undefined timeout.

Suggested change

onUnmounted(() => clearTimeout(dateTimeout.value))

onUnmounted(() => {

if (dateTimeout.value !== undefined) {

clearTimeout(dateTimeout.value)

}

})

Pugma

こちらコメントをつけました！
ご確認をお願いします 🙏

Pugma · 2025-10-02T05:37:13Z

src/components/Main/MainView/MessageElement/MessageHeader.vue

+import { ref, onMounted, onUnmounted, watchEffect } from 'vue'
+import { getDateRepresentation } from '/@/lib/basic/date'
+
+const useDateRepresentation = (updatedAt: string) => {


ここは copilot のコメントのとおりだと思います
/src/composables 以下にこのような再利用可能な関数をおいているところがあるので、そちらに移してしまいましょう

また、 (画面で見えない部分を含む) 読み込んでいる範囲すべての投稿が現在時刻を参照するようになってしまうので、それも処理が重くなる原因として copilot からコメントがついてます
これは、先の部分で触れたのと同じように composable 以下に移して、それを各投稿のコンポーネントから参照するようにすることでまとめて解決できると思います

(横槍ごめんなさい :sorry:) composables にまとめたところで setTimeout のインスタンスが大量に生成されるのは回避できない気がします
(パフォーマンスに問題があるようなら effect scope とかを使うとよさそうです)

composables にまとめたうえで、この部分から各投稿の時間表示を更新するイベントを発火できればいいのかなって思っていたんだけど、それが effect scope になるのかな

あ～ Copilot がそういう変更を提示してくれているんですね、よく読んでいませんでしたすみません :pray-nya:
でもなんか間違ってる気がするので、やはり effect scope あたりを使って実装するのが無難そうです (他にシンプルな実装の仕方があるならそれでもよさそうですけれど)

`<script lang="ts">
import { useDateRepresentation } from '/@/composables/useDateRepresentation'

export default {
setup() {
const date = useDateRepresentation(updatedAt)
return { date }
}
}
</script>`

↑
ありがとうございます。わかりました。copilotの言うとおりに、composablesにuseDateRepresentation.tsとしてまとめました。これを参照する方法を調べたのですが、MessageHeader.vueの元の部分のところを
上のように変えるというので良いのでしょうか？

また、copilotが最後に指摘している
onUnmounted(() => clearTimeout(dateTimeout.value))
という文言がuseDateRepresentationに見当たらず、どうすればよいか分かりません。

お手数をおかけしまして申し訳ありません。よろしくお願いします。

fix: 日をまたいだ際に日時の表示を更新するように修正

3cd8e92

Takeno-hito self-requested a review August 11, 2025 10:34

Takeno-hito assigned tufusa and marugorou Aug 11, 2025

This was referenced Aug 12, 2025

preview UIを追加 traPtitech/rucQ-UI#89

Merged

preview-uiを追加 traPtitech/rucQ-Admin#55

Merged

Merge branch 'master' into fix/4606-sync-message-date-representation

5cf16f5

marugorou requested a review from a team as a code owner September 2, 2025 10:20

Pugma requested a review from Copilot October 1, 2025 14:46

Copilot AI reviewed Oct 1, 2025

View reviewed changes

Pugma requested changes Oct 2, 2025

View reviewed changes

marugorou added 2 commits October 10, 2025 14:06

Merge branch 'master' into fix/4606-sync-message-date-representation

81726a6

refactor: useDateRepresentation を新しいファイルに移動し、ミッドナイトイベントを追加

523d9e8

otukado requested a review from Pugma October 24, 2025 14:43

uni-kakurenbo mentioned this pull request Oct 28, 2025

optimize: 参照カウントと Effect Scope を用いてグローバルなイベント監視を効率化する #4890

Open

2 tasks

fix: 日をまたいだ際に日時の表示を更新するように修正 #4750

Are you sure you want to change the base?

fix: 日をまたいだ際に日時の表示を更新するように修正 #4750

Uh oh!

Conversation

marugorou commented Aug 11, 2025 • edited by ue-creates Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

概要

なぜこの PR を入れたいのか

動作確認の手順

UI 変更部分のスクリーンショット

before

after

PR を出す前の確認事項

見てほしいところ・聞きたいことなど

Uh oh!

github-actions bot commented Aug 11, 2025

Uh oh!

codecov bot commented Sep 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

Pugma left a comment

Choose a reason for hiding this comment

Uh oh!

Pugma Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

uni-kakurenbo Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

Pugma Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

uni-kakurenbo Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

marugorou Oct 4, 2025

Choose a reason for hiding this comment

Uh oh!

marugorou Oct 4, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

marugorou commented Aug 11, 2025 •

edited by ue-creates

Loading

codecov bot commented Sep 2, 2025 •

edited

Loading