27日目: JavaScriptで動的機能を追加

田中一郎は、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のスキルを駆使して、ウェブページにインタラクティブな要素を追加します。アプリケーションの機能を拡張し、より使いやすいインターフェースを実現する一郎の挑戦が描かれる次回もお楽しみに！