JavaScript中級

中級 JavaScriptで学ぶイベント駆動設計｜練習問題編

 

導入

イベント駆動設計は、ユーザーインターフェースやリアルタイムアプリケーションにおいて非常に重要な手法です。特に、JavaScriptを使用したフロントエンド開発では、ユーザーのアクションに応じて動的に反応することが求められます。本記事では、実務での具体的なシチュエーションを通じて、イベント駆動設計の実践的な側面を探ります。

教科書レベルの解説（イベント駆動設計）

重要な概念の整理

イベント駆動設計は、プログラムのフローをイベントに基づいて制御する手法です。イベントは、ユーザーの操作やシステムの状態変化など、プログラムの実行中に発生する出来事を指します。JavaScriptでは、DOM要素に対してイベントリスナーを登録し、特定のイベントが発生した際に指定した処理を実行します。この設計手法を用いることで、アプリケーションはよりインタラクティブで反応的になります。

コード例（JavaScript）


document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('myButton');
    const output = document.getElementById('output');

    button.addEventListener('click', function() {
        const currentTime = new Date().toLocaleTimeString();
        output.textContent = `ボタンがクリックされました: ${currentTime}`;
    });
});

コードの行ごとの解説

  1. document.addEventListener(‘DOMContentLoaded’, function() {…}); – ページが完全に読み込まれたときに実行される関数を定義します。
  2. const button = document.getElementById(‘myButton’); – ボタン要素を取得します。
  3. const output = document.getElementById(‘output’); – 出力先の要素を取得します。
  4. button.addEventListener(‘click’, function() {…}); – ボタンがクリックされたときに実行される処理を定義します。
  5. const currentTime = new Date().toLocaleTimeString(); – 現在の時刻を取得し、フォーマットします。
  6. output.textContent = `ボタンがクリックされました: ${currentTime}`; – 取得した時刻を出力要素に表示します。

練習問題編

以下の練習問題に挑戦し、イベント駆動設計の理解を深めましょう。

  1. 問題1: ボタンがクリックされた回数をカウントするプログラムを作成してください。
  2. 問題2: マウスが要素上に乗ったときに色が変わる機能を実装してください。
  3. 問題3: フォームが送信されたときに、入力されたデータをコンソールに表示するコードを書いてください。

模範解答と解説

  1. 問題1の模範解答: 
    
let count = 0;
button.addEventListener('click', function() {
    count++;
    output.textContent = `クリック回数: ${count}`;
});

    このコードは、ボタンがクリックされるたびにカウントを増やし、その結果を表示します。

  2. 問題2の模範解答: 
    
const element = document.getElementById('colorChangeElement');
element.addEventListener('mouseover', function() {
    element.style.backgroundColor = 'lightblue';
});
element.addEventListener('mouseout', function() {
    element.style.backgroundColor = '';
});

    マウスが要素に乗ったときに色を変え、離れたときに元に戻します。

  3. 問題3の模範解答: 
    
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
    event.preventDefault(); // デフォルトの送信を防ぐ
    const data = new FormData(form);
    console.log(Object.fromEntries(data));
});

    フォームの送信を防ぎ、入力されたデータをコンソールに表示します。

まとめ

  • イベント駆動設計は、ユーザーインターフェースを動的に制御するための強力な手法です。
  • 実際の業務で直面する具体的なケースに基づいた理解が重要です。
  • 練習問題を通じて、イベント駆動設計の実践的なスキルを磨くことができます。
RELATED POST