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

ロックシステムアカデミー！ゆっくりプログラミング学習

大阪福島にあるプログラミングスクール「ロックシステムアカデミー」です！「プログラミング作って実践」をテーマに楽しく分かりやすいアプリ開発のレクチャー動画をアップしていきます！ チャンネル登録よろしくお願いします！ プログラミングスクール ▼「ロックシステムアカデミー」WEBサイト https://rocksystem.co.jp/academy/

https://www.youtube.com/channel/UC6JxNQ2QTX8Dl96V2MMNP8A

今回使用したソースコードはこちらから！

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

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

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #fff;
  margin-top: 60px;
  background-color: #000;
}
</style>

<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>
  </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();
    },
  },
};
</script>

<style></style>