概要

特定の日まで何時何分何秒かを表示してリアルタイムでカウントダウンするアプリを Vue 3 で実装します。

Countdown コンポーネントの作成

まずは、src/componentsフォルダ下にCountdown.vueという名前でファイルを作成します。

そして、アプリで使用するデータを作っていきます。
ここではそれぞれの時間を保持する変数をrefを使って定義しています。
また、カウントダウンの基準となる日付用の変数 deadline も用意します。
今回は2022年のクリスマスを基準としました。

<script setup>
import { ref } from "vue"

const days = ref(0)
const hours = ref(0)
const minutes = ref(0)
const seconds = ref(0)

const deadline = "December, 25 2022"
</script>

<template>
  <div></div>
</template>

基準日から現在までの時間を算出する関数を作成

次に、基準日までの残り時間を算出するための関数を作っていきます。

残り時間は基準日から現在の時間を引いて求めます。
基準日は今のところ文字列なのでDate.parse()を使って数値に変換します。
現在の時間はDate.now()で取得できます。

残り時間を計算できたら、それぞれの時間を先ほど用意した変数に入れていきます。
計算された値は単位がミリ秒になっているので時間ごとに変換しています。

<script setup>
import { ref } from "vue"

const days = ref(0)
const hours = ref(0)
const minutes = ref(0)
const seconds = ref(0)

const deadline = "December, 25 2022"

const getTime = () => {
  const time = Date.parse(deadline) - Date.now()
  
  days.value = Math.floor(time / (1000 * 60 * 60 * 24))
  hours.value = Math.floor(time / (1000 * 60 * 60) % 24)
  minutes.value = Math.floor((time / 1000 / 60) % 60)
  seconds.value = Math.floor((time / 1000) % 60)
}
</script>

<template>
  <div></div>
</template>

残り時間をリアルタイムに反映させる

残り時間を算出する関数ができたので、こんどはそれをリアルタイムに反映されるよう処理を追加します。

関数を特定の間隔で実行させたい場合はsetIntervalを使います。
最初の引数には実行させたい関数を、2つ目の引数には間隔を指定します。
アプリでの表示は秒数まであるので1秒ごとに関数を実行させるようにしましょう。

最後のUnmountedはこのコンポーネントが破棄されるときに実行されるフックです。
clearIntervalで繰り返し動作の命令を解除しています。

<script setup>
import { ref, onUnmounted } from "vue"

const days = ref(0)
const hours = ref(0)
const minutes = ref(0)
const seconds = ref(0)

const deadline = "December, 25 2022"

const getTime = () => {
  const time = Date.parse(deadline) - Date.now()
  
  days.value = Math.floor(time / (1000 * 60 * 60 * 24))
  hours.value = Math.floor(time / (1000 * 60 * 60) % 24)
  minutes.value = Math.floor((time / 1000 / 60) % 60)
  seconds.value = Math.floor((time / 1000) % 60)
}

const timer = setInterval(() => getTime(), 1000)
onUnmounted(() => clearInterval(timer))
</script>

<template>
  <div></div>
</template>

完成

ここまででカウントダウンアプリの主なロジックは実装できました。
最後に、表示用のテンプレートを追加してCSSを当てたものが以下になります。