vue3でのカウントダウンタイマーの実装

クイズアプリ実装時の時間設定

vue3 Composition APIでのカウントダウンタイマーの実装を行ったので
自分が再度実装するときの記事として残しておきます。
javascriptなどでは情報があったのですがvueでは探しても見つからなかったので。

実装条件

カウントダウンは6分。
分、秒でカウントをしていき、5分00秒→4分59秒のようになる。

まずは全体コードを記載します。

script

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

const minutes = ref(6)
const seconds = ref(0)

let intervalId = null

const startTimer = () => {
  intervalId = setInterval(() => {
    if (minutes.value === 0 && seconds.value === 0) {
      clearInterval(intervalId)
      return
    }
    if (seconds.value === 0) {
      minutes.value--
      seconds.value = 59
    } else {
      seconds.value--
    }
  }, 1000)
}

const formattedTime = computed(() => {
  const formattedMinutes = minutes.value.toString().padStart(2, '0')
  const formattedSeconds = seconds.value.toString().padStart(2, '0')
  return `${formattedMinutes}:${formattedSeconds}`
})

onMounted(() => {
  startTimer()
})

template

<div>
      <div>残り時間</div>
      <div>{{ formattedTime }}</div>
</div>

文脈ごとに解説していきます。

const minutes = ref(6)
const seconds = ref(0)

minutesとsecondsと２つのリアクティブ変数を定義。ref(6)は初期値を6にしてタイマーを６分にします。

let intervalId = null

intervalIdという変数を定義して初期値をnullに。
後にsetIntervalId()の戻り値を割り当て、タイマーの戻り値を停止する。

const startTimer = () => {
  intervalId = setInterval(() => {
    if (minutes.value === 0 && seconds.value === 0) {
      clearInterval(intervalId)
      return
    }
    if (seconds.value === 0) {
      minutes.value--
      seconds.value = 59
    } else {
      seconds.value--
    }
  }, 1000)
}

カウントダウンの制御部分です。
startTimer関数を定義します。
intervalId = setInterval(() =>、setInterval()は指定された時間間隔ごとに指定された関数を実行するjavascript関数
アロー関数を使い中にタイマーロジックを実装。

if (minutes.value === 0 && seconds.value === 0)は
if文を使いminutes分が0かつsecondsが0になったとき、つまりタイマーが0分0秒になったとき、
clearInterval(intervalId)を使用してタイマーを停止します。
intervalIdをクリア。

if (seconds.value === 0) {
minutes.value--
seconds.value = 59
} else {
seconds.value--
}
はseconds(秒)が0かどうかを判断しています。0なら処理を実行。
minutes.valueを１減らす(5分00秒→4分59秒になる)。
seconds.value = 59は59にリセット（59秒になる）。
secondsが0でない場合はsecondsを１減らす（秒が１秒減る）。

}, 1000)
で1000ミリ秒（1秒）ごとに関数が実行される。

const formattedTime = computed(() => {
  const formattedMinutes = minutes.value.toString().padStart(2, '0')
  const formattedSeconds = seconds.value.toString().padStart(2, '0')
  return `${formattedMinutes}:${formattedSeconds}`
})

時間を分と秒で分けて表示します。
vue.js本体で用意されているcomputed()関数を利用してformattedTime計算プロパティを定義
ここではcomputed()関数は割愛しますが簡単に説明すると
ここでは計算結果をリアルタイムで表示してくれます。
computed()関数を使うためにimport { ref, computed } from 'vue'にします。

const formattedMinutes = minutes.value.toString().padStart(2, '0')
ではminutes(分)というリアクティブ変数が変更されるたびに自動計算される。
padStart(2, '0')は分を2桁の数字に変えています。
例えばコードを書かなければweb上の表示は05:59→5:59になる。
secondsも同様の処理を行います。
ruturnとして`${formattedMinutes}:${formattedSeconds}`web上の表示を2桁整数の分:秒で表示します。