JavaScript コース

✓ ✓ ✓ ✓ ✓ 6 7

6 STEP 6 / 7

JavaScriptでHTMLを操作しよう（DOM入門）

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

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

DOMとは何かを説明できます。
getElementById・querySelectorで要素を取得できます。
textContentでテキストを変更できます。
addEventListener("click", 関数)でクリックに反応させられます。

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

function 名前() { } で関数を定義し、名前() で呼び出す
引数で値を受け取り、return で値を返せる
関数を使うと処理をまとめて何度でも再利用できる

📖 導入 — JavaScriptでページを「動かす」

これまでのレッスンでは、コンソールやアラートに表示するだけでページ自体は変わりませんでしたよね。このレッスンでは、JavaScriptからHTMLの要素を直接操作して、ページの内容をリアルタイムに変える方法を学びます。ここからが「本物のウェブアプリ」への第一歩です！

📝 DOM操作の基本

📖 DOMとは：「Document Object Model」の略。ブラウザがHTMLを読み込んだとき、各タグを「操作できる部品」として管理する仕組み。document.getElementById() などでHTMLの要素を取得・変更できるのはDOMのおかげ。

要素を取得する

// id で取得
const title = document.getElementById("title");

// CSSセレクタで取得（id・class・タグ名）
const title = document.querySelector("#title");
const btn   = document.querySelector(".btn");
const p     = document.querySelector("p");

💡 querySelector のセレクタの書き方：

document.querySelector("#title") → id="title" の要素（# は id）
document.querySelector(".btn") → class="btn" の要素（. は class）
document.querySelector("p") → 最初の <p> タグ（タグ名をそのまま書く）

CSSでスタイルを当てるときと同じ書き方です。CSSを学んでいれば自然に使えます！

要素の内容・スタイルを変える

const title = document.getElementById("title");

title.textContent = "テキストが変わった！";  // テキストを書き換え

title.style.color    = "red";               // 文字色を変更
title.style.fontSize = "32px";              // 文字サイズを変更

💡 CSSでは font-size とハイフンで書きますが、JavaScriptでは fontSize とキャメルケース（単語の先頭を大文字）で書きます。

他の例: background-color → backgroundColor、border-radius → borderRadius、margin-top → marginTop

▶ プレビュー

クリックに反応する：

<button id="myBtn">クリック</button>

const btn = document.getElementById("myBtn");

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

▶ プレビュー

📘 コラム：onclick という書き方もあります

古いコードでは onclick="関数名()" という書き方も見かけます。どちらも動きますが、addEventListener の方が複数のイベントを管理しやすいため、現在は addEventListener を使うのが一般的です。

クラスの追加・切り替え：

要素にCSSクラスを追加・削除・切り替えできます。スタイルの変更はCSSに任せ、JSではクラスの付け外しだけ行うのがベストプラクティスです。

const box = document.getElementById("box");

// クラスを追加
box.classList.add("active");

// クラスを削除
box.classList.remove("active");

// クラスの切り替え（あれば消す、なければ追加）
box.classList.toggle("active");

▶ プレビュー

classList.toggle は「ダークモード切り替え」「メニューの開閉」など、ON/OFF を切り替えるUIで頻繁に使います。

💡 classList のメソッド一覧:
・.add("name"): クラスを追加
・.remove("name"): クラスを削除
・.toggle("name"): あれば削除、なければ追加
・.contains("name"): クラスがあるか確認（true/false）

⚠️ innerHTML vs textContent:
・textContent: テキストだけを安全に書き換える（HTMLタグは文字として表示される）
・innerHTML: HTMLタグを含む内容を書き換える（XSS攻撃のリスクあり）

ユーザー入力を表示するときは必ず textContent を使いましょう。innerHTML にユーザー入力を入れると、悪意あるスクリプトが実行される危険があります。

💡 click 以外のイベント（予告）:
・"mouseover": マウスが要素の上に乗ったとき
・"input": テキスト入力欄の値が変わったとき
・"submit": フォームが送信されたとき
・"keydown": キーが押されたとき
全て addEventListener("イベント名", 関数) の形で使えます。

💻 やってみよう！

このレッスンでは、JavaScriptをHTMLファイルの <script> タグの中に直接書きます。（lesson4では js-lesson4.js という別ファイルを使いましたが、このレッスンでは1つのファイルにまとめて書きます）（lesson5で作ったファイルとは別に、新しく作ってください）

VS Codeで my-practice フォルダに新しいファイル js-lesson6.html を作る
以下のコードをすべて書く
js-lesson6.html をダブルクリックしてブラウザで確認する

ボタンを押すたびにメッセージが切り替わるページを作ります。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>DOM操作の練習</title>
  </head>
  <body>
    <h1 id="message">こんにちは！</h1>
    <button id="changeBtn">メッセージを変える</button>

    <script>
      let count = 0;
      const messages = ["こんにちは！", "やあ！", "ようこそ！", "はじめまして！"];

      document.getElementById("changeBtn").addEventListener("click", function() {
        count = (count + 1) % messages.length;
        document.getElementById("message").textContent = messages[count];
      });
    </script>
  </body>
</html>

💡 count % messages.length は「配列の最後まで来たら0に戻る」という計算です。% は割り算の余りを求める演算子です。

自由課題:

ボタンを押すと h1 の文字色が赤に変わるようにしてみよう（style.color = "red"）
「+1」ボタンを押すたびに数字が増えるカウンターを作ってみよう
「リセット」ボタンを追加して、メッセージを最初に戻す機能を作ってみよう
classList.toggle でボタンを押すたびに背景色が切り替わるUIを作ってみよう
mouseover イベントで、マウスを乗せたときにテキストが変わるようにしてみよう（ヒント: addEventListener("mouseover", ...)）
入力欄（<input>）の値を取得して表示する機能を作ってみよう（ヒント: input.value）

count	count % 4	表示されるメッセージ
1	1	やあ！
2	2	ようこそ！
3	3	はじめまして！
4	0（4÷4の余り）	こんにちは！（最初に戻る）

✅ このように表示されれば成功です（ボタンを押す前）：

⚠️ よくあるミス

getElementById の id 名を間違える：HTMLの id="message" とJSの getElementById("message") は完全に一致させましょう。大文字・小文字の違いでもエラーになります。
querySelector で # や . を付け忘れる：querySelector("title") はタグ名の検索になります。idなら "#title"、classなら ".title" と書きましょう。
script タグを head に書いてしまう：HTMLの要素が読み込まれる前にJSが実行されると、要素が見つかりません。<script> は </body> の直前に書きましょう。

⚠️ 要素が null になったら？
document.querySelector(...) が null を返す場合、以下を確認しましょう：
① id や class のスペルが HTML と一致しているか
② script が対象の要素より後に書かれているか
③ console.log(element) で確認してみよう（null なら見つかっていない）

💡 script の安全な書き方：<script defer src="app.js"></script> のように defer 属性を付けると、HTMLの読み込み完了後にJSが実行されます。</body> の直前に書くのと同じ効果です。

📌 まとめ

操作	書き方
`id` で要素を取得	`document.getElementById("id名")`
CSSセレクタで取得	`document.querySelector("セレクタ")`
テキストを変更	`要素.textContent = "新しいテキスト"`
スタイルを変更	`要素.style.プロパティ名 = "値"`
クリックに反応	`要素.addEventListener("click", 関数)`
クラスを追加	`要素.classList.add("クラス名")`
クラスを切り替え	`要素.classList.toggle("クラス名")`

✅ CSSの font-size はJSでは fontSize（キャメルケース）と書く
✅ DOMを操作することで、ページの内容をリアルタイムに変えられる

🎮 イベントを実際に体験してみよう！

クリック・キー入力などのイベントをブラウザで即試せる無料ツールです。addEventListener の動きを確かめましょう。

イベントプレイグラウンド →

🚀 次のレッスンへ

次のレッスンでは、これまでの知識をすべて使ってToDoリストアプリを作ります！

📘 コラム：onclick と addEventListener の違い

このレッスンでは addEventListener を使いました。これは JavaScript 側だけで書けるため、HTML を汚さずに複数のイベントを管理できる柔軟な方法です。

一方、古いコードでは onclick="関数名()" という書き方も見かけます。HTML に直接書けるのでシンプルで覚えやすいのが特徴です。

script.js

// addEventListener（JS側だけで書く・柔軟）
btn.addEventListener("click", handleClick);

// onclick（HTML側に書く・シンプル）
// <button onclick="handleClick()">クリック</button>

addEventListener を覚えたので、古いコードで onclick を見かけても「同じことをしているんだな」と理解できます！

🔍 もっと調べてみよう：「JavaScript DOM操作 getElementById」で検索してみよう。わからないことはどんどん検索する習慣をつけよう！

✅ このレッスンが終わったら

ドリルで知識を確認してから次に進むと、理解が定着しやすいよ！

次のレッスン: ミニアプリ → 📝 このレッスンの問題を解く →

このレッスンは役に立ちましたか？