バニラJavaScriptだけでTODOアプリを作ろう！初心者が最初につまづくポイントも解説

はじめに

「ReactやVueより、まずはバニラJSでDOM操作を理解したい！」
そんなあなたに向けて、JavaScriptだけで作るTODOアプリの教材をお届けします。

• フレームワークに頼らず、自分の手でコードを書く力をつけたい
• HTML/CSSは少し触ったことがある
• 「関数って何？」くらいのレベル感の方におすすめです。

今回の記事では、TODOアプリを作りながら、初心者がつまづきやすいポイントも解説していきます！

---

1. 開発環境の準備

• ブラウザ（Chrome推奨）
• テキストエディタ（VSCodeがおすすめ）

フォルダ構成（超シンプル）

todo-app/
├── index.html
├── style.css
└── main.js

※最初は1ファイルでもOK！

---

2. HTMLを用意する（入力欄・ボタン・リスト）

<input type="text" id="todo-input" placeholder="やることを入力">
<button id="add-button">追加</button>
<ul id="todo-list"></ul>

---

3. JavaScriptでDOMを操作する

const input = document.getElementById('todo-input');
const button = document.getElementById('add-button');
const list = document.getElementById('todo-list');

button.addEventListener('click', () => {
  const text = input.value;
  if (!text) return;

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

  input.value = '';
});

---

4. 初心者がつまずきやすいポイント解説

• getElementById って何？
• createElement / appendChild のイメージがつかない
• 変数がどこで使われてるのか追えない

対策：

• console.logでDOMの中身を確認してみよう
• 処理の流れを図解してみると頭に入る

---

5. 発展課題

• 削除ボタンをつける
• 完了・未完了の状態を切り替える
• ローカルストレージに保存してみる

これらを順番に挑戦していくと、**「動く喜び × 自分で拡張する力」**が身につきます！

---

おわりに

フレームワークを使う前に、「DOMってこう動くんだ！」という感覚を養っておくと、今後どんな技術を学ぶときにも役立ちます。

この記事が、「JavaScriptが楽しい」と思えるきっかけになればうれしいです！