Task Manager

こんにちは、今日は Vue.js を使ってシンプルなタスク管理アプリケーションを作成する過程を紹介します。
Vue.js は、ユーザーインターフェースを構築するための JavaScript フレームワークで、リアクティブなデータバインディングと再利用可能なコンポーネントにより、効率的にアプリケーションを作成することができます。
Vue.jsの学習のために自分でタスク管理が出来るWebアプリを作成しました。
必要最低限の機能しかないので、操作はシンプルです！

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

最初に、Vue.jsをプロジェクトにインクルードします。今回はCDNを使ってVue.jsを読み込みます。
HTMLファイルの<head>タグの間に下記のコードを追加します。

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

2. Vueインスタンスの作成

下記のコードをHTMLファイルの<script>タグの中に、またはjsファイルに追加します。

new Vue({
  el: '#app',
  data: {
    newTask: '',
    newDeadline: '',
    newImportance: 'Medium',
    sortOrder: 'none',
    tasks: JSON.parse(localStorage.getItem('tasks')) || []
  },
  created() {
    this.tasks.forEach(task => {
      this.$watch(() => task.done, this.sortTasks)
    })
  },
  computed: {
    sortedTasks() {
      // ここでタスクをソート
    }
  },
  watch: {
    tasks: {
      handler: function(updatedTasks) {
        localStorage.setItem('tasks', JSON.stringify(updatedTasks));
        updatedTasks.forEach(task => {
          this.$watch(() => task.done, this.sortTasks)
        })
      },
      deep: true
    },
    sortOrder: function() {
      this.sortTasks();
    }
  },
  methods: {
    addTask() {
      // タスクの追加処理
    },
    removeTask(index) {
      this.tasks.splice(index, 1);
    },
    sortTasks() {
      // タスクのソート処理
    }
  }
});

このコードは、新しい Vue インスタンスを作成し、#app 要素にマウントしています。データオプションは、アプリケーションの状態を保持するためのものです。また、各種メソッドやコンピューテッドプロパティも定義しています。

見た目はCSSでお好みにカスタマイズしてください。

3. タスクの追加と削除

ユーザーが新しいタスクを追加できるようにするために、addTask メソッドを定義します。このメソッドは、新しいタスクの詳細を入力するためのフォームのsubmitイベントにバインドされます。

また、タスクを削除するための removeTask メソッドも定義します。各タスクに “Remove” ボタンを追加し、そのクリックイベントにこのメソッドをバインドします。

4. タスクのソート

ソート順を選択できるようにするために、select要素を使用します。v-model ディレクティブを使用して、この要素を sortOrder データプロパティにバインドします。

ソート順が変更されるたびに、タスクリストをソートするために sortTasks メソッドが呼び出されます。

5. タスクの完了

タスクを完了としてマークするために、チェックボックスを使用します。v-model ディレクティブを使用して、このチェックボックスを task.done プロパティにバインドします。これにより、チェックボックスの状態がタスクの done プロパティに自動的に同期されます。

タスクが完了したときには、タスクの背景色を変更し、タイトルに取り消し線を表示します。これを実現するために、v-if ディレクティブと CSS クラスを使用します。

以上で、Vue.jsを使用してシンプルなタスク管理アプリケーションを作成することができました。
Vue.jsを始めて使ってみる人にとって、良い練習になるのではないでしょうか。