Vue.js＋TypeScriptでデジタル時計を作る – その2
Vue.js＋TypeScript(Vue.ts？)でデジタル時計を作ったときの覚書。
前回プロジェクト作成まで行ったので、その続き。
実際にデジタル時計を作る。
前回はこちら
目次
現在のディレクトリ構成
vuets-clock
├── node_modules
├── public
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── HelloWorld.vue
│ ├── main.ts
│ └── shims-vue.d.ts
├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.jsonここから、今回のデジタル時計作成には必要ないものを削除する。
必要ないものを削除
src/assets/logo.png
Vue.jsのロゴ画像なので不要。
src/components/HelloWorld.vue
HelloWorld用のコンポーネントなので不要。
作成＆修正
デジタル時計用コンポーネントの作成
src/components/直下に、DigitalClock.vueを作成して以下のコードを記述。
setIntervalを使って、1秒ごとに時刻を取得して表示させている。
時：分：秒間のコロンは、CSSで表示させている。
<template>
<p class="digital-clock">
<span v-for="time in currentTime" :key="time" class="digital-clock__time">{{
time
}}</span>
</p>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "DigitalClock",
data() {
return {
currentTime: {
hours: "",
minutes: "",
seconds: "",
},
};
},
mounted: function () {
// 1秒ごとにupdateTimerを実行
let timerId = setInterval(this.updateTimer, 1000);
},
methods: {
updateTimer() {
// 現在時刻取得
const now: Date = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();
// 時間・分・秒は、0埋め
this.currentTime["hours"] = String(hours).padStart(2, "0");
this.currentTime["minutes"] = String(minutes).padStart(2, "0");
this.currentTime["seconds"] = String(seconds).padStart(2, "0");
},
},
});
</script>
<style lang="scss" scoped>
.digital-clock {
&__time {
font-size: 24px;
&:not(:last-child)::after {
content: ":";
display: inline-block;
}
}
}
</style>App.vueの修正
HelloWorldに関する記述を、DigitalClockに変更するだけ。
修正前
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
</template>
<script lang="ts">
import { defineComponent } from "vue";
import HelloWorld from "./components/HelloWorld.vue";
export default defineComponent({
name: "App",
components: {
HelloWorld,
},
});
</script>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>修正後
<template>
<DigitalClock />
</template>
<script lang="ts">
import { defineComponent } from "vue";
import DigitalClock from "@/components/DigitalClock.vue";
export default defineComponent({
name: "App",
components: {
DigitalClock,
},
});
</script>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
最終的なディレクトリ構成
vuets-clock
├── node_modules
├── public
├── src
│ ├── App.vue
│ ├── assets
│ ├── components
│ │ └── DigitalClock.vue
│ ├── main.ts
│ └── shims-vue.d.ts
├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json実行
npm run serve
ブラウザに、
http://localhost:8080/
でアクセスして表示されればOK。
