JavaScriptのデータバインディングを使ったカレンダーアプリケーションの実装方法

JavaScriptのデータバインディングを活用したカレンダーアプリの開発手法について解説します。データバインディングは、ユーザーインターフェース（UI）とデータソースの間の自動同期を実現する技術です。これにより、ユーザーの入力やデータの変化が即座にUIに反映され、逆もまた然りです。本記事では、JavaScriptを用いたデータバインディングの基本から、実際にカレンダーアプリケーションを構築する具体的なステップまでを詳細に説明します。特に、カレンダーにイベントを追加、編集、削除する機能や、データの保存と読み込みを通じて、効率的で使いやすいアプリケーションを作成する方法を学びます。初心者から中級者まで、JavaScriptのスキルを向上させるための実践的なガイドとして役立ててください。

データバインディングとは

データバインディングとは、ユーザーインターフェース（UI）とデータソースの間の自動的なデータ同期を実現する技術です。この技術を用いることで、データの変化が即座にUIに反映され、逆にUIの変更もデータソースに反映されます。

データバインディングの重要性

データバインディングの重要性は以下の点にあります。

リアルタイムのデータ更新

データバインディングを用いることで、ユーザーが入力したデータや外部データの変更がリアルタイムでUIに反映されます。これにより、ユーザー体験が向上し、アプリケーションの使いやすさが大幅に向上します。

コードの簡潔化

データバインディングを活用することで、データの更新に関する冗長なコードを削減でき、よりシンプルでメンテナンスしやすいコードを書くことができます。

エラーの減少

自動同期により、手動でデータとUIの同期を取る際に発生しがちなエラーを減少させることができます。

データバインディングの種類

データバインディングにはいくつかの種類がありますが、主に以下の2つがよく使われます。

片方向データバインディング

片方向データバインディングでは、データソースからUIへの一方向のデータの流れが実現されます。UIはデータソースの変化に応じて更新されますが、UIの変更はデータソースに影響を与えません。

双方向データバインディング

双方向データバインディングでは、データソースとUIの間で双方向のデータの流れが実現されます。データソースの変更はUIに反映され、UIの変更もデータソースに反映されます。これにより、よりインタラクティブなアプリケーションを構築することができます。

データバインディングは、モダンなWebアプリケーションにおいて不可欠な技術であり、効率的なデータ管理とユーザー体験の向上を実現します。本記事では、JavaScriptを用いたデータバインディングの実装方法について詳しく解説します。

必要なツールとライブラリ

カレンダーアプリケーションを実装するために必要なツールとライブラリを紹介します。これらのツールを使用することで、効率的に開発を進めることができます。

必要なツール

以下のツールがカレンダーアプリケーションの開発に必要です。

コードエディタ

コードを書くためのエディタとして、Visual Studio CodeやAtomなどのエディタを使用します。これらのエディタは、多くのプラグインや拡張機能があり、開発をサポートしてくれます。

バージョン管理システム

Gitを使用して、プロジェクトのバージョン管理を行います。GitHubやGitLabなどのリポジトリサービスを利用することで、コードの管理と共有が容易になります。

Webブラウザ

開発したカレンダーアプリケーションをテストするためのブラウザとして、Google ChromeやMozilla Firefoxを使用します。これらのブラウザには、デベロッパーツールが組み込まれており、デバッグやパフォーマンスの測定が可能です。

必要なライブラリ

以下のライブラリを使用して、カレンダーアプリケーションを構築します。

Vue.js

データバインディングを実現するために、Vue.jsを使用します。Vue.jsは、シンプルで柔軟なJavaScriptフレームワークであり、双方向データバインディングが簡単に実装できます。

Moment.js

日付と時間の操作を簡単に行うために、Moment.jsを使用します。このライブラリは、日付のフォーマットや計算を容易にし、カレンダーアプリケーションの開発に非常に便利です。

Vuex

アプリケーションの状態管理を効率的に行うために、Vuexを使用します。Vuexは、Vue.jsの公式状態管理ライブラリであり、アプリケーションのスケールが大きくなっても管理がしやすくなります。

LocalForage

ブラウザのローカルストレージを簡単に操作するために、LocalForageを使用します。これにより、イベントデータをローカルストレージに保存し、アプリケーションのデータを永続化することができます。

これらのツールとライブラリをセットアップし、次のステップでカレンダーアプリケーションのプロジェクトを開始する準備を整えましょう。

プロジェクトのセットアップ

カレンダーアプリケーションのプロジェクトをセットアップするための手順を詳しく解説します。これにより、開発環境を整え、実装をスムーズに進めることができます。

1. プロジェクトディレクトリの作成

まず、カレンダーアプリケーション用の新しいディレクトリを作成します。コマンドラインを開き、以下のコマンドを実行します。

mkdir calendar-app
cd calendar-app

2. Vue CLIのインストール

次に、Vue CLIをインストールします。Vue CLIは、Vue.jsプロジェクトの初期設定や構成を簡単に行うためのツールです。

npm install -g @vue/cli

3. 新しいVueプロジェクトの作成

Vue CLIを使用して、新しいVueプロジェクトを作成します。プロジェクト名はcalendar-appとします。

vue create calendar-app

プロンプトに従い、必要な設定を選択します。基本的にはデフォルトの設定で問題ありませんが、Vuexを使う場合は、Vuexを選択してください。

4. プロジェクトのディレクトリに移動

プロジェクトのディレクトリに移動します。

cd calendar-app

5. 必要なライブラリのインストール

Moment.js、LocalForageをインストールします。これにより、日付操作とローカルストレージ操作が容易になります。

npm install moment localforage

6. プロジェクトの初期設定

プロジェクトの初期設定を行います。これには、Vuexの設定や基本的なディレクトリ構造の確認が含まれます。

srcディレクトリ内にstoreディレクトリを作成し、index.jsファイルを作成します。このファイルでVuexのストアを設定します。
srcディレクトリ内にcomponentsディレクトリを作成し、カレンダーの基本コンポーネントを作成します。

7. 開発サーバーの起動

開発サーバーを起動して、プロジェクトが正しくセットアップされていることを確認します。

npm run serve

ブラウザでhttp://localhost:8080にアクセスし、初期のVueアプリケーションが表示されることを確認します。

これで、プロジェクトのセットアップが完了しました。次に、カレンダーの基本構造を作成し、データバインディングの実装を進めていきます。

カレンダーの基本構造

カレンダーアプリケーションの基本的なHTML構造とCSSの設定方法を説明します。これにより、カレンダーの見た目を整え、次のステップでデータバインディングを実装するための土台を作ります。

1. 基本的なHTML構造の作成

まず、カレンダーの基本的なHTML構造を作成します。src/componentsディレクトリ内にCalendar.vueというファイルを作成し、以下のコードを追加します。

<template>
  <div class="calendar">
    <div class="calendar-header">
      <button @click="prevMonth">Prev</button>
      <h2>{{ currentMonth }} {{ currentYear }}</h2>
      <button @click="nextMonth">Next</button>
    </div>
    <div class="calendar-body">
      <div class="calendar-weekdays">
        <div v-for="day in weekdays" :key="day" class="calendar-weekday">
          {{ day }}
        </div>
      </div>
      <div class="calendar-days">
        <div
          v-for="day in days"
          :key="day.date"
          :class="['calendar-day', { 'calendar-day--today': day.isToday }]"
        >
          {{ day.date }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  data() {
    return {
      currentYear: moment().year(),
      currentMonth: moment().format('MMMM'),
      weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      days: this.generateDays()
    };
  },
  methods: {
    prevMonth() {
      // 前月への移動ロジック
    },
    nextMonth() {
      // 次月への移動ロジック
    },
    generateDays() {
      // カレンダーの日付生成ロジック
    }
  }
};
</script>

<style scoped>
.calendar {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calendar-body {
  display: flex;
  flex-direction: column;
}

.calendar-weekdays, .calendar-days {
  display: flex;
  flex-wrap: wrap;
}

.calendar-weekday, .calendar-day {
  width: calc(100% / 7);
  text-align: center;
  padding: 10px;
}

.calendar-day--today {
  background-color: #ffeb3b;
}
</style>

2. カレンダーのCSSスタイル設定

カレンダーのスタイルを設定して、見やすく整えます。上記のコード内で<style scoped>タグ内にCSSを追加しています。scoped属性を使うことで、スタイルがこのコンポーネントにのみ適用されます。

3. カレンダーのロジック実装

カレンダーの日付を生成するロジックを実装します。generateDaysメソッド内に日付生成のコードを追加します。

methods: {
  generateDays() {
    const startOfMonth = moment().startOf('month');
    const endOfMonth = moment().endOf('month');
    const days = [];

    for (let date = startOfMonth.clone(); date.isBefore(endOfMonth); date.add(1, 'day')) {
      days.push({
        date: date.date(),
        isToday: date.isSame(moment(), 'day')
      });
    }

    return days;
  }
}

このメソッドは、月の最初の日から最後の日までをループし、それぞれの日付をdays配列に追加します。

4. 月の切り替え機能の実装

前月と次月に移動するボタンの機能を実装します。

methods: {
  prevMonth() {
    this.currentMonth = moment(this.currentMonth, 'MMMM').subtract(1, 'month').format('MMMM');
    this.currentYear = moment(this.currentYear, 'YYYY').subtract(1, 'month').year();
    this.days = this.generateDays();
  },
  nextMonth() {
    this.currentMonth = moment(this.currentMonth, 'MMMM').add(1, 'month').format('MMMM');
    this.currentYear = moment(this.currentYear, 'YYYY').add(1, 'month').year();
    this.days = this.generateDays();
  }
}

これで、カレンダーの基本構造が完成しました。次は、データバインディングの具体的な実装方法について説明します。

データバインディングの実装

カレンダーアプリケーションにデータバインディングを実装することで、UIとデータの同期を自動化し、ユーザーインターフェースの応答性を高めます。ここでは、Vue.jsを使用してデータバインディングを実現する具体的な方法を説明します。

1. Vuexのセットアップ

アプリケーションの状態管理のために、Vuexを使用します。まず、Vuexをプロジェクトにインストールします。

npm install vuex

次に、src/store/index.jsに以下の内容を追加して、ストアを設定します。

import Vue from 'vue';
import Vuex from 'vuex';
import moment from 'moment';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    currentYear: moment().year(),
    currentMonth: moment().month(),
    events: []
  },
  mutations: {
    setYear(state, year) {
      state.currentYear = year;
    },
    setMonth(state, month) {
      state.currentMonth = month;
    },
    addEvent(state, event) {
      state.events.push(event);
    },
    removeEvent(state, eventId) {
      state.events = state.events.filter(event => event.id !== eventId);
    },
    updateEvent(state, updatedEvent) {
      const index = state.events.findIndex(event => event.id === updatedEvent.id);
      if (index !== -1) {
        Vue.set(state.events, index, updatedEvent);
      }
    }
  },
  actions: {
    prevMonth({ commit, state }) {
      const newDate = moment().year(state.currentYear).month(state.currentMonth).subtract(1, 'month');
      commit('setYear', newDate.year());
      commit('setMonth', newDate.month());
    },
    nextMonth({ commit, state }) {
      const newDate = moment().year(state.currentYear).month(state.currentMonth).add(1, 'month');
      commit('setYear', newDate.year());
      commit('setMonth', newDate.month());
    },
    addEvent({ commit }, event) {
      commit('addEvent', event);
    },
    removeEvent({ commit }, eventId) {
      commit('removeEvent', eventId);
    },
    updateEvent({ commit }, updatedEvent) {
      commit('updateEvent', updatedEvent);
    }
  },
  getters: {
    currentMonth: state => moment().month(state.currentMonth).format('MMMM'),
    currentYear: state => state.currentYear,
    events: state => state.events
  }
});

2. ストアの使用

カレンダーコンポーネントでVuexストアを使用してデータバインディングを実現します。Calendar.vueを以下のように修正します。

<template>
  <div class="calendar">
    <div class="calendar-header">
      <button @click="prevMonth">Prev</button>
      <h2>{{ currentMonth }} {{ currentYear }}</h2>
      <button @click="nextMonth">Next</button>
    </div>
    <div class="calendar-body">
      <div class="calendar-weekdays">
        <div v-for="day in weekdays" :key="day" class="calendar-weekday">
          {{ day }}
        </div>
      </div>
      <div class="calendar-days">
        <div
          v-for="day in days"
          :key="day.date"
          :class="['calendar-day', { 'calendar-day--today': day.isToday }]"
        >
          {{ day.date }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['currentYear', 'currentMonth']),
    ...mapGetters(['events']),
    weekdays() {
      return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    },
    days() {
      const startOfMonth = moment().year(this.currentYear).month(this.currentMonth).startOf('month');
      const endOfMonth = moment().year(this.currentYear).month(this.currentMonth).endOf('month');
      const days = [];

      for (let date = startOfMonth.clone(); date.isBefore(endOfMonth); date.add(1, 'day')) {
        days.push({
          date: date.date(),
          isToday: date.isSame(moment(), 'day')
        });
      }

      return days;
    }
  },
  methods: {
    ...mapActions(['prevMonth', 'nextMonth']),
  }
};
</script>

<style scoped>
/* スタイルは以前と同様 */
</style>

3. データバインディングの動作確認

開発サーバーを再度起動し、ブラウザでhttp://localhost:8080にアクセスします。前月、次月ボタンをクリックして、カレンダーが正しく切り替わることを確認します。

npm run serve

以上で、カレンダーアプリケーションにデータバインディングを実装する方法を説明しました。次に、カレンダーにイベントを追加する機能を実装します。

イベントの追加機能

ユーザーがカレンダーにイベントを追加できる機能を実装します。この機能により、ユーザーが特定の日付にイベントを登録し、カレンダーに表示できるようになります。

1. イベント追加フォームの作成

まず、カレンダーにイベントを追加するためのフォームを作成します。Calendar.vueに以下のコードを追加します。

<template>
  <div class="calendar">
    <div class="calendar-header">
      <button @click="prevMonth">Prev</button>
      <h2>{{ currentMonth }} {{ currentYear }}</h2>
      <button @click="nextMonth">Next</button>
    </div>
    <div class="calendar-body">
      <div class="calendar-weekdays">
        <div v-for="day in weekdays" :key="day" class="calendar-weekday">
          {{ day }}
        </div>
      </div>
      <div class="calendar-days">
        <div
          v-for="day in days"
          :key="day.date"
          :class="['calendar-day', { 'calendar-day--today': day.isToday }]"
          @click="selectDate(day)"
        >
          {{ day.date }}
        </div>
      </div>
    </div>
    <div class="event-form">
      <h3>Add Event</h3>
      <form @submit.prevent="addEvent">
        <input type="text" v-model="eventTitle" placeholder="Event Title" required />
        <input type="date" v-model="eventDate" required />
        <button type="submit">Add Event</button>
      </form>
    </div>
    <div class="event-list">
      <h3>Events</h3>
      <ul>
        <li v-for="event in events" :key="event.id">
          {{ event.title }} on {{ event.date }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import { mapState, mapGetters, mapActions } from 'vuex';
import { v4 as uuidv4 } from 'uuid';

export default {
  data() {
    return {
      eventTitle: '',
      eventDate: ''
    };
  },
  computed: {
    ...mapState(['currentYear', 'currentMonth']),
    ...mapGetters(['events']),
    weekdays() {
      return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    },
    days() {
      const startOfMonth = moment().year(this.currentYear).month(this.currentMonth).startOf('month');
      const endOfMonth = moment().year(this.currentYear).month(this.currentMonth).endOf('month');
      const days = [];

      for (let date = startOfMonth.clone(); date.isBefore(endOfMonth); date.add(1, 'day')) {
        days.push({
          date: date.date(),
          isToday: date.isSame(moment(), 'day')
        });
      }

      return days;
    }
  },
  methods: {
    ...mapActions(['prevMonth', 'nextMonth', 'addEvent']),
    selectDate(day) {
      this.eventDate = moment().year(this.currentYear).month(this.currentMonth).date(day.date).format('YYYY-MM-DD');
    },
    addEvent() {
      const event = {
        id: uuidv4(),
        title: this.eventTitle,
        date: this.eventDate
      };
      this.$store.dispatch('addEvent', event);
      this.eventTitle = '';
      this.eventDate = '';
    }
  }
};
</script>

<style scoped>
/* スタイルは以前と同様 */
.event-form {
  margin-top: 20px;
}

.event-list {
  margin-top: 20px;
}
</style>

2. Vuexストアの更新

src/store/index.jsにイベントを追加するアクションとミューテーションを追加します。

export default new Vuex.Store({
  state: {
    currentYear: moment().year(),
    currentMonth: moment().month(),
    events: []
  },
  mutations: {
    setYear(state, year) {
      state.currentYear = year;
    },
    setMonth(state, month) {
      state.currentMonth = month;
    },
    addEvent(state, event) {
      state.events.push(event);
    },
    removeEvent(state, eventId) {
      state.events = state.events.filter(event => event.id !== eventId);
    },
    updateEvent(state, updatedEvent) {
      const index = state.events.findIndex(event => event.id === updatedEvent.id);
      if (index !== -1) {
        Vue.set(state.events, index, updatedEvent);
      }
    }
  },
  actions: {
    prevMonth({ commit, state }) {
      const newDate = moment().year(state.currentYear).month(state.currentMonth).subtract(1, 'month');
      commit('setYear', newDate.year());
      commit('setMonth', newDate.month());
    },
    nextMonth({ commit, state }) {
      const newDate = moment().year(state.currentYear).month(state.currentMonth).add(1, 'month');
      commit('setYear', newDate.year());
      commit('setMonth', newDate.month());
    },
    addEvent({ commit }, event) {
      commit('addEvent', event);
    },
    removeEvent({ commit }, eventId) {
      commit('removeEvent', eventId);
    },
    updateEvent({ commit }, updatedEvent) {
      commit('updateEvent', updatedEvent);
    }
  },
  getters: {
    currentMonth: state => moment().month(state.currentMonth).format('MMMM'),
    currentYear: state => state.currentYear,
    events: state => state.events
  }
});

3. イベントの表示と確認

開発サーバーを再度起動し、ブラウザでhttp://localhost:8080にアクセスします。イベントを追加するフォームにタイトルと日付を入力して「Add Event」ボタンをクリックすると、カレンダーにイベントが追加され、イベントリストに表示されます。

npm run serve

これで、ユーザーがカレンダーにイベントを追加する機能が実装されました。次は、イベントデータの保存と読み込みについて説明します。

データの保存と読み込み

ローカルストレージを使用して、カレンダーのイベントデータを保存し、再読み込み時にデータを保持する方法を説明します。これにより、ユーザーが追加したイベントがページの再読み込み後も保持されます。

1. LocalForageのセットアップ

まず、LocalForageライブラリを使用してローカルストレージ操作を簡単に行えるようにします。LocalForageは、IndexedDB、WebSQL、およびLocalStorageを抽象化し、統一されたAPIを提供します。

npm install localforage

2. LocalForageの初期化

src/store/index.jsにLocalForageをインポートし、イベントデータの保存と読み込みのロジックを追加します。

import Vue from 'vue';
import Vuex from 'vuex';
import moment from 'moment';
import localforage from 'localforage';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    currentYear: moment().year(),
    currentMonth: moment().month(),
    events: []
  },
  mutations: {
    setYear(state, year) {
      state.currentYear = year;
    },
    setMonth(state, month) {
      state.currentMonth = month;
    },
    setEvents(state, events) {
      state.events = events;
    },
    addEvent(state, event) {
      state.events.push(event);
    },
    removeEvent(state, eventId) {
      state.events = state.events.filter(event => event.id !== eventId);
    },
    updateEvent(state, updatedEvent) {
      const index = state.events.findIndex(event => event.id === updatedEvent.id);
      if (index !== -1) {
        Vue.set(state.events, index, updatedEvent);
      }
    }
  },
  actions: {
    async loadEvents({ commit }) {
      const events = await localforage.getItem('events');
      if (events) {
        commit('setEvents', events);
      }
    },
    async saveEvents({ state }) {
      await localforage.setItem('events', state.events);
    },
    prevMonth({ commit, state, dispatch }) {
      const newDate = moment().year(state.currentYear).month(state.currentMonth).subtract(1, 'month');
      commit('setYear', newDate.year());
      commit('setMonth', newDate.month());
      dispatch('saveEvents');
    },
    nextMonth({ commit, state, dispatch }) {
      const newDate = moment().year(state.currentYear).month(state.currentMonth).add(1, 'month');
      commit('setYear', newDate.year());
      commit('setMonth', newDate.month());
      dispatch('saveEvents');
    },
    async addEvent({ commit, dispatch }, event) {
      commit('addEvent', event);
      await dispatch('saveEvents');
    },
    async removeEvent({ commit, dispatch }, eventId) {
      commit('removeEvent', eventId);
      await dispatch('saveEvents');
    },
    async updateEvent({ commit, dispatch }, updatedEvent) {
      commit('updateEvent', updatedEvent);
      await dispatch('saveEvents');
    }
  },
  getters: {
    currentMonth: state => moment().month(state.currentMonth).format('MMMM'),
    currentYear: state => state.currentYear,
    events: state => state.events
  }
});

store.dispatch('loadEvents');

export default store;

3. カレンダーコンポーネントの更新

Calendar.vueに変更はありませんが、イベントが追加・削除されると自動的にローカルストレージに保存されるようになります。念のため、Vuexストアの初期化時にイベントをロードするように設定しました。

4. データ保存の動作確認

開発サーバーを再起動し、ブラウザでhttp://localhost:8080にアクセスします。イベントを追加してページを再読み込みすると、追加したイベントが保持されていることを確認します。

npm run serve

これで、カレンダーアプリケーションがローカルストレージを使用してイベントデータを保存し、再読み込み時にもデータを保持できるようになりました。次に、特定の日付をハイライトする機能を実装します。

日付のハイライト機能

特定の日付をハイライトする機能を実装することで、重要なイベントや特別な日付を視覚的に強調できます。ここでは、ユーザーがイベントを追加した日付をハイライトする方法を説明します。

1. ハイライト用のCSSクラス追加

まず、ハイライト用のCSSクラスをCalendar.vueに追加します。

<style scoped>
/* 既存のスタイルはそのまま */
.calendar {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calendar-body {
  display: flex;
  flex-direction: column;
}

.calendar-weekdays, .calendar-days {
  display: flex;
  flex-wrap: wrap;
}

.calendar-weekday, .calendar-day {
  width: calc(100% / 7);
  text-align: center;
  padding: 10px;
}

.calendar-day--today {
  background-color: #ffeb3b;
}

.calendar-day--highlight {
  background-color: #80deea;
}
</style>

calendar-day--highlightクラスは、特定の日付をハイライトするためのスタイルです。

2. 日付ハイライトのロジック追加

次に、カレンダーの日付を生成する際に、イベントが存在する日付をハイライトするロジックを追加します。

<template>
  <div class="calendar">
    <div class="calendar-header">
      <button @click="prevMonth">Prev</button>
      <h2>{{ currentMonth }} {{ currentYear }}</h2>
      <button @click="nextMonth">Next</button>
    </div>
    <div class="calendar-body">
      <div class="calendar-weekdays">
        <div v-for="day in weekdays" :key="day" class="calendar-weekday">
          {{ day }}
        </div>
      </div>
      <div class="calendar-days">
        <div
          v-for="day in days"
          :key="day.date"
          :class="['calendar-day', { 'calendar-day--today': day.isToday, 'calendar-day--highlight': day.hasEvent }]"
          @click="selectDate(day)"
        >
          {{ day.date }}
        </div>
      </div>
    </div>
    <div class="event-form">
      <h3>Add Event</h3>
      <form @submit.prevent="addEvent">
        <input type="text" v-model="eventTitle" placeholder="Event Title" required />
        <input type="date" v-model="eventDate" required />
        <button type="submit">Add Event</button>
      </form>
    </div>
    <div class="event-list">
      <h3>Events</h3>
      <ul>
        <li v-for="event in events" :key="event.id">
          {{ event.title }} on {{ event.date }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import { mapState, mapGetters, mapActions } from 'vuex';
import { v4 as uuidv4 } from 'uuid';

export default {
  data() {
    return {
      eventTitle: '',
      eventDate: ''
    };
  },
  computed: {
    ...mapState(['currentYear', 'currentMonth']),
    ...mapGetters(['events']),
    weekdays() {
      return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    },
    days() {
      const startOfMonth = moment().year(this.currentYear).month(this.currentMonth).startOf('month');
      const endOfMonth = moment().year(this.currentYear).month(this.currentMonth).endOf('month');
      const days = [];

      for (let date = startOfMonth.clone(); date.isBefore(endOfMonth); date.add(1, 'day')) {
        const formattedDate = date.format('YYYY-MM-DD');
        const hasEvent = this.events.some(event => event.date === formattedDate);
        days.push({
          date: date.date(),
          isToday: date.isSame(moment(), 'day'),
          hasEvent: hasEvent
        });
      }

      return days;
    }
  },
  methods: {
    ...mapActions(['prevMonth', 'nextMonth', 'addEvent']),
    selectDate(day) {
      this.eventDate = moment().year(this.currentYear).month(this.currentMonth).date(day.date).format('YYYY-MM-DD');
    },
    addEvent() {
      const event = {
        id: uuidv4(),
        title: this.eventTitle,
        date: this.eventDate
      };
      this.$store.dispatch('addEvent', event);
      this.eventTitle = '';
      this.eventDate = '';
    }
  }
};
</script>

このコードでは、daysコンピューテッドプロパティ内で各日付に対してイベントがあるかどうかをチェックし、hasEventプロパティを設定しています。calendar-dayクラスにcalendar-day--highlightクラスを動的に追加することで、イベントがある日付をハイライトします。

3. ハイライト機能の動作確認

開発サーバーを再起動し、ブラウザでhttp://localhost:8080にアクセスします。イベントを追加すると、その日付がハイライトされることを確認します。

npm run serve

これで、カレンダーアプリケーションに日付のハイライト機能が追加されました。次は、既存のイベントを編集および削除する機能の実装について説明します。

イベントの編集と削除

既存のイベントを編集および削除する機能を実装します。これにより、ユーザーは追加したイベントを後から変更したり削除したりすることができるようになります。

1. イベントの編集フォームの作成

まず、カレンダーにイベントを編集するためのフォームを追加します。Calendar.vueに以下のコードを追加します。

<template>
  <div class="calendar">
    <div class="calendar-header">
      <button @click="prevMonth">Prev</button>
      <h2>{{ currentMonth }} {{ currentYear }}</h2>
      <button @click="nextMonth">Next</button>
    </div>
    <div class="calendar-body">
      <div class="calendar-weekdays">
        <div v-for="day in weekdays" :key="day" class="calendar-weekday">
          {{ day }}
        </div>
      </div>
      <div class="calendar-days">
        <div
          v-for="day in days"
          :key="day.date"
          :class="['calendar-day', { 'calendar-day--today': day.isToday, 'calendar-day--highlight': day.hasEvent }]"
          @click="selectDate(day)"
        >
          {{ day.date }}
        </div>
      </div>
    </div>
    <div class="event-form">
      <h3>Add Event</h3>
      <form @submit.prevent="addEvent">
        <input type="text" v-model="eventTitle" placeholder="Event Title" required />
        <input type="date" v-model="eventDate" required />
        <button type="submit">Add Event</button>
      </form>
    </div>
    <div class="event-list">
      <h3>Events</h3>
      <ul>
        <li v-for="event in events" :key="event.id">
          {{ event.title }} on {{ event.date }}
          <button @click="editEvent(event)">Edit</button>
          <button @click="deleteEvent(event.id)">Delete</button>
        </li>
      </ul>
      <div v-if="isEditing" class="edit-form">
        <h3>Edit Event</h3>
        <form @submit.prevent="updateEvent">
          <input type="text" v-model="editEventTitle" placeholder="Event Title" required />
          <input type="date" v-model="editEventDate" required />
          <button type="submit">Update Event</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import { mapState, mapGetters, mapActions } from 'vuex';
import { v4 as uuidv4 } from 'uuid';

export default {
  data() {
    return {
      eventTitle: '',
      eventDate: '',
      isEditing: false,
      editEventId: null,
      editEventTitle: '',
      editEventDate: ''
    };
  },
  computed: {
    ...mapState(['currentYear', 'currentMonth']),
    ...mapGetters(['events']),
    weekdays() {
      return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    },
    days() {
      const startOfMonth = moment().year(this.currentYear).month(this.currentMonth).startOf('month');
      const endOfMonth = moment().year(this.currentYear).month(this.currentMonth).endOf('month');
      const days = [];

      for (let date = startOfMonth.clone(); date.isBefore(endOfMonth); date.add(1, 'day')) {
        const formattedDate = date.format('YYYY-MM-DD');
        const hasEvent = this.events.some(event => event.date === formattedDate);
        days.push({
          date: date.date(),
          isToday: date.isSame(moment(), 'day'),
          hasEvent: hasEvent
        });
      }

      return days;
    }
  },
  methods: {
    ...mapActions(['prevMonth', 'nextMonth', 'addEvent', 'removeEvent', 'updateEvent']),
    selectDate(day) {
      this.eventDate = moment().year(this.currentYear).month(this.currentMonth).date(day.date).format('YYYY-MM-DD');
    },
    addEvent() {
      const event = {
        id: uuidv4(),
        title: this.eventTitle,
        date: this.eventDate
      };
      this.$store.dispatch('addEvent', event);
      this.eventTitle = '';
      this.eventDate = '';
    },
    editEvent(event) {
      this.isEditing = true;
      this.editEventId = event.id;
      this.editEventTitle = event.title;
      this.editEventDate = event.date;
    },
    updateEvent() {
      const updatedEvent = {
        id: this.editEventId,
        title: this.editEventTitle,
        date: this.editEventDate
      };
      this.$store.dispatch('updateEvent', updatedEvent);
      this.isEditing = false;
      this.editEventId = null;
      this.editEventTitle = '';
      this.editEventDate = '';
    },
    deleteEvent(eventId) {
      this.$store.dispatch('removeEvent', eventId);
    }
  }
};
</script>

<style scoped>
/* 既存のスタイルはそのまま */
.event-form {
  margin-top: 20px;
}

.event-list {
  margin-top: 20px;
}

.edit-form {
  margin-top: 20px;
}
</style>

2. Vuexストアの更新

src/store/index.jsにイベントを編集するためのミューテーションとアクションを追加します。すでに追加されている場合は、特に変更の必要はありません。

export default new Vuex.Store({
  state: {
    currentYear: moment().year(),
    currentMonth: moment().month(),
    events: []
  },
  mutations: {
    setYear(state, year) {
      state.currentYear = year;
    },
    setMonth(state, month) {
      state.currentMonth = month;
    },
    setEvents(state, events) {
      state.events = events;
    },
    addEvent(state, event) {
      state.events.push(event);
    },
    removeEvent(state, eventId) {
      state.events = state.events.filter(event => event.id !== eventId);
    },
    updateEvent(state, updatedEvent) {
      const index = state.events.findIndex(event => event.id === updatedEvent.id);
      if (index !== -1) {
        Vue.set(state.events, index, updatedEvent);
      }
    }
  },
  actions: {
    async loadEvents({ commit }) {
      const events = await localforage.getItem('events');
      if (events) {
        commit('setEvents', events);
      }
    },
    async saveEvents({ state }) {
      await localforage.setItem('events', state.events);
    },
    prevMonth({ commit, state, dispatch }) {
      const newDate = moment().year(state.currentYear).month(state.currentMonth).subtract(1, 'month');
      commit('setYear', newDate.year());
      commit('setMonth', newDate.month());
      dispatch('saveEvents');
    },
    nextMonth({ commit, state, dispatch }) {
      const newDate = moment().year(state.currentYear).month(state.currentMonth).add(1, 'month');
      commit('setYear', newDate.year());
      commit('setMonth', newDate.month());
      dispatch('saveEvents');
    },
    addEvent({ commit, dispatch }, event) {
      commit('addEvent', event);
      dispatch('saveEvents');
    },
    removeEvent({ commit, dispatch }, eventId) {
      commit('removeEvent', eventId);
      dispatch('saveEvents');
    },
    updateEvent({ commit, dispatch }, updatedEvent) {
      commit('updateEvent', updatedEvent);
      dispatch('saveEvents');
    }
  },
  getters: {
    currentMonth: state => moment().month(state.currentMonth).format('MMMM'),
    currentYear: state => state.currentYear,
    events: state => state.events
  }
});

3. イベントの編集と削除の動作確認

開発サーバーを再起動し、ブラウザでhttp://localhost:8080にアクセスします。イベントを追加し、リストの「Edit」ボタンをクリックしてイベントを編集、また「Delete」ボタンをクリックしてイベントを削除できることを確認します。

npm run serve

これで、カレンダーアプリケーションにイベントの編集および削除機能が追加されました。次は、様々なデバイスで動作するレスポンシブデザインの実装方法を紹介します。

レスポンシブデザインの対応

様々なデバイスで動作するように、カレンダーアプリケーションにレスポンシブデザインを実装します。これにより、スマートフォン、タブレット、デスクトップなど、異なる画面サイズでの利用が可能になります。

1. ビューポートの設定

レスポンシブデザインを適用するために、まずHTMLの<head>セクションにビューポートメタタグを追加します。これにより、ブラウザがデバイスの幅に合わせてページのスケーリングを行います。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. カレンダーのスタイル調整

次に、CSSを追加してカレンダーのレイアウトを調整します。Calendar.vueの<style scoped>セクションに以下のスタイルを追加します。

<style scoped>
/* 既存のスタイルはそのまま */
.calendar {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.calendar-header h2 {
  flex: 1 1 100%;
  text-align: center;
  margin: 10px 0;
}

.calendar-body {
  display: flex;
  flex-direction: column;
}

.calendar-weekdays, .calendar-days {
  display: flex;
  flex-wrap: wrap;
}

.calendar-weekday, .calendar-day {
  width: calc(100% / 7);
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

.calendar-day--today {
  background-color: #ffeb3b;
}

.calendar-day--highlight {
  background-color: #80deea;
}

@media (max-width: 600px) {
  .calendar-header {
    flex-direction: column;
  }

  .calendar-header button {
    margin: 5px 0;
  }

  .calendar-weekday, .calendar-day {
    padding: 5px;
  }
}

@media (max-width: 400px) {
  .calendar-weekday, .calendar-day {
    padding: 2px;
    font-size: 0.8em;
  }
}
</style>

このスタイルでは、以下の点を考慮しています。

カレンダーの幅を100%にし、最大幅を600pxに設定して中央に配置
ヘッダーのレイアウトを調整し、小さい画面ではボタンとタイトルが折り返すように設定
カレンダーの日付セルのパディングとフォントサイズを調整し、小さい画面でも見やすくする

3. テストと調整

開発サーバーを再起動し、ブラウザでhttp://localhost:8080にアクセスします。ブラウザのデベロッパーツールを使用して、異なる画面サイズでの表示を確認します。

npm run serve

デバイスごとの表示確認を行い、必要に応じてスタイルを調整します。特にスマートフォンやタブレットでの操作性を確認し、ユーザーが快適に利用できるようにします。

これで、カレンダーアプリケーションにレスポンシブデザインが適用されました。次は、カレンダーアプリのテスト方法と一般的なデバッグ手法について説明します。

テストとデバッグ

カレンダーアプリケーションのテスト方法と一般的なデバッグ手法について説明します。テストとデバッグは、アプリケーションの品質を保証し、バグを早期に発見・修正するために重要です。

1. ユニットテストの導入

まず、ユニットテストを導入して、各コンポーネントや機能が期待通りに動作するかを確認します。Vue.jsプロジェクトでは、Jestを使用してユニットテストを行うことが一般的です。

npm install --save-dev @vue/test-utils jest

次に、jest.config.jsをプロジェクトのルートディレクトリに作成し、以下の内容を追加します。

module.exports = {
  preset: '@vue/cli-plugin-unit-jest'
};

tests/unit/Calendar.spec.jsファイルを作成し、カレンダーコンポーネントのテストを記述します。

import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import Calendar from '@/components/Calendar.vue';
import moment from 'moment';

const localVue = createLocalVue();
localVue.use(Vuex);

describe('Calendar.vue', () => {
  let store;
  let state;

  beforeEach(() => {
    state = {
      currentYear: moment().year(),
      currentMonth: moment().month(),
      events: []
    };

    store = new Vuex.Store({
      state
    });
  });

  it('renders calendar header correctly', () => {
    const wrapper = shallowMount(Calendar, { store, localVue });
    expect(wrapper.find('.calendar-header h2').text()).toBe(`${moment().format('MMMM')} ${moment().year()}`);
  });

  it('moves to the next month correctly', async () => {
    const wrapper = shallowMount(Calendar, { store, localVue });
    await wrapper.find('.calendar-header button:nth-of-type(2)').trigger('click');
    expect(store.state.currentMonth).toBe(moment().add(1, 'month').month());
  });

  it('adds event correctly', async () => {
    const wrapper = shallowMount(Calendar, { store, localVue });
    wrapper.setData({ eventTitle: 'Test Event', eventDate: moment().format('YYYY-MM-DD') });
    await wrapper.find('.event-form form').trigger('submit.prevent');
    expect(store.state.events.length).toBe(1);
    expect(store.state.events[0].title).toBe('Test Event');
  });
});

2. エンドツーエンドテストの導入

エンドツーエンド（E2E）テストは、ユーザーがアプリケーションを操作するシナリオ全体をテストするために使用されます。Cypressを使用してE2Eテストを行います。

npm install --save-dev cypress

cypress/integration/calendar_spec.jsファイルを作成し、以下の内容を追加します。

describe('Calendar App', () => {
  it('loads the calendar', () => {
    cy.visit('/');
    cy.contains('Add Event');
  });

  it('adds a new event', () => {
    cy.visit('/');
    cy.get('input[placeholder="Event Title"]').type('New Event');
    cy.get('input[type="date"]').type('2024-08-08');
    cy.contains('Add Event').click();
    cy.contains('New Event on 2024-08-08');
  });

  it('edits an event', () => {
    cy.visit('/');
    cy.get('input[placeholder="Event Title"]').type('Edit Event');
    cy.get('input[type="date"]').type('2024-08-08');
    cy.contains('Add Event').click();
    cy.contains('Edit').click();
    cy.get('input[placeholder="Event Title"]').clear().type('Edited Event');
    cy.contains('Update Event').click();
    cy.contains('Edited Event on 2024-08-08');
  });

  it('deletes an event', () => {
    cy.visit('/');
    cy.get('input[placeholder="Event Title"]').type('Delete Event');
    cy.get('input[type="date"]').type('2024-08-08');
    cy.contains('Add Event').click();
    cy.contains('Delete').click();
    cy.contains('Delete Event on 2024-08-08').should('not.exist');
  });
});

3. デバッグの手法

デバッグは、コードに潜むバグを見つけて修正するプロセスです。以下の方法を使用してデバッグを行います。

ブラウザのデベロッパーツール

ブラウザのデベロッパーツールを使用して、DOMの検査、コンソールログの確認、ネットワークリクエストの追跡を行います。Google Chromeのデベロッパーツールが特に人気です。

コンソールログ

console.log()を使用して、変数の値やコードの実行フローを確認します。これにより、問題の原因を特定しやすくなります。

ブレークポイントの設定

デベロッパーツールでブレークポイントを設定し、コードの実行を一時停止して変数の状態を確認します。これにより、より詳細なデバッグが可能になります。

Vue Devtools

Vue.js専用のデバッグツールであるVue Devtoolsを使用して、コンポーネントの状態やVuexの状態管理をリアルタイムで確認します。

4. 継続的インテグレーション（CI）

CIツール（例：GitHub Actions、Travis CI）を使用して、コードのプッシュ時に自動的にテストを実行し、コードの品質を保ちます。これにより、バグの早期発見と修正が可能になります。

以上で、カレンダーアプリケーションのテストとデバッグの方法について説明しました。次に、カレンダーアプリの応用例と追加機能のアイデアを紹介します。

応用例と追加機能

カレンダーアプリケーションの応用例とさらに便利な追加機能のアイデアを紹介します。これらの機能を追加することで、アプリケーションの使い勝手が向上し、ユーザーにとってより有益なツールとなります。

1. 通知機能の追加

イベントの開始前にユーザーに通知する機能を追加します。これにより、重要な予定を忘れずに管理できます。

実装方法

ブラウザの通知APIを使用して、イベントの開始前に通知を表示します。
通知のタイミングを設定できるオプションを追加します。

// Notification API example
function showNotification(event) {
  if (Notification.permission === 'granted') {
    new Notification('Event Reminder', {
      body: `Event: ${event.title} is starting soon!`
    });
  }
}

function requestNotificationPermission() {
  if (Notification.permission !== 'denied' && Notification.permission !== 'granted') {
    Notification.requestPermission();
  }
}

requestNotificationPermission();

// Call showNotification(event) at the appropriate time

2. Googleカレンダーとの同期

Googleカレンダーとの同期機能を追加します。これにより、ユーザーがGoogleカレンダーに登録した予定をアプリケーション内で表示し、管理できるようになります。

実装方法

Google Calendar APIを使用して、Googleカレンダーのイベントを取得します。
OAuth 2.0を使用して、ユーザーのGoogleアカウントにアクセスします。

// Example of Google Calendar API integration
gapi.load('client:auth2', () => {
  gapi.client.init({
    apiKey: 'YOUR_API_KEY',
    clientId: 'YOUR_CLIENT_ID',
    discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest'],
    scope: 'https://www.googleapis.com/auth/calendar.events.readonly'
  }).then(() => {
    return gapi.auth2.getAuthInstance().signIn();
  }).then(() => {
    return gapi.client.calendar.events.list({
      calendarId: 'primary',
      timeMin: new Date().toISOString(),
      showDeleted: false,
      singleEvents: true,
      maxResults: 10,
      orderBy: 'startTime'
    });
  }).then(response => {
    const events = response.result.items;
    console.log('Upcoming events:', events);
    // Display events in the calendar
  });
});

3. カスタムテーマのサポート

ユーザーがアプリケーションの外観をカスタマイズできるように、カスタムテーマ機能を追加します。これにより、個々の好みに合わせてUIを変更できます。

実装方法

カスタムCSSをユーザーがアップロードできる機能を提供します。
プリセットのテーマをいくつか用意し、選択できるようにします。

// Example of theme switching
const themes = {
  default: 'default-theme.css',
  dark: 'dark-theme.css',
  light: 'light-theme.css'
};

function applyTheme(themeName) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = themes[themeName];
  document.head.appendChild(link);
}

// Usage: applyTheme('dark');

4. 繰り返しイベントの追加

繰り返し発生するイベント（例：毎週の会議、毎月の支払い）を管理できるようにします。

実装方法

繰り返しパターン（毎日、毎週、毎月、毎年）を設定できるオプションを追加します。
繰り返しイベントのデータ構造を設計し、保存および表示のロジックを追加します。

// Example of recurring events data structure
const event = {
  id: 'event1',
  title: 'Weekly Meeting',
  startDate: '2024-08-08',
  recurrence: {
    frequency: 'weekly',
    interval: 1, // every week
    endDate: '2024-12-31'
  }
};

// Function to generate recurring events
function generateRecurringEvents(event) {
  const events = [];
  let currentDate = moment(event.startDate);
  const endDate = moment(event.recurrence.endDate);

  while (currentDate.isBefore(endDate)) {
    events.push({ ...event, date: currentDate.format('YYYY-MM-DD') });
    currentDate.add(event.recurrence.interval, event.recurrence.frequency);
  }

  return events;
}

// Usage: const recurringEvents = generateRecurringEvents(event);

5. イベントカテゴリの追加

イベントにカテゴリを追加し、カテゴリごとに色分け表示する機能を追加します。

実装方法

カテゴリを定義し、イベント作成時に選択できるようにします。
カテゴリごとに異なる色でイベントを表示します。

// Example of event categories
const categories = {
  meeting: { name: 'Meeting', color: '#f44336' },
  personal: { name: 'Personal', color: '#2196f3' },
  work: { name: 'Work', color: '#4caf50' }
};

function getCategoryColor(category) {
  return categories[category] ? categories[category].color : '#000';
}

// Usage: const eventColor = getCategoryColor(event.category);

これらの追加機能や応用例を実装することで、カレンダーアプリケーションをより多機能で使いやすいものにすることができます。次に、記事全体のまとめを行います。

まとめ

本記事では、JavaScriptのデータバインディングを活用してカレンダーアプリケーションを実装する方法について解説しました。基本的なプロジェクトのセットアップから、データバインディングの実装、イベントの追加・編集・削除機能、レスポンシブデザインの対応、そしてテストとデバッグの方法までを詳細に説明しました。

また、応用例として通知機能、Googleカレンダーとの同期、カスタムテーマのサポート、繰り返しイベントの追加、イベントカテゴリの追加などのアイデアも紹介しました。これにより、カレンダーアプリケーションをより多機能で使いやすいものに進化させることができます。

これらの手法を学ぶことで、JavaScriptやVue.jsのスキルを向上させるとともに、実際のプロジェクトに応用できる知識を得ることができます。カレンダーアプリケーションの開発を通じて、データバインディングの利便性や重要性を実感し、今後の開発に役立ててください。

JavaScriptのデータバインディングを使ったカレンダーアプリケーションの実装方法

データバインディングとは

データバインディングの重要性

リアルタイムのデータ更新

コードの簡潔化

エラーの減少

データバインディングの種類

片方向データバインディング

双方向データバインディング

必要なツールとライブラリ

必要なツール

コードエディタ

バージョン管理システム

Webブラウザ

必要なライブラリ

Vue.js

Moment.js

Vuex

LocalForage

プロジェクトのセットアップ

1. プロジェクトディレクトリの作成

2. Vue CLIのインストール

3. 新しいVueプロジェクトの作成

4. プロジェクトのディレクトリに移動

5. 必要なライブラリのインストール

6. プロジェクトの初期設定

7. 開発サーバーの起動

カレンダーの基本構造

1. 基本的なHTML構造の作成

2. カレンダーのCSSスタイル設定

3. カレンダーのロジック実装

4. 月の切り替え機能の実装

データバインディングの実装

1. Vuexのセットアップ

2. ストアの使用

3. データバインディングの動作確認

イベントの追加機能

1. イベント追加フォームの作成

2. Vuexストアの更新

3. イベントの表示と確認

データの保存と読み込み

1. LocalForageのセットアップ

2. LocalForageの初期化

3. カレンダーコンポーネントの更新

4. データ保存の動作確認

日付のハイライト機能

1. ハイライト用のCSSクラス追加

2. 日付ハイライトのロジック追加

3. ハイライト機能の動作確認

イベントの編集と削除

1. イベントの編集フォームの作成

2. Vuexストアの更新

3. イベントの編集と削除の動作確認

レスポンシブデザインの対応

1. ビューポートの設定

2. カレンダーのスタイル調整

3. テストと調整

テストとデバッグ

1. ユニットテストの導入

2. エンドツーエンドテストの導入

3. デバッグの手法

ブラウザのデベロッパーツール

コンソールログ

ブレークポイントの設定

Vue Devtools

4. 継続的インテグレーション（CI）

応用例と追加機能

1. 通知機能の追加

実装方法

2. Googleカレンダーとの同期

実装方法

3. カスタムテーマのサポート

実装方法

4. 繰り返しイベントの追加

実装方法

5. イベントカテゴリの追加

実装方法

まとめ

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル