2011.01.22
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にすると思うけど。
コメントする