LoginSignup
14
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@kyasbal_1994

ASP.Net vNext、Visual Studio 14　入門

Last updated at Posted at 2014-08-02

訳者注:この記事は2014年7月28日に投稿された記事「Getting Started with ASP.Net vNext and Visual Studio 14(http://www.asp.net/vnext/overview/aspnet-vnext/getting-started-with-aspnet-vnext-and-visual-studio )」の翻訳です。
訳者が学習のために行っている未熟な翻訳故に、Google翻訳のほうがマシかもしれません。

また、かなり意訳が多くなっており時には間違った訳があるかもしれません。

モダンなクラウドのアプリを.Netの細分化されたコンポーネント群によって構成できるように、次のバージョンのASP.Net(通称ASP.Net vNext)は1から再設計されました。
ASP.Net vNextのアプリケーションを作成するのにVisual Studioを使わなければならないということはありません。Visual Studioがない環境でも開発及び実行することが可能です。しかし、Visual Studioは最高の開発環境であり、このチュートリアルはこの環境の紹介でもあります。

ASP.Net vNextの紹介

ASP.Net vNextの特徴は以下のようなものです。

1から構築されました

  • MVC,Web API,Web Pagesは一つのフレームワークであるMVC 6に統合されました。新しいこのフレームワークは、ルーティング、アクション選択、フィルター、モデルバインディングなどの共通の抽象化セットを利用します。
  • 依存性注入(DI)はフレームワークに組み込まれています。好きなIoCコンテナを依存性の登録のために用いてください。
  • vNextはホストが何であるか感知しません。IISでもカスタムプロセスにおける自己ホストであってもvNextアプリケーションをホストすることができます。(Web API2とSignalR 2は既に自己ホストをサポートしていました。vNextは同様の特性をMVCにも提供します。)
  • vNextはオープンソースかつクロスプラットフォームです。

小さく、早く

  • MVC6はSystem.Web.dllに依存していません。この結果として小さいフレームワークになり、起動が高速化され少ないメモリ消費に抑えられます。
  • vNextアプリケーションはクラウドに最適化されたランタイムと.Net Frameworkのサブセットの両方を使うことが可能です。この.Net Frameworkのサブセットは、フレームワーク全体で200MBであるのに対して11MBしかなく、Nugetのパッケージのコレクションとして構成されています。
  • クラウドに最適漁れたフレームワークはNuGetのパッケージであるため、アプリケーションは実際に必要なパッケージのみを含めればよくなります。不必要なメモリ、ディスクスペース、ロード時間を浪費する必要はありません。
  • パッケージごとに独立しているため、Microsoftは早いサイクルで更新をすることができます。

真のSide-By-Side開発

  • 違うバージョンのフレームワークを用いて同じサーバーでSide-By-Sideでアプリケーションを実行できます。
  • サーバーのフレームワークの変更からアプリケーションを隔離することができます。
  • 自分自身のスケジュールに合わせてそれぞれのアプリケーションのフレームワークのアップデートを行えます。
  • 実際に製品としてデプロイする際に、製品サーバーと開発マシンとのフレームワークのパッチレベルが合致しないことによるエラーが起きません。

新しい開発のエクスペリエンス

vNextは動的にコードをコンパイルする際、Roslynコンパイラ(英)を用います。

  • コードを編集し、ブラウザをリフレッシュすることにより、プロジェクトをリビルドすることなく変更を見ることが可能です。
  • 流線型の開発プロセスと異なり、動的なコードのコンパイルによって今までは不可能であった開発手法(例えばVisual Studio Online ("Monaco")を用いてサーバー上でコードを編集する。)を可能にします。
  • 自分自身で好きなエディタとツールを選ぶことが可能です。

ASP.Net vNextは1から書き直されています。殆どのvNextのコードは同じように見えても、vNextは後方互換性を既存のアプリケーションに対して持ちません。
しかし、現在のフレームワーク(Web Forms5,Web API2,Web Pages 3,SignalR 2,Entity Framework6)はVisual Studioで引き続き利用可能であり、ASP .Net vNextでフルサポートされるでしょう。

対象読者

このチュートリアルはVisual StudioでASP.NetのWebプロジェクトを用いたことがある人を仮定しています。とくにvNextとVisual Studio "14" CTP のvNextプロジェクトのための新機能にフォーカスを当てていきます。

もし、ASP.Net Web FormsやWeb Pagesを使ったことはあるが、MVCはない場合、Introduction to MVCを先に見ておくと理解に役立つでしょう。

前提条件

このチュートリアルはVisual Studio "14" CTPを用います。

Visual Studio "14" CTPはVM,VHDもしくは初期状態のコンピューターにインストールすることが推薦されます。Visual Studio 2013におけるSide-by-Sideの特徴に問題があることが知られています。Visual Studio "14" CTPについて学ぶ(英)

また、vNextアプリケーションをAzureにデプロイするセッションではAzureのサブスクリプションを必要とします。もし、Azureアカウントを持っていなくてMSDNサブスクリプションを持っていたとしたら、MSDNサブスクリプションによる特典を有効化することができます。もしくは、少しの時間であれば、無償トライアルアカウントを作ることも可能です。

空のvNextプロジェクトを作成する。

最低限の必要なファイルを以てvNext webプロジェクトを作成し、それらのファイルを見てみましょう。それからMVCコントローラーとビューを追加し、その後クラスライブラリをどのように追加、参照するか見ていきます。

  1. Visual Studio "14" CTPをスタートします。
  2. Start Pageで、New Project、そしてNew Projectダイアログにおいて、C#/Webテンプレートを選びます。
  3. ASP.Net vNext Empty Web Applicationテンプレートを選択し、Hello Worldプロジェクトと名付けOKをクリックします。
    画像
    Solution ExplorerでvNext webプロジェクトで必要となる2つのファイルを見ることができます。(Project.jsonとStartup.csです。)
    画像

project.json

このproject.jsonはプロジェクトの依存関係のリストと、ビルドの出力の設定を含んでいます。また、コマンドのリストも含んでいます。

依存関係

依存関係はNugetパッケージかほかのプロジェクトを指します。空のvNext Webプロジェクトでは、IISでアプリケーションを走らせるためのMicrosoft.AspNet.Server.IIS NuGetパッケージのみを依存として持ちます。

project.json
{
    "dependencies": {
        "Microsoft.AspNet.Server.IIS" : "1.0.0-alpha2"
    }
}

(いつ、チュートリアルをするかによって、もしかしたら違うバージョン番号かもしれません。)

NuGetパッケージの参照のために、Visual Studioは非同期的に、プロジェクトがロードされた際に欠けているパッケージを復元します。もしかしたら、HelloWorldプロジェクトがロードされた直後に気が付いたかもしれませんが、Outputウィンドウを見れば、Microsoft.AspNet.Server.IISと数十の個のパッケージが依存するパッケージを復元するのに幾ばくかのの時間をとられたことに気が付くことでしょう。
画像

ビルド出力設定

Project.jsonはビルドの出力オプションの設定もします。

project.json
{
    "configurations": {
        "net45": { },
        "k10": { }
    }
}

これらの設定はVisual StudioのProperty Pagesウィンドウ内のActive Target Frameworkの設定と同期しています。ソリューションエクスプローラーでプロジェクトを右クリックしてPropertiesを選択すればこのウィンドウを見ることができます。
画像
Active Target Frameworkを.Net 4.5にセットした状態で、Solution ExplorerでReferenceノードを見てみます。
画像

Microsoft.AspNet.Server.IISと他のNuGetパッケージは**.Net Framework 4.5ノードの下に見えます。Microsoft.AspNet.Server.IISノードを開けば、参照されているNuGetパッケージをひとつに扱えるように結合されたdllを見ることができます。これにより依存関係を隠すことができ、参照リストをより扱いやすくすることが可能になります。
プロジェクトのプロパティのページに戻り、Active Target Frameworkうぃ.Net Core Framework 4.5にしてSolution Explorer**をまた見てください。
Visual Studioはプロジェクトの参照をクラウド用のフレームワークのサブセット上で動くアプリケーション用にプロジェクトの参照を変更します。
画像

コマンド

project.jsonはコマンドラインからアプリケーションを動かすのを容易にするためにコマンドを含むことができます。例えば例として、

project.json
{
    "commands": {
        /* Change the port number when you are self hosting this application*/
        "web": "Microsoft.AspNet.Hosting --server Microsoft.AspNet.Server.WebListener --server.urls http://localhost:5000"
    }
}

このチュートリアルはどうやってvNextアプリケーションをコマンドラインから走らせるかについては言及しません。もしこのことを知りたいなら、GitHub上のプロジェクトのウィキをご覧ください。

Startup.cs

デフォルトでは、vNextのホスティング環境はStartupと名付けられたスタートアップのためのクラスを探すとされています。このクラスはIBuilder型のパラメータを受け取るConfigureメソッドを持ち、HTTPパイプラインの設定をここで行わなければなりません。
空のプロジェクトでは、何もないConfigureメソッドを生成します。

Startup.cs
using System;
using Microsoft.AspNet.Builder;

namespace HelloWorld
{
    public class Startup
    {
        public void Configure(IBuilder app)
        {
        }
    }
}

このチュートリアルの次のセッションでは、ASP .Net MVC の機能をプロジェクトに追加する際にConfigureメソッドにコードを付けたします。

コントローラーとビューを追加する

HTTPパイプラインをMVCで有効にするために、NuGetパッケージを追加し、Startupクラスを編集します。

  1. project.jsonでMicrosoft.AspNet.Server.IISの行の最後にコンマを追加して、MVCパッケージを以下のように追加します。コピペよりも打って、まだ変更を保存しないでください。
project.json
{
    "dependencies": {
        "Microsoft.AspNet.Server.IIS": "1.0-alpha2",
        "Microsoft.AspNet.Mvc": "6.0-alpha2"
    }
}

参照を追加する際にIntelliSenseが働くのに気が付くと思います。
画像

このIntelliSenseのリストはデフォルトのNuGetパッケージソースと他のこのプロジェクトの兄弟階層にあるフォルダから取得されます。

このコードはコロンの後にロードすべきパッケージのバージョンを指定します。正確なバージョン("6.0-alpha2")等を指定することができ、空白文字列によって最新版を指定するか、ワイルドカードによって指定することができます。("6.0-alpha*")等。
2. Outputウィンドウを見える状態のままにして、変更を保存してください。
Visual Studioがproject.jsonの変更を見ていることに気が付くと思います、そして自動的にパッケージを復元して追加します。(実際のバージョンはこのスクリーンショットと異なるかもしれません。)
画像
Visual Studioはproject.jsonから参照を消してもパッケージを消すことはしません。
しかし、パッケージフォルダはソース管理に一般的にいれないので、次にプロジェクトがソース管理から取得されたときには削除された依存関係は取得されません。

  1. Startupクラスを編集します。
Startup.cs
using System;
using Microsoft.AspNet.Builder;
using Microsoft.Framework.DependencyInjection;

namespace HelloWorld
{
    public class Startup
    {
        public void Configure(IBuilder app)
        {
            app.UseServices(services =>
            {
                services.AddMvc();
            });

            app.UseMvc();
        }
    }
}

AddMvcメソッドはMVCフレームワークサービスをDIシステムに追加します。UseMvcメソッドはルートのようなデフォルトの設定を追加します。

  1. コントローラーのフォルダを作成してください、MVC Controller Classテンプレートを用いてHomeController.csを作成してください。
    画像
  2. ビューのフォルダを作成します。
  3. ビューのフォルダでHomeと名付けられたサブフォルダを作成します。
  4. Homeフォルダの中でIndex.cshtmlと名付けられたビューのファイルを　**MVC 5 View Page(Razor)**テンプレートを用いて作成します。
    画像
    5.Index.cshtml内のテンプレートコードを以下のように変更します。

The current time is : @System.DateTime.Now.ToString()

6.プロジェクトを走らせます。
ブラウザは、日時をIndex.cshtml内に表示します。標準ではIIS Expressによりアプリケーションはホストされます。

画像

vNext プロジェクトをクラスライブラリとともに作成する。

このセクションでは、ASP.Net vNext Web Applicationテンプレートを用いて新しいプロジェクトを作り、ASP.Net vNext Empty Web Applicationと比べて何が追加されたのかを見ていきます。vNextの設定の例を見ることができるでしょう、またwebProjectから参照するためのライブラリプロジェクトも追加します。

  1. FileメニューをクリックしてNew Projectを選択し、New ProjectダイアログでC#/Webテンプレートを選びます。
  2. ASP.Net vNext Web Applicationテンプレートを選び、HelloWorld2と名付けOKを押します。
    画像
    今までに見たproject.jsonやStartup.csに加えて、このプロジェクトはシンプルなMVCアプリケーションが必要とするファイル(CSS,Script,Homeコントローラとビュー)を含んでいます。またAccountコントローラーとびゅ^も含んでおり、ユーザーのログインをASP.Net Identityを用いて行うことが可能です。
    画像
    Solution ExplorerのReferenceノードを見てください。Solution Explorerは参照をまとめて、リストが長くなりすぎないようにしてくれています。例えば、MVCパッケージはMicrosoft.AspNet.Mvcノードの下に現れます。

画像

vNext設定

このテンプレートはデータベース接続文字列のようなアプリケーション設定を保存するためのファイルconfig.jsonを生成します。

config.json

{
    "Data": {
        "DefaultConnection": { 
            "ConnectionString": "Server=(localdb)\\mssqllocaldb;Database=aspnetvnext-HelloWorld2-f0652fd2-febf-488d-955b-b4c590e536f1;Trusted_Connection=True;MultipleActiveResultSets=true"
        }
    }
}

vNextアプリケーションではWeb.configファイルを用いることができます、しかしほかにも方法があります。
例えば、NuGetパッケージの.iniファイルや.jsonファイル用の設定プロバイダをインストールする方法です。このテンプレートはMicrosoft.Framework.ConfigurationModel.Jsonを用いるとともにconfig.jsonを生成しています。Startupクラスは以下のようなコードを用いてconfig.jsonかと環境変数から設定を取得できるようにしています。

Startup.cs
var configuration = new Configuration();
configuration.AddJsonFile("config.json");
configuration.AddEnvironmentVariables();

Configurationクラスは、設定に関する他のメソッドも提供します。例えばGetメソッドは設定を取得する際に用います。例えば以下のようなコードで前述のデータベース接続文字列を取得することができます。

Startup.cs
var configuration = new Configuration();
configuration.AddJsonFile("config.json");
string connString = configuration.Get("Data:DefaultConnection:ConnectionString");

クラスライブラリプロジェクトを追加する

  1. ソリューションにASP.Net vNext Class Libraryプロジェクトを追加します。名前は標準の"ClassLibrary1"のままにしておきます。(Windows Desktopノードの下にあるクラスライブラリテンプレートではないので注意してください。vNextを用いるためにはWebノードの下にあるクラスライブラリテンプレートを用います。)

画像

2.HelloWorld2プロジェクトでproject.jsonを開いて、プロジェクトを参照に追加します。
コピペすることなくタイピングをすれば、選択できるオプションとしてClassLibrary1が出現するはずです。

project.json
{
    "dependencies": {
        "EntityFramework.SqlServer": "7.0.0-alpha2",
        "Microsoft.AspNet.Mvc": "6.0.0-alpha2",
        "Microsoft.AspNet.Identity.EntityFramework": "3.0.0-alpha2",
        "Microsoft.AspNet.Identity.Authentication": "3.0.0-alpha2",
        "Microsoft.AspNet.Security.Cookies": "1.0.0-alpha2",
        "Microsoft.AspNet.Server.IIS": "1.0.0-alpha2",
        "Microsoft.AspNet.Server.WebListener": "1.0.0-alpha2",
        "Microsoft.AspNet.StaticFiles": "1.0.0-alpha2",
        "Microsoft.Framework.ConfigurationModel.Json": "1.0.0-alpha2",
        "Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.0-alpha2",
        "Classlibrary1": ""
    },

ファイルを保存すると、Solution ExplorerのReferenceノードに、クラスライブラリプロジェクトが出現し、プロジェクトのプロパティウィンドウにProjectとでます。
画像

  1. ClassLibrary1プロジェクトで、Class1.csを開いて、以下のようにコードを書きます。
Class1.cs
public class Class1
{
    public Class1()
    {

    }
    public static string GetMessage()
    {
        return "Hello World from ClassLibrary1!";
    }
}

4.HelloWorld2プロジェクト内で、Controllers/HomeController.csを開き、クラスライブラリのメソッドを呼びます。

Controllers\HomeController.cs
public IActionResult About()
{
    ViewBag.Message = Classlibrary1.Class1.GetMessage();

    return View();
}

  1. CTRL+F5でプロジェクトを走らせてください。(Debugモードで走らせないでください)
    ブラウザでは以下のようなページを見ることができるでしょう。
    画像

  2. Aboutページを開けばHello Worldメッセージを見ることが可能です。
    画像

  3. ブラウザを開いたままで、Class1.csのメッセージを”New message from ClassLibrary1”に書き換えてください。

  4. ファイルを保存して、プロジェクトはリビルドしないでください。

  5. ブラウザをリフレッシュします。

ブラウザでは変更を見ることができます。プロジェクトをリビルドすることなく、このコードファイルが再コンパイルされたのです。

(もし、ブラウザでこの変更が見られないときは、F5ではなくCTRL+F5を押して実行したか見てみてください。動的再コンパイルは、プロセスの再スタートによって行われます、これはVisual Studioがデバッグモードであるときにはできないのです。)

画像

binフォルダーを見れば、プロジェクトのdllはどこにもないことに気が付きます。ソースコードは動的にコンパイルされメモリに格納されたのです。

以下そのうち翻訳するかもしれません。

14
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
14
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?