JS と Nodejs におけるイベント駆動型開発についての簡単な説明

イベント駆動型とパブリッシュ・サブスクライブ型
ブラウザの JavaScript ではイベント駆動型プログラミングはどのように使用されますか?
ブラウザにおける主体と観察者
Node.js ではイベント駆動型プログラミングはどのように機能しますか?
EventEmitterを理解する
JavaScript におけるオブザーバー/パブリッシュ/サブスクライブのその他の例
要約する

イベント駆動型とパブリッシュ・サブスクライブ型

イベント駆動型アーキテクチャは、パブリッシュ/サブスクライブパターンまたはオブザーバーパターンと呼ばれるソフトウェア開発の一般的なパターンに基づいて構築されます。

イベント駆動型アーキテクチャには、主体と観察者という少なくとも 2 つの参加者が存在します。

被験者は FM ラジオのように動作し、被験者の発言を聞きたい視聴者に放送します。

観察者が 1 人しかいなくても 100 人いても、対象者が放送するメッセージがある限り、それは問題ではありません。

イベント駆動型、パブリッシュ/サブスクライブ型、およびオブザーバーパターンは実際には同じではありませんが、理想的には同じアプローチを使用します。つまり、1 つのエンティティがメッセージをブロードキャストし、他のエンティティがそれをリッスンします。

パブリッシュ/サブスクライブパターンは私と同じくらい古いものです。 1987 年頃から理論化が始まり、オブザーバーパターンは 1994 年に「Gang of Four」によって書かれた「Design Patterns」という本に登場しました。

ブラウザの JavaScript ではイベント駆動型プログラミングはどのように使用されますか?

エンジンの助けを借りて、JavaScript をブラウザで実行できます。

最も人気のある JavaScript エンジンは、Google Chrome と Node.js で使用される V8、Firefox で使用される SpiderMonkey、Safari/WebKit で使用される JavaScriptCore です。

豊富な環境に基づいて、JavaScript エンジンは言語を強化し、イベント駆動型の JavaScript プラットフォームも提供します。

実際、ブラウザ内の JavaScript は、イベントエミッター、つまりイベントを送信できるオブジェクトである HTML 要素と対話できます。

次の簡単な例、ボタン付きの HTML ドキュメントを考えてみましょう。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>JavaScript における「イベント駆動型」とはどういう意味ですか?</title>
</head>
<本文>
<div>
    <button id="subscribe">購読</button>
</div>
</本文>
</html>

JavaScript がなければ、ボタンは機能しません。現在、HTML ボタンは HTMLButtonElement タイプの要素であり、すべての HTML 要素と同様に、すべての HTML 要素の共通の祖先である EventTarget に接続されています。

ブラウザのイベントターゲットは、イベントを発行できるオブジェクトです。つまり、オブザーバーパターンのサブジェクトです。

ちょっとわかりにくいですか?覚えておいてください: テーマは FM ラジオなので、HTML 要素はすべてラジオ局のように動作します。

すぐに観察者が誰であるかがわかります。

ブラウザにおける主体と観察者

HTML 要素が主体である場合、観察者は誰でしょうか?リスナーとして登録された JavaScript 関数は、ブラウザ内のイベントに反応できます。

JavaScript を使用して HTML 要素を選択するには:

const btn = document.getElementById('subscribe');

そして、addEventListener を使用してリスナーを登録します。

const btn = document.getElementById('subscribe');
btn.addEventListener("クリック", 関数() {
    console.log("ボタンがクリックされました");
});

ここで、「クリック」はイベント、ボタンはサブジェクトまたは送信者、関数はリスナーまたはオブザーバーです。

要約すると:

HTML 要素はイベントエミッターです。

JavaScript でリスナーとして登録された関数はオブザーバーです。

これらのコンポーネントはすべて、小さなイベント駆動型アーキテクチャを構成します。コードをテストするには、次の HTML コンテンツをファイルに保存し (または Codepen で試し)、ボタンをクリックして、ブラウザコンソールを確認します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>JavaScript における「イベント駆動型」とはどういう意味ですか?</title>
</head>
<本文>
<div>
    <button id="subscribe">購読</button>
</div>
</本文>
<スクリプト>
    const btn = document.getElementById('subscribe');
    btn.addEventListener("クリック", 関数() {
        console.log("ボタンがクリックされました");
    });
</スクリプト>
</html>

次のセクションでは、Node.js で使用される同じ概念について説明します。

Node.js ではイベント駆動型プログラミングはどのように機能しますか?

Node.js は、ブラウザ外部 (コマンドラインツールとサーバー側) で実行される V8 エンジンに基づく JavaScript 環境です。

Node.js で行う作業のほとんどはイベントベースです。常に送信者オブジェクトと、メッセージをリッスンするいくつかのオブザーバーが存在します。

Node.js には HTML 要素がないため、ほとんどのイベントはプロセス、ネットワークとのやり取り、ファイルなどから発生します。

Node.js のすべてのイベントエミッターには、少なくとも 2 つの引数を取る on と呼ばれるメソッドがあります。

監視するイベントの名前
リスナー機能

実際の例を見てみましょう。このシンプルな Node.js サーバーを見てみましょう。

定数net = require("net");
const server = net.createServer().listen(8081, "127.0.0.1");
server.on("listening", 関数() {
  console.log("サーバーがリッスンしています!");
});
server.on("接続", 関数(ソケット) {
  console.log("クライアントが接続されました!");
  socket.end("こんにちはクライアント!");
});

このコードは、localhost のポート 8081 でリッスンするサーバーを作成します。サーバーオブジェクトでは、on メソッドを呼び出して 2 つのリスナー関数を登録します。

リスニングイベントはサーバーの起動直後に発生し、接続イベントはクライアントが 127.0.0.1:8081 に接続したときに発生します (試してみてください)。

この例では、サーバーがイベントの送信者、つまり件名です。一方、リスナー関数はオブザーバーです。

しかし、それらのオンメソッドはどこから来るのでしょうか?

EventEmitterを理解する

Node.js のすべてのイベント駆動型モジュールは、EventEmitter と呼ばれるルートクラスを拡張します。前の例では、net モジュールのネットワークサーバーは EventEmitter を使用しました。

Node.js の EventEmitter には、on と emitting という 2 つの基本メソッドがあります。

ブラウザに対応させたい場合、EventEmitter はイベントを発行できる任意の HTML 要素と考えることができます。

ブラウザでイベントをリッスンするには、subject オブジェクトで addEventListener を呼び出します。

const btn = document.getElementById('subscribe');
btn.addEventListener("クリック", 関数() {
    console.log("ボタンがクリックされました");
});

対照的に、Node.js では次のようになります。

// 省略
server.on("listening", () => {
  console.log("サーバーがリッスンしています!");
});
// 省略

正確に言うと、EventEmitter には addListener メソッドもあります。 on はその別名です。

EventEmitter には、カスタムイベント (メッセージ) をブロードキャストするときに便利な emitting メソッドもあります。

EventEmitter を使用する場合は、「events」モジュールからインポートしてイベントを発行します。

const EventEmitter = require("イベント");
const エミッター = 新しい EventEmitter();
emittingter.on("customEvent", () => console.log("イベントが発生しました!"));
エミッター.emit("カスタムイベント");

Node.js でコードを実行すると、コンソールに「Got event」と表示されます。