🐈

バニラJSで作る！初心者向けTODOアプリ教材

に公開
JavaScript
Zenn
初心者向け
学習メモ
dom操作
tech

はじめに

JavaScriptを学び始めたとき、まずつまずくのが「DOM操作」や「イベント処理」。

ReactやVueを使う前に、JavaScriptの基本をしっかり理解しておくことはとても大切です。

この記事では、バニラJS（フレームワークを使わない素のJavaScript）だけでTODOアプリを作りながら、次のような内容を丁寧に解説します。

  • DOMの基本操作
  • イベントリスナーの使い方
  • 配列の操作（push / filter など）
  • よくあるつまずきポイントとその解消法

まずは「手で書いて、動かして、理解する」ことから始めましょう！

ステップ1：HTMLの準備

<input id="todo-input" type="text" placeholder="やることを入力">
<button id="add-button">追加</button>
<ul id="todo-list"></ul>
  • input: やることを入力するフォーム
  • button: 「追加」ボタン
  • ul: TODOのリストを表示するエリア

ステップ2：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 = '';
});

ここでは次のような基本操作を使っています：

  • getElementById：HTMLの要素を取得
  • addEventListener：クリックイベントの処理を設定
  • createElement / appendChild：要素を作って追加

よくあるつまずきポイントと解説

「DOMって何？」

→ HTMLの構造をJavaScriptで扱うための仕組み。

「イベントリスナーって何？」

→ ユーザーの操作（クリックなど）に反応する関数を登録する機能。

「なぜ input.value を空にしてるの？」

→ 入力後に入力欄をクリアするため。

発展課題（応用）

TODOアプリに次のような機能を追加して、理解を深めていきましょう：

  • 削除ボタンを追加
  • ローカルストレージへの保存
  • 完了・未完了の切り替え

おわりに

JavaScriptの力をつけるには、まずは「小さなアプリをバニラJSで作ってみる」ことが効果的です。

今回紹介したTODOアプリは、ほんの入り口。

次は、ローカルストレージを使った保存機能や、状態管理の考え方にもチャレンジしてみましょう！

Discussion