JavaScriptでTodoリスト。

2023年6月9日 05:35

SwftUIでTodoやったんでJavaScriptでも簡単Todoリスト。
JSBinで試しながらやってます。参考サイトは以下。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>ToDo-List</title>
  <style> 
    body{    
      font-family:sans-serif;
    }
  </style>
</head>
<body>
  <h2>ToDoリスト</h2>
  <form>
    <input class="task_value" type="text" />
    <button class="task_submit" type="button">追加!</button>
  </form>
  <div>
    <h3>一覧</h3>
    <ul class="task_list"></ul>
  </div>  
</body>
</html>

こんな感じになります。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>ToDo-List</title>
</head>
<body>
</body>
</html>

基本のHTMLタグです。これにCSS

  <style> 
    body{    
      font-family:sans-serif;
    }
  </style>

ホームページの文字をゴシックにします。

  <h2>ToDoリスト</h2>

<h2>で表題

  <form>
    <input class="task_value" type="text" />
    <button class="task_submit" type="button">追加!</button>
  </form>

<form>で入力部分

  <div>
    <h3>一覧</h3>
    <ul class="task_list"></ul>
  </div>

出力部分。ここに追加したリスト項目が出てきます。

JavaScript

タグにつけられてclass名を目印にJavaScritを使って動かします。

まずタグで指定したデータを取得します。変数に入れていきます。

const taskValue = document.getElementsByClassName('task_value')[0];
const taskSubmit = document.getElementsByClassName('task_submit')[0];
const taskList = document.getElementsByClassName('task_list')[0];

document.getElementsByClassName('task_value')[0];

"[0]"となっているのはクラスを持つ最初の要素を取得する場合には必要です。クラスは複数ある場合があるので配列的なデータの扱いとなっています。

実際の動きを見ていきます。

<button class="task_submit" type="button">追加!</button>

追加ボタンが押されたら、という動作は

taskSubmit.addEventListener('click', e => {
  e.preventDefault();
  const task = taskValue.value;
  addTasks(task);
  taskValue.value = '';
});

class名"taskSubmit"という目印を使います。これにクリックした場合の動きを決めます。

e.preventDefault();

これはちょっとわかりにくですがブラウザ側の規定の動作をキャンセルするして次の動作をさせることができます。

const task = taskValue.value;
addTasks(task);
taskValue.value = '';

では入力のあった文字を関数addTasks(task)で処理して taskValue.value = ''で入力した文字を空欄にしています。

addTasks()は

const addTasks = (task) => {
  const listItem = document.createElement('li');
  const showItem = taskList.appendChild(listItem);
  showItem.innerHTML = task;

  const deleteButton = document.createElement('button');
  deleteButton.innerHTML = 'Delete';
  listItem.appendChild(deleteButton);

  deleteButton.addEventListener('click', e => {
    e.preventDefault();
    deleteTasks(deleteButton);
  });
};

新しいリストの追加と、削除ボタンを作る、そして削除ボタンを出現させて、削除ボタン押せば追加したリストを消せます。

削除ボタンは関数"deleteTasks(deleteButton)"を使います。

const deleteTasks = (deleteButton) => {
　const chosenTask = deleteButton.closest('li');
　taskList.removeChild(chosenTask);
};

全コードは

const taskValue = document.getElementsByClassName('task_value')[0];
const taskSubmit = document.getElementsByClassName('task_submit')[0];
const taskList = document.getElementsByClassName('task_list')[0];

const addTasks = (task) => {
  const listItem = document.createElement('li');
  const showItem = taskList.appendChild(listItem);
  showItem.innerHTML = task;

  const deleteButton = document.createElement('button');
  deleteButton.innerHTML = 'Delete';
  listItem.appendChild(deleteButton);

  deleteButton.addEventListener('click', e => {
    e.preventDefault();
    deleteTasks(deleteButton);
  });
};

const deleteTasks = (deleteButton) => {
  const chosenTask = deleteButton.closest('li');
  taskList.removeChild(chosenTask);
};

taskSubmit.addEventListener('click', e => {
  e.preventDefault();
  const task = taskValue.value;
  addTasks(task);
  taskValue.value = '';
});

関数はアロー関数を使ってEvent objectを利用します。

Event objects
ときどきイベントハンドラー関数内で event、evt、単に e などと名付けられた引数を見かけるかもしれません。これらはイベントオブジェクトと呼ばれ、イベントの追加機能や情報を提供する目的でイベントハンドラーに自動的に渡されます。

https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events

おまけ。

ついでにSwiftUIでTodoに追加するだけの簡単なものを作ってみます。

import SwiftUI

struct ContentView: View {
    
    @State var arrs = ["apple","orange","sp"]
    @State  var inp = ""
    
    var body: some View {  
            NavigationStack{
                VStack{
                    HStack{                     
                        TextField("入力してください", text: $inp)
                            .padding(20)                  
                        Button(action: {
                            arrs.append(inp)
                        }){
                            Text("Button")                                    
                        }
                    }                   
                    List(arrs,id:\.self){arr in
                            Text(arr)                            
                        } .navigationTitle("Todo List") 
                    }              
                }
    } 
}

配列に追加することでリストに追加しています。

この記事が気に入ったらサポートをしてみませんか？