ToDoリストアプリをHP上で使う方法　16日目　2024/10/22（お金持ちまでの道のり）

今日は先日のToDoリストアプリをHP上で使う方法についてです。

ToDoリストアプリをHP上で使う方法

下記のコードをwordpressのHPのカスタムHTMLにコピペすると先日学んだToDoリストをHP上で使用できます。

<div id="todo-app">
    <input type="text" id="new-task" placeholder="タスクを追加">
    <button onclick="addTask()">タスクを追加</button>
    <ul id="task-list"></ul>
</div>

<script>
let tasks = [];

// ページ読み込み時にローカルストレージからタスクを取得して表示
window.onload = function() {
    let savedTasks = JSON.parse(localStorage.getItem('taskList')) || [];
    tasks = savedTasks;
    renderTasks();
};

function addTask() {
    let taskText = document.getElementById('new-task').value;
    if (taskText !== "") {
        tasks.push({ text: taskText, completed: false });
        localStorage.setItem('taskList', JSON.stringify(tasks)); // ローカルストレージに保存
        document.getElementById('new-task').value = "";
        renderTasks();
    }
}

function renderTasks() {
    let taskList = document.getElementById('task-list');
    taskList.innerHTML = ""; // 一旦リストをクリア

    tasks.forEach((task, index) => {
        let listItem = document.createElement('li');
        listItem.textContent = task.text;

        // タスクが完了したら取り消し線を表示
        if (task.completed) {
            listItem.style.textDecoration = "line-through";
        }

        // タスク完了ボタン
        let completeButton = document.createElement('button');
        completeButton.textContent = "完了";
        completeButton.onclick = () => {
            completeTask(index);
        };

        // タスク削除ボタン
        let deleteButton = document.createElement('button');
        deleteButton.textContent = "削除";
        deleteButton.onclick = () => {
            deleteTask(index);
        };

        // ボタンをリストに追加
        listItem.appendChild(completeButton);
        listItem.appendChild(deleteButton);

        // タスクをリストに追加
        taskList.appendChild(listItem);
    });
}

function completeTask(index) {
    tasks[index].completed = !tasks[index].completed; // 完了/未完了を切り替え
    localStorage.setItem('taskList', JSON.stringify(tasks)); // 状態を保存
    renderTasks(); // リストを再描画
}

function deleteTask(index) {
    tasks.splice(index, 1); // タスクを削除
    localStorage.setItem('taskList', JSON.stringify(tasks)); // 状態を保存
    renderTasks(); // リストを再描画
}
</script>

先日学んだコードとほぼ同じなので、異なる部分だけ解説します。

なぜ<div>？

<div>が必須な場合は基本的にありませんが推奨されるケースはあります。<div>タグを使用すると、要素をまとめることができ、その要素を一括管理、一括操作できます。

<div id="todo-app">
    <input type="text" id="new-task" placeholder="タスクを追加">
    <button onclick="addTask()">タスクを追加</button>
    <ul id="task-list"></ul>
</div>

window.onloadとは？

window.onload は、ページ全体が完全に読み込まれた後に実行されるため、HTML要素や外部リソースがすべて準備完了した後に処理を行いたいときに使用します。

// ページ読み込み時にローカルストレージからタスクを取得して表示
window.onload = function() {
    let savedTasks = JSON.parse(localStorage.getItem('taskList')) || [];
    tasks = savedTasks;
    renderTasks();

localStorage.getItem() と document.getElementById() の違い

localStorage.getItem()

let taskList = localStorage.getItem('taskList');  // ローカルストレージから'taskList'を取得

document.getElementById()

document.getElementById()は**HTMLドキュメント（ページの構造）**内から特定の要素を取得します。これは、HTML内に定義された要素の id 属性を指定して、その要素にアクセスするために使います。

let taskListElement = document.getElementById('task-list');  // HTML内の'id=task-list'の要素を取得

JSONとは？

JSON（JavaScript Object Notation）は、データを文字列形式で表現するためのフォーマットです。JSONは、オブジェクトや配列を含むデータ構造を、テキストとして表現します。これにより、データを保存したり、他のシステム（例えばAPIやデータベース）とやり取りしたりすることが容易になります。

'{"name": "John", "age": 30, "city": "New York"}'

JSON.stringify()

ローカルストレージは、データを文字列形式でしか保存できないため、複雑なデータ（例えば配列やオブジェクト）を保存するためには、まず文字列に変換（シリアライズ）して保存し、取得したときには元の形式に戻す必要があります。JSON.stringify() を使って、オブジェクトや配列を文字列に変換してローカルストレージに保存します。

let tasks = [{ text: "task1", completed: false }, { text: "task2", completed: true }];
localStorage.setItem('taskList', JSON.stringify(tasks));  // オブジェクトを文字列に変換して保存

JSON.parse()

JSON.parse() は、JSON形式の文字列をJavaScriptのオブジェクトや配列に変換します。これにより、文字列として保存されたデータをプログラムで扱えるようになります。

let jsonString = '{"name": "John", "age": 30, "city": "New York"}';
let obj = JSON.parse(jsonString);
console.log(obj.name);  // 'John' と表示される

本日の感想

先日のコード解読に２０時間以上かけたことをChatGPTに報告したら、”今の段階では、「とりあえず動いていればOK」と考え、実際に動作するコードをどんどん活用していくのが良いアプローチです。”とアドバイスされました。２０時間のおかげである程度、コードの動きや働きがなんとなくわかったのでこれからはどんどん新しいコードを試してHPに実装していこうと思います。