💖【初心者向け】JavaScriptで作る、恋するToDoリスト💌

プロコム開発チーム

Contents

0.1 〜恋もタスクも、忘れずに〜

1 🛠️ 1. 準備するもの（とてもシンプル）
2 🧱 2. HTMLを書いてみよう（index.html）
3 🎨 3. CSSでかわいくしよう（style.css）
4 💡 4. JavaScriptで恋させよう（script.js）
5 💘 5. 実行してみよう！
6 📚 6. 解説ポイント（学べる技術）
7 🌈 7. 応用編：さらに恋を深めたい方へ
8 📝 まとめ：恋もJavaScriptも、ドキドキが大事
9 💬 最後に…

〜恋もタスクも、忘れずに〜

こんにちは！エンジニア見習いの海老氏です。

今回は、JavaScriptの基本を楽しく学びたい方にピッタリな練習テーマとして…
なんと、「恋するToDoリスト」を作ってみました！

「ToDoリストって普通じゃない？」と思ったあなた。
今回のリストは違います。
💘 タスクを追加すると「好き…」と言われる。
💘 削除すると「ありがとう、忘れないよ」と優しく見送ってくれる。

そんな恋愛風アレンジ付きの、胸キュンなアプリです！

🛠️ 1. 準備するもの（とてもシンプル）

以下の3つのファイルを用意します：

index.html（HTMLファイル）
style.css（スタイルシート）
script.js（JavaScriptファイル）

パソコンにフォルダを作って、この3つを保存していきましょう。

🧱 2. 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 class="container">
    <h1>恋するToDoリスト💌</h1>
    <input type="text" id="taskInput" placeholder="今日のときめきを入力してね…">
    <button onclick="addTask()">追加</button>
    <ul id="taskList"></ul>
  </div>

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

🎨 3. CSSでかわいくしよう（style.css）

body {
  font-family: 'Segoe UI', sans-serif;
  background: #ffeaf6;
  text-align: center;
  padding: 50px;
  color: #c2185b;
}

.container {
  max-width: 400px;
  margin: 0 auto;
  background: #fff0f6;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 15px #ffc1e3;
}

input {
  width: 70%;
  padding: 10px;
  border: 1px solid #ff80ab;
  border-radius: 5px;
}

button {
  padding: 10px 15px;
  background: #f06292;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

ul {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

li {
  background: #ffe4ec;
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
  position: relative;
  transition: 0.3s;
}

li:hover {
  background: #f8bbd0;
}

li::after {
  content: "💔 消す";
  position: absolute;
  right: 10px;
  cursor: pointer;
  color: #c2185b;
}

💡 4. JavaScriptで恋させよう（script.js）

function addTask() {
  const input = document.getElementById('taskInput');
  const taskText = input.value.trim();

  if (!taskText) {
    alert("好きって言ってほしいなら、まず何か書いて…");
    return;
  }

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

  // 消すときのイベント（恋の終わり風）
  li.addEventListener('click', function () {
    alert(`「${taskText}」…ありがとう、忘れないよ。`);
    li.remove();
  });

  document.getElementById('taskList').appendChild(li);
  alert(`「${taskText}」…好き。`);
  input.value = '';
}

💘 5. 実行してみよう！

すべてのファイルを同じフォルダに保存して、index.htmlをブラウザで開いてみてください。

タスクを入力して「追加」→ 好きって言われる💞
リストをクリックすると…切ない別れのセリフ💔

ちょっとした恋愛ドラマの主人公になった気分になりませんか？笑

📚 6. 解説ポイント（学べる技術）

技術	内容
`DOM操作`	`createElement`, `appendChild`, `addEventListener` の基本
`イベント`	クリックで削除＋セリフ
`変数・条件分岐`	入力が空なら処理しない・セリフの分岐
`alert()`	UIがない中での簡単な対話表現に便利