JavaScriptのObserverパターンについて現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのObserverパターンについて現役エンジニアが解説しています。Observerパターンとは、デザインパターンの一つで、イベントの通知とイベントの状態を更新するクラスで構成されます。JavaScriptのObserverパターンの書き方や実装方法、使い方について解説します。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptのObserverパターンについて、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptのObserverパターンについて詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

Observerとは

Observerとは、Observerパターンといわれるデザインパターンの1つの中で作成されるクラスのことを示します。
 

[PR] フロントエンドで挫折しない学習方法を動画で公開中

Observerパターンとは

Observerパターンとはどのようなデザインパターンでしょうか。Observerといわれるイベントによって状態を更新するクラスと、そのObserverへイベントの通知を行うSubjectから構成されるデザインパターンです。

ポイントとしては、SubjectとObserverに分けることで、イベントの対象とイベントの発行を疎結合にできる点です。
 

Observerパターンの実装例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Observerパターン JavaScript</title>
</had>
<body>
  <p>下のテキストエリアに文字を入れてください。スペースで区切ると単語と認識します。</p>
  <textarea class='text'></textarea>
  <div>
    単語の数は <div class='count'></div> です。
  </div>
  <script>
    // Observerクラスを定義します
    class Observer {
      constructor() {
        this.observers = []
      }
      subscribe(fn) {
        this.observers.push(fn)
      }
      unsubscribe(fn) {
        this.observers = this.observers.filter(subscriber => subscriber !== fn)
      }
      broadcast(data) {
        this.observers.forEach(subscriber => subscriber(data))
      }
    }
    const Wordobserver = new Observer()
    const Field = document.querySelector('.text')
    const WDcount = document.querySelector('.count')
    //textareaのイベントを検知し、Observerに状態変化とイベント発行を行うSubject
    Field.addEventListener('keyup', () => {
      Wordobserver.broadcast(Field.value)
    })
    //Observerに状態変化とイベント発行を行うSubject
    Wordobserver.subscribe(text => {
      WDcount.innerHTML = text.trim().split(/s+/).length
    })
  </script>
  </body>
</html>

 

まとめ

JavaScriptでは、「MutationObserver」を利用するとオブジェクトの変化も監視することができるのですが、今回は一般的なObserverパターンで作成してみました。
 

筆者プロフィール

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。