2024.02.28
BLOG
【動画】Vue.jsを使ってWEBアプリ開発入門!時計アプリを作ろう/後編
2022-04-15
前回までの動画で、Vue.jsのcomputed()やmounted()を使用してコードを書いていくことで画面に時計を表示できました!
しかし完成品と比べるとデザインやアラーム機能ができていません。
3回目の今回は完成品どうりになるように学習を進めていきます!1回目、2回目をまだ見てないという方は以下から見ていただけると嬉しいです!
完成コードはブログした部分に記載しています!是非作ってみてください。
デザインの追加、アラーム機能の作成
完成までのステップは後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>
株式会社ロックシステム
「ブラック企業をやっつけろ!!」を企業理念にエンジニアが働きやすい環境をつきつめる大阪のシステム開発会社。2014年会社設立以来、残業時間ほぼゼロを達成し、高い従業員還元率でエンジニアファーストな会社としてIT業界に蔓延るブラックなイメージをホワイトに変えられる起爆剤となるべく日々活動中!絶賛エンジニア募集中。
他の記事へ
2023.10.23
【Lravel実践】WEBアプリを作りながらLravelを学ぶ【#5登録データの更新ページ編】
2023.08.18
2022年新人賞。挑戦と楽しさの詰まった軌跡
2023.03.10
【完成!!】ReactNativeで映画検索アプリを作ろう!#5ドロワー設定/TV番組API編
2021.03.05
【第6回】あなたも作れるスマホアプリ/Xamarin環境設定から徹底攻略!
2019.10.30
あなたの会社はブラック企業?ブラック企業と感じる3大要素を調査!
2019.09.09
社員旅行に行ってきました。2019in淡路島
2016.05.26