【JavaScript】デザインパターンを知ってみる。ファサードパターン編

JavaScript

2014.04.21

今回はJavaScriptで書くファサード（Façade）パターンについて調べてみました。
ファサードはフランス語で「建築物の正面のデザイン」という意味だそうです。

なぜ使うの？

ファサードパターン自体はとてもシンプルで、いくつかの機能の「窓口」になるクラスやオブジェクトを作り、利用しやすくするパターンです。

jQueryで一番よく使うであろう $() 関数もファサードパターンの一つです。

例えば要素の見た目を変える機能を実装するとして、個別の要素を制御するオブジェクトと、窓口になるオブジェクトを用意すると以下のようなコードが考えられます。

// 色を制御するオブジェクト
function colorObj() {
  return {
    changeColor: function() {
      console.log('色を変えます');
    }
  }
};
// フォントを制御するオブジェクト
function fontObj() {
  return {
    changeFont: function() {
      console.log('フォントを変えます');
    }
  }
};
// 枠線を制御するオブジェクト
function borderObj() {
  return {
    changeBorder: function() {
      console.log('枠線を変えます');
    }
  }
};
// 窓口となるオブジェクトを作る（Façade）
var Facade = {
  changeAppearance: function() {
    var o1 = new colorObj();
    var o2 = new fontObj();
    var o3 = new borderObj();
    o1.changeColor();
    o2.changeFont();
    o3.changeBorder();
  }
};

// 3つの機能をファサードからまとめて呼び出す
Facade.changeAppearance();

一見面倒な作りに見えますが、例えばフォントを変える機能だけIEだけ個別に対応しなければならない・・・といった場合、フォントを制御するオブジェクトだけ修正を加えればよく、窓口のオブジェクトは修正を意識する必要はありません。また、ここに新たに背景色を変える機能をつけたい場合も、背景色を制御するオブジェクトを作ってファサードのオブジェクトの機能の呼び出しを一つ増やすだけで対応できます。

書いてみると単純なことに見えますが、実際に使ってみると、ブラウザごとの違いをまとめて記述したり、一部の機能を変更しなければならなくなった場合の対応が格段にしやすくなります。
注意点としては、ファサード自体はあくまで機能を利用するだけにするということです。利用する側の機能には影響を与えないように作る必要があります。

複数人で開発をする場合には意識しないわけにはいかないパターンと言えるでしょう。
ある程度以上大きな機能を実装する時には重要な考え方ですね。