JavaScriptでObserverパターンの理解

「Observerパターン」は、その状態が変化したことを自動的に通知することで、被験者（subject）と呼ばれるオブジェクトが依存するリストを維持する、ソフトウェアのデザインパターンです。このパターンは、通常、イベントソースを表すsubject がイベントが発生したときに通知を受け取りたいobserver がある分散型イベント処理システムを実装するために使われます。

この記事では、Observerパターンの概念をより詳しく探り、どのように使われるかと、JavaScriptで機能指向プログラミングを使ってどのように実装できるかをいくつかの例で紹介します。

`Observer`パターンがどのように機能するか

Observerパターンには、3 つの主要なコンポーネントがあります：subject、observer、およびobserverインターフェースです。

subjectは、observerのリストを維持し、observerをリストから追加するか削除するためのメソッドを提供するオブジェクトです。また、状態が変化したときにすべてのobserverに通知するメソッドも持っています。

observerは、subjectからの更新を受け取りたいオブジェクトです。observerインターフェースを実装します。このインターフェースには、subjectが状態が変化したときに呼び出されるupdate()メソッドを持つ、1つのメソッドしかありません。

observerインターフェースは、observerをどのように実装するかを定義するガイドラインです。observerにupdate()メソッドを持たせることを指定します。このメソッドは、subjectが状態が変化したときに呼び出されます。

ここでは、JavaScriptで機能指向プログラミンングを使用してObserverパターンがどのように実装されるかを示す簡単な例を示します：

const subject = {
  observers: [],

  subscribe: function(observer) {
    this.observers.push(observer);
  },

  unsubscribe: function(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  },

  notify: function() {
    this.observers.forEach(observer => observer.update());
  }
};

const observerA = {
  update: function() {
    console.log('Observer A received update');
  }
};

const observerB = {
  update: function() {
    console.log('Observer B received update');
  }
};

subject.subscribe(observerA);
subject.subscribe(observerB);
subject.notify();
// Output: "Observer A received update"
//         "Observer B received update"

subject.unsubscribe(observerA);
subject.notify();
// Output: "Observer B received update"

この例では、subjectオブジェクトはobserverのリストを維持しており、observerをリストから追加するか削除するためのメソッド、および、subjectの状態が変化したときにすべてのobserverに通知するメソッドを持っています。observerAと observerBオブジェクトは、subjectに購読してnotifyメソッドが呼び出されたときに更新を受け取ることができるobserverの例です。

`Observer`パターンの利点

Observerパターンをソフトウェアデザインに使用することには、いくつかの利点があります：

弱い結合：Observerパターンは、subjectとobserverの間の結合を軽減するのに役立ちます。subjectは、observerやその方法がどのように情報を使用するかについて何も知る必要がありません。これにより、subjectに影響を与えずに observerを必要に応じて追加や削除することが簡単になります。
使いやすさ：Observerパターンは理解しやすく、実装も簡単です。そのため、多くの開発者がよく使用します。JavaScriptを含むさまざまなプログラミング言語で実装でき、イベント駆動システムを実装するためによく使われます。
スケーラビリティ：Observerパターンは高いスケーラビリティを備えています。必要に応じてobserverを追加や削除できるため、大量のobserverを管理しやすく、subjectが更新を効率的に処理できるようになります。
柔軟性：Observerパターンは非常に柔軟です。subjectに影響を与えずに、新しいobserverを追加するか既存のobserverを変更することができます。これにより、ニーズが時間の経過とともに変化するにつれて、ソフトウェアを簡単に変更できるようになります。

使用例

Observerパターンは、さまざまな方法でソフトウェア開発に使用できます。一般的な例としては、次のようなものがあります：

イベント処理：Observerパターンは、イベント処理のためによく使われます。subjectは、イベントをトリガーとして、observerに通知を送信します。 observerは、そのイベントに対する必要なアクションを実行します。
データ同期：Observerパターンは、データを同期するためにも使われます。 subjectは、データを管理するオブジェクトであり、observerは、そのデータを表示するものです。 subjectがデータを更新すると、observerにその変更を通知し、observerはそのデータを最新の状態で表示できるように更新されます。
通知システム：Observerパターンは、通知システムを実装するためにも使われます。 subjectは、通知を発行するオブジェクトであり、observerは、その通知を受信するものです。 subjectが通知を発行すると、observerにその通知を送信し、observerは、必要なアクションを実行します。

結論

Observerパターンを使用すると、subjectと observerの間の結合を軽減し、データを同期したり、通知システムを実装したりすることができます。また、Observerパターンは理解しやすく、実装も簡単であるため、多くの開発者がよく使用します。さらに、Observerパターンは高いスケーラビリティを備え、柔軟であるため、大規模なシステムでも使用できます。

Mình hy vọng bạn thích bài viết này và học thêm được điều gì đó mới.

Donate mình một ly cafe hoặc 1 cây bút bi để mình có thêm động lực cho ra nhiều bài viết hay và chất lượng hơn trong tương lai nhé. À mà nếu bạn có bất kỳ câu hỏi nào thì đừng ngại comment hoặc liên hệ mình qua: Zalo - 0374226770 hoặc Facebook. Mình xin cảm ơn.

Momo: NGUYỄN ANH TUẤN - 0374226770

TPBank: NGUYỄN ANH TUẤN - 0374226770 (hoặc 01681423001)