studio Odyssey




スタジオ日誌

日誌的なもの

2011.01.22

VisualStudioで、Javascript

Written by
しゃちょ
Category
プログラム

 Web開発なんかもする俺ですので、VisualStudioでJavascript(正確には、やつはJScriptだが)なんかも書くわけですが、VS2010から、Javascriptのインテリセンスもよくなったよ!とか聞くので、いろいろ試してみた。

 たしかによくなっているんだが、Javascriptが結構、いろんな事が出来ちゃう所為で、いろいろと微妙だ。つらつらと書いてみよう。

 .jsというファイルを作って、.jsの間でインテリセンスを有効にするには、

/// <reference path="SampleClass.js"/>

 コードの頭に、こんな感じで書けばいい。すると、指定されたパスにあるコードを読み込んで、インテリセンスが効くようになる。なお、アセンブリ内のコードを参照するには、name="ClassLibrayName.SampleClass.jp" assembly="ClassLibralyName" のように書く。細かい事はググれ。

 さて、では、以下のようにいろいろな書き方でクラスとか、オブジェクトを書いてみた。

//SampleClass.js
//クラスを宣言する部分
var SampleClass = function (name) {
    /// <summary>コンストラクタ</summary>
    /// <param name="name" type="String">文字列</param>
    //ここがコンストラクタとなる
    var _name = name;       //コンストラクタ内でのprivateな変数
    //このクラスにgetNameというメソッドを追加する
    this.getName = function () {
        /// <summary>コンストラクタで指定された名前を取得します。</summary>
        /// <returns type="String">コンストラクタで指定された名前</returns>
        return _name;       //外部には公開されない
    };
}
//Sampleクラスにプロトタイプをオブジェクトリテラルで定義する
SampleClass.prototype = {
    //Helloメソッド
    Hello: function () {
        /// <summary>Helloします。</summary>
        /// <returns type="String">Helloな文字列</returns>
        return this.getName() + " Hello";
    }
};

/// <reference path="SampleClass.js"/>

//Example.js
var Example;

Example = {
    add: function (x, y) {
        /// <summary>加算</summary>
        /// <param name="x" type="Number">x</param>
        /// <param name="y" type="Number">y</param>
        /// <returns type="Number">加算結果</>
        return x + y;
    }
};

/// <reference path="SampleClass.js"/>
/// <reference path="Example.js"/>

//ExampleA.js
var Example;
if (!Example) Example = {};
if (!Example.ExampleA) Example.ExampleA = {};

//この書き方は、インテリセンスででないことがある?
//しかも、自動成形されない
(function () {

    var toString = "ExampleA";

    function multiple(x, y) {
        /// <summary>かけ算</summary>
        return x * y;
    };

    var ns = Example.ExampleA;

    ns.multiple = multiple;
    ns.toString = toString;
})();

/// <reference path="SampleClass.js"/>
/// <reference path="Example.js"/>
/// <reference path="ExampleA.js"/>

//ExampleB.js
var Example;
if (!Example) Example = {};
if (!Example.ExampleB) Example.ExampleB = {};

//この書き方は、自動成形される
Example.ExampleB = {
    Devide: function (x, y) {
        /// <summary>割り算</summary>
        return x + y;
    },
    toString: "ExampleB"
};

/// <reference path="SampleClass.js"/>
/// <reference path="Example.js"/>
/// <reference path="ExampleA.js"/>
/// <reference path="ExampleB.js"/>

//ExampleB.js
var Example;
if (!Example) Example = {};
if (!Example.ExampleC) Example.ExampleC = {};

//自動成形されない
(function () {

    var _toString = "ExampleC";
    
    Example.ExampleC = {
        subtract: function (x, y) {
            /// <summary>引き算</summary>
            return x * y;
        },
        toString: function () {
            //ここで、Exampleのインテリセンスはでない
            //var Example の宣言を消すと出る?
            return _toString;
        }
    };
})();

 各コードは別名のJscriptファイルで、VisualStudioのプロジェクトに追加してある。 で、main.jsとか作って、そこの頭で、

/// <reference path="SampleClass.js"/>
/// <reference path="Example.js"/>
/// <reference path="ExampleA.js"/>
/// <reference path="ExampleB.js"/>
/// <reference path="ExampleC.js"/>

 こんな感じにして、インテリセンスの効き具合を調べた。

 結論はコードに書いてあるのだけれど、一応、全部出た。ただ、それぞれ、ちょっと問題がある。

 SampleClass.jsは、教科書にでも出てきそうなコードなので、当然、出るし、特に問題はない。

 ExampleA.js の書き方は、インテリセンスにでないことがある?かもしれない。

 会社のWin7だと出てきてくれなかった気がするんだけど、家のXPだと出るんで、なんか、コンポーネント周りで違うのかなぁという気もする。ちなみに、自動成形してくれないので、この書き方は書いていてストレスがたまる。なお、余談だが、インテリセンスが効かない時は、必ず「すべてを保存」してから、ctrl+shift+Jで再ロードしているので念のため。

 ExampleB.js もよくある書き方なので、ちゃんと出る。

 ただまぁ、これはExampleのコード全部に言えることなんだけど、名前空間的に利用しているExampleというオブジェクトが、referenceのExample.jsでも定義されているせいか、ExampleB.js 内では、Example.addとか、Example.ExampleAは、インテリセンスででない。var Exampleを消すと出るので、どうもこういう書き方は、ちゃんと解釈してくれないらしい。(ただ、自分の中ででないだけで、main.js では出る)

 ExampleC.js は、お気に入りの書き方なんだけど、これは自動成形されない。仕方ないので、ばーっと書いて、最後に (function() { .. })(); を書き足すようにしている。めどい...ちゃんと自動成形してくれるようにならないかなぁ。

 最終的に、ベストな書き方は ExampleB.js なんだろう。シンプルだし。

 といいつつ、だいたい ExampleC.js の書き方で済ます。男には、触れられたくない変数っていうものがあるんだよ。

 余談ですが、aspx側でインテリセンスを効かせるためには、ScriptManagerを使って、プロパティに設定するしかないようです。scriptタグの中に reference書いてもダメみたい。なので、framework 2.0 では、インテリセンス効かせられません。まぁ、今時、最低でも3.5にすると思うけど。


トラックバックURL

http://blog.studio-odyssey.net/cgi-bin/mt/mt-tb.cgi/623


コメントする