「VisualStudio 2008」のWeb制作向け機能を試す(後編)

マイクロソフトが、マイコミジャーナル及び、雑誌「Web Designing」と共同で開催した「WebsiteSpark マイクロソフト×マイコミ 共同セミナー」。本レポートでは、セミナーで行われたデモをもとに、「VisualStudio 2008」のWeb制作向け機能およびASP.NETのフレームワークの違いを紹介していく。前編に続き、後編では、ASP.NET MVCの実装スタイルなどについて説明していこう。

ASP.NET MVCの実装スタイル

ASP.NET MVCは、2009年4月にバージョン1.0が発表された比較的新しいフレームワークだ。ASP.NETは独特の文化が存在しており、馴染めない人もいたと思う。ASP.NET MVCは、MVC型のフレームワークであり、モデル(データの管理を主に担当する)、ビュー(出力部分を担当する)、コントローラ(ユーザーからの入出力とビューとモデルの橋渡しなどを担当)と処理を大きく3つに分けて記述する。Ruby on Railsに代表される近年流行のフレームワークのスタイルといえる。MVC型のフレームワークは言語に関する設計ではなく、アプリケーションの設計スタイルであるため、必然的に言語に依存しにくい設計となる。そのため、他のMVC型フレームワークを使ったことがある人であれば、大枠のアプリケーションの構造を把握しやすいというメリットがある。特徴としては、多くのMVC型フレームワークは、アプリケーションの雛形を自動生成してくれたり、データベースとアプリケーション内のオブジェクトを結び付けてくれるO/Rマッピングという機能や、従来型のクエリー型のURL表示ではなくスラッシュによる区切りを使った見やすいURL出力などがある。

ASP.NET MVCフレームワークをVisualStudio 2008で使用するには、SP1以降にアップデートした上で、ASP.NET MVCの追加インストールを行う必要がある。ダウンロードは、ASP.NET MVC 1.0のダウンロードセンターにてAspNetMVC1.msi(1.8MB)をダウンロードし、インストールを行う。

新規にプロジェクトを作成するとASP.NET MVC Webアプリケーションというテンプレートが表示されるので、選択し、作成しよう。次に、ユニットテスト用のファイルも作成してくれるというダイアログが表示される。テスト用のファイルを自動生成してくれるあたりも、いかにもMVCフレームワークらしい。

プロジェクトが作成されたらすぐ、[CTRL]+[F5]キーを押して実行させてみよう。既にそれらしいサイトが出来上がっているのがわかるはずだ。HomeというタブとAboutというタブが見える。

まずは、コントローラー部分のソースを見てみよう。 コントローラーは、[ソリューションエクスプローラー]パネルから「Controllers」フォルダを開くと格納されている。この中の「HomeController」をダブルクリックをして表示させてみよう。

中をみると、ふたつのメソッドがあるのがわかるだろう。IndexとAboutだ。勘のいい方ならお気づきと思うが、IndexはHomeタブの内容に対応し、AboutはAboutタブの内容に相当するのである。例えばIndexメソッド内の「ViewData["Message"] = "Welcome to ASP.NET MVC!";」を「ViewData["Message"] = "Hello World!";」に書き換えてみよう。[CTRL]+[F5]キーを押して実行するとトップページが書き換わったのがわかるはずだ。

ソース抜粋

namespace mycom_mvc_01.Controllers
{
[HandleError]
public class HomeController : Controller
{
public ActionResult Index()
{
ViewData["Message"] = "Hello World!";

return View();
}

public ActionResult About()
{
return View();
}
}
}

さて、コンテンツのコントローラ部分は理解できたとして、それを表示する部分はどこにあるだろうか?　これも何らかのMVCフレームワークを触ったことがあればお気づきかもしれないが、Viewsフォルダ内に格納されている。HomeControllerのAboutメソッドに対応するビューは、Viewsフォルダ内のHomeフォルダに入っているAbout.aspxとなる。About.aspxを開いてみよう。

ソース抜粋

<asp:Content ID="aboutTitle" ContentPlaceHolderID="TitleContent" runat="server">

About Us
</asp:Content>

<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
<h2> About</h2>
<p>
Put content here.
</p>
</asp:Content>

このシンプルなソースを見れば、どこを変えれば表示が変わるか、もう説明しなくてもわかるのではないだろうか。IDがaboutTitle内を編集すればタイトルが、aboutContent内を編集すればページの内容が変わる。ためしにPタグの内容を「Hello World2!!」に変更して実行してみよう。

このようにビューのテンプレートは非常にシンプルで、直感的だ。このAboutのページは、動的に生成されているにもかかわらず、「http://localhost:59088/Home/About」のようにクリーンなURLとなっている点にも注目である。MVCフレームワークは、これら以外にもユーザーからの入力にかかわる様々なセキュリティ対策やデータベースとの接続のしやすさ、分担作業のしやすさなどが魅力的な上に、作成したアプリケーションが一定の構造で設計されているために、第三者にも比較的把握しやすくなる。これを機にVisualStudio 2008 + ASP.NET MVCをチャレンジしてみてはいかがだろうか。

なお、マイクロソフトではVisual Studio 2008を含む、Web開発/デザインツールを3年間無償提供するWeb開発会社支援プログラム「WebsiteSpark」を実施中。詳細は以下を参照すること。