レッスン7：ミニアプリを作ろう

⏱ 約25分やってみよう 1 クイズ 1

🎯 このレッスンで学ぶこと

addEventListenerでイベントを登録できます。
input.valueで入力値を取得できます。
createElementとappendChildで要素を追加できます。
HTML・CSS・JavaScriptを組み合わせてアプリを作れます。

📖 前回の復習（レッスン6）

document.getElementById() や querySelector() でHTML要素を取得する
textContent でテキストを変更、style でスタイルを変更できる
要素.addEventListener("click", 関数) でボタンクリックに反応させる

📖 導入 — 全部つなげてアプリを作ろう！

HTMLでページの骨格を作り、CSSで見た目を整え、JavaScriptで動きをつける。この3つを組み合わせれば、本物のウェブアプリが作れます。このレッスンはJavaScriptコースの最終回です。これまで学んだ変数・条件分岐・ループ・関数・DOM操作をすべて使って、ToDoリストアプリを一から作り上げましょう！

📝 新しく使うAPI

イベントリスナー：

addEventListener("イベント名", 実行する関数) の形で書きます。

const btn = document.getElementById("btn");
btn.addEventListener("click", function() {
  console.log("ボタンが押された！");
});

イベント名	タイミング
`"click"`	クリックされたとき
`"input"`	入力欄の値が変わったとき
`"keydown"`	キーが押されたとき

入力値の取得：

const input = document.getElementById("text-input");
console.log(input.value);  // 入力欄に書かれたテキストが表示される

要素の追加： /

const li = document.createElement("li");  // 新しい要素を作る
li.textContent = "新しい項目";             // テキストを設定する
document.getElementById("list").appendChild(li);  // 追加する

💻 ToDoリストアプリを作ろう！

ToDoアプリ用のフォルダを作ります。

ToDoアプリは複数のファイルを使うため、専用のフォルダを作ります。

VS Codeで my-practice フォルダを開く
my-practice フォルダの中に todo-app フォルダを作る
todo-app フォルダの中に3つのファイルを作る：index.html・style.css・script.js（3つのファイルは必ず同じフォルダに置いてください）
各ファイルに以下のコードを書く
index.html をダブルクリックしてブラウザで確認する

HTML

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDoリスト</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="app">
      <h1>ToDoリスト</h1>
      <div class="input-area">
        <input type="text" id="todo-input" placeholder="やることを入力...">
        <button id="add-btn">追加</button>
      </div>
      <ul id="todo-list"></ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

✅ ここまでの確認: HTMLだけ書いてブラウザで開いてみよう。入力欄とボタンが表示されていればOK！（まだ動かなくて大丈夫）

CSS（style.css）

* { box-sizing: border-box; }

body {
  font-family: sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 40px 16px;
}

#app {
  background-color: #fff;
  border-radius: 12px;
  padding: 24px;
  max-width: 480px;
  margin: 0 auto;
}

h1 { text-align: center; color: #333; }

.input-area {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

#todo-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
}

button {
  padding: 8px 16px;
  background-color: #3a86ff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}

#todo-list { list-style: none; padding: 0; margin: 0; }

#todo-list li {
  padding: 12px;
  border-bottom: 1px solid #eee;
}

▶ プレビュー

✅ ここまでの確認: CSSを保存してブラウザをリロード。白いカード風のデザインになり、入力欄とボタンが横並びになっていればOK！

JavaScript（script.js）

script.js

const input = document.getElementById("todo-input");
const addBtn = document.getElementById("add-btn");
const list = document.getElementById("todo-list");

function addTodo() {
  const text = input.value.trim();
  if (text === "") return;  // 空のときは何もしない

  const li = document.createElement("li");
  li.textContent = text;
  list.appendChild(li);

  input.value = "";  // 入力欄をリセット
  input.focus();     // 入力欄にカーソルを戻す
}

addBtn.addEventListener("click", addTodo);

// Enterキーでも追加できるようにする
input.addEventListener("keydown", function(e) {
  if (e.key === "Enter") addTodo();
});

ブラウザで開いて、やることを入力して「追加」ボタンを押してみましょう。リストに項目が追加されたら完成です！ 🎉

✅ 最終確認:
・入力欄に文字を入力して「追加」ボタンを押す → リストに追加される
・Enter キーでも追加できる
・空のまま追加しても何も起きない
3つとも動けば完成です！

⚠️ よくあるミス

input.value ではなく input.textContent を使ってしまう：入力欄の値を取得するには input.value を使います。textContent は入力欄には使えません。
HTML・CSS・JS のファイルが別のフォルダにある：index.html・style.css・script.js は同じフォルダに置きましょう。別のフォルダにあるとファイルが読み込めません。
空文字のチェックを忘れる：入力欄が空のまま追加ボタンを押すと、空の項目が追加されてしまいます。if (text === "") return; のように空チェックを入れましょう。

📌 まとめ

操作	書き方
イベントを設定	`要素.addEventListener("click", 関数)`
入力値を取得	`input要素.value`
新しい要素を作る	`document.createElement("タグ名")`
要素を追加する	`親要素.appendChild(子要素)`