田中一郎は、HTMLとCSSを使ったユーザーインターフェース(UI)の初期バージョンを完成させたことで、次のステップとして「JavaScriptで動的機能を追加」する作業に取り掛かることにした。
今回の目標は、ユーザーが操作したときにページが動的に反応するように、インタラクティブな機能を実装することだ。
動的機能の設計と計画
一郎は、まずどの部分に動的機能を追加するかを設計することから始めた。
動的機能を追加することで、ユーザーの操作に応じてページが即座に反応し、より直感的で使いやすいインターフェースが実現できると考えた。
一郎が計画した動的機能は以下の通りだ:
- ナビゲーションバーのドロップダウンメニュー: ユーザーがナビゲーションバーの項目にマウスをホバーすると、関連するサブメニューがドロップダウンで表示されるようにする。
- フォームのリアルタイムバリデーション: ユーザーが入力フォームにデータを入力した際、その場で入力内容が正しいかどうかをチェックし、エラーメッセージを表示する機能を実装。
- モーダルウィンドウの表示: 特定のボタンをクリックすると、モーダルウィンドウがポップアップで表示され、詳細な情報を表示する機能を追加。
JavaScriptのコーディング開始
一郎は、これらの動的機能を実装するためにJavaScriptのコーディングを始めた。
まずはナビゲーションバーのドロップダウンメニューから取り掛かることにした。
ナビゲーションバーのドロップダウンメニュー
一郎は、JavaScriptのイベントリスナーを使って、ユーザーがナビゲーションバーの項目にマウスをホバーしたときにサブメニューが表示されるようにした。
具体的には、mouseenter
イベントを使って、サブメニューが滑らかに表示されるアニメーションを実装。
document.querySelectorAll('.nav-item').forEach(item => {
item.addEventListener('mouseenter', function() {
this.querySelector('.dropdown-menu').style.display = 'block';
});
item.addEventListener('mouseleave', function() {
this.querySelector('.dropdown-menu').style.display = 'none';
});
});
フォームのリアルタイムバリデーション
次に、フォームのリアルタイムバリデーションを実装した。ユーザーがフォームに入力すると、input
イベントをキャッチし、その場で入力内容をチェックしてエラーメッセージを表示する。
document.getElementById('emailInput').addEventListener('input', function() {
const email = this.value;
const errorMsg = document.getElementById('error-msg');
if (!validateEmail(email)) {
errorMsg.textContent = '有効なメールアドレスを入力してください。';
} else {
errorMsg.textContent = '';
}
});
function validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(String(email).toLowerCase());
}
モーダルウィンドウの表示
最後に、特定のボタンをクリックしたときにモーダルウィンドウが表示されるようにJavaScriptを使って実装。
モーダルウィンドウの表示と閉じる処理を実装し、ユーザーが簡単に詳細情報にアクセスできるようにした。
document.getElementById('openModal').addEventListener('click', function() {
document.getElementById('modal').style.display = 'block';
});
document.getElementById('closeModal').addEventListener('click', function() {
document.getElementById('modal').style.display = 'none';
});
動的機能のテストと確認
一郎は、実装した動的機能をブラウザでテストし、すべての機能が正しく動作することを確認した。ナビゲーションバーがスムーズに展開し、フォームのバリデーションがリアルタイムに行われる様子を見て、「インタラクティブなページが実現できた」と感じた。
また、モーダルウィンドウが期待通りに表示され、ユーザーが情報にすぐアクセスできることを確認し、満足感を得た。
充実感と次のステップ
夜、一郎は美咲に今日の成果を報告した。「今日、ページに動きをつけたんだ。ナビゲーションバーやフォームがリアルタイムに反応するのを見て、自分でも驚いたよ」と話すと、美咲は「本当にすごいわね。ユーザーにとって使いやすいページになってるのね」と喜んでくれた。
こうして、一郎はJavaScriptを使って動的機能をページに追加することができた。
次のステップでは、さらに複雑な機能を取り入れて、アプリケーションの完成度を高めていくことを目指す。
次回予告
次回、田中一郎は、さらに高度なJavaScriptのスキルを駆使して、ウェブページにインタラクティブな要素を追加します。アプリケーションの機能を拡張し、より使いやすいインターフェースを実現する一郎の挑戦が描かれる次回もお楽しみに!
コメント