【JavaScript】超初心者向け！デザインパターンを丁寧に解説~ES6~

プログラミングの世界では、再利用性や保守性の向上を目指すため、デザインパターンという概念が存在します。

デザインパターンを理解することでより効率的なコードを書くことができるようになります。

今回は、初心者向けに人気の言語JavaScriptのデザインパターンにフォーカスを当てて基本的な実用例と紹介しつつ

使い方とメリットについて丁寧に解説していきます。

デザインパターンのメリット
代表的なデザインパターン3選
まとめ

デザインパターンのメリット

デザインパターンを活用することには、いくつかの重要なメリットがあります。

これらをイメージしながらコーディングを行うことで入門書を読み終えたばかりの初心者でも一段上のプログラミングをできるようになります。

再利用性の向上
共通のコードをパターンごとに定義して同じようなコードを繰り返し書く必要性がなくなり、既存のコードを再利用することができる。

保守性の向上
デザインパターンをプロジェクト内で定義、パターン化することで、ほかの開発者にとっても読みやすい可読性の高いコードを記述することができます。コード全体の理解が早まることはあらゆるプロジェクトで求められる課題ですので長いプロジェクトほど重宝されます。

柔軟性と拡張性
デザインパターンを定義することは新しい要件や機能を追加する際にも、既存のパターンに基づいて変更を加えることができるため、柔軟性と拡張性に優れたコーディングを行うことができます。

デザインパターンを利用する際の注意点

デザインパターンはとても便利ですが、完全無欠というわけでもありません。

メリットがあれば注意すべきポイントもいくつかありますので代表的な例を紹介していきます。

何でもかんでも使用しない！
全ての場面でデザインパターンを使用する必要はありません。単純な問題に対してやたらと複雑なパターンを適用すると、逆にコードを複雑にしてしまうことがあります。

適切なタイミングと用途をしっかりと判断して利用しましょう。

多用しすぎない！
デザインパターンを利用するには目的を明確にしましょう。多用しすぎてしまうとかえってコードが冗長になり、理解が難しくなることがあります。

せっかく保守性を考えた作りにしようとしても逆効果となってしまわないように注意しましょう。

代表的なデザインパターン3選

Javascriptで利用される代表的なデザインパターンを3つご紹介していきます。

実はもっと多くのデザインパターンも存在しますが、一度にすべてを理解するのはとても難しいです。

そのため、より利用頻度の高い3つのデザインパターンを丁寧に解説していきます。

一つでも日々のプログラミングで意識して使用できるように訓練しましょう。

1.モジュールパターン

デザインパターンの中でも特に重要なのが、モジュールパターンです。これは、関数やクロージャを使用して、プライベートとパブリックなメンバーを持つモジュールを作成する方法です。

これにより、コードの階層化と再利用性が向上します。

使用例

let CounterModule = (function() {
  let count = 0; // プライベート変数
  
  function increment() { //カウントアップ関数
    count++;
  }
  
  function getCount() { //カウントアップした値を返す関数
    return count;
  }
  
  return {
    increment: increment,
    getCount: getCount
  };
})();

CounterModule.increment();
console.log(CounterModule.getCount()); // 出力結果: 1

この例では、CounterModuleというモジュールがプライベートなcount変数と、外部からアクセス可能なincrement関数とgetCount関数を持っています。

モジュール外から直接count変数にアクセスすることはできず、increment関数を通じて値を増やし、getCount関数を通じて取得します。

外部からのアクセスを制御することで、セキュリティ性の向上にも役に立ちます。

2.シングルトンパターン

シングルトンパターンは、クラスのインスタンスを1つだけ持つように制限するための方法です。これにより、複数のインスタンスが作成されることを防ぎ、効率的なリソース管理が可能となります。

使用例

let Singleton = (function() {
  let instance;
  
  function createInstance() {
    return { message: "これはシングルトンです" };
  }
  
  return {
    getInstance: function() {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

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

console.log(instance1 === instance2); // 結果: true

この例では、Singletonモジュールが1つのインスタンスを保持し、getInstance関数から間接的にアクセスできるようになっています。

同じインスタンスが複数作成されないように制御されており、instance変数がその役割を果たしています。

3.ファクトリーパターン

最後に紹介するのは、ファクトリーパターンです。オブジェクトの生成処理をカプセル化し、柔軟なオブジェクトの作成を可能にする方法です。これにより、複数の条件に応じて異なるオブジェクトを生成できるようになります。

使用例

function Dog(name) {
  this.name = name;
  this.type = "犬";
}

function Cat(name) {
  this.name = name;
  this.type = "猫";
}

function AnimalFactory() {}

AnimalFactory.prototype.createAnimal = function(name, type) {
  if (type === "犬") {
    return new Dog(name);
  } else if (type === "猫") {
    return new Cat(name);
  }
};

let animalFactory = new AnimalFactory();
let myDog = animalFactory.createAnimal("ポチ", "犬");
let myCat = animalFactory.createAnimal("たま", "猫");

console.log(myDog); // 結果: Dog { name: "ポチ", type: "犬" }
console.log(myCat); // 結果: Cat { name: "たま", type: "猫" }

この例では、AnimalFactoryクラスがcreateAnimal関数を使用可能にしていて、犬や猫など異なる動物のオブジェクトを生成します。

条件によって異なる種類のオブジェクトを生成できるため、拡張性が高く柔軟なコードの使用例となります。