Webページに動きをつけよう

― JavaScriptで基本的なインタラクションを実装する
はじめに
JavaScriptとは何か？ HTMLやCSSとの違い
基本文法をおさらい
HTMLとの連携：DOMとは何か？
実践：JavaScriptで文字を切り替えるボタンを作る
よくあるミスとその対策
まとめ
次回予告

― JavaScriptで基本的なインタラクションを実装する

はじめに

静的なHTMLとCSSだけでも、シンプルなWebサイトを構築することは可能です。しかし、現代のWebではユーザーの操作に応じて変化する動的なページが当たり前になっています。

ページ内のボタンを押すと内容が変わる、メニューが開閉する、入力フォームにバリデーションがかかる――これらすべてに使われているのがJavaScriptです。

今回は、JavaScriptの基本的な文法と、Webページに簡単なインタラクションを実装するためのステップを解説します。難しいライブラリやフレームワークを使わず、純粋なJavaScript（Vanilla JS）で「自分の手でページを動かす」楽しさを体験してみましょう。

JavaScriptとは何か？ HTMLやCSSとの違い

JavaScriptは、Webページに動きや処理を加えるためのプログラミング言語です。HTMLが構造、CSSが見た目を担うのに対し、JavaScriptは**ふるまい（ふるまい）**を担当します。

以下のような処理はすべてJavaScriptで実装されます：

ボタンのクリックに応じて要素の表示・非表示を切り替える
入力フォームの内容をリアルタイムでチェックする
外部APIからデータを取得してページに表示する
スライドショーやアニメーションを実装する

JavaScriptはクライアントサイド（ブラウザ上）で動作するため、即座に画面の変化を反映させることが可能です。

🔗 参考：JavaScript入門 – MDN Web Docs

基本文法をおさらい

まずはJavaScriptの文法の基本をいくつか押さえておきましょう。今後の実装の土台になります。

// 変数の宣言
let message = 'こんにちは';

// 条件分岐
if (message === 'こんにちは') {
  console.log('挨拶が確認されました');
}

// 関数
function greet(name) {
  return `こんにちは、${name}さん`;
}

// イベントリスナー（後述）

letやconstを使って変数を宣言
===で厳密な比較
functionで処理をまとめて再利用可能に
console.log()で動作確認やデバッグに利用

このような基本文法に慣れておくことで、実際のDOM操作やイベント処理もスムーズになります。

HTMLとの連携：DOMとは何か？

JavaScriptがWebページにアクセスするためには、**DOM（Document Object Model）**という仕組みを理解する必要があります。
DOMとは、HTMLをツリー構造としてJavaScriptから扱えるようにしたモデルです。

たとえば、HTMLにある特定の要素を取得して、JavaScriptで変更することができます。

<p id="message">こんにちは</p>
<button id="changeBtn">文字を変える</button>

const messageEl = document.getElementById('message');
const buttonEl = document.getElementById('changeBtn');

buttonEl.addEventListener('click', () => {
  messageEl.textContent = 'こんばんは';
});

このように、document.getElementById()でHTMLの要素を取得し、イベントを監視して、textContentなどのプロパティを変更することで、動的な変化をページに加えることができます。

実践：JavaScriptで文字を切り替えるボタンを作る

ここでは、前回のHTML/CSSページにJavaScriptを追加して、クリックで表示されるテキストが変わる簡単なインタラクションを作ってみましょう。

HTML（body内に追加）

<section id="interact">
  <h2>インタラクション体験</h2>
  <p id="text">ボタンを押してみてください。</p>
  <button id="toggleBtn">表示を切り替える</button>
</section>

JavaScript（新たに script.js を作成）

const textEl = document.getElementById('text');
const btnEl = document.getElementById('toggleBtn');

let toggled = false;

btnEl.addEventListener('click', () => {
  if (toggled) {
    textEl.textContent = 'ボタンを押してみてください。';
  } else {
    textEl.textContent = 'こんにちは、JavaScriptの世界へようこそ！';
  }
  toggled = !toggled;
});

HTML（head内の末尾でスクリプトを読み込む）

<script src="script.js" defer></script>

このコードでは、クリックごとに表示されるテキストを交互に切り替えています。defer属性をつけておくことで、HTMLの読み込み後にJavaScriptが実行されるため、安全にDOM要素を操作できます。

よくあるミスとその対策

JavaScript初学者がつまずきやすいポイントをまとめておきます：

getElementByIdで取得した変数がnull → DOMの読み込みタイミングが早すぎる or IDが間違っている
addEventListenerが効かない → ボタン要素が存在しないタイミングで処理が走っている
script.jsが読み込まれていない → パスやdefer属性を確認

ブラウザの**開発者ツールのコンソール（F12キー）**を使って、エラーメッセージやconsole.log()の出力を見ることで原因を探る習慣をつけましょう。

まとめ

JavaScriptは、Webページにユーザーとのやりとり（インタラクション）を加えるための中核的な技術です。
今回のような基本的な操作を一つずつ積み重ねることで、やがてフォーム処理や非同期通信、アニメーションなど、より高度な機能を作れるようになっていきます。

次回は、JavaScriptの中でも特に重要な技術の一つである**イベント処理とフォームのバリデーション（入力チェック）**に挑戦していきます。
フォームに名前やメールアドレスを入力し、それをJavaScriptで検証してみましょう。

次回予告

フォームを作ろう ― 入力チェックとイベント処理の基本を理解する