PhpStorm+Javascript

この投稿は3年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。
2013 年 10 月 2 日 1,362日前)
3,811文字 (読了時間9分)

SPONSORED LINK

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

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

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

JavascriptとJSDocについて

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

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

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

NetBeansでPHPDocがコードヒントに出る様
NetBeansで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でもコードヒントがでるようになります。

NetBeansでJSDocがコードヒントに出る様
NetBeansでJSDocがコードヒントに出る様

が、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とか。エディタ自体の機能もそうだけど、それをとりまく文化圏の方もかなり重要。

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

開眼!  JavaScript ―言語仕様から学ぶJavaScriptの本質

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質 [書籍]

著者Cody Lindley

クリエーター和田 祐一郎

出版社オライリージャパン

出版日2013 年 6 月 19 日

商品カテゴリー単行本(ソフトカバー)

ページ数192

ISBN487311621X

Supported by amazon Product Advertising API

 

フォローしてください

ここで会ったのもなにかの縁。
高橋文樹.comの最新情報を見逃さないためにもフォローをお願いします。
めったに送らないメルマガもあります。

SPONSORED LINK

この記事について

この記事はが2013 年 10 月 2 日にプログラミングの記事として公開しました。

高橋先生の電子書籍

高橋先生の電子書籍

Amazonで電子書籍も買えます。

好きな言葉

なにもしなかったということは、悪いことをしなかったということではない

— マルクス・アウレリス・アントニヌス

高橋先生の処女作

『途中下車』高橋文樹

2001年幻冬舎NET学生文学大賞受賞作です。

Web制作やります

Web制作やります

Web制作のご依頼は株式会社破滅派へ

不定期メルマガ

高橋文樹.comでは、不定期でニュースレターを配信しています。滅多に送らないので是非購読してください。

高橋文樹.comではプライバシーポリシーに準じて登録情報を取り扱います。