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」を選択します。 ASP.NET での Web 開発で、 MVC テンプレートは割と最近に追加されたもので、 Visual Studio 以外の方法で行われている一般的な Web 開発場面においてはよく使われるフレームワークの MVC アーキテクチャに似せた作りとなっています。

ちなみに、従来 Visual Studio を使った Web アプリ開発でよく用いられていたテンプレートに相当するのは、この画面で選択できる中では「Web Forms」がそれに該当します。豊富な Web 部品を WYSIWYG な専用エディタでペタペタ貼り付け、部品に応答ハンドラを設定してあげればアプリが出来上がるという手軽さは魅力ですが、 GUI 開発でのイベントドリブンモデルは Web サーバーアプリケーションにはあまりなじまず、かえって混乱を生む原因になっていましたし、クライアントスクリプトとの相性も良くない仕組みでした。

ASP.NET MVC では、基本的には自力で HTML を記述することになります。 XHTML を主流にしようとしていた頃に比べれば、 HTML5 の標準化が進められている昨今は HTML 記述の敷居もだいぶ低くなったように思いますし、 ASP.NET が自動生成する HTML の要素 ID が予測困難なことなどに基づくクライアントスクリプトの記述の難しさも抑えられたことは、多くの Web 開発者に歓迎されている点でもあります。