TOP > 学習ブログ > Vue.jsで、ToDoリストを作成してみた
投稿日: 2022.11.21 更新日: 2022.12.02

Vue.jsで、ToDoリストを作成してみた

この記事を読むと分かること

  • Vue.jsで、ToDoリストを作成する方法
  • することを追加するときの処理
  • チェックを入れると取り消し線が表示される処理
  • チェックが入っているToDoを削除する処理

はじめに

今回作成したもの

  • 上記画像の画面が表示される
  • することを入力してEnterを押すと、ToDoリストに追加される
  • ToDoリストにチェックを入れると、取り消し線が表示され、処理済み件数が増える
  • 処理済みを削除を押すと、取り消し線がついているToDoが削除される

最初の画面はどうやって表示されているのか?

こちらの画面が表示されるまでについて、書いていきます。

HTML

headタグ内で、3系のvue.jsを読み込み、idがappの中で、vue.jsの処理などを書いています。

 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<h2>ToDoリスト</h2>
<div id="app">
 <div v-for="todo in todos">
  <label>
   <input type="checkbox" v-model="todo.done">
   <span v-bind:class="{donestyle:todo.done}">{{todo.text}}</span>
  </label>
 </div>

 <input type="text" v-model.trim="addtext" v-on:keyup.enter="addToDo"  placeholder="すること">
 <p><button v-on:click="cleanToDo">処理済みを削除</button></p>
 <p>{{ remaining }} / {{ todos.length }}件処理</p>
</div>

JS

todosという配列に入っているToDoリストのtextが最初に表示されています。

Vue.createApp({
 data() {
  return {
   addtext:'',
   todos: [
    {done:false, text:'vue.jsの学習'},
    {done:false, text:'メルカリで売れた本の発送'}
   ]
  }
 },
//省略
}).mount("#app");

することを追加する処理について

例えば、「食材を購入する」というToDoを「すること」に入力してEnterを押すと、「食材を購入する」というToDoがリストに追加されます。

入力時
Enterを押した後

このように、ToDoを追加するときの処理について見ていきます。

HTML

「すること」という入力欄のHTMLは、以下のようになっています。

 <input type="text" v-model.trim="addtext" v-on:keyup.enter="addToDo"  placeholder="すること">

v-model.trim="addtext" では、空白を除いてテキストを受け付けています

v-on:keyup.enter="addToDo" は、Enterを押したらaddToDoという関数を実行するという意味です。

JS

data関数で、addtextを定義しています。

Vue.createApp({
 data() {
  return {
   addtext:' ',
   todos: [
    {done:false, text:'vue.jsの学習'},
    {done:false, text:'メルカリで売れた本の発送'}
   ]
  }
 },
//省略
}).mount("#app");

addToDoでは、todosという配列にオブジェクトを追加しています。その後、this.addtext = ''; によって、インプットの中身を空にしています。

Vue.createApp({
 //省略
 methods: {
  addToDo: function() {
   if (this.addtext) {							     
    this.todos.push({done:false, text:this.addtext});
    this.addtext = '';
   }
  },
 //省略
 }
}).mount("#app");

ToDoリストにチェックを入れると、取り消し線が表示される

チェックボックスにチェックを入れると、取り消し線が表示されることについて見ていきます。

HTML

ToDoリスト部分のHTMLはこちらです。

<div v-for="todo in todos">
 <label>
  <input type="checkbox" v-model="todo.done">
  <span v-bind:class="{donestyle:todo.done}">{{todo.text}}</span>
 </label>
</div>

JSで定義しているtodosという配列から繰り返し処理を行なっています。一つ一つの値は、todoとして使用されています。

v-model="todo.done" によって、チェックボックスをクリックしたときに、todoのdoneがtrueになったりfalseになったりします。

v-bind:class="{donestyle:todo.done}" で、doneがtrueの時にdonestyleが表示されます。

チェックボックスにチェックが入っているときは、打ち消し線が表示されます。

JS

JSでは、doneという真偽値とtextという文字列が入っているオブジェクトを、todosという配列で定義しています。

Vue.createApp({
 data() {
  return {
   addtext:'',
   todos: [
    {done:false, text:'vue.jsの学習'},
    {done:false, text:'メルカリで売れた本の発送'}
   ]
  }
 },
 // 省略
}).mount("#app");

CSS

打ち消し線のスタイルを定義しています。

.donestyle {
 text-decoration: line-through;
 color: lightgray;
}

全体のうち何件処理できたかを表示している部分

全体のうち何件処理できたかを表示している部分について見ていきます。

HTML

<p>{{ remaining }} / {{ todos.length }}件処理</p>

{{ remaining }} で、残りのToDoの数を表示しています。

{{ todos.length }} では、全体のToDoの数を表示しています。

JS

remainingでは、「todosという配列オブジェクトの中で、doneがtrueのもの」をフィルターにかけて、.length でその数を算出しています。

Vue.createApp({
 //省略
 computed: {
  remaining: function() {
   return this.todos.filter(function(val) {
    return val.done == true;
   }).length;
  }
 },
 //省略
}).mount("#app");

チェックされたToDoの数が計算されます。

todosという配列はこちらです。

Vue.createApp({
 data() {
  return {
   addtext:'',
   todos: [
    {done:false, text:'vue.jsの学習'},
    {done:false, text:'メルカリで売れた本の発送'}
   ]
  }
 },
 //省略
}).mount("#app");

初期値のdoneはfalseなので、チェックマークが入っていない状態です。

これをtrueにすると、最初からチェックマークが入っている状態になります。

doneを最初からtrueにしたとき

処理済みを削除を押した時の処理

「処理済みを削除」を押すと、チェックを入れて打ち消し線がついているToDoが削除されます。

削除前
削除後

これについて見ていきます。

HTML

削除ボタンのHTMLはこちらです。

<p><button v-on:click="cleanToDo">処理済みを削除</button></p>

v-on:click="cleanToDo" によって、ボタンをクリックした時に、cleanToDoという関数が実行されます。

JS

cleanToDoは、このように定義されています。

Vue.createApp({
  //省略
  cleanToDo: function() {
   this.todos = this.todos.filter(function(val) {
    return val.done == false;
   })
  }
 }
}).mount("#app");

todosという配列のオブジェクトの中で、noneがfalseのものだけを残すようなフィルターをかけて、todosという配列に入れ直しています。

まだチェックされていないToDoリストだけが表示されるようにしています。

ページ
最上部へ