はじめに

お手本を元に写経しつつToDoアプリを作成することでvue.jsの基礎的な実践利用の方法を学んだ。その後、学んだ知識を生かしてcheckDeleteボタンとallDeleteボタンを作ることで理解していることを整理した。

See the Pen ToDoApp by KKZoo (@kkzoo) on CodePen.

ToDoアプリを作った

addItemはnull以外の入力があった場合、入力情報をtodoに記憶し、その記憶を大元のdata要素にpushするためのプログラムである。それで作ったデータをv-forとv-modelを用いてdataに入っている夫々の要素を出力している。

deleteItemはJavaScriptのsplice関数を用いて配列の中身を入れ替える操作を利用して任意の要素を1つ排除するためのプログラムである。

21行目のspanタグから読み取れるが、classの変数名がdoneでその値をtodo.isDoneから呼び出していることがわかる。そうすることで、todo.isDoneが真の場合cssの以下のデザインが読み込まれて横線が引かれる様になっている。

<span v-bind:class="{done: todo.isDone}">{{ todo.item }}</span>

#app span.done{
  text-decoration: line-through;
}

checkDeleteボタンは配列をカウントダウン方式で全ての要素を総当たりでisDoneの値の真偽を計測し、Trueになっている要素をsplice関数を用いて消している。

allDeleteボタンはDeleteボタンを作る際の技術を用いて、splice(0)とすることで全ての要素を削除しToDoアプリの出力を消している。

追加コンテンツの上記ボタンは要素がある時にだけ出現させたかったので、v-ifでトリガーを出力に用いている配列todos[0]を指定し、その中身がnullの場合に消えるように条件付けした。

文字にしてまとめることで、自分が行った学習がどのようなことをしているのかを改めて確認することになり、頭の中を整理するいい機会になりました。