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 を調達してもらうかして下さい。

​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 にて提供されているすべての機能にアクセスできるよう、メニューやツールバーの配置などが変更されます。

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

• ​Mozilla Firefox
• ​Google Chrome
• ​Apple Safari
• ​Opera

プロジェクト新規作成

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

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

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

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

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

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

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

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

まず、「テンプレートの選択」にて、「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 アプリ内で認証をチェックするごく普通のやり方) を最初から実装してくれるというものです。今回は簡単のため、認証は使いませんので、設定を変えましょう。「設定の変更」ボタンをクリックして下さい。

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

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

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

Hello, World

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

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

共通レイアウト

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

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

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

ページを追加する

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

1. View のファイルを追加する
2. 該当する Controller メソッドを追加する

View の追加

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

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

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

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

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

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

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

@{
    ViewBag.Title = "Hello";
}

<h2>Hello</h2>

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

つまり、この部分を、

@{
    ViewBag.Title = "Hello, World";
}

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

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

<h2>Hello, World</h2>

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

Controller メソッドの追加

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

今回、 View は Home フォルダの下に Hello という名前で追加したので、対応する Controller メソッドは HomeController クラスの Hello メソッドということになります。まず、 HomeController クラスが書かれたファイルを開きましょう。ソリューションエクスプローラーのツリーにて、「Controllers」フォルダを展開すると、 HomeController.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" で始まる行は、ライブラリを使用しやすくするために名前空間を展開する宣言です。例えば、ここに

using System.Text;

という行を加えると (今回は加えなくてもいいですよ)、文字列を少しずつ繋いで生成していくためのライブラリクラス ​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 の Controller クラスでは、この中に実装されるメソッドが、ユーザーが Web サイトにアクセスした際に実際に呼ばれる処理そのものとなります。とりあえず、先ほど追加した Hello ビューに対応する Controller メソッドを追加したいので、ここにある "Index" メソッドの実装を参考に、以下のように "Hello" メソッドを追加してみてください。

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

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

FootNote

動かしてみる

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