Zenn
🙆‍♀️

[javascript]TODOアプリ作成

2023/09/12に公開
tech

はじめに

javascriptのアウトプットとしてTODOアプリを作成しました。
formに入力した値をform以下に一覧表示されるような動作にしました。

入力フォームの作成

はじめに入力フォームを作成し少しだけレイアウトを整えていきます。
レイアウト調整はbootstrapを使用します。
index.htmlファイルを作成し下記のように記述します。

"補足"：htmlファイルを作成後!を記述しtabを押すとデフォルトのhtmlの記述を呼び出すことができます！！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  //bootstrapの導入
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  <title>Document</title>
</head>
<body class="bg-light">
  <div class="container w-75">
    <h1 class="text-center text-info my-4">TODO</h1>
    <form id="form" class="mb-4">
      <input type="text" id="input" class="form-control" placeholder="TODOを入力" autocomplete="off">
    </form>
  </div>
  <script src="index.js"></script>
</body>
</html>

これでフォーム欄を作成できました。
このような感じになっていると思います。
次はユーザーが入力した値を記録できるようにします。

ユーザーが入力した値を記録する

ユーザーがフォームに入力した後にエンターを押したとき記録されるようにします。
index.jsファイルを作成して動作を記述していきます。

index.js
①const form = document.getElementById("form");
 const input = document.getElementById("input");

②form.addEventListener("submit", function (event) {
  // デフォルトの設定をなくす
  // デフォルトでformを保存するとリロードされる
  event.preventDefault();
  });

流れとしては

  1. index.htmlのidで指定したformとinputをjsファイルに取得させる。

  2. formに入力されたときにinputされた値を取得させる。
    また、デフォルトだとエンターを押した後リロードされてしまうのでevent.preventDefault();で無効にする。

これでconsole.log(input.value);を②に記述するとデベロッパーツールのconsole内で入力した内容が反映されます。

取得したフォーム値を表示させる

次にulとliタグを使って、リストとして表示させようと思います。
まずindex.htmlにulタグを追加します。

  <div class="container w-75">
    <h1 class="text-center text-info my-4">TODO</h1>
    <form id="form" class="mb-4">
      <input type="text" id="input" class="form-control" placeholder="TODOを入力" autocomplete="off">
    </form>
    <ul class="list-group text-secondary" id="ul"></ul> //追加
  </div>

submitしたタイミングでliタグ(リスト表示)を追加したいので下記のように記述します。

index.js
const form = document.getElementById("form");
const input = document.getElementById("input");
const ul = document.getElementById("ul");

form.addEventListener("submit", function (event) {
  // デフォルトの設定をなくす
  // デフォルトでformを保存するとリロードされる
  event.preventDefault();
  add();
  });
  
  function add(todo) {
    let todoText = input.value;
    if (todoText){
      const li = document.createElement("li");
      li.innerText = input.value; //formに入力した値を取得
      li.classList.add("list-group-item"); //liのclassを追加
      ul.appendChild(li); //ulの子要素としてliを設定
      input.value = ""; //入力後フォームを空にする
    }
  }
  1. const ul = document.getElementById("ul");でulタグを取得する。
  2. submitした時に表示させたいのでadd();をform.addEventListener内に記述する。
  3. function add(todo)を作成してformを表示させる設定をする。
  4. 空欄で入力すると空のulタグが表示されるのでif (todoText)で空欄の時に入力されないようにする。if(todoText < 0)と同義です。

これで入力した値が表示されるようになりました。
ただこのままだとリロードすると入力した内容が消えてしまいます。
その為、入力した値を保存してそのデータを表示できるようにします。

入力した値を保存しそのデータを表示する

デスクトップに保存し、表示できるようにします。
下記のように記述します。

indes.js
const form = document.getElementById("form");
const input = document.getElementById("input");
const ul = document.getElementById("ul");
⑥const todos = JSON.parse(localStorage.getItem("todos"));

if (todos) {
  todos.forEach(todo => {
    add(todo);
  })
}

form.addEventListener("submit", function (event) {
  // デフォルトの設定をなくす
  // デフォルトでformを保存するとリロードされる
  event.preventDefault();
  add();
  });
  
  function add(todo) {
    let todoText = input.value;
    
    if (todo) {
      todoText = todo.text;
    }
    
    if (todoText) {
    const li = document.createElement("li");
    li.innerText = todoText;
    li.classList.add("list-group-item");
    
    if (todo && todo.completed) {
      li.classList.add("text-decoration-line-through")
    }
    
    ul.appendChild(li);
    input.value = "";
    saveData();
    }
  }
  
  ①function saveData() {
   ② const lists = document.querySelectorAll("li");
   ④ let todos = [];
    
   ③ lists.forEach(list => {
      let todo = {
        text: list.innerText ,
        completed: list.classList.contains("text-decoration-line-through")
      };
   ④  todos.push(todo)
    });
   ⑤ localStorage.setItem("todos", JSON.stringify(todos));
  }
  1. saveData();を記述しfunction saveData() {に定義します。
  2. const lists = document.querySelectorAll("li");でliタグに入力された値をすべて取得できるようにします。
  3. lists.forEach(list => {～～で②で取得した情報を全表示させます。
  4. let todos = [];で③の情報を配列で取得し、todos.push(todo)で追加されるようにします。
  5. localStorage.setItem("todos", JSON.stringify(todos));でtodosに配列かされたデータを保存できるようにします。
  6. 保存した情報を表示させるためにtodosを定義します。

これで入力した内容が保存され、リロードしても消えなくなりました。

まとめ

javascriptを使用して簡単なwebアプリを作成しました！
今回は最低限の機能だけだったので、削除、編集、完了マークも後日追加してみようと思います。
javascriptへの理解が深まれば動的なサイトを作れるようになるので、根気強く学習していきます。

Discussion