jQuery Academy · レッスン

カスタムイベントの作成と発火

.trigger()と.on()を使用してカスタムイベントを設計・実装し、コンポーネントを疎結合化してコードを整理し、アプリケーションの各部分で柔軟な通信を実現します。

「カスタムイベントの作成と発火」はCoddyKit上の無料jQuery Academyレッスンです。これはレッスン3/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全3レッスンが含まれています。

カスタムイベント入門

ようこそ。このレッスンでは、jQueryで独自のカスタムイベントを作成、管理する方法を学びます。これは、コードをより整理し、柔軟にする強力な方法です。

カスタムイベントは、Webアプリケーションのさまざまな部分が送受信できる特別なメッセージだと考えてください。これにより、各部分を直接結び付けずに通信できます。

カスタムイベントを使う理由

なぜカスタムイベントを使うのでしょうか。カスタムイベントは、密結合というよくある問題の解決に役立ちます。コンポーネントが密結合していると、コードの一部を変更しただけで別の部分が壊れる可能性があります。

疎結合：コンポーネント同士が、互いの内部的な仕組みを知る必要がありません。
整理されたコード：特定のアクションに関するロジックを一元化できます。
柔軟性：「送信元」を変更せずに、リスナーを簡単に追加または削除できます。

The .trigger()メソッド

カスタムイベントを「送信」または「発火」するには、jQueryの.trigger()メソッドを使います。jQueryオブジェクト（要素やdocument）に対して呼び出し、イベント名を文字列として渡します。

イベント名は、'dataLoaded'や'itemAdded'のように、自由に決められます。

イベントを発火するデモ

.trigger()の動作を見てみましょう。ボタンがクリックされたときに、'myCustomEvent'というカスタムイベントを発火します。まだリスナーがないため、現時点では何も起こりません。

<!-- HTML assumed to be present -->
<button id="triggerButton">Trigger Event</button>

<script>
$(document).ready(function() {
  $('#triggerButton').on('click', function() {
    // Fire our custom event on the button itself
    $(this).trigger('myCustomEvent');
    console.log('myCustomEvent triggered!');
  });
});
</script>

.on()でリッスンする

カスタムイベントを「受信」または「リッスン」するには、おなじみの.on()メソッドを使います。'click'などの組み込みイベントと同じように、イベント名と、イベント発火時に実行する関数を指定します。

イベントを発火した同じ要素でリッスンすることも、親要素でリッスンすることも、グローバルイベント用にdocument自体でリッスンすることもできます。

発火とリッスンの例

ここで、.trigger()と.on()を組み合わせてみましょう。ボタンをクリックすると、カスタムイベントが発火され、リッスンされたことを示すメッセージが表示されます。

<!-- HTML assumed to be present -->
<button id="myButton">Click Me</button>
<p id="statusMessage">Status: Waiting...</p>

<script>
$(document).ready(function() {
  // 1. Listen for 'buttonClicked' on the button
  $('#myButton').on('buttonClicked', function() {
    $('#statusMessage').text('Status: Custom event received!');
  });

  // 2. When the button is clicked, trigger 'buttonClicked'
  $('#myButton').on('click', function() {
    $(this).trigger('buttonClicked');
  });
});
</script>

イベントでデータを渡す

カスタムイベントは、イベントと一緒にデータを渡せるとさらに便利です。イベント名の後に追加の引数を指定して、.trigger()に渡せます。これらの引数はイベントハンドラー関数に渡されます。

ハンドラーの最初の引数は、必ずイベントオブジェクトです。
2番目以降の引数は、.trigger()で渡したデータです。

カスタムイベントデータのデモ

ここでは、'dataReady'イベントを発火し、文字列とオブジェクトを渡します。リスナーはこのデータを受け取り、表示します。これがコンポーネント間で情報を共有する方法です。

<!-- HTML assumed to be present -->
<button id="loadData">Load Data</button>
<p id="output"></p>

<script>
$(document).ready(function() {
  // Listen for 'dataReady' and extract the passed data
  $(document).on('dataReady', function(event, message, details) {
    const outputText = `Message: ${message}<br>Details: ${details.status} for ${details.item}`; 
    $('#output').html(outputText);
  });

  // When button clicked, trigger 'dataReady' with data
  $('#loadData').on('click', function() {
    const msg = 'Data successfully loaded!';
    const data = { status: 'complete', item: 'report' };
    $(document).trigger('dataReady', [msg, data]);
    console.log('Data event triggered!');
  });
});
</script>

よりよいアプリのための疎結合

カスタムイベントを通信に使うと、よりモジュール性が高く保守しやすいアプリケーションを構築できます。「ショッピングカート」コンポーネントと「商品表示」コンポーネントを想像してみてください。

商品が追加されたとき、「商品表示」コンポーネントが'productAdded'を発火します。
「ショッピングカート」コンポーネントは'productAdded'をリッスンし、自身を更新します。

どちらのコンポーネントも、イベントの契約だけを知っていればよく、相手の内部メソッドを知る必要はありません。

理解度を確認しましょう

.trigger()と.on()を使ったカスタムイベントの利点や用途について、正しく説明しているのは次のどの文でしょうか。

復習：カスタムイベント

よくできました。jQueryでカスタムイベントを作成、管理する方法を学びました。ここで簡単にまとめます。

概要：カスタムイベントは、アプリケーションのコンポーネント向けにユーザーが定義するメッセージです。
理由：疎結合を促進し、より整理され柔軟なコードにつながります。
方法：.trigger('eventName', [data])を使ってイベントを発火します。
方法：.on('eventName', function(event, data) { ... })を使ってイベントをリッスンします。

カスタムイベントを使いこなすことは、堅牢で拡張性の高いjQueryアプリケーションを構築するための重要なステップです。

よくある質問

「カスタムイベントの作成と発火」レッスンは無料ですか？

はい。「カスタムイベントの作成と発火」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全3レッスンが含まれています。

「カスタムイベントの作成と発火」で何を学びますか？

.trigger()と.on()を使用してカスタムイベントを設計・実装し、コンポーネントを疎結合化してコードを整理し、アプリケーションの各部分で柔軟な通信を実現します。ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

jQuery Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/3です。

「カスタムイベントの作成と発火」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このjQuery Academyレッスンでコードを書いて実行できますか？

はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← jQuery Academyに戻る