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

2025.09.23

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

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

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

完成アプリの紹介

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要素を生成して追加・削除する処理を体験できます。

学習ポイント

今回のToDoアプリでは、以下のポイントを重点的に学べます。

  1. DOM操作
    • document.createElement() や appendChild() を使ってHTML要素を生成する方法
  2. イベント処理
    • addEventListener を使い、クリック時に特定の処理を実行する仕組み
  3. 状態管理
    • チェック済み／未チェックを見た目で区別する工夫
  4. LocalStorageの活用
    • データをブラウザに保存してリロード後も使えるようにする方法

これらはすべて、今後のWebアプリ開発で必ず役立つスキルです。

公開方法（GitHub Pages）

完成したら、GitHub Pagesを使って公開しましょう。

  1. GitHubで新しいリポジトリを作成
  2. index.html をアップロード
  3. 「Settings → Pages」で公開を有効化
  4. 公開URLを確認

これで自分のアプリを世界に発信できます。SNSやブログでシェアすると、反応が得られて学習の励みになります。

まとめ

  • ToDo管理アプリは初心者に人気で、実用性も高い
  • DOM操作やイベント処理など、JavaScriptの基礎を実践的に学べる
  • GitHub Pagesを使えば無料で公開可能

小さなアプリでも、公開すれば立派な成果物になります。

次回予告

Day05では「天気予報アプリ（API連携の入門）」を制作します。
APIを使って外部データを取得し、アプリに表示する方法を学びます。

「外部サービスと連携できるようになる」と、アプリ開発の可能性が一気に広がります。ぜひご期待ください！

タイトルとURLをコピーしました