はじめに
Visual Studio 2013 (以下VS)のintellisenseは非常に便利な機能だが、ちょっと曲者である。使っているうちになんだかよくわからなくなってきたので、簡単な例から順を追って試し、Intellisense機能を探ることにした。
まず普通に使う
<script>タグ中に普通にスクリプトを書く。そうすると定義したfunctionの頭文字を入力するだけで、自動的に候補を表示してくれる。
functionの上の行に関数に関するコメントを書くとそのコメントも合わせて表示されるのも便利な機能だ。このようにIntellisenseを考慮することなく自然な感じでコードを書くだけでIntellisenseが効くというのが素晴らしいところだ。
<script src='xxx'>(外部スクリプト)のIntellisense
これも特別なことをすることなく、<script src='xxx'></script>と書くだけで外部スクリプトファイルのIntellisenseが可能となる。下記はd3.min.jsを外部スクリプトファイルとして読み込んでみた例だ。
外部ファイル中でIntellisenseを有効にする。
次はスクリプトをHTMLファイルに書くのではなく、外部ファイル(test.js)中に書くことにする。HTMLファイルは下記のようになる。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="test.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
test.jsはd3.jsをベースにコードを書くことを想定している。test.js中でコードを書くときd3オブジェクトをIntellisenseしてほしいところだが実際はそうはならない。
こういう時には<reference>ディレクティブを指定し、参照したい外部スクリプトファイルを下記のように書く。
/// <reference path="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js" />
これでd3オブジェクトのIntellisenseが有効となる。
_references.js
_references.jsは特殊なJavaScriptファイルである。この中に<reference> ディレクティブを書いておくとそのプロジェクトに作成・登録したすべての外部スクリプトファイルでIntellisenseが有効になる。
Web Essensialsを導入すればソリューション・エクスプローラー上で右クリック「追加→_references intellisense file」でScriptsディレクトリが作成され、_references.jsファイルが作成される。
_references.jsは作成直後は以下のような中身となっている。
/// <autosync enabled="true" />
<autosync>ディレクティブは以下のような挙動となる。
- 外部スクリプトファイルをソリューション内に追加すると自動的に_references.js内に追加する。
- ディレクトリやスクリプトファイル名を変更すると_references.jsに該当する
<reference>ディレクティブのpath属性が書き換えられる。
以下の動画も参考になる。
ただこの機能は問題がある。例えばCDNにあるd3.min.jsへの<reference>を手動で追加したとする。test.jsはソリューション内で作成した外部スクリプトファイルで、<autosync>で追加されたものである。
/// <autosync enabled="true" />
/// <reference path="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js" />
/// <reference path="../test.js" />
その後<autosync>で登録された外部JavaScriptファイルのファイル名等を変更すると手動で追加した部分が削除されてしまう。
/// <autosync enabled="true" />
/// <reference path="../test2.js" />
これを回避するには_references.jsファイルを右クリックし、「JavaScriptファイルの自動同期」のチェックをはずす。ただしこのチェックを外すと、<autosync>が以降無効となる。
この設定を行うと<autosync>設定はfalseに変更される
/// <autosync enabled="false" />
/// <reference path="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js" />
/// <reference path="../test.js" />
さて、この状態で通常であれば外部スクリプトファイルでもd3.min.jsのintellisenseは有効であるはずだが、実際は有効にならない。なぜだ？
凡ミスだ。。path中のURLのスキーム(http:)の書き忘れであった。。書き直して保存しCTRL+Shift+Jで再度リモート参照を読み直すとIntellisenseが使えるようになった。
/// <autosync enabled="false" />
/// <reference path="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js" />
/// <reference path="../test.js" />
ただスキームなしでも出力ウィンドウ上は正常に読み込まれているように表示されるので問題ないものとばかり思っていたが、、、。まあ気を付けよう。。
06:40:36.1189: 参照ファイル '//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js' をダウンロードしています...
06:40:36.1189: 参照ファイル '//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js' をダウンロードしています...
06:40:36.1950: '//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js' のダウンロードが完了しました。
あとはソリューションのローカルディレクトリにすべて外部スクリプトファイルを保存しない限り、<autosync>は有効にすべきでないというところであろうか。
Intellisenseの話は次回に続く。。