PhpStorm+MooToolsでオブジェクト指向のJavascript開発

ものすごく久しぶりにMooToolsネタです。

最近はもっぱらWordPressしかいじっていないので、必然的に同梱のjQueryを使うことになってしまうのですが、数年前に自分で作った不動産用CMSを再度いじる機会があり、そこで再びMooToolsをいじることになりました。

その際、以前から「できたらいいな」という思っていたことがPhpStormというIDEでできるようになっていたので、嬉しさのあまりシェアします。

JavascriptとJSDocについて

昨今のプログラミング言語にはある決まった形式でコメントを書いておくと、マニュアルを生成できる*Docというライブラリがあったりします。元はJavaDocだと思いますが、それを模倣してPHPDocとか、ASDocとか、そんな感じですね。

「ソースコード書いたらそれだけでマニュアル作っちゃえば楽じゃん」という思想の元に作られたものですが、昨今のIDEはこの*Docで書いておくと、コードヒントに詳細な情報が表示されるようになったりします。

たとえば、僕が愛用しているNetBeansだと、PHPで開発している際に、自分で書いたPHPDoc形式のコメントを元に関数の戻り値や引数についての説明を表示してくれたりします。

コメントを書くのは面倒ですが、PHPやJSのように型付けが自由なスクリプト言語を書いている場合、この機能はありがたかったりします。もちろん、型が厳密な言語でもメソッドチェーンをつなぐときはコードヒントがバンバン出てくれると嬉しいですね。

で、JavaScriptにもこうした*Docは存在します。それがJSDocです。

MooToolsのクラス構造をほとんどのIDEはサポートしない

JavaScriptでクラスっぽい書き方をする場合、こんな風に書くのが定石とされています。

/**
 * @class 人間を表現するクラス
 * @param {String} name
 * @param {String} sex
 * @returns {Person}
 */
Person = function(name, sex){
    
     /**
      * 名前
      * @type {String}
      */
     this.name = name;
    
     /**
      * 性別
      * @type {String}
      */
     this.sex = sex;
    
     /**
      * 自己紹介をする
      * @returns {undefined}
      */
     this.sayHello = function(){
          alert('私の名前は' + this.name + 'です。');
     }
}

これは定石と言われるやりかたなので、NetBeansでもコードヒントがでるようになります。

が、MooToolsにはextendsとかimplementとかをサポートした独自のクラス実装方法が用意されていて、こういう書き方じゃないんですね。

Person = new Class({
     Implements: [Events],
     name: '',
     sex: '',
     sayHello: function(){
          alert('私の名前は' + this.name + 'です。');
     }
});

MooToolsにはOptionsとか、Eventsとか、PHPでいうTraitみたいな機能がかなり前から実装されていて、これもまた便利は便利なんですが、自分で実装したクラスはコードヒントがまったくでなくなってしまいます。

一応、JSDocには@lendsという、「このオブジェクトリテラルはこのクラスのメンバーだよ」という風にスコープを変更する書式の定義ができるようになっているんですが、Apatana StudioやNetBeansなどのIDEはこれをサポートしてないんですねー。NetBeansは7.4RC1でもダメでした。

ところがどっこい、PhpStormというIDEならこれをサポートします。書き方はこんな感じ。

/**
 * 動物のクラスです。
 *
 * @author Takahashi Fumiki
 */
Animal = new Class(
    /** @lends Animal.prototype */
    {

        /**
         * @type {Array}
         */
        Implements: [Options],

        /**
         * @type {Object}
         */
        options: {
            /**
             * 名前
             * @type {String}
             * @private
             */
            name: '',

            /**
             * 性別
             * @private
             * @type {String}
             */
            sex: '',
        },

        /**
         * コンストラクタ
         * @param {Object} option
         * @constructs
         */
        initialize: function(option){
            this.setOptions(option);
        }

        /**
         * 動物の詳細を返す
         * @param {String} sep
         * @returns {String}
         */
        getDesc: function(sep){
            return this.options.name + this.options.sex ;
        }
    }
);

ポイントとしては、クラス自体に@class宣言をしないこと、そして、オブジェクトリテラルの直前に書く@lendsにprototypeを指定することでしょうか。これでコードヒントが出るようになります。詳細はJSDocのマニュアルをご覧アレ。

ちなみにPhpStormと書きましたが、JetBrainsのIDEならどれでも同じなはずです。PythonならPyCharm、RubyならRubyMineでしょうかね。MooToolsを使うような人は特にPHPに限らない（むしろ少なそう）と思いますので、検討してみてください。

おまけ： JetBrainsいいよ

僕はエディタはあまり使わず、基本IDEです。その主な理由は次の通り。

1. 「IDEは重い」とよく言われるが、会社員であれフリーランスであれ学生であれ、自分で環境を選べるなら、それなりのスペックのPCでも最近のIDEは重くない。
2. デプロイとかバージョン管理とかテストとかデバッグとか色々あるけど、IDEだと1つのアプリで済む場合が多い。
3. VimとかEmacsとかもいいけど、汎用的なものを一生懸命カスタマイズするより、専用のものを使った方が楽。
4. テキストエディタも結局向き不向きがある。CodaならHTML+CSSで、Sublime TextならPythonとか。エディタ自体の機能もそうだけど、それをとりまく文化圏の方もかなり重要。

色々使った感じでは、EclipseやAptana Studioのような汎用IDEはなにかの理由でものすごく重くなることがあるので、専用IDEの方がよいという結論に達しています。欠点としては有料なことです。でも2万ぐらいなので、仕事道具だと思えばそんなに高い買い物じゃないですね。