JavaScriptでTodoリスト作成しよう〜Todoを完了させてみよう〜

JavaScriptでTodoリスト作成しよう〜DOM(html要素)を更新してみよう〜

はじめに

こんにちは、かずん(@kazoonLab)です。

前回の記事では、Todoリスト用のディレクトリを作って、Todoの登録・削除機能を実装しました。

前回の記事をまだ見てない方は、以下のリンクからご覧いただけます！

blog.mimipen.net

今回の記事では、Todoが終わったら、完了の目印をつける機能を実装してみたいと思います。

イメージとしては以下の通りです。

todoリスト

Todoが終わったとき削除させてもよいのですが、終わったことをわかりやすくしてみようと思います。

blog.mimipen.net

この記事を読むと、JavaScriptでDOM(html要素)を更新する方法がわかるよ！

こんな人に読んで欲しい

・JavaScript勉強したての方

・Webアプリケーションを作ってみたい方

・DOM(html要素)がピンっときていない方

はじめに
Todoの完了
まとめ

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は他にも様々な値が適用できます。適用できる値は、以下リンクに詳細があります。

developer.mozilla.org

ここまでの実装で、下のような動きが実装できるかと思います。

todoリストのイメージ

これで、Todoを完了したときの動きをつけることができました。