【雛形】ローカル変数のスコープ独立性を維持しながら、クラス定義をする

初投稿です

割と鎖国政策を敷いてきたために、今更になって初投稿だったりします。よろしくお願いします。

こんな問題を抱えていませんか？

Javascriptって、スコープの維持に神経使う言語だったりしますが

• 割と単純な変数名を使っていたら、変数名が被ってしまい、訳の分からない挙動をし始めた
• 変数名の被りを排除するために、複雑な変数名、複雑なオブジェクト構造を構築してしまい、ソースの可読性が落ちた
• スコープ区切ったのはいいけれど、他のスコープからクラスの呼び出しがうまく行かない

単純な方法でスコープを区切る事ができます

example.class.coffee　(ひな形としても使えます)

(->
  $window = @
  variable01 = "test"
  class Example
    constructor : ->

    methods : ->

  # キモ②
  $window.Example = Example

# キモ①
).call(@)

キモの部分

①最上位の()

(->
  $window = @
  # クラス定義
).call(@)

.call(@) の部分は、JS上は .call(this); に置き換えられる訳ですが、
この部分のthisはつまりwindowになります。
.call()で呼び出された最上位スコープ内で使われるthisがつまりwindowになるので、
これを任意の変数(サンプルでは$window)に格納して、JSのwindowオブジェクトにアクセスする訳です

②.call()スコープ内の下の方

$window.Example = Example

この部分で、Exampleのクラス定義を window.Example に代入しています。
この事により、.call()スコープ外からも、Exampleクラスを呼び出せるようになりますね。

注意すべき事

①クラス名が被らないように
→クラス名が被ると、JS読み込みが後だったものにオーバーライトされてしまうので、注意が必要です。

②巨大なクラスにならないように
→ひとつのクラスに大量にコードを書きすぎると、保守性が下がるので、
予め機能を検討した上で、クラス分けして行くのがオススメです。

ちなみに、CoffeeScriptをコンパイルする際に、
自動的にスコープ切ってくれたりするケースもあるようですが、
私は逆に訳が分からなくなってしまったので、シンプルにコンパイルさせて、
スコープは自分で制御する派です。

終わりに

以上です。もちろん、
複雑なClass定義をする際にはもっといい方法があると思いますが、
比較的小さなJS群を構築する際に、

• 今書いているクラススコープのコーディングに集中したい
• 他の変数に翻弄されたくない

と行った時に、うまく使ってもらえればと思います。