【第2回】動きのあるWebページを作ろう – JavaScript実践編
前回の基礎編では、JavaScriptの基本文法を学びました。今回は、その知識を活用して実際に動きのあるWebページを作成していきます。DOM操作やイベント処理を使って、ユーザーとインタラクトするWebサイトを構築しましょう。
・DOM操作の基本的な方法
・イベント処理によるユーザーインタラクション
・実用的なミニプロジェクトの作成方法
・デバッグとエラーハンドリングのテクニック
DOM操作とは？基本を理解しよう
DOM（Document Object Model）は、HTMLの構造をJavaScriptから操作するための仕組みです。DOMを理解することで、動的なWebページが作れるようになります。
DOMは「文書の設計図」のようなものです。
JavaScriptでこの設計図を書き換えることで、ページに変化をつけられます！
要素を取得する方法
まずは、HTML要素をJavaScriptで取得する方法を覚えましょう。
[table]
| メソッド | 説明 | 戻り値 | 使用例 |
|---|---|---|---|
| getElementById | IDで要素を取得 | 単一要素 | document.getElementById(‘myId’) |
| getElementsByClassName | クラス名で要素を取得 | 要素の配列 | document.getElementsByClassName(‘myClass’) |
| querySelector | CSSセレクタで要素を取得 | 単一要素 | document.querySelector(‘.myClass’) |
| querySelectorAll | CSSセレクタで全要素を取得 | 要素の配列 | document.querySelectorAll(‘p’) |
[/table]
要素の内容を変更する
取得した要素の内容を変更してみましょう。
// HTMLファイルに <p id=”message”>元のメッセージ</p> があるとします
// 要素を取得
let messageElement = document.getElementById(‘message’);
// テキスト内容を変更
messageElement.textContent = ‘新しいメッセージ’;
// HTML内容を変更（HTMLタグも含む）
messageElement.innerHTML = ‘<strong>太字の新しいメッセージ</strong>’;
// スタイルを変更
messageElement.style.color = ‘red’;
messageElement.style.fontSize = ’20px’;
イベント処理でインタラクティブに
ユーザーの操作（クリック、入力など）に反応するプログラムを作ってみましょう。
基本的なイベントの種類
イベントリスナーの設定方法
// HTML: <button id=”myButton”>クリックしてね</button>
// 1. 要素を取得
let button = document.getElementById(‘myButton’);
// 2. イベントリスナーを追加
button.addEventListener(‘click’, function() {
alert(‘ボタンがクリックされました！’);
});
// より複雑な処理の例
button.addEventListener(‘click’, function() {
let currentTime = new Date().toLocaleTimeString();
console.log(‘クリック時刻: ‘ + currentTime);
// ボタンの色を変更
this.style.backgroundColor = ‘lightblue’;
});
実践プロジェクト：カウンターアプリを作ろう
学んだ知識を活用して、実用的なカウンターアプリを作成してみましょう。
ステップ1: HTMLの構造を作成
カウンター表示と操作ボタンを配置します。
ステップ2: CSS でデザインを整える
見た目を美しく、使いやすくデザインします。
ステップ3: JavaScript で機能を実装
カウントアップ・ダウン・リセット機能を追加します。
ステップ4: エラーハンドリングを追加
想定外の操作に対する対策を講じます。
<!DOCTYPE html>
<html>
<head>
<title>カウンターアプリ</title>
<style>
.counter-container {
text-align: center;
margin: 50px;
font-family: Arial, sans-serif;
}
.counter-display {
font-size: 48px;
font-weight: bold;
margin: 20px;
color: #333;
}
.counter-button {
font-size: 18px;
padding: 10px 20px;
margin: 5px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn-increment { background-color: #4CAF50; color: white; }
.btn-decrement { background-color: #f44336; color: white; }
.btn-reset { background-color: #2196F3; color: white; }
</style>
</head>
<body>
<div class=”counter-container”>
<h1>カウンターアプリ</h1>
<div id=”counter-display” class=”counter-display”>0</div>
<button id=”btn-increment” class=”counter-button btn-increment”>+1</button>
<button id=”btn-decrement” class=”counter-button btn-decrement”>-1</button>
<button id=”btn-reset” class=”counter-button btn-reset”>リセット</button>
</div>
</body>
</html>
// カウンターの初期値
let counter = 0;
// DOM要素を取得
const counterDisplay = document.getElementById(‘counter-display’);
const btnIncrement = document.getElementById(‘btn-increment’);
const btnDecrement = document.getElementById(‘btn-decrement’);
const btnReset = document.getElementById(‘btn-reset’);
// カウンター表示を更新する関数
function updateDisplay() {
counterDisplay.textContent = counter;
// カウンターの値に応じて色を変更
if (counter > 0) {
counterDisplay.style.color = ‘green’;
} else if (counter < 0) {
counterDisplay.style.color = 'red';
} else {
counterDisplay.style.color = '#333';
}
}
// +1ボタンのイベント
btnIncrement.addEventListener('click', function() {
counter++;
updateDisplay();
console.log('カウンター増加: ' + counter);
});
// -1ボタンのイベント
btnDecrement.addEventListener('click', function() {
counter--;
updateDisplay();
console.log('カウンター減少: ' + counter);
});
// リセットボタンのイベント
btnReset.addEventListener('click', function() {
counter = 0;
updateDisplay();
console.log('カウンターリセット');
});
// ページ読み込み時の初期化
document.addEventListener('DOMContentLoaded', function() {
updateDisplay();
console.log('カウンターアプリが初期化されました');
});
[/box]
フォーム操作：入力チェック機能を作ろう
続いて、フォームの入力をリアルタイムでチェックする機能を実装してみましょう。
ユーザビリティを向上させるには、
リアルタイムのフィードバックが重要ですね！
<!– HTML部分 –>
<form id=”user-form”>
<div>
<label for=”username”>ユーザー名:</label>
<input type=”text” id=”username” minlength=”3″ maxlength=”20″>
<span id=”username-error” class=”error-message”></span>
</div>
<div>
<label for=”email”>メールアドレス:</label>
<input type=”email” id=”email”>
<span id=”email-error” class=”error-message”></span>
</div>
<button type=”submit” id=”submit-btn” disabled>送信</button>
</form>
<script>
// フォーム要素を取得
const form = document.getElementById(‘user-form’);
const usernameInput = document.getElementById(‘username’);
const emailInput = document.getElementById(’email’);
const submitBtn = document.getElementById(‘submit-btn’);
// バリデーション関数
function validateUsername(username) {
if (username.length < 3) {
return '3文字以上で入力してください';
}
if (username.length > 20) {
return ’20文字以下で入力してください’;
}
return ”;
}
function validateEmail(email) {
const emailPattern = /^[^s@]+@[^s@]+.[^s@]+$/;
if (!emailPattern.test(email)) {
return ‘正しいメールアドレスを入力してください’;
}
return ”;
}
// リアルタイムバリデーション
usernameInput.addEventListener(‘input’, function() {
const error = validateUsername(this.value);
document.getElementById(‘username-error’).textContent = error;
checkFormValidity();
});
emailInput.addEventListener(‘input’, function() {
const error = validateEmail(this.value);
document.getElementById(’email-error’).textContent = error;
checkFormValidity();
});
// フォーム全体の有効性をチェック
function checkFormValidity() {
const usernameValid = validateUsername(usernameInput.value) === ”;
const emailValid = validateEmail(emailInput.value) === ”;
submitBtn.disabled = !(usernameValid && emailValid);
}
</script>
デバッグとエラーハンドリング
実際の開発では、エラーが発生することは避けられません。適切なデバッグとエラーハンドリングを覚えておきましょう。
console.logを活用したデバッグ
- ・変数の値を確認: console.log(‘変数名:’, 変数)
- ・関数の実行確認: console.log(‘関数が実行されました’)
- ・オブジェクトの中身確認: console.log(オブジェクト)
- ・エラーの詳細確認: console.error(エラー)
- ・警告の表示: console.warn(‘警告メッセージ’)
try-catch文でエラーハンドリング
function safeCalculation(a, b) {
try {
// エラーが発生する可能性がある処理
if (b === 0) {
throw new Error(‘ゼロで割ることはできません’);
}
let result = a / b;
console.log(‘計算結果:’, result);
return result;
} catch (error) {
// エラーが発生した場合の処理
console.error(‘計算エラー:’, error.message);
alert(‘エラーが発生しました: ‘ + error.message);
return null;
} finally {
// 必ず実行される処理
console.log(‘計算処理が完了しました’);
}
}
// 使用例
safeCalculation(10, 2); // 正常実行
safeCalculation(10, 0); // エラーハンドリング
パフォーマンスの最適化
Webページの応答速度を向上させるためのテクニックをご紹介します。
次回予告とまとめ
今回は、DOM操作とイベント処理を使って実際に動くWebページを作成しました。カウンターアプリやフォームバリデーションなど、実用的な機能を実装できるようになりました。
✓ DOM操作の基本的な方法
✓ イベントリスナーの設定
✓ 実践的なプロジェクト作成
✓ デバッグとエラーハンドリング
✓ パフォーマンス最適化の基礎
次回は「応用編」として、ES6の新機能や
非同期処理について学んでいきます！
次回は「JavaScript応用編」として、ES6以降の新機能、非同期処理（Promise、async/await）、モジュール化などの現代的なJavaScript開発手法を解説します。より効率的で保守性の高いコードを書けるようになりましょう！
今回作成したカウンターアプリやフォームバリデーションを、ぜひ自分なりにカスタマイズして試してみてください。実際に手を動かすことで、理解が深まります。
コメント