JavaScriptでTodoリストを作ろう！(1)〜Todoの登録/削除まで〜【JavaScript初心者入門】

JavaScriptでTodoリストを作ってみよう！〜Todoの登録/削除まで〜

はじめに

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

今回の記事から、JavaScriptを使って「Todoリスト」を作っていきます！

今回は、タスクを追加して削除するまでを作ります！イメージは↓の通りです。複数回に分けて、少しずつアップデートしていく予定です。

なお、Todoリストって何、と思われた方は、下に概要を載せていますので、そちらをご参照ください。

この記事を読むと、JavaScriptで生成したDOMの表示方法がわかるよ！

こんな人に読んで欲しい

・JavaScript勉強したての方

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

はじめに
Todoリストって何？
今後の実装について
作る準備
Todoリストのひな形を作ろう！
Todoを登録しよう！
実際に動かしてみよう
まとめ

Todoリストって何？

Todoリストとは、自分のやること・予定をまとめたリストです。色々なプログラミング言語で練習課題としてよく挙げられます。

要素の基本的な操作(追加・読取・更新・削除)をアプリ制作を通じて学ぶことができるため、課題として人気なのかもしれませんね。

今回は、HTML/CSS + JavaScriptでTodoリストを作っていきたいと思います。画面に表示される要素(DOM要素)を、JavaScriptで制御していくイメージです。

今後の実装について

今回の記事では要素の追加までを実装して、次回の記事以降で少しずつアップデートしていこうかと思います。

アップデートの内容としては、基本的な操作(更新・削除)を網羅する、CSSで見た目を整えアニメーションをつける、タスクをlocalStorageに保存する、タスクにバリデーションをつける、などを考えています。なんのことやらちんぷんかんぷんという方も、アップデート毎に都度説明を加えていきますので、今は分からなくとも大丈夫です！

作る準備

まず、作業用フォルダを準備しましょう。作業用フォルダの中には、ソース一式を入れるsrcフォルダを作ります。(後ほどライブラリを追加する際、ライブラリの実体はsrcの外部に配置されます)

srcフォルダの中には、HTMLファイル(今回はindex.html)とcss/jsフォルダを準備します。css/jsフォルダの中には、todo.cssとtodo.jsを作成しましょう。(今回はtodo.jsのみ編集します)

ここまで作成すると、フォルダ構成は以下のようになるかと思います。

作業フォルダ/
  └src/
    └index.html
    └css/
      └todo.css
    └js/
      └todo.js

この通りになれば、フォルダ/ファイルの準備はOKです！

Todoリストのひな形を作ろう！

フォルダ/ファイルを作成したら、まずTodoリストのひな形を作りましょう。HTMLで要素を作っていきます。

タイトルにもある通り、今回は、Todoの登録・削除機能を実装します。そのためには、Todoを登録するところ（テキスト入力フォームと登録ボタン）、Todoを表示するところ（空のリスト要素）、さらに削除するところ（Todo一つ一つに付属する削除ボタン）が必要です。

上記をまとめると、以下のようなイメージになるかと思います。

todoリストのイメージ

イメージが出来たら、HTMLの実装にとりかかります。私は以下のように実装しました。

  <!-- <head>は省略 -->
  <body>
    <header class="header">
      <h1 class="title">Todo List</h1>
    </header>
    <ul class="todo js-addTask-target"></ul>
    <form>
      <input class="js-addTask-value" type="text" />
      <button class="js-addTask-trigger" type="button">タスクを登録する</button>
    </form>
    <script src="js/todo.js"></script>
  </body>
</html>

まず、空のリストとして、ul.todoを用意しています。タスクが追加される度に、<li>が追加されていくイメージです。

<ul>の下には、タスクを登録するためのインプットと、登録用のボタンを用意しました。インプットにタスク名を追加して登録ボタンを押すと、タスクが登録される、という流れです。

HTMLの中に「js-」という名前のクラス名があるかと思いますが、これはjsに関連する要素であることを明示しています。JSファイルを編集する際に、これらのクラスが関わってきますが、一旦読み飛ばしてかまいません。

ここまでで、HTML(ひな形)を作成しました。次に、JSでTodoを登録する機能を実装しましょう。

Todoを登録しよう！

JS部分に関してですが、以下のように実装しました。

'use strict';

const addTaskTrigger = document.getElementsByClassName('js-addTask-trigger')[0];
const addTaskTarget = document.getElementsByClassName('js-addTask-target')[0];
const addTaskValue = document.getElementsByClassName('js-addTask-value')[0];

const removeTask = removeButton => {
  const targetTask = removeButton.closest('li');
  addTaskTarget.removeChild(targetTask);
};

const addTask = task => {
  const listItem = document.createElement('li');
  const removeButton = document.createElement('button');

  removeButton.innerText = '削除';
  removeButton.addEventListener('click', () => removeTask(removeButton));

  listItem.innerText = task;

  listItem.append(removeButton);
  addTaskTarget.appendChild(listItem);
};

addTaskTrigger.addEventListener('click', event => {
  const task = addTaskValue.value;
  addTask(task);
  addTaskValue.value = '';
});

上からソースコードの解説をしていきます。

1行目の'use strict'は、ざっくり言うと、JavaScriptでエラーになりにくい実装をエラーにし、かつ素早く実行してくれるモード(strictモード)に切り替える、という宣言です。

例えば、↓の記事で変数宣言のvar / let / constについて解説していますが、strictモードでないJavsScriptではvar / let / constがなくとも変数宣言ができてしまいます。

blog.mimipen.net エラーチェッカー(linter)が導入されているエディタではエラーになるかとは思いますが、実行時にもちゃんとチェックさせるよう、'use strict'は忘れずに記入しましょう。

3 ~ 5行目では、今回の実装に必要なDOM要素を取得しています。上から順に、登録ボタン、空のリスト、登録用インプットです。

document.getElementsByClassName(<クラス名>)で、指定したクラスを持つDOM要素をまとめて取得することができます。それぞれに「[0]」がついているのは、document.getElementsByClassName(<クラス名>)で返るのが配列(のようなもの)であるからです。

今回のケースでは、それぞれの取得で返る要素が1つだけのため、[0]と順番を指定することで、各々の要素を取得することができます。

7 ~ 10行目では、タスクを消したときの挙動を定義して、removeTask()という名前をつけています。

引数にボタンのDOM要素を取り、そのボタンを囲っている<li>を<ul>から消す、という処理です。こうすることで、各タスクについている削除ボタンを押した時、タスク全体を削除することができます。

12 ~ 23行目では、タスクを追加したときの挙動を定義して、addTask()と名付けています。

引数にタスクの文字列をとり、空の<li>と<button>を作った後、以下のことを行っています。

1. <button>で表示されるテキストを「削除」にする
2. 生成した削除ボタンに、先ほど用意した削除メソッドを発火させるイベントを設定する
3. <li>で表示されるテキストを、引数でとったタスクの文字列にする
4. <button>を<li>の中に入れる
5. <li>を<ul>の中に入れる

2で行なっていますが、<DOM要素>.addEventListener('<発火条件>', <イベント>);で、指定したDOM要素にイベントを設定することができます。今回は、「<削除ボタン>を<クリック>したら<removeTask()>する」というイベントを設定したいため、DOM要素に「削除ボタン」、発火条件に「クリック」、イベントに「removeTask()」を指定しています。

addEventListenerに関しては解説することが多くなってしまうためここではあまり触れませんが、以下のページが参考になるかと思います。

uxmilk.jp

最後に、25 ~ 29行目で、登録ボタンに対してタスク登録イベントを設定しています。

最初にインプット要素に入力された値を取得し、タスク登録メソッドに値を渡します。そうすることで、入力された値がタスクとして表示されます。

28行目では空の文字列をvalueに設定していますが、こうすることでタスク登録後インプットの中身が空になり、再び新しく登録できるようになります。

実際に動かしてみよう

ここまでの実装で、どのような挙動になるのでしょうか。あらためてイメージを見てみましょう。 Todoリストインプットにタスクを追加すると、入力したタスクがリストに追加されます。タスクにつく削除ボタンを押すと、タスクごと削除されるのが確認できるかと思います。

ここまでできれば、今回の実装はOKです！

まとめ

途中まで実装しましたがいかがだったでしょうか。

機能数は決して多くないけれど、JavaScriptのイベントや要素取得など、ここまででも大切なことがいくつか登場してきました。

今後の記事でも、Todoリストをエンハンスしつつ、JavaScriptの重要事項に触れていけたらと思います。

↓次の記事はこちら！ blog.mimipen.net

↓作りながら楽しく学べる記事を日々更新しています！よかったら読んでみてくださいね！ blog.mimipen.net blog.mimipen.net

この記事がいいなっと思ったら読者登録をお願いいたします！