アラーム機能のついたタイマー作成⏲

Timer

https://setalarm-timer.netlify.app/

github

https://github.com/airi-i-1998/timer

作成方法

① 現在日時の取得

const date = ref(new Date());

//年
const year = computed(() => date.value.getFullYear());
//月
const month = computed(() => date.value.getMonth() + 1);
//日
const day = computed(() => dateTimePadding(date.value.getDate()));
//時間
const hours = computed(() => dateTimePadding(date.value.getHours()));
//分
const minutes = computed(() => dateTimePadding(date.value.getMinutes()));
//秒
const seconds = computed(() => dateTimePadding(date.value.getSeconds()));

ref関数：
現在日時の取得をリアクティブなデータで取得しています。

computed関数：
データの変更に伴って自動的に再計算されるように設定しています。

② 日時を2桁に変換

function dateTimePadding(num) {
  return ("0" + num).slice(-2);
}

dateTimePadding関数：
引数として与えられた数値が1桁の場合に、前に0を追加して2桁の文字列に変換するための関数。

sliceメソッド：
文字列や配列から指定した範囲の部分を取り出すためのメソッド

slice(-2)を使用し、引数が1桁の場合には文字列の後ろから2桁目までを取り出しています。
例えば、dateTimePadding(9)の場合、結果は"09"となります。

③ 現在日時をセット

function setDate() {
  date.value = new Date();
}

onMounted(() => {
  setDate();
  setInterval(() => {
    date.value = new Date();
  }, 1000);
});

onMountedフック：
VueコンポーネントがDOMにマウントされた後に実行されるコードを記述するための仕組みのことで、簡単に説明すると、HTMLが読み込まれた際に実行される仕組みのことです。

setIntervalメソッド：
一定の間隔で指定された関数を繰り返し実行するためのJavaScriptのメソッド。

setDate関数でdate.valueに現在の日時がセットされています。
そして、onMountedフック内で初回の日時セットが行われ、その後はsetIntervalメソッドが1秒(1000ミリ秒後)ごとに新しい日時をdate.valueにセットしています。
※ このdate.valueは、ref関数で作成されたリアクティブなデータです。

setIntervalメソッドでdate.valueが変更されるたびに、関連する表示が更新され、現在の日時が表示されるようになります。
dateはref関数によってラップされているため、Vue.jsはdate.valueの変更を検知してコンポーネントの再描画を行います。
これにより、1秒ごとに新しい日時がセットされて表示が更新されます。

④　アラーム機能

<script setup>
const selectedTime = ref(10000);

function setAlarm() {
  window.setTimeout(() => {
    alert(`${selectedTime.value / 1000}秒経過しました！`);
  }, selectedTime.value);
}
</script>

<template>
    <div class="timer">
      <p class="set">
        <select v-model="selectedTime" class="set-time">
          <option value="10000">10秒</option>
          <option value="30000">30秒</option>
          <option value="60000">1分</option>
          <option value="300000">5分</option>
          <option value="600000">10分</option>
          <option value="1800000">30分</option>
        </select>
        後にアラーム
      </p>
      <span class="button" @click="setAlarm()">設定</span>
    </div>
</template>

v-model：
Vue.jsでデータの双方向バインディング（two-way binding）を実現するためのディレクティブです。これを使用すると、親コンポーネントと子コンポーネント間でデータを簡単に共有することができます。
window.setTimeout：
指定された時間が経過した後に、指定された関数やコードを一度だけ実行するJavaScriptのメソッド。
``

selectedTimeでデフォルトを10秒に設定しています。
v-model="selectedTime"を使用することで、selectedTimeという変数が<select>要素の値と双方向にバインディングされます。
これにより、<select>要素で選択されたオプションの値がselectedTimeに反映され、逆にselectedTimeの変更が<select>の選択肢に反映されます。

window.setTimeoutメソッドで、<select>要素で選択されたオプションの値が経過したら、アラームが表示されるように設定しています。

最後に

今回は、アラーム機能をつけたタイマーを作成してみましたが、まだまだJavascriptの知識不足やVue.jsの仕組み、機能の知識不足を感じています😅
日々努力をして少しずつでも前進し、たくさんの人の役に立てるようなAppが開発できるように頑張ります🦾🔥