[[PageOutline]]
= Visual Studio Express 2013 for Web を使った Web 開発チュートリアル =

== はじめに ==

このページは、 Microsoft Visual Studio Express 2013 for Web を使って Web 開発を行うまでの、ごく初歩的な内容を扱ったチュートリアルとなります。本ツールを初めて利用する初学者の学習に、ぜひお役立てください。

なお、 Visual Studio を用いた Web 開発では、さまざまな技術的選択肢が用意されておりますが、本記事では主に以下の技術を選択したものとして解説しています。何卒ご了承下さい。

 * サーバーサイド Web アプリケーション言語: C#
 * DBMS: Microsoft SQL Server
   * DBMS への接続方法: LINQ to Entity Data Model
 * フレームワーク: ASP.NET MVC5
   * ビューエンジン: Razor
 * クライアントスクリプト: !JavaScript with JQuery

== セットアップ ==

まず、 2012 以降の Visual Studio は全てのバージョンで Windows Vista/7 以降のバージョンを求められます。 XP 以前の方は… 諦めるか、会社の偉い人に訴えて新しい PC を調達してもらうかして下さい。

[http://www.visualstudio.com/ja-jp/downloads/download-visual-studio-vs.aspx Visual Studio のダウンロードサイト]にて、「Visual Studio Express 2013 with Update 3 for Web」を選択し、日本語を選択して「今すぐインストール」からインストーラをダウンロードし、インストールを実行してください。

インストール、および実行には、 Microsoft アカウントでの認証が必要になる場合があります。アカウントを取った覚えがない方 (初めての方はないと思います…) は、アカウントを取得してください (無料ですが、メールアドレスが必要になります)。

=== 事前にやっておくべきこと ===

Windows での開発全般に言えることですが、隠しファイルが非表示だったり、登録されている拡張子を表示しない設定だったりすると、色々と不便です。フォルダオプションで設定を直しておきましょう。 Vista/7 以降の Windows の場合、コントロールパネル→デスクトップのカスタマイズ→フォルダオプションから設定できるはずです。

Visual Studio Express 2013 for Web (以下、 Visual Studio と表記) を初めて起動したら、まずはじめに、メニューの「ツール」→「設定」→「上級者用の設定」を選択しましょう。こうすることで、このバージョンの Visual Studio にて提供されているすべての機能にアクセスできるよう、メニューやツールバーの配置などが変更されます。

[[Image(fig-senior-setting.PNG, 640px, align=center)]]

最近の Visual Studio では、デバッグ時に使用する Web ブラウザを、主要なものから選択して起動することができるようになっています。 IE だけとは言わず、この際、ぜひさまざまなブラウザをインストールしてみてください。

 * [http://www.mozilla.org/ja/firefox/new/ Mozilla Firefox]
 * [https://www.google.co.jp/chrome/browser/index.html Google Chrome]
 * [https://www.apple.com/jp/safari/ Apple Safari]
 * [http://www.opera.com/ja Opera]

== プロジェクト新規作成 ==

では早速、なにか作ってみることにしましょう。この手のツールは最初に作り始めるまでがとにかく長いですが、まぁ、気長に…。

Visual Studio を起動しましょう (まずはこれがそもそも時間がかかる場合があります… メニューが操作できなくても慌てず、気長に)。起動したら、メニューの「ファイル」→「新しいプロジェクト…」を選択します。

[[Image(fig-new-project-01.PNG, 640px, align=center)]]

「新しいプロジェクト」ダイアログが開きます。画面左、インストール済みテンプレートのツリーから、「Visual C#」→「Web」を選択し、表示される項目の「ASP.NET Web アプリケーション」を選択しましょう。

名前は、そうですね… 初めてですし、「!HelloWorld」とでもしておきましょうか。ソリューション名もおなじになるはずです。

場所は、あなたが覚えて置ける場所であれば、好きな場所で構いません。デフォルトではマイドキュメントの下のどこかになっているはずです。

「ソリューションのディレクトリを作成」はチェックを入れたほうがよいでしょう。「ソース管理に追加」は、とりあえずチェックを外しておいて下さい (あなたの仕事ではチェックを入れるように求められるかもしれませんが… とりあえずここでは不要です)。

以上を確認して「OK」ボタンを押しましょう。

[[Image(fig-new-project-02.PNG, 640px, align=center)]]

次の画面に進みます。ここではテンプレートの選択や、単体テストの設定、認証の設定などを行います。

まず、「テンプレートの選択」にて、「MVC」を選択します。 MVC とは、プログラムをモデル (Model)、ビュー (View)、コントローラ (Controller) の 3つに分離した構造のことをいいます。

ちなみに、「Web Forms」というのがありますが、古くから ASP.NET を使って Web アプリ開発を行っている技術者であればこちらのほうが馴染み深いでしょう。 Web 部品を WYSIWYG な専用エディタでペタペタ貼り付けて画面作りができるお手軽さは良いのですが、昨今トレンドな Web アプリの開発には向かない要因が色々とあって、 Visual Studio を使わない Web アプリ開発技術者の多くに敬遠される要因にもなっていました。

「テンプレートの選択」で「MVC」を選択すると、その下の「以下にフォルダーおよびコア参照を追加:」の 3つあるチェックボックスのうち、「MVC」にチェックが付いたまま外せない状態になります。その両脇の「Web Forms」、「Web API」も選択することができますが、今回は使用しませんので、チェックは外したままにしましょう。

その下、「単体テストの追加」にチェックを入れると、ビジネスロジックの単体テストを記述するためのプロジェクトをソリューションに追加することができます。これは実際の開発ではぜひ使用するべきですが、今回は扱わないのでチェックは外しておいて下さい。

右側に行きましょう。認証の方法として、「個人ユーザー アカウント」と表示されています。これは、いわゆる Form 認証 (認証を行う Web ページを用意し、 Web アプリ内で認証をチェックするごく普通のやり方) を最初から実装してくれるというものです。今回は簡単のため、認証は使いませんので、設定を変えましょう。「設定の変更」ボタンをクリックして下さい。

[[Image(fig-auth-setting.PNG, 640px, align=center)]]

「認証なし」を選択して「OK」ボタンをクリックします。ちなみに、「組織アカウント」は Active Directory を用いた認証方式、「Windows 認証」はいわゆる Windows 認証を使う方法です。

最後に、「クラウド内のホスト」チェックボックスを外します。 Microsoft が誇るホスティングサービス Windows Azure を使用するための設定項目なのですが、実際使うとしても配置の際に設定可能ですし、認証情報を入力しろと要求されて鬱陶しいだけです。

設定内容を確認して「OK」ボタンをクリックすると、プロジェクトのテンプレートが作成され、開発を開始できる状態になります。

== Hello, World ==

それでは早速動かしてみましょう。デバッグ実行でもいいのですが、メニューの「デバッグ」→「デバッグなしで実行」 (または Ctrl + F5 ショートカットキー) を選択すると、ビルドが実行され、ブラウザが起動し、ここまでで作成したテンプレートだけのウェブサイトの内容が表示されます。

[[Image(fig-execute.PNG, align=center)]]

[[Image(fig-default-index.PNG, 640px, align=center)]]

ブラウザを選んで実行することもできます。ツールバーにブラウザ名 (最初はおそらく「Internet Explorer」となっているでしょう) が表示されている箇所がありますよね? その右端の小さい「▼」印をクリックすると、ブラウザの選択肢がドロップされます。

[[Image(fig-select-browser.PNG, align=center)]]

=== 共通レイアウト ===

ブラウザを見てみましょう。 ASP.NET について色々と書かれたページが表示されています。ページの最上部に「アプリケーション名」、「ホーム」、「詳細」、「連絡先」と書かれたリンクボタンがあります。「アプリケーション」と「ホーム」は今表示しているページヘのリンクですが、のこり 2つは別のページヘのリンクです。それぞれクリックしてみましょう。「詳細」からは About ページに、「連絡先」からは「Contact.」ページに遷移します。

{{{#!html
<p>これら 3つのページで見た目が共通している部分があるのがわかるでしょうか? そう、ページ最上部のリンクボタンが並んでいる黒い部分と、ページ末尾の「&copy;2014」から始まる表示の部分です。これらは基本的にはサイト全体で共通するレイアウトとして使われている部分です。</p>
}}}

Visual Studio を見てみましょう。ソリューションエクスプローラーのツリーが表示されていますね。 Web ブラウザー上での見た目の部分を定義しているファイルは、この中の「Views」フォルダーの中に収められています。その中の、「Shared」フォルダーを展開すると、中に「_Layout.cshtml」というファイルがあるので、ダブルクリックして開いてみましょう。このファイルが、共通レイアウトファイルで、この中のとある箇所に、そのページで実際に表示したい内容が挿入されたものが、 Web ブラウザーに送られて表示されるようになっています。

=== ページを追加する ===

とりあえず共通レイアウトはそのまま放っておいて、まずは「Hello, World」を表示するためのページをこのサイトに追加してみましょう。それには以下の 2つの操作が必要です。

 1. ビューのファイルを追加する
 1. 該当するコントローラメソッドを追加する

==== ビューの追加 ====

まず、ビューのファイルを追加します。ソリューションエクスプローラーにて、ツリーの「View」→「Home」フォルダを右クリックしてみてください。

[[Image(fig-append-view-01.PNG, 640px, align=center)]]

コンテキストメニューにて、「追加」→「ビュー」を選択します。

[[Image(fig-append-view-02.PNG, align=center)]]

ビュー名は「Hello」とでもしておきましょう。

テンプレートは「Empty (モデルなし)」のままで ok です。

オプションの「部分ビューとして作成」はチェックを外しておきます。このオプションは、このビューを他のビューの一部分として使用する場合に使用します。単独のページとして使用する場合はチェックを入れません。

「レイアウトページの使用」は、まさに先ほど紹介した「_Layout.cshtml」を使用するかどうかということです。これはチェックを入れておきます。その下の空欄はレイアウトページに使用するファイルを指定するものですが、そのさらに下にある但し書きの条件にまさに合致するケースになりますので、ここは空欄にしておきます。

「追加」ボタンを押すと、 !View/Home フォルダの下に、 Hello.cshtml というファイルが追加され、そのファイルがエディタで開いた状態になります。コードは以下の様な内容になっているはずです。

{{{#!text/html
@{
    ViewBag.Title = "Hello";
}

<h2>Hello</h2>
}}}

`@{` ～ `}` の中には、サーバーサイドで実行する C# のコードを書きます。ここでは、変数 `ViewBag` が持つオブジェクトの `Title` フィールドに、文字列 `"Hello"` を代入しています。実はこの `ViewBag.Title` は、先に見た共通レイアウトファイル「_Layout.cshtml」の中で参照していて、そのままページのタイトルとして使用されています。

つまり、この部分を、

{{{#!text/html
@{
    ViewBag.Title = "Hello, World";
}
}}}

に置き換えてしまえば、そのままページのタイトルも「Hello, World」に置き換わるというわけです。

そのあとの HTML っぽく書かれた行は、まさにこのページに出力する HTML そのものです。なのでここも、

{{{#!text/html
<h2>Hello, World</h2>
}}}

としてしまえば、ページにもそのまま「Hello, World」が表示される、ということになります。

==== コントローラメソッドの追加 ====

次の段階に進みましょう。ページを追加する際、そのページに相当するビューを追加したら、そのビューに対応するコントローラメソッドを追加して上げる必要があります。コントローラは何をするところかというと、ページに表示すべき情報をビューが扱いやすいように直したり、ユーザー操作によって追加または変化する情報 (フォーム入力とかクッキーとか) に応じて何らかの処理を行ったり、といったようなことを行います。

今回、ビューは Home フォルダの下に Hello という名前で追加したので、対応するコントローラメソッドは `HomeController` クラスの `Hello` メソッドということになります。まず、 `HomeController` クラスが書かれたファイルを開きましょう。ソリューションエクスプローラーのツリーにて、「Controllers」フォルダを展開すると、 !HomeController.cs ファイルが存在するので、このファイルをダブルクリックしてエディターにて開きます。

[[Image(fig-home-controller.PNG, align=center)]]

ファイルの内容は以下のようになっているはずです。

{{{#!cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace HelloWorld.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}
}}}

純然たる C# プログラムです。 C# 自体の経験がない方のために解説すると、最初の "using" で始まる行は、ライブラリを使用しやすくするために名前空間を展開する宣言です。例えば、ここに

{{{#!cs
using System.Text;
}}}

という行を加えると (今回は加えなくてもいいですよ)、文字列を少しずつ繋いで生成していくためのライブラリクラス [http://msdn.microsoft.com/ja-jp/library/system.text.stringbuilder%28v=vs.110%29.aspx `System.Text.StringBuilder`] を、単に `StringBuilder` と書くだけで使用できるようになります。

次に `namespace` で始まる行は、こういう名前の名前空間を作るよ、という宣言です。つまり、この後定義されている `HomeController` クラスの本当の名前は、ここで宣言した名前空間の名前を手前につないだ `HelloWorld.Controllers.HomeController` ですよ、ということになるわけです。

名前空間という言葉がここまでに何回か出てきましたが、この概念の存在意義については自分で調べてみましょう。大雑把に言ってしまえば、要するに名前の衝突を防ぐための仕組みであるということになります。

`public class` で始まる行が、ここで作ろうとしているクラスの宣言です。 `HomeController` がこのクラスの名前で、コロン `:` を挟んで後ろにある `Controller` というのは、このクラスが継承する基底クラスになります。これはつまり、 `HomeController` クラスは、 `Controller` クラスが持つ機能をそのまま継承して実装されるよ、というような意味合いになります[[FootNote(この `Controller` というクラスがどんな機能を提供してくれているのかについては、 MSDN Library では[http://msdn.microsoft.com/ja-jp/library/system.web.mvc.controller%28v=vs.118%29.aspx この辺]に記述されています。)]]。

`public ActionResult` で始まる行は、このクラスに所属するメソッドです。 ASP.NET MVC のコントローラクラスでは、この中に実装されるメソッドが、ユーザーが Web サイトにアクセスした際に実際に呼ばれる処理そのものとなります。とりあえず、先ほど追加した Hello ビューに対応するコントローラメソッドを追加したいので、ここにある `Index` メソッドの実装を参考に、以下のように `Hello` メソッドを追加してみてください。

{{{#!cs
        // これの真似をして
        public ActionResult Index()
        {
            return View();
        }

        // こんなふうに書く
        public ActionResult Hello()
        {
            return View();
        }
}}}

[[FootNote]]

==== 動かしてみる ====

とりあえずここまでで準備は完了です。それでは、エディタのタブを切り替えて、ビューのファイル Hello.cshtml を表示した状態にした上で、 Ctrl + F5 キーを押して実行してみましょう。ビルドが実行され、下の図のような画面がブラウザ上で表示されたならば、成功です。

[[Image(fig-hello-page-01.PNG, 640px, align=center)]]

==== 失敗する場合 ====

うまく行きませんか? どんな症状になるでしょう?

 * ビルドに失敗する場合

実行しようとしたら以下の様なダイアログが表示されましたか?

[[Image(fig-build-error.PNG, align=center)]]

だとすれば、コントローラメソッドの記述で文法上のエラーなどが発生している可能性が高いです。「いいえ」をクリックしてダイアログを閉じ、 !HomeController.cs ファイルを開いてエラーのある箇所を修正しましょう。

Visual Studio の画面下にエラー一覧があり、そこにエラーの内容がリストアップされているかもしれません。

[[Image(fig-error-list.PNG, 640px, align=center)]]

隠れていて表示されていない場合は、上図で赤い丸で囲った辺りをクリックしてみてください。

もし、エラーが有るなら、そのエラーの内容をダブルクリックしてみましょう。実際にエラーになっている箇所にカーソルが移動するはずです。エラーの文面をヒントに、修正を試みてください。

 * サーバーエラーが発生した場合

ビルドは通ってブラウザは起動したけど、 Hello, World とは表示されず、代わりに下図のようなエラー画面が表示されてしまった。

[[Image(fig-404.PNG, 640px, align=center)]]

…のであれば、これはビューの名前とコントローラメソッドの名前が一致していないのが原因です。

ASP.NET MVC では、指定された URL の名前に相当する名前のビューとコントローラが選択されることになっています。ブラウザの URL 欄に表示されている URL を確認してみましょう。以下の様な URL になっているはずです。

{{{
http://localhost:(ポート番号)/Home/Hello
}}}

ここで、 Web サーバーのルートから見て、参照しようとしているリソースのパスは「!Home/Hello」となりますよね? このとき、 Web サーバーが呼びだそうとするビューファイルとコントローラメソッドの名前は、以下の通りとなるのです。

 * ビューファイル: (ビューのルートディレクトリ)\__Home__\__Hello__.cshtml
   * Visual Basic プロジェクトの場合、拡張子は .vbhtml
 * コントローラメソッド: __`Home`__`Controller` クラスの __`Hello`__ メソッド (__`Home`__`Controller.`__`Hello`__)

もし、このどちらかが存在しない場合、実行時にサーバー内にてエラーが発生し、そのエラーの内容がブラウザに伝えられます。特に、上図で示したような「リソースが見つかりませんでした」というエラーは、コントローラメソッドが存在しない (つまり、名前が間違っている) 場合に発生します (コントローラメソッドは見つけたけどビューファイルが見つからない場合には、もうちょっと違う内容のサーバーエラーになります)。 !HomeController.cs ファイルを開き、追加したメソッドの名前を確認し、修正しましょう。

=== 追加したページヘのリンクを張る ===

さて、色々と試行錯誤していると気づいてしまっているかもしれませんが、 Visual Studio のエディタで Hello.cshtml ファイルを開いている時に Ctrl + F5 キーを押した場合は Hello, World のページが表示されますが、例えば !HomeController.cs ファイルを開いている時に Ctrl + F5 キーを押した場合、一番最初に実行した時のあのホーム画面

[[Image(fig-default-index.PNG, 640px, align=center)]]

が表示されてしまいますよね。

Hello, World のページを表示してみたいのに、実行するたびにいちいち Visual Studio のエディタで Hello.cshtml ファイルを表示させてから Ctrl + F5 とか、なんだか面倒くさいですよね。どのみちこのサイトにアクセスした人が Hello, World ページを閲覧するために URL を教えてもらって直打ち…というわけにも行かないでしょうから、ページのどこかにリンクボタンを置いて、 Hello, World ページヘのリンクを張ってあげる必要があります。

HTML では、リンクボタンは `<a>` タグで設置できますよね。 ASP.NET MVC でも、この `<a>` タグを使って任意のページヘのリンクを設置することができます。 Hello, World のページの (ホスト名を含まない) URL は `/Home/Hello` ですから、どこかのビュー (Home\Index.cshtml など) に、以下の行を書き加えてあげれば、それが Hello, World ページヘのリンクボタンになるはずです。

{{{#!text/html
<p>
    <a href="/Home/Hello">Hello, World のページヘ</a>
</p>
}}}

実際これでもいいのですが…、実は ASP.NET MVC 的にはもっと推奨された書き方が用意されています。ブラウザへの出力結果は上記と同じになりますが、以下のように記述します。

{{{#!text/html
<p>
    @Html.ActionLink("Hello, World のページヘ", "Hello", "Home")
</p>
}}}

3つ目の引数 `"Home"` は、同じ Home ディレクトリ内のビューファイルにて記述するのであれば、省略することも可能です。

順を追って解説しましょう…。まず、 `@` で始まる記述箇所は、 C# のコードを記述することを表すものです。 `Html` はここで使えるオブジェクトの名前で、 HTML 関連の処理を行うメソッドが色々と用意されているというものです。このオブジェクトの `ActionLink` メソッドを呼び、その結果をこの位置に出力する、という意味になります。

`ActionLink` メソッドの公式の MSDN Library ドキュメントは[http://msdn.microsoft.com/ja-jp/library/system.web.mvc.html.linkextensions.actionlink(v=vs.118).aspx ここにあります]。実はもっといろんな引数の指定方法があるのですが (同じ名前の関数に複数の引数指定のバリエーションを持たせることを関数の'''オーバーロード'''と言います)、とりあえず、

 * 1つ目の引数に、リンクボタンとして表示する文字列を指定する。
 * 2つ目の引数と 3つ目の引数で、リンク先の URL が決定する。
   * 同じディレクトリにあるページヘリンクを張る場合、 3つ目の引数は省略可能。

なお、この時指定する 2つ目の引数と 3つ目の引数は、それぞれ'''アクション名'''と'''コントローラ名'''と呼ばれています。実際の URL も、

{{{
http://ホスト名/コントローラ名/アクション名
}}}

と考えることができます。

説明が長くなってしまいました。それでは実際にリンクを張ってみましょう。まず、ビューファイル View\Home\Index.cshtml を開きます。

[[Image(fig-viewfile-home-index.PNG, align=center)]]

…なんだか色々と書かれていますが、別にいらない情報でしょうから、 HTML で書かれている部分は全部消してしまいましょう。ファイルの内容を以下のように書き換えてしまってください。

{{{#!text/html
@{
    ViewBag.Title = "Home Page";
}

<p>
    @Html.ActionLink("Hello, World のページヘ", "Hello", "Home")
</p>
}}}

ここまで書いたら、 Ctrl + F5 を押して実行してみましょう。下図のような画面が表示されましたか?

[[Image(fig-index-with-linkbutton.PNG, 640px, align=center)]]

「Hello, World のページヘ」と書かれたリンクボタンをクリックしてみてください。これで、 Hello, World のページヘ遷移できたならば、成功です。