こんにちは！ケインコスゲです。
今日はシンプルに「Vue.jsでカレンダーをプラグインなしで作ってみた」というブログを書いてみたいと思います。
Vue.jsでカレンダーを作ろうとすると、色々プラグインだったり、自分で作ってみたというブログ記事を見かけるのですが、
今回のブログ記事はいわばその自分版です。笑
目次
Vue.jsでカレンダーをプラグインなしで作ってみた・具体的なコードについて
それでは早速ですが、Vue.jsでカレンダーをプラグインなしで作ってみたコードについて、掲載してみたいと思います。
今回のカレンダーでは、
- 左右の矢印で月を変更することができる
- 当日の色を変えることができる
- 土日は色を変更することができる
という最低限の機能を搭載してみました。
この手の実装は、HTML部分はtableタグを使って実装することが多そうなのですが、あえてdivだけを使ってみた結果、tableタグ関連を使って実際に自分でVue.jsカレンダーを作ってみたときより、少しだけスリムなコードを書くことができたような気はします。
Vue.jsでカレンダーをプラグインなしで作ってみて思った、「カレンダー作成はプログラムを学ぶのに良い題材」
実際にVue.jsでカレンダーを作ってみて思ったのですが、カレンダー作成はプログラム（とりわけJavaScript）を学ぶのにとっても良い題材だなと思いました。
- created、methods、computedなどのVue.js関連の一連の基礎が学べる（たぶんcomputed使わないと無理・・・）
- 祝日は色を変えたりするなど、機能追加をいくらでも行うことができ、その分だけ学べる要素が増える
- ES2015以降のコードを入れることでコードのスリム化や可読性向上などを行うことができる
などなど、実に色々な要素でプログラムを学ぶのに良い観点が盛り込まれていると思ったのです。
特に2つ目の、「機能追加をいくらでも行うことができる」というのはプログラムでカレンダー作成をするための良い機能だなと思いました。
カレンダーを使用するWebサービスって結構あったりすると思うのですが、色々なサービスを見てみると「あ、カレンダーにこんな機能を盛り込んでいるんだ」という発見をすることが良くあります。
実際に色々なWebサービスで見るカレンダーの機能を自分で真似して作ってみて、どんどん機能豊富なカレンダーを作ることで、プログラムがより学べるようになるわけなんですね！
まとめ
ということで今回は、「Vue.jsでカレンダーをプラグインなしで作ってみた」という内容のブログを書いてみました。
細かい解説をするときりがないので、今回のブログ記事ではあえて省きましたが、ぜひ気になる方はご自分でもプログラムでカレンダー作成をしてみてください！
プログラムを初めて間もないという方は、jQueryとかを使って書いてみても良いと思います！まずは作り上げることが大事です！
なお、今回のブログ記事は、気が向いたら機能追加をしたり、細かい解説をしてみたいなと思います。笑
