Vue.jsに触れよう8
公開日: 2025/1/28
Vue.jsを使ってカレンダーアプリを作成しました。
本記事では、アプリとコードの説明をしようと思います。
1. アプリについて
以上がカレンダーアプリです。今月分のカレンダー（2024年2月）が表示されます。
2. コードについて
以下が実際に書いたコードです。
calendar.html
calendar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calendar with Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<style>
.calendar {
border-collapse: collapse;
width: 100%;
}
.calendar th, .calendar td {
border: 1px solid #dddddd;
text-align: center;
padding: 8px;
}
.calendar th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div id="app">
<h1>Simple Calendar</h1>
<table class="calendar">
<thead>
<tr>
<th v-for="day in days" :key="day">{{ day }}</th>
</tr>
</thead>
<tbody>
<tr v-for="week in weeks" :key="week">
<td v-for="day in week" :key="day">{{ day }}</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
weeks: []
},
mounted() {
this.createCalendar();
},
methods: {
3. コードの説明
以下、コードの説明です。
headタグに文字コード、画面表示の設定、上部のタイトル、vue2の設定、cssの設定（styleタグ）が書かれています。
「border-collapse: collapse;」は、カレンダーの線の部分を重ねて表示させるために書きました。
「.calendar th, .calendar td」のところはカレンダーの線の部分の設定です。
薄い灰色ぐらいの色で描画し、テキストを中央に持っていき、8pxの間隔をあけるように指示しています。
また、上段の背景色を濃い灰色ぐらいに設定しています。
bodyタグの説明をします。
「<div id="app">」でvueを使えるようにしています。h1タグでタイトル、「<table class="calendar">」で先ほどのcssの指定がされるようにしています。
theadとtbodyで見出しと本体が区別されていて、th要素では曜日が、td要素では日付が表示されています。
scriptタグ内でVue.jsのコードが定義されています。
「new Vue()」でVueアプリケーションのインスタンスが作成されていて、elオプションでVueアプリケーションがマウントされる要素を指定しています。
mountedフックでは、Vueアプリケーションがマウントされたあとに「createCalendar」メソッドが呼び出されています。
このメソッドは現在の月の日数と最初の曜日からカレンダーの線の部分を生成します。
createCalendar()メソッドは、現在の日付を取得し、その月の日数と最初の曜日を計算します。
また、日付を週ごとに表に配置していきます。
最後にVue.jsのweeks配列に配置された週を追加します。
以上がコードの説明になります。
4. まとめ
いかがだったでしょうか。
本記事では、今月分のカレンダーを表示するプログラムをVue.jsで書きました。
自分の知っている知識でカレンダーのアプリを作れるとは思ってなかったので楽しかったです。
また、自分の苦手な範囲も分かってきました。
特にscriptタグ内のメソッドや、mountedフックの活用が人に説明できないので、今後も勉強していこうと思いました。
今後もこのようなプログラムを少しずつ公開していこうと思います。
本記事では、今月分のカレンダーを表示するプログラムをVue.jsで書きました。
自分の知っている知識でカレンダーのアプリを作れるとは思ってなかったので楽しかったです。
また、自分の苦手な範囲も分かってきました。
特にscriptタグ内のメソッドや、mountedフックの活用が人に説明できないので、今後も勉強していこうと思いました。
今後もこのようなプログラムを少しずつ公開していこうと思います。