Takazudo Clipping*

まんじゅう製造スクリプト

今日はまんじゅうを5個作ります。なんと、まんじゅうは、クリックすると隠れます。

• まんじゅうサンプル

var Manju = function(){
    this.elem;
    this.hidden = false;
    this.setup();
}
Manju.prototype = {
    setup: function(){
        this.elem = $('<div class="manju">MANJU!</div>');
        $(document.body).append(this.elem);
        var self = this;
        this.elem.click(function(){
            if(self.hidden){
                self.show();
            }else{
                self.hide();
            }
        });
    },
    hide: function(){
        this.elem.css("background","#cccccc");
        this.hidden = true;
    },
    show: function(){
        this.elem.css("background","#000000");
        this.hidden = false;
    }
}

$(function(){
    var manju1 = new Manju();
    var manju2 = new Manju();
    var manju3 = new Manju();
    var manju4 = new Manju();
    var manju5 = new Manju();
});

とりあえず解説。

コンストラクタからはじめるまんじゅうクラス

var Manju = function(){
    this.elem;
    this.hidden = false;
    this.setup();
}

まんじゅうを5個作るんですが、その前にまんじゅうの雛型を用意してやりましょう。これをクラスとかいう。（厳密にはJavaScriptではクラスっていう風には言わないんだけれど、ここではまぁ気にしない）

まんじゅうには、まんじゅうを表すHTMLを入れておくelem、まんじゅうが隠れてるのかを表すhiddenっていう箱を用意せよ。まんじゅうは最初は隠れてないのでfalse。そんで、まんじゅうのセットアップをせよ。っていうことをここではしてます。こんな感じで、まんじゅうが作られた時にこれをしてくれっていう関数を、コンストラクタとか言います。まんじゅうクラスを作るには、この、コンストラクタをまず作りましょう。まんじゅうコンストラクタです。

まんじゅうのメソッド

Manju.prototype = {
    setup: function(){
        …
    },
    hide: function(){
        …
    },
    show: function(){
        …
    }
}

次に、まんじゅうの機能をどんどんつけていきます。
今出た、まんじゅうのセットアップ…setupに加え、まんじゅうを隠すhide、まんじゅうを出現させるshowっていう機能をManjuにつけちゃいます。こんな感じで、まんじゅうの機能としてくっつけられた関数のことを、メソッドとか言う。

    setup: function(){
        this.elem = $('<div class="manju">MANJU!</div>');
        $(document.body).append(this.elem);
        var self = this;
        this.elem.click(function(){
            if(self.hidden){
                self.show();
            }else{
                self.hide();
            }
        });
    },

まんじゅうのセットアップでは、まず、まんじゅうを表すHTMLを作ります。
ここからjQueryの便利機能をちょこちょこ使いますが、jQueryの機能は細かく説明しませんので、詳細はjQueryのドキュメントなどを参照してください。はじめに出てくるthisってのは、まんじゅう自体を示します。まんじゅうのelemっていう箱にこのHTMLを入れてしまいます。そんで、ページのbodyに入れ込めっていう命令をかいてあげます。そのあとは、まんじゅうがクリックされた時、隠れてたらまんじゅうのshowメソッドを、隠れてなかったらhideメソッドを実行せよというイベントを、追加したHTMLに設定してあげます。

初めにまんじゅうコンストラクタの中にでthis.setup();って書いてありました。
これは、まんじゅうが作られた時に、このsetupを実行せよってことです。

それで、そのshow,hideってのは何してくれるのかというと…

    hide: function(){
        this.elem.css("background","#cccccc");
        this.hidden = true;
    },
    show: function(){
        this.elem.css("background","#000000");
        this.hidden = false;
    }

まんじゅうHTMLのCSS、背景を灰色にせよ、黒くせよっていうことをしてくれます。そして、隠れてるのか否かっていうフラグをtrueにしたりfalseにして、いままんじゅうが隠れているのか否かを切り替えます。これでまんじゅうクラスが完成。ついにまんじゅうを作る時が来ました。

まんじゅうクラスのインスタンス

$(function(){
    var manju1 = new Manju();
    var manju2 = new Manju();
    var manju3 = new Manju();
    var manju4 = new Manju();
    var manju5 = new Manju();
});

$(function(){});っていうのは、ページのロードが完了したときにこれやってねっていう命令です。ページがロードされる前にやってしまうと、HTMLがまだ作られていないので、色々と問題になるので、こんな感じで、ロード完了時にまんじゅうを作ってやります。new Manju()です。新しいまんじゅうを雛型からつくってやるのです。こうやって、雛型(クラス)から作られたモノ（オブジェクト）たちを、インスタンスって言います。まんじゅうクラスのインスタンスです。

そんなこんなでまんじゅうが5個できます。

※ まんじゅうクラスを作る時は、雛型を作ってるだっけなので、ロード時じゃなくてもいいのです。

this

ちなみに、コレ

        var self = this;
        this.elem.click(function(){
            if(self.hidden){
                self.show();
            }else{
                self.hide();
            }
        });

ようわからんと思った人がいるかもしれませんが、これは、thisっていう変数は、使われる場所でコロコロ変わるものなので、こんな風にかいてあげる必要があります。thisは、まんじゅう自身を指すと言いましたが、clickの中で使われる時は、thisは、クリックされた要素（<div class="manju">MANJU!</div>）がthisになるのです。そんなこんなで、まんじゅう自身を一時的にselfに保存してやり、show、hideメソッドを呼んでやるのです。

プロパティ

まんじゅうには、elemとhiddenっていう箱をつけてやると最初に書きましたが、これら、まんじゅうに属する変数のことを、プロパティって言います。下のようなコードで、中に入ってる情報をとってくることができます。

alert(manju1.hidden); // 隠れてたらtrue、出てたらfalseと出る

this.hiddenとかthis.elemとか使ってましたねそういえば。

prototype

こんな感じで、prototypeでメソッドをつけてあげると、メモリを食わなくていいとの話です。各まんじゅうは、elemとhiddenっていう箱だけを持つ形になり、prototypeでくっつけてあげたメソッドは、全まんじゅうで共通になります。

なんかしらのセットにできるものが複数出現する場合は、この、クラスからインスタンスを作っていくという形に落とし込むのが良いです。1個1個を個別に操作できるようになります。

でも、いちいちnewとかしてめんどくさくないですか？まんじゅう100個作れって言われたらかったるいし…。とおもったアナタ。メモリを食う食わないとかいう話よりも、もっと重要な話があります。それは…

• オブジェクト指向っぽい話が分かるかもしれないJavaScript講座　その1
• オブジェクト指向っぽい話が分かるかもしれないJavaScript講座　その2
• オブジェクト指向っぽい話が分かるかもしれないJavaScript講座　その3

---

【参考】

• Javascript prototype versus closure execution speed
• オブジェクト指向でオススメなJavaScript本：Amazon：Pro JavaScript Design Patterns (Recipes: a Problem-Solution Ap)
• 細かく知りたいならとりあえずコレ：Amazon：サイ本