2012年10月28日

Visual Studio 2012 便利機能

今回も知人より寄稿してもらいました。この場を借りて感謝します。
※ 前回の記事(Visual Studio 2012 Web機能)もよろしくどうぞ。

Visual Studio 2012
-- セミナーフィードバック その2 --



この夏〜秋のMicrosoftセミナーを梯子しました。
今回はその中でも特に、Visual Studio 2012の新機能で便利そうな印象を受けた機能を、備忘録としてまとめたいと思います。
※ 一部機能はVisual Studio 2010でも拡張機能をインストールすると利用できます。前回投稿した記事とあわせて、Visual Studio の拡張機能については、別の記事としてまとめる予定です。


ソリューションエクスプローラー



Visual Studioでファイルや関数などを探す時、「ctrl+shift+f」で検索し、検索結果に表示された一覧から、自分の探しているものを見つけていました。
「えいや!」の一発で見つかることもあれば、一通り確認しても目的のものが見つからなかった時もありました。
そんな時は、たくさん開いてしまったファイルタブのおかげで、当初開いていたファイルタブが深い所に埋もれてしまうこともしばしばありました。

そんな私に朗報が!
それがソリューションエクスプローラーの検索機能です。
検索した項目にヒットしたものだけでソリューションエクスプローラーが構成されます。
沢山のノードを開いて閉じてと探す手間がなくなりました。
しかもこの検索機能の便利なところは、ファイル(クラス)だけじゃなく、メンバー(関数や変数)まで検索できてしまうことです。
ソリューション検索

※ 少し難をいえば、上記の機能はWebサイトプロジェクトでは利用できません。(WebアプリケーションならばOK)コードメトリクスの機能もWebサイトでは利用できないなど、Webサイトの冷遇っぷりに、涙で袖を濡らしました。

そしてソリューションエクスプローラーの検索に抱き合わせで利用できる、Viewタブ。
検索にヒットしたファイルが、自分の探し求めているファイルか確認するために、ファイルの中身を参照する際、Viewタブで開けば新しいタブがどんどん増えてゆくということもありません。
Viewタブが一番右側に一つ設けられ、そのタブの中身が切り替わることで、ファイルの中身を確認できます。

無駄なタブを開かなくてもOKというのは、結構使い勝手が良いです。
それに関連して、地味に便利な機能として、画像ファイルのホバー表示があります。
画像ファイルの中身を確認するのに、わざわざファイルを開かなくても、画像ファイルにカーソルを当てれば、画像イメージが表示されるのです。
画像のホバー表示

検索機能の強化



ソリューションエクスプローラーもそうですが、Visual Studio 2012は全体的に検索機能が強化されています。
沢山存在しているツールボックスのコントロールも検索で見つけることができます。
ツールボックスの検索
※ 上記の画像のように、ドラッグドロップで追加したJavaScriptの「hoge」という関数(「全般」タグに属しています)も含めて検索することができます。

また、Visual Studio全体に対して、検索することも可能です。
設定を変更したいなど、日常的に利用しない機能は階層が深い所にあり、基本覚えていません。
探すのに時間がかかりますし、見つからない時にはWebで調べるなどVisual Studioを離れないといけません。
そんな作業ロスが少なくなりそうです。


Page Inspector



※ 前回に引き続き、Web系のお話になってしまうのですが。。
ASP.NETをやり始めて間もなかった時。初めて自分の作成したWebサイトのページのソースの表示をしたとき、そこで確認できるHTMLが、開発で作っていたaspxとずいぶん違っていたことにびっくりしました。

Page Inspectorを利用すれば、ブラウザにレンダリングされたUIとaspx上のサーバーコントロールを紐付けて確認することが可能です。
もちろん、UIとDOM要素の紐付け、各要素ごとのスタイルの把握も行えますが、これらの機能は、各ブラウザに搭載されている開発ツールでも利用可能な機能で、それほど目新しさはありません。

以下には、個人的なPage Inspectorに対して抱いた所感をまとめたいと思います。

所感@
サーバーコントロールを含めて紐付けがおこなえることの意義が、あまり感じられませんでした。
ASP.NETの経験が浅かった頃、aspxがHTMLに展開された時には、ソースの表示で戸惑いもありましたが、現在は「大体こんな感じで紐づいているのかな」というのはわかります。
これはあくまで個人的な意見になります。
正直、ユーザーコントロールの中身まで検証してくれた時には、「おぉ!すばらしい!」と感動しました。
Page Inspector ユーザーコントロール
※ こちらの図では、テキストボックスとボタンのグループをユーザーコントロールとして作成しています。テキストボックスの要素を検証した際には、ユーザーコントロール内のテキストボックスがハイライトされています。

ASP.NETのWebフォームのサーバーコントロールがどのようなDOMになるのか、勉強する過程にこれらはとても有用な機能だと思います。
※ サーバーコントロールは、複数のDOMのまとまりをプログラマーが意識することなく、1つの抽象的なコントロールとして利用できるところがポイントだと、当初言われていたことを不意に思い出しました。
現在は(DOMを厳密に把握し、それを踏まえてスタイルしていくため)そんなことを言ってはいられないのでしょうね。

所感A
JavaScriptのデバッグが行えなかったことは少し残念でした。
JavaScriptはUIの形成に深く関わる部分になるため、Page Inspector(ページ検証)機能として、JavaScriptのデバッグは是非ほしいものだと思いました。

Visual Studio上でJavaScriptのデバッグは可能ですが、それはPage Inspectorとはまったく独立した機能として提供されています。
そしてデバッグの際にはブラウザとVisual Studioの行き来が発生してしまい、各ブラウザに付属の開発者ツールに比べて、画面の切り替えなどが少し煩雑である印象があります。
しかも、Visual Studio上でJavaScriptをデバッグ中は、IEの開発者ツールでJavaScriptのデバッグができなくなるため(Visual StudioのほうでJavaScriptデバッグプロセスにアタッチしてしまっているため)、IEの開発者ツールで、DOMの検証・スタイルの確認・JavaScriptのデバッグを一元的に行える状況を阻害します。
DOMの検証・スタイルの確認と紐付けて利用できないVisual StudioのJavaScriptのデバッグ機能をあえて利用するメリットは、特に思いつきません。

現在はブラウザの検証ツールには、もっぱらChromeの開発者ツールのお世話になっています。
Chromeはサーバーコントロールと紐付けて検証などできませんが、多くの便利機能を備えているため、作業効率化に寄与してくれています。
ただ、Visual Studio内で完結できるのならば、それに越したことはないと思っています。
このPage InspectorはVisual Studio 2012で初めて搭載された機能ですので、今後どのような成長を遂げるか、期待しています。
最終的には、IEの開発者ツールで行えるようなことが、Visual Studioに含められたら最高!って手前勝手ながら願っています。



posted by ぺるたご at 22:06| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。