Vueで最初に作ったものがなぜかデジタル時計だったお話

Vueに触れ始めて少し経ったある日、

「Vueも少しずつ慣れてきたし、何か一つ自分で作ってみようかな。
でもそんなに難しいのはまだ無理だし…。
とりあえず時計作るか！！」

というわけでこんな感じのものができました。

少々ネタではありますが、学んだことを織り交ぜながら紹介していこうと思います。

構成図

図のようにコンポーネントを作って組み合わせていきます。

LightStick

オンで光ってオフで消える「光る棒！！」を作ります。

縦棒と横棒を選べるようにしておきます。

LightStick.vue

<template>
    <div class="stick" :class="[type, {light: light}]"  />
</template>

<script>
export default {
    props: {
        type: {
            typs: String,
            default: 'vertical'
        }
    },

    data() {
        return {
            light: false
        }
    },

    methods: {
        on() {
            this.light = true
        },

        off() {
            this.light = false
        }
    }
}
</script>

<style scoped>
.stick {
    background-color: rgba(200,255,200,0.2);
    border-radius: 10px;
}

.vertical {
    height: 50px;
    width: 10px;
}

.horizontal {
    height: 10px;
    width: 50px;
}

.light {
    background-color: yellowgreen;
}
</style>

NumberPanel

光る棒を組み合わせて数字の形を作ります。

あとは数字に合わせて「光棒何号」を光らせるかを決めるだけです。
「1」なら「いけ！！3号！！6号！！」といった具合です。

NumberPanel.vue

<template>
    <div class="number-panel">
        <light-stick type="horizontal" class="stick stick1" ref="stick1" />
        <light-stick type="vertical"   class="stick stick2" ref="stick2" />
        <light-stick type="vertical"   class="stick stick3" ref="stick3" />
        <light-stick type="horizontal" class="stick stick4" ref="stick4" />
        <light-stick type="vertical"   class="stick stick5" ref="stick5" />
        <light-stick type="vertical"   class="stick stick6" ref="stick6" />
        <light-stick type="horizontal" class="stick stick7" ref="stick7" />
    </div>
</template>

<script>
import LightStick from "./LightStick"

export default {
    components: {
        LightStick
    },

    props: {
        number: 0
    }, 

    watch: {  
        number() {   //numberの変更とともに表示
            this.display()
        }
    },

    mounted() {   //初期表示設定
        this.display()
    },

    methods: {
        display() {
            switch(this.number) {
                case 0: 
                    this.zero()
                    break
                case 1:
                    this.one()
                    break
                case 2:
                    this.two()
                    break
                case 3:
                    this.three()
                    break
                case 4:
                    this.four()
                    break
                case 5:
                    this.five()
                    break
                case 6:
                    this.six()
                    break
                case 7:
                    this.seven()
                    break
                case 8:
                    this.eight()
                    break
                case 9:
                    this.nine()
                    break
            }
        },

        clear() {
            this.$refs.stick1.off()  //子コンポーネントのメソッド呼び出しにはref属性を使用
            this.$refs.stick2.off()
            this.$refs.stick3.off()
            this.$refs.stick4.off()
            this.$refs.stick5.off()
            this.$refs.stick6.off()
            this.$refs.stick7.off()
        },

        one() {
            this.clear()
            this.$refs.stick3.on()
            this.$refs.stick6.on()
        },

        two() {
            this.clear()
            this.$refs.stick1.on()
            this.$refs.stick3.on()
            this.$refs.stick4.on()
            this.$refs.stick5.on()
            this.$refs.stick7.on()
        },

        three() {
            this.clear()
            this.$refs.stick1.on()
            this.$refs.stick3.on()
            this.$refs.stick4.on()
            this.$refs.stick6.on()
            this.$refs.stick7.on()
        },

        four() {
            this.clear()
            this.$refs.stick2.on()
            this.$refs.stick3.on()
            this.$refs.stick4.on()
            this.$refs.stick6.on()
        },

        five() {
            this.clear()
            this.$refs.stick1.on()
            this.$refs.stick2.on()
            this.$refs.stick4.on()
            this.$refs.stick6.on()
            this.$refs.stick7.on()
        },

        six() {
            this.clear()
            this.$refs.stick1.on()
            this.$refs.stick2.on()
            this.$refs.stick4.on()
            this.$refs.stick5.on()
            this.$refs.stick6.on()
            this.$refs.stick7.on()
        },

        seven() {
            this.clear()
            this.$refs.stick1.on()
            this.$refs.stick3.on()
            this.$refs.stick6.on()
        },

        eight() {
            this.clear()
            this.$refs.stick1.on()
            this.$refs.stick2.on()
            this.$refs.stick3.on()
            this.$refs.stick4.on()
            this.$refs.stick5.on()
            this.$refs.stick6.on()
            this.$refs.stick7.on()
        },

        nine() {
            this.clear()
            this.$refs.stick1.on()
            this.$refs.stick2.on()
            this.$refs.stick3.on()
            this.$refs.stick4.on()
            this.$refs.stick6.on()
            this.$refs.stick7.on()
        },

        zero() {
            this.clear()
            this.$refs.stick1.on()
            this.$refs.stick2.on()
            this.$refs.stick3.on()
            this.$refs.stick5.on()
            this.$refs.stick6.on()
            this.$refs.stick7.on()
        }

    }
}
</script>

<style scoped>
.number-panel {
    background-color: #222;
    position: relative;
    height: 130px;
    width: 70px;
}

.stick {
    position: absolute;
}

.stick1 {
    top: 0;
    left: 10px;
}

.stick2 {
    top: 10px;
    left: 0;
}

.stick3 {
    top: 10px;
    left: 60px;
}

.stick4 {
    top: 60px;
    left: 10px;
}

.stick5 {
    top: 70px;
    left: 0;
}

.stick6 {
    top: 70px;
    left: 60px;
}

.stick7 {
    top: 120px;
    left: 10px;
}
</style>

Separation

ただの区切りです。ハイ。

Separation.vue

<template>
    <div class="colon">
        <div class="circle" />
        <div class="circle" />
    </div>
</template>

<style scoped>
.circle {
    background-color: yellowgreen;
    border-radius: 5px;
    width: 10px;
    height: 10px;
}

.colon {
    height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
</style>

DigitalClock

NumberPanelとSeparationを並べて時計の形を作ります。

あとは時刻の各値をNumberPanelに割り当てればOKです。
時刻の取得については別途解説します。

DigitalClock.vue

<template>
    <div class="clock">
        <div class="display">
            <number-panel :number="hours2" />
            <number-panel :number="hours1" />
            <separation />
            <number-panel :number="minutes2" />
            <number-panel :number="minutes1" />
            <separation />
            <number-panel :number="seconds2" />
            <number-panel :number="seconds1" />
        </div>
    </div>
</template>

<script>
import NumberPanel from "./NumberPanel"
import Separation from "./Separation"
import moment from "moment"

export default {
    components: {
        NumberPanel,
        Separation
    },

    data() {
        return {
            time: undefined,
            intervalId: undefined
        }
    },

    methods: {
        setTime() {
            this.intervalId = setInterval(() => {
                this.time = new Date()
            }, 100)
        }
    },

    mounted() {
        this.setTime()
    },

    beforeDestroy() {
        clearInterval(this.intervalId)
    },

    computed: {
        hours1() {
            return moment(this.time).format("HH") % 10
        },

        hours2() {
            return Math.floor(moment(this.time).format("HH") / 10)
        },

        minutes1() {
            return moment(this.time).format("mm") % 10
        },

        minutes2() {
            return Math.floor(moment(this.time).format("mm") / 10)
        },

        seconds1() {
            return moment(this.time).format("ss") % 10
        },

        seconds2() {
            return Math.floor(moment(this.time).format("ss") / 10)
        }
    }
}
</script>

<style scoped>
.clock {
    background-color: #111;
    filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));
    padding: 50px;
}

.display {
    background-color: #222;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    width: 600px;
}    
</style>

setInterval

時計を実装するために一定間隔で時刻を取得する必要があります。
その時に使用するのがsetIntervalです。

data() {
    return {
        intervalId: undefined    //1. clearIntervalのためのIDを保持します
    }
},

methods: {
    do() {    //2. 一定間隔で処理を実行するためメソッドを用意します
        this.intervalId = setInterval(() => {  
            //処理内容
        }, 1000) //1秒間隔で処理
    }
},

mounted() {  //3. 上記で用意したメソッドをマウントのタイミングで呼び出します。
             //   これによりこのコンポーネントは一定間隔で処理を実行することになります。
    this.do()
},

beforeDestroy() {    //4. 使用後はしっかりとクリアする必要があります
    clearInterval(this.intervalId)
}

Moment.js

• Moment.js

$npm install moment

javascriptで日付処理を容易にするためのライブラリです。
今回はフォーマットで使用しています。
これ以上はすみませんが割愛します。

vue-momentというのもあるみたいです。
詳しくは見ていません。ハイ。

おわりに

フロント学び始めたばかりだけど自由度が高くて楽しい！！でも難しい！！

今回のももっといい方法があるかもしれませんが、棒を光らせたい！！という思いでこんな感じになってしまいました。

次はもっといいものを作りたいですね。