Vue.js を使ったタスクマネージャーを構築する - 時間管理の達人になる

はじめに

このプロジェクトでは、Vue.js を使って簡単なタスク管理アプリケーションを構築する方法を学びます。タスク管理アプリケーションでは、日々のタスクを作成、削除して管理できるようになり、時間管理の達人になる手助けをします。

👀 プレビュー

タスク管理アプリのデモ

🎯 タスク

このプロジェクトで学ぶことは以下の通りです。

Vue.js の環境をセットアップする方法
ページが読み込まれたときにデフォルトで「データなし」を表示する方法
タスクリストにタスクを追加する方法
タスクリストからタスクを削除する方法
タスクの合計数を表示する方法
すべてのタスクリストをクリアする方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

ゼロから Vue.js アプリケーションを作成する
Vue.js のディレクティブとデータバインディングを使用する
基本的な CRUD（作成、読み取り、更新、削除）機能を実装する
ユーザーインタラクションを処理し、UI を適切に更新する

プロジェクト構造を設定する

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了してください。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── css
│   └── style.css ## ページのスタイルファイル
├── img
│   └── icon.png ## ページで必要な小アイコン
├── js
│    └── vue.js ## Vue.js フレームワークの 2.x バージョン
└── index.html ## ページのレイアウトとロジックのコーディングファイル

WebIDE の右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

画像の説明

現在の表示は静的なレイアウトのみで、特定の機能は実装されていません。

初期状態で「データなし」を表示する

このステップでは、ページが読み込まれたときに初期状態で「データなし」を表示します。

index.html ファイルで、el: "#box", の下にある Vue インスタンスから data オブジェクトを追加し、それに todoList 配列を含めます。

data: {
  todoList: [],
}

HTML 構造で、<ul class="list"></ul> の中身のすべてのコードを削除します。その後、todoList 配列が空の場合に「データなし」を表示する条件付きレンダリングを追加します。

<ul class="list">
  <li v-if="!todoList.length">No data</li>
  <!-- TODO: Add task list items here -->
</ul>

index.html ファイルを保存してページを更新します。「データなし」のメッセージが表示されるはずです。最終的な実装結果は以下の通りです。

画像の説明

リストにタスクを追加する

このステップでは、タスクリストにタスクを追加します。

index.html ファイルで、HTML 構造に入力フィールドと「確認」ボタンを追加します。

<div class="input">
  <span>内容</span>
  <input
    type="text"
    v-model="search"
    placeholder="やることを入力してください"
  />
  <span id="add" @click="addTodo">確認</span>
</div>

Vue インスタンスに、search データプロパティと addTodo メソッドを追加します。

data: {
  todoList: [],
  search: ""
},
methods: {
  addTodo() {
    this.todoList.push(this.search);
    this.search = "";
  },
}

index.html ファイルを保存してページを更新します。入力フィールドにテキストを入力し、「確認」ボタンをクリックして新しいタスクをリストに追加できるはずです。最終的な実装結果は以下の通りです。

画像の説明

リストからタスクを削除する

このステップでは、タスクリストからタスクを削除する機能を追加します。

index.html ファイルで、各タスク項目に「削除」アイコンを追加します。

<li v-if="!todoList.length">データなし</li>
<li v-if="todoList.length" v-for="(todo, index) in todoList" :key="index">
  <!-- 前の連番 -->
  <span class="number">{{index + 1}}</span>
  <!-- リストの内容 -->
  <span>{{todo}}</span>
  <!-- 削除ボタン -->
  <span class="delete" @click="deleteTodo(index)"></span>
</li>

Vue インスタンスに、deleteTodo メソッドを追加します。

methods: {
  //...
  deleteTodo(index) {
    this.todoList.splice(index, 1);
  },
}

index.html ファイルを保存してページを更新します。「削除」アイコンをクリックして、リストからタスクを削除できるはずです。最終的な実装結果は以下の通りです。

画像の説明

タスクの合計数を表示する

このステップでは、タスクリスト内のタスクの合計数を表示します。

HTML 構造で、タスクリストの下部に「合計」セクションを追加します。

<li v-if="todoList.length" v-for="(todo, index) in todoList" :key="index">
  <!--... -->
</li>
<li v-if="todoList.length">
  <b> 合計：{{todoList.length}} </b>
  <!--... -->
</li>

index.html ファイルを保存してページを更新します。リストの下部にタスクの合計数が表示されるはずです。

タスクリストをクリアする

このステップでは、タスクリスト全体をクリアする機能を追加します。

Vue インスタンスに、clear メソッドを追加します。

methods: {
  //...
  clear() {
    this.todoList = [];
    this.search = "";
  }
}

HTML 構造で、「合計」セクションに「クリア」ボタンを追加します。

<!--... -->
<li v-if="todoList.length">
  <b> 合計：{{todoList.length}} </b>
  <b id="clear" @click="clear">クリア</b>
</li>

index.html ファイルを保存してページを更新します。「クリア」ボタンをクリックして、リストからすべてのタスクを削除できるはずです。

おめでとうございます！Vue.js を使ってタイムマネジメントマスタープロジェクトを完了しました。最終的な実装結果は以下の通りです。

画像の説明

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるために LabEx でさらに多くの実験を行うことができます。