Vue.jsでデジタル時計を作る
今回は、デジタル時計を作っていきます。
(前回の雛形をそのまま使って進めていきましょう)
ここでは、次の順番で解説していきますね。
- 時計で扱うデータを用意する
- 時刻を取得する関数を用意する
- 時刻を取得する処理を実装する
- CSSで見た目を整える
1, 時計で扱うデータを用意する
最初に2つのデータを用意します。
アプリ名、時計の文字列を格納する変数です。
// 1, Vue.jsで扱うデータを用意する
const myData = {
appName: "My Clock",// アプリ名
clock: "00:00:00"// 時計の文字列
}
HTMLファイルには、先程の変数を"Mustache構文"で埋め込んでいきます。
<div id="app">
<p class="d-title">
{{ appName }}
</p>
<p class="d-line-1">
{{ clock }}
</p>
</div>
この時点で実行すると、次の様な画面が現れます。(ここからスタートです!!)
2, 時刻を取得する関数を用意する
Vue.jsで使う関数は、全て"methods"の中に記述する約束になっています。
具体的には次の様な形です。(","カンマを忘れずに!!)
methods:{
myMethodA(){},
myMethodB(){},
myMethodC(){}
}
2-1, 関数の用意
時刻を取得する関数として"tick"関数を用意します。
この中に具体的な処理(時刻を取得する処理)を記述していきます。
methods:{
tick(){// 現在時刻を取得する関数
console.log("tick!!");
// この部分に処理を実装していきます
}
}
2-2, 関数の実行
Vue.jsが起動されると、自動的に"created"が実行されます。
このタイミングで"tick"関数を実行します。
created(){
console.log("created!!");
this.tick();// tick関数を実行する
},
2-3, "this"を使って変数や関数にアクセス
Vue.jsでは変数や関数に対して、
"this.clock"や"this.tick()"の様に"this"を使ってアクセスします。
とても重要なので忘れない様にしましょう。
3, 時刻を取得する処理を実装する
具体的な処理を"tick"関数の中に実装していきます。
このあたりは純粋なJavaScriptのAPIを利用します。
3-1, Dateオブジェクト
"Date"オブジェクトを使う事で、簡単に年月日自分秒を取得する事ができます。
(このあたりはサラッと流しますね)
具体的には次の様な形になります。
const date = new Date(); // Dateオブジェクトを作る
let h = date.getHours(); // 時(0 ~ 23までの数値)
let m = date.getMinutes();// 分(0 ~ 59までの数値)
let s = date.getSeconds();// 秒(0 ~ 59までの数値)
if(h < 10) h = "0" + h; // 10未満であれば頭に0を付ける
if(m < 10) m = "0" + m;
if(s < 10) s = "0" + s;
this.clock = h + ":" + m + ":" + s;// 文字列を結合する
Dateオブジェクトの取得後、自分秒の値が10未満(1桁)の場合は、
01, 02, 03...09の様に、頭に"0"を付ける処理を実装しています。
(ちょっとした工夫を入れておくと見た目が綺麗になりますね)
最後に、"this.clock"(thisを忘れずに!!)に対し、
文字列として連結した結果を格納しています。
3-2, setTimeoutで遅延実行
このままでは、起動時の時刻が表示されたままの"止まった時計"になってしまいます。
そこで、"setTimeout"を使って一定時間後に再び"tick"関数が実行される仕組みを実装します。
(今回は100ミリ秒後に実行される処理にします)
// 100ミリ秒経ったら1度だけ実行する
setTimeout(()=>{
this.tick();// tick関数を実行する
}, 100);
よく似た機能として"setInterval"があります。
それぞれ次の様な違いがあるので覚えておきましょう。
指定時間経過後に一度だけ実行する場合:
setTimeout
指定時間経過後に繰り返し実行する場合:
setInterval
この状態で実行すると見事に時計が動き出します。(やりました!!)
4, CSSで見た目を整える
CSSを使う事で見た目を整える事ができます。(ここではCSSの解説は省略させていただきます)
本記事の最後に、全体のコードを載せておきますので参考にしてみてくださいね。
全体のコード
最後に全体のコードを載せておきますね。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style type="text/css">
html, body, #app{
width: 100%; height: 100%;
margin: 0px; padding: 0px;
}
.d-title {
width: 100%; height: auto;
margin: 0px; padding: 30px 0px;
background-color: silver;
font-size: 2em;
text-align: center;
}
.d-line-1 {
width: 100%; height: auto;
margin: 0px; padding: 120px 0px;
background-color: lightgray;
text-align: center;
font-size: 8em;
font-weight: bold;
}
</style>
</head>
<body>
<div id="app">
<p class="d-title">
{{ appName }}
</p>
<p class="d-line-1">
{{ clock }}
</p>
</div>
<!-- JavaScript -->
<script src="//unpkg.com/vue@next" defer></script>
<script src="./main.js" defer></script>
</body>
</html>
console.log("main.js!!");
// 1, Vue.jsで扱うデータを用意する
const myData = {
appName: "My Clock",// アプリ名
clock: "00:00:00"// 時計の文字列
}
// 2, Vue.jsの準備をする
const app = Vue.createApp({
data(){
return myData;// 扱うデータを指定する
},
created(){
console.log("created!!");
this.tick();// tick関数を実行する
},
methods:{
tick(){// 現在時刻を取得する関数
console.log("tick!!");
const date = new Date(); // Dateオブジェクトを作る
let h = date.getHours(); // 時
let m = date.getMinutes();// 分
let s = date.getSeconds();// 秒
if(h < 10) h = "0" + h; // 10未満であれば頭に0を付ける
if(m < 10) m = "0" + m;
if(s < 10) s = "0" + s;
this.clock = h + ":" + m + ":" + s;// 文字列を結合する
// 100ミリ秒経ったら1度だけ実行する
setTimeout(()=>{
this.tick();// tick関数を実行する
}, 100);
}
}
});
app.mount("#app");// 3, Vue.jsを起動する
次回は、ニックネームメーカーを作っていきます。