【JavaScript】 JavaScript の基礎を触ってみた - DOM操作編 - ｜1日1ハンズオン Day 45

ぽめら

2025年10月15日 23:15

こんにちは、ぽめらです。
本記事は「1日1ハンズオン」企画、第45回です！

引き続きJavaScriptの基礎を少し振り返ってみています👀
今日はDOM編です。

1．はじめに

前回は、JavaScriptの基礎を触って振り返っていました。

今回のテーマはDOMの実装を振り返ってみようかな、と！
“ボタンをクリックしてイベント発火”を簡単に実装してみたいと思います。

主な取り扱い内容は下記👇

・DOM（Document Object Model）
・イベントリスナー（addEventListener）
・要素の取得・操作（document.getElementById()）

では、レッツハンズオン！

2．フォルダ・ファイル構成

前回と同じようなフォルダ構成で hands-on-js/ を使用します。
同じフォルダに、以下の2ファイルがある状態です👇

hands-on-js/
├── index.html
└── script.js

事前準備の方法は前回の「1-2．実行準備」を参照。

3．DOMでイベントを発火させてみる

DOM（Document Object Model）は、HTMLやXML文書をJavaScriptからアクセス・操作できるようにした仕組みのことです。
ざっくりとした私の理解でいえば、Webページの動作と変更をリンクさせたいときに使います。
今回は“クリックすることで文字色を変える”を実装します。

3-1．index.html

index.html をDay 44から少し変えて下記のようにする👇

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript クリックイベント練習 Day45</title>
</head>
<body>
  <h1>クリックイベントで文字色を変える</h1>

  <p id="text">まだクリックされていません。</p>
  <button id="changeButton">クリックしてみる</button>

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

<p> と <button> にそれぞれ id をつけて、JavaScriptから要素を取得する。

3-2．script.js

次に、script.js を以下の内容に変更👇

// -------------------------------
// Day45：クリックイベントで文字色を変える
// -------------------------------

// HTMLの要素を取得
const textElement = document.getElementById("text");
const buttonElement = document.getElementById("changeButton");

// ランダムに色を生成
function getRandomColor() {
  const colors = ["red", "blue", "green", "purple", "orange", "pink"];
  const randomIndex = Math.floor(Math.random() * colors.length);
  return colors[randomIndex];
}

// カウンタを初期化
let count = 0;

// ボタンクリック時の処理
buttonElement.addEventListener("click", () => {
  count++;
  const color = getRandomColor();

  textElement.textContent = `クリック回数：${count}（色：${color}）`;
  textElement.style.color = color;

  console.log(`ボタンがクリックされました！（${count}回目, 色: ${color}）`);
});

addEventListener("click", () => {...}) によって、クリック時の動作を指定しました。addEventListenerで指定できるイベントは複数あります。
ドキュメントで都度確認するべし！

4．実行

①ファイルを保存！
②ブラウザで index.html を開く！
③「クリックしてみる」ボタンを押す！

▼クリック前

▼クリック後（1回目）

▼クリック後（2回目）

▼クリック後（n回目）

「クリックしてみる」ボタンをクリックするたびにクリック回数が増加し、色が都度変わったので成功です🎉

5. まとめ

今日はJavaScriptの基礎として、DOM操作を思い出してみました！

バックエンドはロジックがメインですが、フロントエンド側の操作を考える時は「このイベントに合わせて〜〜を動かして…」のように画面操作を中心に考えてるんだったなと思い出せました🧠

というわけで今日はここまで！
ではまた明日👋

6．参考リンク

・getElementById() メソッド

・addEventListener() メソッド

・DOM イベント