100日チャレンジ4日目の成果｜ToDo管理アプリ開発で学ぶ入力処理とデータ保存

プログラミング初心者にとって「学んだ知識を活かして、身近で役立つアプリを作る」ことは大きなモチベーションになります。

100日間アプリ開発チャレンジ（#100DaysOfCode / #100日チャレンジ）の Day04 では、シンプルな ToDo管理アプリ を制作しました。

タスクを入力して追加したり、チェックボックスで完了を管理したりする機能は、日常的にも便利です。
さらに、このアプリを作る過程で DOM操作 や イベント処理 など、JavaScriptの基本をしっかり学ぶことができます。

完成アプリの紹介
開発の流れ
学習ポイント
公開方法（GitHub Pages）
まとめ
次回予告

完成アプリの紹介

Day04で作成したToDo管理アプリの機能は以下の通りです。

タスクを入力して追加できる
チェックボックスで完了済みにできる
削除ボタンで不要なタスクを消せる
（拡張）LocalStorageを利用してブラウザにデータ保存が可能

👉 実際に触ってみる
Day04 — ToDo管理アプリ公開ページ

シンプルながら「自分の生活に役立つアプリを自分で作れる」という達成感を得られます。

開発の流れ

今回のアプリは、以下の流れで開発しました。

1. HTML：入力欄とリストの作成

ToDoアプリに必要なのは「入力欄」「追加ボタン」「タスク一覧表示」の3つです。

サンプルHTML：

<h1>ToDoリスト</h1>
<input id="taskInput" type="text" placeholder="タスクを入力">
<button id="addBtn">追加</button>
<ul id="taskList"></ul>

id属性を付与することで、JavaScriptから要素を操作できるようになります。

2. CSS：シンプルで見やすいデザイン

CSSで少しスタイルを加えるだけで、アプリがぐっと使いやすくなります。

リスト形式で整列
完了済みタスクには取り消し線をつける
削除ボタンを小さく配置

モバイル環境でも崩れにくいレイアウトを意識すると、実用性が高まります。

3. JavaScript：アプリの動作を実装

JavaScriptで以下の機能を実装します。

タスク追加：入力値を取得し、リストにli要素を作成
完了チェック：チェックボックスをクリックしたら見た目を切り替え
削除機能：削除ボタンで要素を削除
（拡張）LocalStorage保存：タスクをブラウザに保存して再読み込み後も復元

例：タスク追加のコード

const input = document.getElementById("taskInput");
const addBtn = document.getElementById("addBtn");
const list = document.getElementById("taskList");

addBtn.addEventListener("click", () => {
  const taskText = input.value.trim();
  if(taskText === "") return;

  const li = document.createElement("li");
  li.textContent = taskText;

  // 削除ボタン追加
  const delBtn = document.createElement("button");
  delBtn.textContent = "削除";
  delBtn.addEventListener("click", () => {
    list.removeChild(li);
  });

  li.appendChild(delBtn);
  list.appendChild(li);
  input.value = "";
});

このように、DOM要素を生成して追加・削除する処理を体験できます。