LoginSignup
10
5

【React】EventEmitter2でイベント駆動型プログラミングをやってみよう

Posted at

はじめに

EventEmitter2とは

EventEmitter2とはイベント駆動型プログラミングをサポートするためのライブラリ。Reactの状態管理にも使われる。

EventEmitter vs. EventEmitter2

EventEmitter2ではリスナーの登録の削除を offで行える。
また、ワイルドカードを使用することができるなど、EventEmitter2はEventEmitterを拡張したライブラリである。

使い方

インストール

npm i eventemitter2

初期設定

import EventEmitter2 from 'eventemitter2';
// オプションの設定(ここではワイルドカードの使用を許可する)
const options = {wildcard: true,}
// インスタンスの作成
const emitter = new EventEmitter2(options);

オプション一覧

オプション名 デフォルト 説明
wildcard false ワイルドカードを使用する場合は true に設定する。
delimiter '.' 名前空間を区切るために使用する区切り記号を指定する。
newListener false newListenerイベントを発生させる場合は true に設定する。
removeListener false removeListenerイベントを発生させる場合は true に設定する。
maxListeners 10 イベントに割り当てることができる最大リスナー数を指定。
verboseMemoryLeak false メモリリークメッセージでイベント名を表示する場合は true に設定する。
ignoreErrors false エラーイベントがリスナーを持たない場合に、uncaughtException をスローしないようにする場合は true に設定する。

イベント作成

ここでは簡単なイベント(リスナー)を作成する。

sample①
const listener = () => {
  console.log('発火しました!');
};

引数がある例も作っておく。

sample②
const listener = (data) => {
  console.log(`発火しました! Data : ${data}`);
}

リスナーの登録

onで指定したイベントにリスナーを登録できる。
第一引数がkeyとなって、第2引数にイベントをしてする。

sample①
emitter.on('eventName', listener);
sample②
emitter.on('eventName2', listener2);

イベントの発火

emitするとonで受信してイベント(リスナー)が発火する。
第1引数に指定したkeyに該当するものだけ発火する。

emitter.emit('eventName');

第2引数にはリスナーに渡す引数が入る。

See the Pen EventEmitter2 by Tomoki Ota (@odlqzyes-the-sans) on CodePen.

リスナーの登録の削除

リスナーの登録の削除は offremoveListener で削除できる。

emitter.removeListener('eventName', listener);
emitter.off('eventName', listener);
emitter.on('eventName', listener);
emitter.off('eventName', listener);
emitter.emit('eventName'); // 発火しない

removeAllListeners を使用すると全てのリスナーの登録を削除できる。

removeAllListeners('eventName')

イベントの受信(1回だけ)

onceを使うとイベントの受信は1回しか行われない。

emitter.once('eventName', listener);

onの場合、emitの数だけ発火する。

on
emitter.once('eventName', listener);
emitter.emit('eventName'); // 発火しました!
emitter.emit('eventName'); 
emitter.emit('eventName'); 
// 1回だけ発火する

それに対してonceはemitが何回行われても1回しか発火しない。

once
emitter.once('eventName', listener);
emitter.emit('eventName'); // 発火しました!
emitter.emit('eventName'); // 発火しました!
emitter.emit('eventName'); // 発火しました!
// 3回発火する

イベントの受信(n回)

manyを使うとイベントの受信回数を制限できる。

emitter.many('eventName', 2, listener);
emitter.emit('eventName'); // 発火しました!
emitter.emit('eventName'); // 発火しました!
emitter.emit('eventName'); 
emitter.emit('eventName');
// 2回発火する

APIまとめ

メソッド名 説明
on(eventName, listener) 指定されたイベントにリスナー関数を登録する。
once(eventName, listener) 一度だけ呼び出されるリスナー関数をイベントに登録する
emit(eventName, [args...]) オプションの引数を伴ってイベントを発火する。
removeListener(eventName, listener) 指定されたイベントからリスナーを削除する
removeAllListeners([eventName]) 指定されたイベントからすべてのリスナーを削除する
listeners(eventName) 指定されたイベントのリスナーの配列を取得。
setMaxListeners(n) イベントごとの最大リスナー数を設定する。
getMaxListeners() イベントごとの最大リスナー数を取得。
listenerCount(eventName) 指定されたイベントに登録されているリスナーの数を取得。

Reactでの状態管理

EventEmitter2ではなく、EventEmitterですが、以下を参考にしてください。

今から始めるReact入門 〜 flux編
Event Emitter instead of lifting state up in React

参考文献

  1. eventemitter2 - npm
  2. EventEmitter2
  3. Node.jsのEventEmitterでイベント駆動プログラミングをする
10
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
5