300以上のホームページ制作案件に携わってきました。豊富な経験とお客様目線のホームページ制作、SEOを考慮した提案が強みです。茨城に寄り添ったサービスを多く展開してまいります。

お問い合せ・ご相談

LINEで相談

おすすめ

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

2020.02.12

2023.11.24

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

はじめに

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

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

今回は、タスクを追加して削除するまでを作ります！イメージは↓の通りです。

複数回に分けて、少しずつアップデートしていく予定です。

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

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

こんな人に読んで欲しい

・JavaScript勉強したての方

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

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一つ一つに付属する削除ボタン）が必要です。

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

イメージが出来たら、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がなくとも変数宣言ができてしまいます。

【JavaScript】var / let / constのベストな使い方

エラーチェッカー(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に関しては解説することが多くなってしまうためここではあまり触れませんが、以下のページが参考になるかと思います。

JavaScriptのaddEventListener()の基本的な使い方

https://uxmilk.jp/47194

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

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

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