Chapter 04

Vue.jsでデジタル時計を作る

かじるプログラミング
かじるプログラミング
2022.01.28に更新

Vue.jsでデジタル時計を作る

今回は、デジタル時計を作っていきます。
(前回の雛形をそのまま使って進めていきましょう)

ここでは、次の順番で解説していきますね。

  1. 時計で扱うデータを用意する
  2. 時刻を取得する関数を用意する
  3. 時刻を取得する処理を実装する
  4. CSSで見た目を整える

1, 時計で扱うデータを用意する

最初に2つのデータを用意します。
アプリ名、時計の文字列を格納する変数です。

main.js(抜粋)
// 1, Vue.jsで扱うデータを用意する
const myData = {
	appName: "My Clock",// アプリ名
	clock: "00:00:00"// 時計の文字列
}

HTMLファイルには、先程の変数を"Mustache構文"で埋め込んでいきます。

index.html(抜粋)
<div id="app">
	<p class="d-title">
		{{ appName }}
	</p>
	<p class="d-line-1">
		{{ clock }}
	</p>
</div>

この時点で実行すると、次の様な画面が現れます。(ここからスタートです!!)

2, 時刻を取得する関数を用意する

Vue.jsで使う関数は、全て"methods"の中に記述する約束になっています。
具体的には次の様な形です。(","カンマを忘れずに!!)

main.js(例)
methods:{
	myMethodA(){},
	myMethodB(){},
	myMethodC(){}
}

2-1, 関数の用意

時刻を取得する関数として"tick"関数を用意します。
この中に具体的な処理(時刻を取得する処理)を記述していきます。

main.js(抜粋)
methods:{
	tick(){// 現在時刻を取得する関数
		console.log("tick!!");
		// この部分に処理を実装していきます
	}
}

2-2, 関数の実行

Vue.jsが起動されると、自動的に"created"が実行されます。
このタイミングで"tick"関数を実行します。

main.js(抜粋)
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"オブジェクトを使う事で、簡単に年月日自分秒を取得する事ができます。
(このあたりはサラッと流しますね)

Date

具体的には次の様な形になります。

main.js
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ミリ秒後に実行される処理にします)

main.js(抜粋)
// 100ミリ秒経ったら1度だけ実行する
setTimeout(()=>{
	this.tick();// tick関数を実行する
}, 100);

よく似た機能として"setInterval"があります。
それぞれ次の様な違いがあるので覚えておきましょう。

指定時間経過後に一度だけ実行する場合:
setTimeout

指定時間経過後に繰り返し実行する場合:
setInterval

この状態で実行すると見事に時計が動き出します。(やりました!!)

4, CSSで見た目を整える

CSSを使う事で見た目を整える事ができます。(ここではCSSの解説は省略させていただきます)
本記事の最後に、全体のコードを載せておきますので参考にしてみてくださいね。

全体のコード

最後に全体のコードを載せておきますね。

index.html
<!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>
main.js
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を起動する

次回は、ニックネームメーカーを作っていきます。