JavaScriptでToDoリストを作れるようになるたった3つのステップ

2023年3月4日2024年2月19日

URLをコピーしました！

JavaScriptで簡単にToDoリストのプログラムを作成しました。

ブラウザで簡単に動きますので、普段のToDoリストとしてお手軽に使用してください。

JavaScript、HTMLを学習している初学者の方にもわかる記事ですので参考にしてみてください。

JavaScriptの初学者でも簡単に作れるプログラムってないかな？

ToDoリストは初学者向けにおススメのプログラム題材ですよ。

この記事はこんな人におすすめ

・JavaScriptの勉強をはじめたけど何か実際にプログラムを自分で作ってみたい

・Progateで基礎を学んだけど次に何をしたらいいかわからない・・・

HTML、CSS、JavaScriptをそれぞれ解説をしていますので、手を動かしながら記述して動かしてみてください。

JavaScriptでToDoリストの完成イメージ

今回作成するToDoリストの完成イメージです。

「Enter task」に作業リストを入力してAddボタンを押下すると、画面下にリストを生成するプログラムです。

タスクが終わったら、Doneボタンを押して完了！

PC上で簡単なToDoリストとして使用できます。

プログラミングの準備

まず最初にプログラムを格納する作業用のフォルダを作成しましょう。

PC上に任意のフォルダを作成してください。

今回、作成するファイルは下記の３つのファイルです。

テキストエディタをお持ちでない方は、VSCODEが使いやすくておススメです。下記の記事を参考にインストールしてみてください。（もちろん無料です）

VSCODEのインストール・初期設定方法とおすすめ拡張機能について

あわせて読みたい

VSCodeのインストール・初期設定方法とおすすめ拡張機能について 2022年6月8日、GitHubよりテキストエディタ「Atom」の開発を終了する、との発表が行われました。 Atomユーザーには、12月15日の廃止日までに代替サービスへの移行方法な…

JavaScriptの変数名のつけ方・命名規則ルール

あわせて読みたい

JavaScriptの変数名の付け方｜命名規則ルール JavaScriptを学習している初学者向けに変数名の付け方やルールについて解説します。各プログラム言語には慣例的なお作法として、変数名の命名規則といったルールが存在…

step①　HTMLを作成する

HTMLでToDoリストのレイアウトを作成するコード

最初にHTMLをコーディングしましょう。

VSCODEで下記のHTMLを記述します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ToDo リスト</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="container">
      <h1>ToDo リスト</h1>
        <h2>作業が終わったらDone!</h2>
      <form>
        <input type="text" id="taskInput" placeholder="Enter task">
        <input type="submit" value="Add" onclick="addTask(event)">
      </form>
      <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

HTMLのコード解説

<!DOCTYPE html>は、このドキュメントがHTML5で書かれていることを指定する宣言です。
<html>タグは、ドキュメントのルート要素であり、すべてのコンテンツを包含します。
<head>タグは、ドキュメントのメタデータを定義しています。ここで、ページのタイトルとCSSファイルの場所が定義されています。
<title>タグは、ページのタイトルを指定しています。
<link>タグは、外部スタイルシートファイルの場所を指定しています。
<body>タグは、ページの実際のコンテンツを定義しています。
<div class="container">は、ページ内の要素をグループ化するためのコンテナー要素です。CSSスタイルシートで使用されます。
<form>タグは、入力フォームを定義しています。
<input type="text" id="taskInput" placeholder="Enter task">は、タスクの入力フィールドを作成しています。
<input type="submit" value="Add" onclick="addTask(event)">は、フォームの送信ボタンを定義しています。onclick属性により、JavaScript関数 addTask が呼び出され、新しいタスクがリストに追加されます。
<ul id="taskList"></ul>は、タスクのリストを表示するための空の順序なしリストを定義しています。
<script src="script.js"></script>は、JavaScriptのコードが記述された外部ファイルを読み込みます。これにより、ToDoリストの動的な動作が可能になります。

step②　CSSを作成する

CSSは、HTMLコードに適用されることで、ToDoリストの見た目を整えてくれます。

HTMLコードに装飾を加えることができ、より見やすいページを作ることができます。

下記のCSSを参考にHTMLをカスタマイズしてみてください。

.container {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    }
    
    h1 {
    text-align: center;
    }
    
    h2 {
        text-align: center;
    }

    form {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    }
    
    input[type="text"] {
    flex: 1;
    padding: 10px;
    font-size: 16px;
    }
    
    input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    margin-left: 10px;
    cursor: pointer;
    }
    
    ul {
    list-style: none;
    padding: 0;
    }
    
    li {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

    li button {
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    }

step③　JavaScriptを作成する

ToDoリストの処理を行うJavaScriptのコード

では最後のJavaScriptをコーディングしましょう。

// タスクを追加する関数
function addTask() {
    event.preventDefault(); // フォームの送信を防止
    var taskInput = document.getElementById("taskInput");
    var taskList = document.getElementById("taskList");
    var newTask = document.createElement("li");
  
    // タスクが未入力の場合はエラーメッセージを表示して終了する
    if (taskInput.value === "") {
      alert("タスクを入力してください");
      return;
    }
  
    newTask.innerText = taskInput.value;
  
    // Doneボタンを追加
    var doneButton = document.createElement("button");
    doneButton.innerText = "Done";
    doneButton.addEventListener("click", removeTask); // Doneボタンを押した際にremoveTaskを呼び出す
    newTask.appendChild(doneButton);
  
    newTask.addEventListener("click", toggleTask);
    taskList.appendChild(newTask);
    taskInput.value = "";
  }
  
  // タスクを削除する関数
  function removeTask() {
    this.parentNode.parentNode.removeChild(this.parentNode);
  }
  
  // タスクを完了する関数
  function toggleTask() {
    this.classList.toggle("completed");
  }

JavaScriptのコード解説

addTask関数

event.preventDefault(): デフォルトのイベント処理をキャンセルするためのメソッド。このコードでは、フォームの送信をキャンセルしています。
document.getElementById("taskInput"): id属性が”taskInput”の要素を取得するためのメソッド。入力されたタスクの内容を取得するために使用します。
document.getElementById("taskList"): id属性が”taskList”の要素を取得するためのメソッド。タスクの一覧を表示するul要素を取得するために使用してます。
document.createElement("li"): li要素を作成するためのメソッド。新しく追加されるタスクを表示するために使用します。
newTask.innerText = taskInput.value: 新しく作成されたli要素のテキストを、入力されたタスクの内容に設定しています。
document.createElement("button"): button要素を作成するためのメソッド。Doneボタンを表示するために使用します。
doneButton.addEventListener("click", removeTask): Doneボタンがクリックされた時に実行する関数を設定する。この場合、removeTask関数を設定します。
newTask.appendChild(doneButton): 新しく作成されたli要素の子要素として、Doneボタンを追加します。
newTask.addEventListener("click", toggleTask): タスクの文字列部分がクリックされた時に実行する関数を設定する。この場合、toggleTask関数を設定しています。
taskList.appendChild(newTask): 新しく作成されたli要素を、タスク一覧のul要素の子要素として追加します。
taskInput.value = "": 入力欄をクリアするために、入力欄の値を空に設定しています。

removeTask関数

removeTask() 関数は、Doneボタンがクリックされたときに呼び出されます。この関数では、removeChild() メソッドを使用して、Doneボタンが属する li 要素を削除します。

toggleTask関数

toggleTask 関数は、リストアイテムがクリックされたときに実行されるコールバック関数です。クリックされたli要素に対して、classList.toggleメソッドを使って、”completed”クラスをトグル（切り替え）しています。もし、li要素に”completed”クラスがすでに付与されていた場合は、このメソッドによってクラスが削除されます。逆に、”completed”クラスがまだ付与されていなかった場合は、このメソッドによってクラスが追加されます。