ツールから入る、モダンな.NET業務系HTML5／JavaScript開発：連載：業開中心会議議事録（1/2 ページ）

マイクロソフト技術がオープンソースで提供されたり、Web標準技術がツールに搭載されたりするなど、Visual Studioユーザーの状況は変わりつつある。今後、.NETとHTML5のどちらを選択すべきかを議論した。

» 2014年07月30日 17時05分公開

　2014年7月12日（土曜日）、＠IT／業務アプリInsiderコーナー主催のオフラインセミナー「第6回ツールから入る、モダンな.NET業務系HTML5／JavaScript開発」（スポンサー：グレープシティ、会場提供：日本マイクロソフト）が開催された。

会場の様子

　今回の会議は、HTML5開発環境としてのVisual Studio（以下、VS）にフォーカスを当てたものとなった。VSでのWebアプリ開発におけるHTML5／JavaScriptの位置付けの変遷、Webアプリ開発ツールとしてのVS、VSでのマルチプラットフォームなアプリ開発、.NETとHTML5のいずれを選択すべきかなど、話題は多岐に及ぶものとなった。

基調講演『ASP.NETとNuGetでもう一回始める、今どきのWebアプリ開発』
技術セッション『Visual Studio 2013とHTML5で実現するマルチデバイス／マルチプラットフォームアプリの開発』
パネルディスカッション『これからVisual Studioエンジニアは、.NETとHTML5、どちらに賭けるべきなのか？』

　基調講演と技術セッション、パネルディスカッションについてはUstream中継で配信されたアーカイブ動画を視聴・閲覧できるようになっている。また、Twitter上でツイートされたコメントは「Togetter」にまとめられている。興味のある方や、当日参加された方で内容を振り返りたい方は参考にしてほしい。

基調講演『ASP.NETとNuGetでもう一回始める、今どきのWebアプリ開発』

　セミナーは、ソーシャルグリッド株式会社の「芝村達郎」氏による基調講演で始まった。

　芝村氏は手始めにMicrosoft MVPとして「マイクロソフトに近いところにいるからこそマイクロソフトの悪いところが見える」「マイクロソフトに対しては厳しい発言が出るので、生暖かく見守ってほしい」と述べて会場を暖めた。その後、ASP.NETの古いイメージと最近のASP.NETとの比較から基調講演はスタートした。

　基調講演のテーマは大きく分けて2つ。1つはASP.NETを使用したWebアプリ開発の在り方の変遷。もう1つはHTML5開発ツールとしてのVSと、Webアプリ開発を楽しく簡単に行えるようにする便利なツールの紹介だ。

　前者については「クライアントサイドではマイクロソフトは周回遅れ」「ASP.NET AJAXでのマイクロソフトの迷走っぷり」など、冒頭に述べた通り、マイクロソフトに（愛のある）厳しい発言を交えながら、ASP.NETでのWebアプリ開発が以前と今でどう変わったかをまとめてくれた。

　以前のASP.NETでは、Visual Basicでの業務アプリ開発と同様に、Webフォームを使用してサーバーコントロールをドラッグ＆ドロップすることでアプリ開発を行えるのが一番の特徴だった。そして、この時代には開発者がHTMLやJavaScriptのコードを書くことはなかった（こうした時代に「JavaScriptは書かなくてよい」というメッセージを携えて登場したのがASP.NET AJAXだ）。

　これに対して、最近のASP.NETでは、ASP.NET MVC／Web APIが使われるようになり、クライアントに表示されるビューはHTML5／JavaScript／CSSで組み上げ、そこではjQueryをはじめとするオープンソースなライブラリを使うのが当たり前となってきているとのことだ。

　モダンなアプリを開発するために開発者がクライアントサイドでHTML5／JavaScriptを記述するのはBtoCの世界ではすでに一般的なことで、iOSデバイス／Androidデバイスの隆盛もあり、この流れは業務アプリにも及ぶだろうと芝村氏は予測。そのため、今からこれらの技術を学んでおくことが重要になるとのことだ。もちろん、VSでのこれらの技術への対応も進んでいる（プロジェクト作成時にjQueryが追加される／IntelliSenseでの各種JavaScriptライブラリのサポート／NuGetで多数のJavaScriptライブラリをホストなど）。

　そして、2つ目のテーマでもあるHTML5／JavaScript開発ツールとしてのVSに話は進んだ。そこではまず「VSはマイクロソフト言語専用ツール」「有料なので使う気がしない」といった誤解があることに言及し、「VSはHTML5／JavaScript／CSSエディターとしての完成度も高いし、IntelliSenseも賢く動作する」「VS Express 2013 for Webなら無償でWebアプリ開発にも使える」と強調。さらに、「VSがJavaScriptに最適」な理由として「ASP.NET and Web Tools」があること、VSではマイクロソフトの技術も他の技術も公平にサポートされていることが述べられた。また、NuGetを使えば大半のJavaScriptライブラリもインストールできることなど、近年のVSでのJavaScriptサポートの手厚さを紹介した。

　このようにVSは単体でも便利だが、拡張機能を追加することでさらに使い勝手を高められる。そこで「これだけは絶対に入れとけリスト」として、VS 2013の最新Updateに加えて、以下のものをオススメしてくれた。

　SideWaffleをインストールすることで、VSのプロジェクトテンプレート／項目テンプレート／コードスニペットが「多すぎて訳が分からないレベル」にまで拡張される。詳細についてはSideWaffleのWebサイトを参照されたい。

　Web Essential 2013はVS 2013のエディター機能強化、コードのMinify（軽量化）、LESS（Linear CSS）／Sass（これらはCSSを拡張する動的なスタイルシート言語だ）のコンパイル、ソースマップ（Source Maps）の自動生成など、Webアプリ開発に関連する広範な機能を追加してくれるものだ。詳細はWeb EssentialのWebサイトを参照されたい。

　これらに加えて有償ではあるがReSharperも強力に推奨された。もちろん、ReSharperはJavaScript開発時にも非常に役立つ。これら3つのツールについてはデモも行われ、「これは入れないと！」と多くの参加者は思ったのではなかろうか。

　最後に、「VSは最強レベルに便利なのでもっと頼ろう」「拡張機能を入れればさらに最強になる」んだから「ゆとりでもいいじゃないか」とまとめた。マイクロソフトに対する厳しい言葉から始まったものの最後は「VSにどんどん頼ろう」と若干のツンデレ風味を残して基調講演は楽しく終了した。

　基調講演の詳細については、以下の資料と動画を参照されたい。

基調講演のプレゼンテーション資料

基調講演のUstream中継のアーカイブ（開会宣言は00:02:38（2分38秒）から。基調講演は00:04:25（4分25秒）～00:55:35（55分35秒）まで）

技術セッション『Visual Studio 2013とHTML5で実現するマルチデバイス／マルチプラットフォームアプリの開発』

　続く技術セッションでは日本マイクロソフト株式会社の「物江修」氏によりVS 2013 Update 2でのHTML5アプリ開発について解説が行われた。

　物江氏はまずアプリ開発基盤として見たときのHTML5の概要をまとめ、HTML5を使うことでクロスブラウザー／クロスデバイス／クロスプラットフォームなアプリ開発を行えることを指摘。

　その上で、VS 2013で開発できるHTML5アプリにどんなものがあるかを説明。VS 2013ではWebアプリとWindowsストアアプリ（以下、ストアアプリ）が開発可能だったが、Update 2ではWindows Phoneアプリ（以下、Phoneアプリ）およびXboxアプリも開発可能となった。また、Update 2でユニバーサルアプリと呼ばれる概念が導入されたことでストアアプリとPhoneアプリの開発でコードの共有化を図れる。さらにMulti Device Hybrid apps for VSというプラグインを使うことでiOS／Androidデバイスアプリ開発も可能となる。VSを使えば、Web／ストア／Phone／iOS／Androidなどさまざまなデバイス／プラットフォームにまたがったアプリを開発できるのだ。

　その後、ストアアプリの構造、その開発に使用できるライブラリの概要、ユニバーサルアプリの概要について説明があった後、デモを中心に話は進んだ。最初のデモでは、Webアプリをストアアプリに、それをさらにユニバーサルアプリとするという、まさにマルチプラットフォームなアプリ開発という話題にふさわしいものとなった。

　デモではenchant.jsで作成した「宇宙侵略者ゲーム」なるWebアプリ（IE 11上で動作）の移植が行われた。といっても必要な作業は、ストアアプリプロジェクト（HTML5）を新規に作成し、そこに宇宙侵略者ゲームのソースをWindowsエクスプローラーからドロップし、必要な修正を何カ所かに加えるだけという非常にシンプルなものだった（もちろん、これはデモの話ではある）。

　ストアアプリのPhoneアプリ化では、ストアアプリにユニバーサルプロジェクトとなるようにPhoneアプリプロジェクトを追加する（通常はユニバーサルアプリプロジェクトを新規に作成すればよい）。そして、ストアアプリとPhoneアプリで共通のコードを「共有プロジェクト」に移動して、後はプラットフォームごとの差異を吸収するように細かな修正作業を行うだけだ（この辺の詳細な手順や差異に興味のある方は以下のUstream中継のアーカイブを参照されたい）。さらにRSSリーダーを例にストアアプリをWebアプリ化する、上とは逆方向のデモも行われた。

　次に、VS 2013 Update 2に対するアドインである「Multi device hybrid apps for Visual Studio」の説明が行われた。これはVS上でHTML5／JavaScript*1を使用してiOS／Androidデバイス向けのアプリ開発を行うために使える*2。

*1　実際にはTypeScriptでの開発も可能とのことだ。

*2　Pro以上のエディションが必要。

　Apache Cordovaの概要とCordovaアプリの構造について説明があった後、先ほどの宇宙侵略者ゲームを、iOS／Android用のアプリとするデモが行われた。さらにデモの最後には、必要なマニフェストファイルとアイコンを追加し、宇宙侵略者ゲームをChrome／Firefox OS用のアプリとするなど、Visual Studio 2013とHTML5はクロスプラットフォームなアプリの開発を実現する非常に強力な組み合わせであることがよく分かるデモとなった。

　セッションの最後には「VS 2013 Update 2でHTML5を使用することでマルチデバイス／クロスプラットフォーム開発が行える」「VSには時代のトレンドに合わせた機能が逐次的に追加されていく」「それはVSの開発者への愛である」「だから開発者にはHTML5開発でVSを活用してほしい」としてセッションは終了した。基調講演はVSによるHTML5開発の概要をまとめたものだったが、技術セッションはその実際的なところを紹介する相互補完的なよいセッションとなった。なお、技術セッションの詳細については、以下に示すセッション資料やセッション動画を参照していただきたい。