Skip to content
Tags

,

HTML5開発に適したIDEを探す(その1)「Visual Studio」

by : 2015/02/02

コンパイルを伴うプログラミング言語を使った開発では一般的にIDEを使います。.NETであればVisual Studio、JavaであればNetBeansやEclipseなど、iOSであればXcodeを使います。対してWebフロントエンドの開発となると、テキストエディタがベースだという方も多いのではないでしょうか。

しかし最近のIDEは進化しており、Webフロントエンド開発にマッチした機能を搭載しはじめています。これらを知ることでより効率的な開発がのぞめるようになるでしょう。

ということで今回から主だったIDEについて、フロントエンド部分の開発(コード記述、デバッグやテストなど)の観点から、どのような機能が用意されているのかを調べていきたいと思います。初回となる今回はVisual Studioです。今回はVisual Studio Community 2013を使ってみます。

プロジェクトベースの生成

Visual Studioでは特にWebフロントエンド開発向けといったプロジェクトのベースはありません。テンプレートとして選択するのはASP.NET Web Applicationになるようです。タイプがVisual Basicですし、ちょっと分かりづらい印象もあります。


そしてさらにテンプレートを選択します。今回はEmptyを選択します。


ソリューションエクスプローラーでファイルを追加

起動しました。ここから開発を開始します。


今回はフロントエンドの開発だけになりますので、左側にあるObject Browserは使いません。代わりに右側にあるソリューションエクスプローラーを使います。

ソリューションエクスプローラーで右クリックすると、ファイルを追加するメニューが表示されます。ここでまずHTMLファイルを追加します。この他、JavaScriptやスタイルシートを追加することもできます。


HTMLファイルを追加するとベースとして以下のようなHTMLが書かれた状態になっています。


右下にあるプロパティを変更すると、それがメタタグ上に反映されます。


既存のファイルはエクスプローラーからVisual Studioのソリューションエクスプローラーへドラッグ&ドロップすれば追加できます。さらにソリューションエクスプローラーからHTMLのソースにドロップすると、scriptタグやlinkタグを使って自動的にファイルのリンクをしてくれます。これは以外と便利です。


ブレイクポイントはIEのみ

開発効率を上げてくれる存在としてはブレイクポイントが欠かせません。Visual Studioではおなじみの通り、クリック一つでブレイクポイントが差し込めます。


この状態で実行ボタンを押すと、Webブラウザが立ち上がります。例えばGoogle ChromeをデフォルトブラウザにしていれはVisual Studioの内部Webサーバを使って http://localhost:49503/が開きます。


ただし残念ながらGoogle Chromeの場合ブレイクポイントが有効になりませんでした。

ブラウザをIEに切り替えるとブレイクポイントがあるところで処理が止まります。


変数を確認することもできます。


全体の変数を確認することもできます。


Visual Studioのブレイクポイントは強力ですがIEに限定されます。Google Chromeを使っている場合は標準のDevToolsを使った方が良いでしょう。

スマートフォン、タブレットでの確認

Visual Studioからスマートフォン、タブレットのシミュレータを呼び出すことができます。ただしiPhone/iPadシミュレータは39.99ドルで販売されているのを使うように推奨されています。


AndroidはAndroid SDKを、それ以外にもBrowserStackを使うように推奨されています。その他ブラウザのウィンドウサイズを変更して実行するオプションもありますが、Google Chromeでは有効になりませんでした(IEは制御できます)。スマートフォンやタブレット開発を考えると若干その手の機能が物足りないかも知れません。

変数名の補完

IDEとして提供して欲しい機能に入力補完があります。HTMLの場合、タグ名や要素について補完してくれますし、JavaScriptのファイルパスについても階層構造を認識した上で補完してくれます。

変数についても同様で、候補がツールチップ表示されます。


外部から読み込んだライブラリに対しても入力補完が使えます。


テスト

JavaScriptがロジックを持ち、大型化していくとなるとテストフレームワークによる自動テストが欲しくなるでしょう。Visual Studioの場合、QUnitとJasmineをサポートしているようです。今回はJasmineを使ってみました。

ツールメニューにある拡張機能と更新プログラムでchutzpahと検索します。これはVisual Studio向けにJasmineを使いやすくしてくれる機能拡張になります。同じようにQUnitもインストールできるようです。インストールは簡単で、検索結果からダウンロードボタンを押した後、インストールを実行するだけです。この手の環境を整えるのは非常に手間がかかるのでこうやって簡単にインストールできるのはいいですね。


テストの書き方ですが、特にファイル名の既定などはないようです。JavaScriptなので関連するファイルを読み込まないとテストできませんので、その場合は

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

と書いて読み込むJavaScriptファイルを指定します。$(function() {...}) などとして変数がグローバルにアクセスできない場合もテストはできませんのでwindowオブジェクトに関連づける必要があります。

テストはソリューションエクスプローラーを右クリックして、Run JS Testsを選択します。


これでテストが実行され、その結果が左側に表示されます。


エラーがなくなると緑のアイコンになります。


さらにカバレッジもとれます。


JS Lint

同じく機能拡張の中にあるJS Lintをインストールします。これを使うことでコードのエラーチェックが自動的に、かつリアルタイムで行われるようになります。


今回はJavaScript Linterを使っています。この機能拡張をインストール&Visual Studioの再起動後から、JavaScriptのコード上の問題があるとエラー一覧に表示されるようになります。


なお何をもってエラーとするかはオプションで変更可能です。


定義ジャンプ

IDEでは大抵備えている関数やオブジェクトメソッドへの関数ジャンプですが、Visual Studioでは同じファイル内でのジャンプはサポートしています。同じプロジェクト内にファイルがある場合でも、別ファイルの場合は定義にジャンプすることはできませんでした。

Visual Studioならではの機能

Visual Studioはマイクロソフト製とあって、TypeScriptとの親和性が高いのが特徴です。今回は特に取り上げませんでしたが、Webアプリケーションを開発される際にTypeScriptを採用される場合にはIDEとしてVisual Studioを使うとより開発が効率化するのではないでしょうか。


Visual Studioは多機能で、普段の.NETアプリケーション開発はもちろんのことHTML5開発であっても十分にこなせる機能があります。ただし、実行・テストに使用するメインのサポートブラウザはIEになるため、ChromeやFirefoxなどを使いたい場合ブレークポイントなど連携機能が一部制限されてしまうのはとても残念です。

ただしTypeScriptであったり、テスト環境構築などの周辺技術まで含めるとテキストエディタを使った開発よりも十分に高速化されると思われます。ぜひお試しください!

Microsoft Visual Studio ホームページ – Visual Studio

From → HTML5

%d人のブロガーが「いいね」をつけました。