本エントリはゆとり Advent Calendar参加エントリです。多分、21日目です。前日は@zephiransasさんのエントリでした。
お願い:
本エントリはいつもに比べて多少ですがネタっぽい成分を含んでいる可能性があります。心を広く、ゆとりを持ってご覧になっていただけると嬉しいです*1。
JavaScriptでもゆとりたい
JavaScript（以下JS）書くの結構面倒くさいですよね。動的型付けとかなんてあれきっと、脳内ですべての変数やら関数やらの型を管理できるような頭の良い人向けのフィーチャーに違いありません*2。少なくともゆとり世代な僕*3には結構しんどいです。
でも、そこをなんとか、ゆとりながらJSを書きたい。可能な限りゆとりたい。
今日はそんな僕が使っている『とってもゆとりながらJSをコーディングできるツール』を紹介したいと思います。
ツールの名前は何かって？それは最後のお楽しみ。まずはどんな具合にゆとれるのか、その機能とゆとりJSコーディングの世界をご覧ください。
ゆとり１：組み込みオブジェトのコード補完
まずは基本のコード補完です。
この機能が充実していれば、いちいちメソッドの綴りとか覚える必要ありませんし、全部タイプしなくてもサクサクとコードが書けます。
このあたりはゆとり以前にコーディング環境として文化的必要最低限な機能といっていもいいかもしれません。ゆとり世代の私には必須の機能です。このツールも、もちろんちゃんとこの機能を備えています。
この通り、ちゃんとインクリメンタル検索で候補も絞ってくれて見やすいです。
もちろん関数やメンバを保管してくれるだけじゃなく、引数の説明等も表示してくれます。
ゆとり２：構文も補完しちゃう
みなさん、基本構文、覚えていますか？プログラマなら最低限覚えている…と思いますが、あまり普段書かない構文だと、ちょっと度忘れすることもあるかもしれません。あと、他の言語と行ったり来たりしてると唐突にふと混同しちゃうこともあるかもしれません。
でもそんな時でも大丈夫。構文を覚えてないくても十分にゆとれる、「スニペット」という機能があります。例えばこの通り、for文の基本構文は、マウス数クリックで挿入可能です。
1.右クリックして「スニペットの挿入」を選んで…
2.一覧からfor文のスニペットを探して…
3.選択したら、この通り
しかも通常変更する必要があるところはちゃんと強調表示してくれるゆとりっぷり。もちろんfor文だけじゃなく、いろんな構文のスニペットがありますので、いろんなケースに対応できます。
ゆとり３：スニペで省エネ入力
先ほどの紹介したスニペット機能、構文を覚えてる人には意味がない…って思いませんでしたか？またコード書いてる途中にマウス触るなんて逆に面倒と思いました？
でもこれ、それだけじゃないんです。キーボードでの省力コーディングにも大きく役立ちます。例えば先ほどのforを例に出すと…
1."for"まで入力すると、候補にfor（ハサミがデザインされた、スニペットを表すアイコンが目印）が現れるので…
2.ここで tabキーを二回タッチ！すると…
この通り、先ほど同じfor文が展開されます。"f","o","r","tab","tab"と、わずか5タッチで入力完了ですね。
このスニペットには、例えば良く使うであろうfunctionなんかも用意されています。「fu」あたりまで入れてtabキーを二回押すと、functionのひな形も展開されます。
function(){}が 4タッチ。これだと構文を覚えてる人でもさらにゆとれて幸せになれるんじゃないでしょうか。
ゆとり４：自作オブジェクトも補完
最初に紹介したコード補完ですが、あれだけだと最低限文化的な仕組みですので、今時のテキストエディタなら大体、実現可能だと思います。
がしかし、もちろんこのツールはそれだけではありません。
自作オブジェクトであっても、ちゃんと候補に出してくれます。
もちろん単純な変数や、関数の引数もちゃんと補完してくれますし、入力するしたがって自動でインクリメンタル検索で絞り込めます。オブジェクトリテラルで記述した場合でも問題ありません。
このあたりからぼちぼち、『コード補完』じゃなくて『インテリセンス』と呼んでもいい感じになってくるかもしれません。
ゆとり５：自作関数も説明を表示
コード補完機能があっても、単に候補のオブジェクトのシグネチャが出てくるだけでは心許無いこともあります。人間が読んでわかる自然言語の説明が出てくると、そこに心のゆとりが生まれます*4。
大丈夫です。このツールでは、ドキュメントコメント機能に対応しているので、一定の書式で記述しておけば自作の関数でもちゃんと説明を表示できます。ほら、この通り。
実際に説明を書きこむドキュメントコメントの書式も覚える必要はありません。ちゃんとスニペットで補完可能です。
余談ですが、jQuery等の著名なライブラリには、このドキュメントコメントが用意されているものがあります。
ゆとり６：ステップ実行で楽々デバッグ
コーディング機能ばかりに目を向けていましたので、少し目先を変えてみましょう。
一般に、開発においてはコーディングよりもデバッグにこそ多くの時間が費やされるとも言われます。つまり、ゆとりある開発かできるかどうかは、デバッグでどれだけ楽ができるかにかかっているといっても過言ではないかもしれないのです。
このツールではブレイクポイントを設定し、ステップ実行を行う機能がちゃんと用意されています。この通り、デバッグ実行を開始すると、こんな感じでステップインできます。もちろん、変数もウォッチできます。
ゆとり７：インテリジェントなコード補完
ここまでにご紹介した機能でも、このツールがJavaScriptによる開発をゆとりあるものに変えてくる十分な機能を持っていることを理解いただけるかもしれません。
しかし、こいつの実力はまだまだこんなものではないのです。ここでその全てを紹介することはできませんが、もう一つだけ、その素晴らしい機能一端をもう少しだけ紹介したいと思います。
例えばこういう定義の変数があります。何の変哲もない、変数を初期化しているだけのコードです。
このうち、nameのメンバを表示させてみましょう。こんな感じです。
これはここまでに紹介した、コード補完の基本機能です。
勘のいい方だとこの時点ですでにお気づきかもしれませんが、はやる心を静めて、次を見てください。今度は、ageのメンバをサジェストさせてみます。
もうお気づきですね！そう、サジェストされてる内容がそれぞれで異なっています。JavaScriptは動的型付けの限度ですから、変数宣言時に型を宣言できません。代入されたものによって、動的に変数の型が決まります。そうです、こいつはコードを解析し変数に代入されているものから型を判断した上で、補完候補をサジェストしてくれるのです！なんというゆとり機能。
これをインテリジェントと呼ばずして、何をインテリジェントと呼ぶでしょうか。
ゆとり８：むしろ気味が悪いレベルのコード補完
そして、さらにこんなことも出来てしまいます。
配列を作って、0番目の要素に文字列、1番目の要素に数値を代入すると…。
0番目の要素
1番目の要素
この通り、配列の添え字まで動的に解釈して、要素ごとにちゃんと型を判断した上でインテリセンスが発動します。ここまで来るともはや、気持ち悪いという印象すら抱くかもしれません。
その環境、その名は…
途中（というか割と序盤）で気が付かれた方も多かったかもしれませんが、このゆとりJavaScript環境は、『Visual Studio 2012』のHTMLエディタ/JavaScriptエディタの機能です*5。
Visual Studioと言えば.NETやWindows用のアプリケーション専用の開発環境と思われる方もおられるかもしれません。しかし、そんなことは無いのです。
今ご覧になっていただいた通り、純粋なJavaScriptエディタとしてみても十分すぎる性能を持っています。むしろ、これより高機能なJavaScriptエディタのほうが世の中には少ないのではないかと思えるくらいです。もちろんJavaScriptだけでなく、HTML/CSS3のエディタとしてもコード補完やスニペットなどで十分な機能を持っています。
え？『でも、Visual Studioってお高いんでしょ？』ですって？
No, problem!
この機能は無償版のExpress Editionでも普通に使えます。もちろん商用開発でもOKです。
無償版の「Visual Studio Express 2012 for Web」はこちらから入手できますので、ぜひ、一度試してみてください。
http://www.microsoft.com/visualstudio/jpn#products/visual-studio-express-for-web
まとめ
…さて、いかがだったでしょうか。Visual StudioのJavaScriptエディタの機能、結構パワフルじゃないでしょうか。
ネタっぽく書いてみましたが、ご紹介した機能はネタではなく、すべて本当にVisual StudioのJavaScriptエディタが備えている機能です。これが無償で使えるって、結構すごくないでしょうか。
なお、有償版のVisual Studio 2012をお持ちの方は、有償版でのみ使える拡張機能の「Web Essentials」を導入すると、さらにいくつか機能が追加されるほか、LESSやCoffeeScriptの入力支援やコンパイラなんかが入ってたりしまのでそちらも是非、チェックしてみてください。
余談
なお、他に同等な機能を持った製品として、JetBrainsのWebStromがあります。
こちらも相当に優秀なJavaScript開発環境で、実は私も使っています。優秀なコード補完を持っていますし、JSDoc形式でドキュメントコメントも書けます。代入式から変数の型を推測してサジェストを絞る機能もあります*6。ただ私、あまりWebStromの詳細な機能をVisual Studioほど知らないので、だれかWebStromの機能を解説してくれる記事とか書いてくれると嬉しいなー、なんて思ったり…。
そして最後に
最後になりましたが、ゆとりさん、転職おめでとうございます。新天地でも頑張ってください！
