【動画】Vue.jsを使ってWEBアプリ開発入門！時計アプリを作ろう/後編

---

前回までの動画で、Vue.jsのcomputed()やmounted()を使用してコードを書いていくことで画面に時計を表示できました！
しかし完成品と比べるとデザインやアラーム機能ができていません。
3回目の今回は完成品どうりになるように学習を進めていきます！1回目、2回目をまだ見てないという方は以下から見ていただけると嬉しいです！
完成コードはブログした部分に記載しています！是非作ってみてください。

【Vue.js入門＃1】Vue.jsが便利！環境設定と基礎知識解説/WEBアプリを作ろう！
【Vue.js入門＃2】初心者でもできるWEB時計アプリを作ろう！前編

デザインの追加、アラーム機能の作成

完成までのステップは後2つ
STEP：Vue.jsのデザインのやり方
STEP：アラーム機能のためのボタンと設定

前回実装した時計アプリにCSSでデザインを加えて、アラーム機能を設定するという流れになります。

ポイントはクリックの処理！
Vue.jsにおいてクリックした時の処理を実行するためには”v-onディレクティブ”を利用します。
v-onディレクティブとはボタンをクリックしたら〇〇するというようにイベントが起きたときの処理を記述できるものです。
今回だとアラームを設定するボタンが押されたときにポップアップでメッセージを表示するために使います。
以下の処理が該当箇所です。

      <!--ボタンを追加-->
      <div class="button" v-on:click="showMessage()">
        <P>10秒後にアラームを設定</P>
      </div>

    // 10秒後にアラートを実行
    showMessage() {
      window.setTimeout(() => {
        alert("10秒経過しました");
      }, 10000);

完成コードはこちら！

App.vue

<template>
  <!-- components内で定義したVueファイルを記載 -->
  <Clock />
</template>

<script>
// 使用するVueファイルをインポート
import Clock from "./components/ClockScreen.vue";

// インポートしたVueファイルをcomponents内で定義
export default {
  name: "App",
  components: {
    Clock,
  },
};
</script>

<style>
html,
body {
  height: 100%;
  margin: unset;
}
#app {
  height: 100%;
}
</style>

ClockScreen.vue

<template>
  <div class="container">
    <div class="clock">
      <div class="date">
        <p>{{ year }}/{{ month }}/{{ day }}</p>
      </div>
      <div class="time">
        <p>
          {{ hours }}:{{ minutes }}<span class="seconds">:{{ seconds }}</span>
        </p>
      </div>
      <!--ボタンを追加-->
      <div class="button" v-on:click="showMessage()">
        <P>10秒後にアラームを設定</P>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ClockScreen",
  data() {
    return {
      //現在の日時を保持
      date: new Date(),
    };
  },
  computed: {
    //年
    year() {
      return this.date.getFullYear();
    },
    //月
    month() {
      return this.date.getMonth() + 1;
    },
    // 日
    day() {
      return this.dateTimePadding(this.date.getDate());
    },
    // 時
    hours() {
      return this.dateTimePadding(this.date.getHours());
    },
    // 分
    minutes() {
      return this.dateTimePadding(this.date.getMinutes());
    },
    // 秒
    seconds() {
      return this.dateTimePadding(this.date.getSeconds());
    },
  },
  mounted() {
    //現在日時をセット
    this.setDate();

    //1秒ごとにsetDate()を実行
    setInterval(() => this.setDate(), 1000);
  },
  methods: {
    // 日時を二桁に変換
    dateTimePadding(num) {
      return ("0" + num).slice(-2);
    },

    // 現在日時をセット
    setDate() {
      this.date = new Date();
    },

    // 10秒後にアラートを実行
    showMessage() {
      window.setTimeout(() => {
        alert("10秒経過しました");
      }, 10000);
    },
  },
};
</script>

<style scoped>
.container {
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background-color: #262626;
}
p {
  margin: 0px;
}
.date,
.time {
  font-weight: 700;
  color: #00ff01;
}
.date {
  font-size: 16px;
  text-align: right;
}
.time {
  font-size: 70px;
}
.seconds {
  font-size: 30px;
}
.button {
  border: 1px solid #fcfcfc;
  text-align: center;
  padding: 10px 0;
  color: #fcfcfc;
  cursor: pointer;
}
</style>