aspnet mvc 6の今を紹介

ASP.NET MVC 6 の今を紹介古代魚庵

西村誠

ASP.NET 5 & MVC 6• これまでは WindowsServer(OS) + IIS(Web サーバー ) でのみ動作• ASP.NET 5 は Mac でも Linux でも動く !!

ASP.NET 5 & MVC 6• System.Web とのお別れusing System.Web;using System.Web.Mvc;

ASP.NET 5 & MVC 6• System.Web とのお別れusing System.Web;using System.Web.Mvc;

ASP.NET 5 & MVC 6• こんにちは Microsoft.AspNet

using Microsoft.AspNet;

ASP.NET 5 & MVC 6• OSS 的なツールを取り入れる• 色々新しい用語がでてくるよ（ Bower 、 Grunt 、 Gulp ）• そもそも ASP.NET 5 の動作基盤となる .NET Core もオープンソース

ASP.NET 5 & MVC 6• 仕組みが色々変わるので用語も色々出てくるよ！！

Entity Framework 7

ASP.NET 5 & MVC 6• 仕組みが色々変わるので用語も色々出てくるよ！！

DNXMicrosoft.AspNet

GitHub

.NET Framework 4.6

.NET Core

mono

Bower

Grunt Unix

Gulp

MVC

pipeline

json kestrel

概要編

基盤

基盤• 従来の .NET Framework とマルチプラットフォームの .NET Core

基盤• ASP.NET 5 は .NET Framework 4.6 、 .NET Core 5 のどちらでも動く

• 新しく追加された .NET Core について.NET Core

• DNX （ .NET Execution Environment ）• .NET 実行環境• ビルド & 実行するための SDK およびランタイム• Mac や Linux で動かすには mono が必要

.NET Core

• DNX （ .NET Execution Environment ）• dnu(.NET Development Utility)パッケージマネージャー• dnvm(.NET Version Manager)バージョン管理

.NET Core

• DNX （ .NET Execution Environment ）• dnu(.NET Development Utility)パッケージマネージャー• dnvm(.NET Version Manager)バージョン管理覚えにくい・・・環境構築する際にまた出てくるよ！！

.NET Core

• GitHub で管理https://github.com/aspnet

.OSS

• Model-View-Controll 構造を踏まえたフレームワーク• Ruby on Rails や CakePHP などほかの言語でも同様のフレームワークがあるから馴染みやすい• View エンジン -HTML の中に動的な値を入れるための仕組み<h2>@ViewData["Title"].</h2>この辺も Rails の ERB や PHP の Twig 、 Smarty など馴染みやすいMVC ５同様 Razor が使える

MVC 6

• MVC5 に関しては、これさえあれば安心！！（特にスポンサードなど無いです）

MVC 6

• 設定は json で管理• ファイル構成はかなり変更されている• Model-Entity Framework 7(EF7)

MVC 6

• Bower　　 JS 、 CSS などのクライアントサイドの依存関係を管理するパッケージマネージャー• NPM　　サーバーサイド版パッケージマネージャー• Grunt/gulp　　タスクマネージャーJavaScript 界隈に紛れ込んだ気になるツール群・・・でも .NET の話です

MVC 6

概要編まとめ• .NET Core を追加した二つの実行基盤• Mac 、 Linux でも動かせる• OSS 要素が増えてきた（ OSS 化や Bower など）

導入編

• ここからは実際に ASP.NET 5 環境を作成するお話し• Win 、 Mac 、 Unix （ Cent OS ）上で構築してみるよ

導入編

• Visual Studio 2015 をインストールすると自動で入る（以上！！）• VS 2015 じゃなくて Porwer Shell とかで入れることもできるけど・・・

Windows

• dnvm list

Windows

• CentOS 6.7 に入れてみる• ようこそ Unix の世界へ！！（コマンドライン成分多め）

Unix 編

• 一行でサクッと導入#curl -sSL https://raw.githubusercontent.com/aspnet/Home/dev/dnvminstall.sh | DNX_BRANCH=dev sh && source ~/.dnx/dnvm/dnvm.sh

DNVM の導入

• Yum コマンドでサクッと導入#rpm –import http://keyserver.Ubuntu.com/pks/lookup?op=get&search=0x3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF

#yum -y install yum-utils

#yum-config-manager –add-repo http://download.mono-project.com/repo/centos/#yum -y install mono-complete

#yum -y install mono-complete

Mono のインストール

• Yum コマンドでサクッと導入エラー : パッケージ : libgdiplus0-3.12-1.x86_64 (download.mono-project.com_repo_centos_)要求 : libpng15.so.15(PNG15_0)(64bit)エラー : パッケージ : libgdiplus0-3.12-1.x86_64 (download.mono-project.com_repo_centos_)要求 : libpng15.so.15()(64bit)エラー : パッケージ : libgdiplus0-3.12-1.x86_64 (download.mono-project.com_repo_centos_)要求 : libtiff.so.5()(64bit)

Mono のインストール

失敗！！

• これぞ Unix の世界、ビバ依存関係• というわけでソースからインストール・・・

Mono のインストール

• ここまでやってようやく dnx( 実行環境）が入る#dnvm upgrade -r mono

DNX を構築

• Kestrel という Web サーバーを使うので必要なライブラリを入れる#wget http://dist.libuv.org/dist/v1.4.2/libuv-v1.4.2.tar.gz#tar -zxf libuv-v1.4.2.tar.gz#cd libuv-v1.4.2#sh autogen.sh#./configure#make && make install#ln -s /usr/lib64/libdl.so.2 /usr/lib64/libdl#ln -s /usr/local/lib/libuv.so /usr/lib64/libuv.so.1

Web サーバーの kestrel に Libuv が必要

• yum で依存関係が出たのが面倒だったけど、 RTM になったらyum でサクッと入るんじゃないかな（根拠無し）

• コマンドラインで ASP.NET 環境を作る不思議

準備完了

• Mac への導入は mono がパッケージ配布されているから DL してダブルクリックで終わったり、 HomeBrew が不具合なく終わってくれたので楽でした。• 導入してサンプルを実行してみます。環境導入後の作業は Unix と共通。

Mac

• ターミナルで作業#curl -sSL https://raw.githubusercontent.com/aspnet/Home/dev/dnvminstall.sh | DNX_BRANCH=dev sh && source ~/.dnx/dnvm/dnvm.sh

DNVM 導入

• mono のサイトから Mac 用の pkg を DL してきて導入（簡単！！）• Mac OS X 用のパッケージマネージャー homebrew を導入#ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

mono 、 HomeBrew 導入

• 面倒なのでコマンドをずらー#brew update#brew install icu4c#dnvm upgrade -r coreclr#dnvm upgrade -r mono

導入完了！！

DNX 導入

• GitHub の Aspnet/home からhttps://github.com/aspnet/Home

サンプルを動かす

• サンプルの project.json が配置された位置で#dnu restore

これで dnu こと (.NET Development Utility) がライブラリをずらずら DL してくれます

サンプルを動かす

• ライブラリをそろえたら kestrel という Web サーバーで実行#dnx kestrel

Hosting environment: ProductionNow listening on: http://*:5004Application started. Press Ctrl+C to shut down.

サンプルを動かす

開発編

• 開発環境は色々あれど、やっぱり Visual Studio だよね！！（ not Visual Stduio Code ）

• Visual Studio 2015( フルオプション ) を例に紹介

開発を始める

• ASP.NET Web アプリケーション

• からの、 ASP.NET 5 プレビューテンプレート

新しいプロジェクト

• Empty – 空のプロジェクトを作成• Web API – アプリや Web 向けの API を作りたいなら• Web Application – MVC のひな型がある程度用意された状態

• ASP.NET 5 ではこの辺が統合されたのでチェックがオフに

新しいプロジェクト

• まずは一番シンプルな構成で・・・Empty プロジェクト

• wwwroot は CSS や画像などを配置するドキュメントルート以下を表す

Empty プロジェクト

• Project.json はプロジェクト全体の設定Empty プロジェクト

• Project.json はプロジェクト全体の設定Empty プロジェクト

• ちなみに Web Application プロジェクトの場合・・・

依存関係が色々

Empty プロジェクト

• リファレンスで実行環境が見れるEmpty プロジェクト

• hosting.ini で実行環境の設定Empty プロジェクト

• Startup.cs がプログラムのエントリポイントEmpty プロジェクト

• Startup.cs がプログラムのエントリポイントEmpty プロジェクト

• プロジェクトのプロパティEmpty プロジェクト

• Web Application – MVC のひな型がある程度用意された状態ここから MVC 登場

• 依存関係色々追加されている

Bower でクライアントサイド JS のバージョン管理

Gulp でタスク管理

• Startup.cs も色々追記されている// app.Use ～で色々な機能を宣言（パイプライン）app.UseMvc(routes =>{ // ルーティングの書き方も前バージョンとちょっと違う routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}");});

色々追加されている

• Model-View-Controllers

MVC

• Controller

public class HomeController : Controller { public IActionResult Index() { return View(); }まぁ、 MVC 5 と似た感覚

MVC

• View – この辺も感覚的には MVC 5 ライク（ @await とか拡張もあるけど）• @{• ViewData["Title"] = "Contact";• }• <h2>@ViewData["Title"].</h2>• <h3>@ViewData["Message"]</h3>

• <address>

MVC

• Model – 違いがわからんから使ってみよう

[参考 ]Getting Started on ASP.NET 5http://ef.readthedocs.org/en/latest/getting-started/aspnet5.html#create-a-new-project

↑色々はしょっているので詳しくはここを見てね！！

MVC

• Web Application プロジェクトを作成する•認証はなし（自動で Entity Framework 入っちゃうから）

Models

• ツール→ NuGet パッケージマネージャー→パッケージマネージャーコンソールPM>Install-Package EntityFramework.SqlServer –Pre

project.json にも追記されてる "EntityFramework.SqlServer": "7.0.0-beta8" },

Models

PM>Install-Package EntityFramework.Commands –Pre

以下を追記"ef": "EntityFramework.Commands“

こっちは手動・・・

Models

"commands": { "web": "Microsoft.AspNet.Hosting --config hosting.ini“, "ef": "EntityFramework.Commands" },

Models フォルダーとモデルを追加

・・・色々出たの#dnvm upgrade

Models

が、新しくプロジェクトを作成しても project.json の中身が・・・

"dependencies": { "Microsoft.AspNet.Diagnostics": "1.0.0-beta5", "Microsoft.AspNet.Mvc": "6.0.0-beta5", "Microsoft.AspNet.Mvc.TagHelpers": "6.0.0-beta5", "Microsoft.AspNet.Server.IIS": "1.0.0-beta5",

Models

Microsoft ASP.NET and Web Tools 2015 (Beta8) – Visual Studio 2015これが必要だったhttp://www.microsoft.com/en-us/download/details.aspx?id=49442

よし来た！！ "Microsoft.Framework.Logging.Console": "1.0.0-beta8", "Microsoft.Framework.Logging.Debug": "1.0.0-beta8", "Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.0.0-beta8"

Models

startup.cs に追記 var connection = @"Server=(localdb)\mssqllocaldb;Database=WebApplication10.AspNet5;Trusted_Connection=True;";

services.AddEntityFramework() .AddSqlServer() .AddDbContext<BloggingContext>(options => options.UseSqlServer(connection));

Models

コマンドラインからマイグレーション プロジェクトのディレクトリに移動#dnvm use 1.0.0-beta8#dnx ef migrations add MyFirstMigration#dnx ef database update

Models

コントローラーを追加class BlogsController : Controller { private BloggingContext _context;

public BlogsController(BloggingContext context) { _context = context; }

public IActionResult Index() { return View(_context.Blogs.ToList()); }

Models

View を追加Models

コードはこんな感じModels

@model WebApplication10.Models.Blog

@{ ViewBag.Title = "New Blog";}

<h2>@ViewData["Title"]</h2>

<form asp-controller="Blogs" asp-action="Create" method="post" class="form-horizontal" role="form"> <div class="form-horizontal"> <div asp-validation-summary="ValidationSummary.All" class="text-danger" /> <div class="form-group"> <label asp-for="Url" class="col-md-2 control-label" /> <div class="col-md-10">

動いた！！Models

Mac の場合 sqlite を使ったりGetting Started on OSXhttp://ef.readthedocs.org/en/latest/getting-started/osx.html#install-asp-net-5

追記

余談おおっ、 GitHub 追加されてる！！

まとめ• OSS 化により Unix 的な雰囲気が出てきた• IIS＋ Visual Studio だと、今までとそんなに変わらない• .NET Framework と .NET Core

•ベータ版なので落とし穴注意

宣伝明日発売！！

• ASP.NET 5 Web 開発 ～ランタイム編～https://channel9.msdn.com/Events/de-code/decode-2015/DEV-006

• ASP.NET 5 の紹介http://codezine.jp/article/detail/8537

• ASP.NET 5 Web 開発 ～フレームワーク編～https://channel9.msdn.com/Events/de-code/decode-2015/DEV-007

資料

御清聴ありがとうございました