Zenn
🦔

バニラJavaScriptで学ぶ！DOM操作とイベント処理の基本

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

はじめに

JavaScriptを学び始めたときに、最初にぶつかる壁。
それが「DOM操作」と「イベント処理」です。

この記事では、バニラJavaScript（純粋なJS）だけを使って、以下のような基本を丁寧に解説します：

  • DOMとは何か？
  • 要素の取得と生成：getElementById, createElement, appendChild
  • ユーザーの操作を検知する：イベントリスナーの使い方
  • HTMLとJavaScriptの関係性

初心者の方でも、コードを写経しながら読み進めるだけで自然に理解できる構成になっています。

DOMとは？

Document Object Model（ドキュメント・オブジェクト・モデル）の略。

ブラウザがHTMLを読み込むと、ページ全体を「オブジェクト（部品）」として解釈します。JavaScriptはこのDOMを通じて、HTML要素を操作することができます。

例：HTMLの<div>タグをJavaScriptで取得・変更する

要素の取得・生成・追加

<input id="user-input" type="text" placeholder="名前を入力">
<button id="submit-button">送信</button>
<ul id="output-list"></ul>

上記のHTMLに対して、次のようにJavaScriptを記述します：

const input = document.getElementById("user-input");
const button = document.getElementById("submit-button");
const list = document.getElementById("output-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: ID属性から要素を取得
  • createElement: 新しい要素（ここではli）を作る
  • appendChild: リストにliを追加する
  • addEventListener: ボタンクリックで実行する関数を設定

初学者がつまずきやすいポイント

Q. 「createElementって何を作ってるの？」

→ DOMの中に新しいHTML要素をJavaScriptで作っているイメージです。

Q. 「イベントってどう発生してるの？」

→ ボタンがクリックされた瞬間に、登録された関数（イベントリスナー）が発動します。

Q. 「なぜ input.value を空にするの？」

→ 入力完了後にフォームをリセットするためです。

実践課題

  • 入力が空のときに「エラーメッセージ」を表示する
  • リスト項目に「削除ボタン」を追加する
  • localStorage を使って、ページを閉じてもデータが残るようにする

これらに取り組むことで、JavaScriptの理解がさらに深まります。

おわりに

DOM操作とイベント処理を理解すれば、JavaScriptで作れることの幅が一気に広がります。

まずは「手で書いて動かす」体験を通して、コードと仲良くなりましょう。

Zennで他にも初心者向けの教材を公開中ですので、ぜひプロフィールからチェックしてみてください！

Discussion