解説
「オブザーバー・パターン」（Observer Pattern、オブザーバ・パターン）は、デザイン・パターン（プログラムのよくあるパターンをまとめたもの）の一種です。オブザーバー自体は、日本語に訳すと観察者になります。
オブザーバー・パターンでは、オブザーバー（観察者）と、サブジェクト（Subject, 主題、観察される側）が出てきます。サブジェクトは、オブザーバブル（Observable、観察可能）とも呼ばれます。
サブジェクトにオブザーバーを登録すると、サブジェクト側で状態の変化があったときに、オブザーバーに通知がいきます。サブジェクトには、複数のオブザーバーを登録することができます。
このオブザーバー・パターンは、購読者／発行者パターンとも呼ばれます。雑誌の購入登録をしておくと、新しい号が出たときに出版社から購読者に雑誌が送られてくるイメージです。
オブザーバー・パターンの実装方法には、プッシュ型（push型）とプル型（pull型）があります。プッシュ型では、変化した状態の種類と値を、オブザーバーに直接通知します。プル型では、更新だけ通知して、オブザーバー側から、変化した状態の種類と値を確認します。
UnityやGodotといったゲームエンジンでは、こうした仕組みを利用して、キャラクターやステージの状態変更を各部品に通知しています。
サンプル
「オブザーバー・パターン」のサンプルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>「オブザーバー」のサンプル</title>
<style> button, input { font-size: 24px; line-height: 1.5; } </style>
</head>
<body>
<button id="button1">ボタン</button>
<input type="text" id="output1">
<input type="text" id="output2">
<script>
// 主題
class Subject {
constructor() {
this.arr = [];
}
add(observer) {
this.arr.push(observer);
}
notify(data) {
this.arr.forEach(observer => observer.update(data));
}
}
// 観察者
class Observer {
constructor(name, el) {
this.name = name;
this.el = el;
}
update(data) {
this.el.value = `${this.name}：${data}`;
}
}
window.addEventListener('DOMContentLoaded', e => {
// 要素
const elBtn1 = document.querySelector('#button1');
const elOut1 = document.querySelector('#output1');
const elOut2 = document.querySelector('#output2');
// オブザーバーの登録
const subject = new Subject();
subject.add(new Observer('観察者1', elOut1));
subject.add(new Observer('観察者2', elOut2));
// 通知
let count = 0;
elBtn1.addEventListener('click', e => {
subject.notify(count ++);
});
});
</script>
</body>
</html>
出力結果
ボタンを押すごとに、次のように表示が変わります。 観察者1：0 観察者2：0 観察者1：1 観察者2：1 観察者1：2 観察者2：2 ： ：
フィードバックお待ちしております！
ご感想、解説してほしい用語、解説内容のアドバイスなどございましたら、FacebookやX（旧Twitter）などでお気軽に編集部までお寄せください。よろしくお願いいたします。
