はじめに
こんにちは、かずん(@kazoonLab)です。
前回の記事では、Todoリスト用のディレクトリを作って、Todoの登録・削除機能を実装しました。
前回の記事をまだ見てない方は、以下のリンクからご覧いただけます!
今回の記事では、Todoが終わったら、完了の目印をつける機能を実装してみたいと思います。
イメージとしては以下の通りです。
Todoが終わったとき削除させてもよいのですが、終わったことをわかりやすくしてみようと思います。
blog.mimipen.net

この記事を読むと、JavaScriptでDOM(html要素)を更新する方法がわかるよ!
こんな人に読んで欲しい
・JavaScript勉強したての方
・Webアプリケーションを作ってみたい方
・DOM(html要素)がピンっときていない方
Todoの完了
今の仕様だと、Todoが完了したときは、Todoを削除する他ありません。完了したときの挙動をつけることで、Todoが終わったどうかを見やすくすることができます。今回は、終了したTodoに取り消し線をつけてみることにしましょう。
まず、Todoを登録する際に、Todoを完了するボタンをセットで表示させてみます。
js/todo.jsを開き、以下のように追記してみましょう。
const addTask = task => { const listItem = document.createElement('li'); const removeButton = document.createElement('button'); const completeButton = document.createElement('button'); // 追加 /* 省略 */ completeButton.innerText = '完了'; completeButton.addEventListener('click', () => completeTask(completeButton)); // 完了イベントを追加(定義は後ほど) /* 省略 */ listItem.append(completeButton); listItem.append(removeButton); addTaskTarget.appendChild(listItem); };
このコードを追加すると、Todoを登録したとき、登録したTodoと「削除」ボタンの間に「完了」ボタンが表示されるようになったかと思います。
完了ボタンの追加する方法自体は、前回の削除ボタンを追加したときと同じです。
コードの中の完了イベントは、Todoごとに追加される完了ボタンを引数にとるメソッドです。削除ボタンの書き方とそっくりですね。
では次に、完了ボタンの挙動、「ボタンを押した時にTodoに取り消し線をつける」機能を実装しましょう。
const completeTask = completeButton => { const targetTask = completeButton.closest('li'); targetTask.classList.add('isComplete'); targetTask.removeChild(completeButton); };
押されたボタンがある<li>
の中のTodoに、isComplete
というクラスを付与します。また、一度完了したTodoを再度完了させる必要はないため、isComplete
を付与した後は、完了ボタン自体を削除しています。
isComplete
のスタイルは以下のようにしておくことで、取り消し線をつけることができます。css/todo.cssを開き、以下のコードを追記します。
.isComplete { text-decoration: line-through; }
CSSのtext-decoration
プロパティを用いると、文章を装飾する線(波線、破線など)を表現することができます。例えば、reset cssをかけない<a>
タグは、初期値で下線(underline)がついています。そのため、下線が不要な場合、
a { text-decoration: none; }
というスタイルを当てる必要があります。最も、現在使われているリセットCSSを用いれば、不要な初期スタイルはおおむね削除されると思いますが。
今回は取り消し線を適用したいので、text-decoration: line-through;
としました。
text-decoration
は他にも様々な値が適用できます。適用できる値は、以下リンクに詳細があります。
ここまでの実装で、下のような動きが実装できるかと思います。
これで、Todoを完了したときの動きをつけることができました。
まとめ
今回は、タスクの変更・完了機能を実装してみました。いかがだったでしょうか。
次回の記事では、殺風景なTodoリストにスタイルを当ててみたいと思います!お楽しみに!
この記事がいいなっと思ったら読者登録をお願いいたします!
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち(@kanakichi0801)
かずん(@kazoonLab)