JavaScriptでのデザインパターンの実装 – JavaScriptで始めるプログラミング

JavaScriptでのデザインパターンの実装

JavaScriptは、柔軟で強力なプログラミング言語です。適切なデザインパターンを使用することで、書いたコードがより管理しやすく、拡張性のあるものになります。この記事では、JavaScriptで始めるプログラミングと、いくつかの主要なデザインパターンの実装方法について解説します。

シングルトンパターン

シングルトンパターンは、特定のクラスのインスタンスが１つだけ存在することを保証します。これにより、プロジェクト内で一貫したデータや設定を共有できます。

const Singleton = (function () {
  let instance;
  
  function createInstance() {
    const object = new Object("I am the instance");
    return object;
  }
  
  return {
    getInstance: function () {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();

console.log(instance1 === instance2); // true

ファクトリーパターン

ファクトリーパターンは、オブジェクト生成の複雑さを隠蔽し、クライアントが特定のクラスを知らなくてもオブジェクトを生成できるようにします。

function CarFactory() {
  this.createCar = function (model) {
    let car;
    if (model === "sedan") {
      car = new Sedan();
    } else if (model === "suv") {
      car = new SUV();
    }
    return car;
  };
}

function Sedan() {
  this.type = "sedan";
  this.color = "black";
}

function SUV() {
  this.type = "suv";
  this.color = "white";
}

const factory = new CarFactory();
const myCar = factory.createCar("sedan");
console.log(myCar.type); // sedan

オブザーバーパターン

オブザーバーパターンは、オブジェクトの状態変化を他のオブジェクトに通知するためのメカニズムを提供します。このパターンは、イベント駆動型のプログラミングによく使用されます。

function Subject() {
  this.observers = [];
}

Subject.prototype = {
  subscribe: function (observer) {
    this.observers.push(observer);
  },
  unsubscribe: function (observerToRemove) {
    this.observers = this.observers.filter(observer => observer !== observerToRemove);
  },
  notify: function (data) {
    this.observers.forEach(observer => observer.update(data));
  }
};

function Observer(name) {
  this.name = name;
  this.update = function (data) {
    console.log(`${this.name} received data: ${data}`);
  };
}

const subject = new Subject();
const observer1 = new Observer("Observer 1");
const observer2 = new Observer("Observer 2");

subject.subscribe(observer1);
subject.subscribe(observer2);

subject.notify("Hello Observers!"); // Both observers receive the data
まとめ

これらのデザインパターンは、JavaScriptで強力で再利用可能なコードを作成するのに役立ちます。また、コードの可読性や保守性も向上します。さらに詳しい情報が必要な場合は、以下のリンクを参照してください。

参考文献: デザインパターン入門

コメントを残す