【実践】JavaScriptでTODOアプリを作成しよう！第８回完成形とファイル構成

こんにちは、Reiです！

これまで一歩ずつ進めてきたTODOアプリ制作も、ついに完成です。
ここでは全体のコードをまとめて掲載しているので、
同じ構成・同じ処理になっているかを確認しながら見ていきましょう！

フォルダ構成のイメージ
完成コード
今回の学びの振り返り
次にやるべきこと
まとめ

フォルダ構成のイメージ

ここまでのステップで、ファイル構成は次のように作成しています。

プロジェクトフォルダ（ルート） ├ index.html
├ style.css└ src/（フォルダ）　　└ index.js

完成コード

これまでのステップで作成してきたコードを、最終形としてまとめて掲載します。
ファイルごとの役割とあわせて、ポイントを押さえていきましょう。

index.html

入力欄・未完了リスト・完了リストが配置されており、
TODOを追加・管理するための画面構成になっています。
特に、JavaScriptで操作するための id 属性と、
scriptタグが body の最後に配置されている点がポイントです！

【ファイル：index.html】

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>TODOアプリ（JS）</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="input-area">
      <input id="add-text" placeholder="TODOを入力" />
      <button id="add-button">追加</button>
    </div>

    <div class="incomplete-area">
      <p class="title">未完了のTODO</p>
      <ul id="incomplete-list"></ul>
    </div>

    <div class="complete-area">
      <p class="title">完了のTODO</p>
      <ul id="complete-list"></ul>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

style.css

入力エリア・リスト・ボタンの見た目やレイアウトを整えています。
HTMLに付けたクラス名に対してデザインが反映されるため、クラス名が一致していることが重要です！

【ファイル：style.css】

body {
  color: #445566;
  font-family: sans-serif;
}

input {
  border: 1px solid #d1dae3;
  border-radius: 4px;
  padding: 6px 12px;
}

.input-area {
  background-color: #e3f2fd;
  width: 420px;
  padding: 12px;
  margin: 10px;
  border-radius: 10px;
}

button {
  background-color: #64b5f6;
  color: #fff;
  border-radius: 6px;
  border: none;
  padding: 5px 14px;
  margin: 0 4px;
  transition: 0.3s;
}

button:hover {
  background-color: #2196f3;
  cursor: pointer;
}

.incomplete-area {
  width: 420px;
  min-height: 240px;
  padding: 12px;
  margin: 10px;
  border: 3px solid #bbdefb;
  border-radius: 12px;
}

.complete-area {
  width: 420px;
  min-height: 240px;
  padding: 12px;
  margin: 10px;
  border: 3px solid #bbdefb;
  border-radius: 12px;
  background-color: #f0f4f8;
}

.title {
  margin-top: 0;
  text-align: center;
  font-weight: bold;
  color: #1e88e5;
}

.list-row {
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px dashed #d1dae3;
  margin-bottom: 8px;
}

.todo-item {
  margin: 0 10px 0 0;
  flex-grow: 1;
}

src/index.js

入力された文字をもとに新しいTODOを作成し、
リストへの追加・削除・移動といった処理を行っています。
要素の取得 → 要素の生成 → 構造の組み立て → イベントの登録という流れで動いている点がポイントです！

【ファイル：src/index.js】

// 追加ボタンが押された時に実行する関数
const onClickAdd = () => {
  // テキストボックスの値を取得し、中身を空にする
  const inputText = document.getElementById("add-text").value;
  document.getElementById("add-text").value = "";

  // liの生成
  const li = document.createElement("li");

  // divの生成
  const div = document.createElement("div");
  div.className = "list-row";
  
  // pの生成
  const p = document.createElement("p");
  p.className = "todo-item";
  p.innerText = inputText;

  // 完了ボタンの生成
  const completeButton = document.createElement("button");
  completeButton.innerText = "完了";
  completeButton.addEventListener("click", () => {
    // 完了リストに移動
    const moveTarget = completeButton.closest("li");

    // ボタン要素を削除
    const row = moveTarget.querySelector(".list-row");
    row.querySelectorAll("button").forEach((btn) => btn.remove());

    document.getElementById("complete-list").appendChild(moveTarget);
  });

  // 削除ボタンの生成
  const deleteButton = document.createElement("button");
  deleteButton.innerText = "削除";
  deleteButton.addEventListener("click", () => {
    // 未完了リストから削除
    const deleteTarget = deleteButton.closest("li");
    document.getElementById("incomplete-list").removeChild(deleteTarget);
  });

  // 階層構造の組み立て
  div.appendChild(p);
  div.appendChild(completeButton);
  div.appendChild(deleteButton);
  li.appendChild(div);

  // 未完了リストに追加
  document.getElementById("incomplete-list").appendChild(li);
};

// 追加ボタンの要素を取得
const addButton = document.getElementById("add-button");

// ボタンがクリックされたら onClickAdd を実行
addButton.addEventListener("click", onClickAdd);

今回の学びの振り返り

このTODOアプリ制作を通して、
JavaScriptを使った基本的な画面操作の流れを体験してきました。

これまでの流れを振り返ると、

・HTMLで画面の構造を作る
・CSSで見た目を整える
・JavaScriptで動きをつける

という基本から始まり、
入力された内容を扱いながら、画面に反映し、操作できる状態まで段階的に作ってきました。

一つひとつの処理を組み合わせることで、実際に動く仕組みになることを実感できたはずです。

次にやるべきこと

ここまでで、JavaScriptを使ったWebアプリの基礎的な考え方と流れを一通り体験してきました。

この先に進むためには、

・配列やオブジェクトを使ったデータ管理
・関数の使い方の理解を深める
・より読みやすいコードの書き方を意識する

といった基礎の強化がとても重要です。

その上で、

・フレームワーク（React / Vue など）
・TypeScript（型のあるJavaScript）
・Next.js などの実践的な開発環境

といったステップに進んでいくことで、できることの幅が一気に広がっていきます。

まとめ

ここまで本当にお疲れさまでした！

最初は画面の構造を作るところから始まり、
入力できるようになり、リストに追加できるようになり、削除や完了までできるようになりました。

一連の操作ができるTODOアプリが完成しました。

ただし、ここがゴールではありません！

今回学んだ内容はあくまで基礎です。
ここからさらに理解を深めていくことで、より実践的な開発ができるようになります。

この経験を土台にして、これからも一歩ずつスキルを積み上げていきましょう！

【実践】JavaScriptでTODOアプリを作成しよう！第８回完成形とファイル構成の総点検