知っておきたいデザインパターン 3.ファサードパターン

こんにちは、@Im0_3です。LIGアドベントカレンダーの12日目です！

前回、前々回に引き続きデザインパターンについてです。

過去の記事はこちらからご覧ください。
知っておきたいデザインパターン 1.モジュールパターン
知っておきたいデザインパターン 2.シングルトンパターン

ファサードパターンとは

ファサードとは建築物の正面部分のことをいいます。入り口、玄関を想像してください。建物の中は表から見ただけではわからない、複雑な構造になっています。このパターンは様々な振る舞いを一つの入り口としてまとめたパターンのことを指します。

ライブラリはファサードパターンの宝庫

ファサードパターンはjQueryやUnderscore.jsのようなJavaScriptライブラリでよく使われています。ライブラリの便利なメソッドたちは、内部では様々な処理をしてくれているのです。ですが私たちがライブラリを使う際にはそこを意識せずに使うことができます。複雑な機能を意識せずにひとつにまとまるがファサードパターンのメリットといえるでしょう。

例としてYOU MIGHT NOT NEED JQUERYのAdd Classのコードを見てみましょう。

jQuery

$(el).addClass(className);

↓

vanilla.js

if (el.classList) {
  el.classList.add(className);
} else {
  el.className += ' ' + className;
}

jQueryのaddClassメソッドではvanilla.jsで書くとこのようのな処理をしています。（*機能的に同じということです、実際のコードではありません）
これはIE8,IE9ではclassListをサポートしていないため、どちらでも対応できるように機能をまとめてaddClassメソッドとして提供しているのでこのようなコードになっています。

こうすることで私たちはブラウザの対応状況を考えずにjQueryをすることができるのです。

実践ファサードパターン

では他のパターンを見てみましょう。
O'ReillyのJavaScriptデザインパターンで紹介されている例です。

var module = (function() {
	var _private = {
	    i: 5,
	    get: function() {
	        console.log( "current value" + this.i);
	    },
	    set: function( val ) {
	        this.i = val;
	    },
	    run: function() {
	        console.log("running");
	    },
	    jump: function() {
	        console.log("jumping");
	    }
	};
	
	//ファサードパターンで機能を一つにまとめて公開している
	return {
	    facade: function( args ){
	        _private.set(args.val);
	        _private.get();
	        if(args.run){
	            _private.run();
	        }
	    };
	}
}());

ファサードパターンは単独である必要はなく、他のパターンと組み合わせて使うことができます。
この例ではモジュールパターンと組み合わせて使用しています。

プライベートな値にアクセスする方法としてファサードパターンで機能をまとめてパブリックに公開をしています。

このように必要な機能をまとめてあげることで、モジュールを利用する側は中の機能を考えずに、利用することができるのです。

ファサードパターンを使う際の注意

ファサードパターンは複雑なものを完結に利用できるというメリットがある一方、それによって実装を抽象化されるため暗黙のコストがかかるというデメリットがあります。
内部でどんな動きをしているのか、コストに見合う価値があるのかを判断して設計する必要があるので注意して使いましょう。