2015年10月24日の.NETラボの勉強会資料です

1. ASP.NET MVC 6の今を紹介
古代魚庵
西村誠

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

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

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

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

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

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

8. ASP.NET 5 & MVC 6
• 仕組みが色々変わるので用語も色々出てくるよ！！
.NET Framework 4.6
Bower
Grunt
Unix
Gulp
pipeline
json kestrel

9. 概要編

10. 基盤

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

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

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

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

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

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

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

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

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

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

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

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

23. 導入編

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

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

26. • dnvm list
Windows

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

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

29. • Yumコマンドでサクッと導入
#rpm –import
http://keyserver.Ubuntu.com/pks/lookup?op=get&search=0x3FA7E0328081BFF6A14DA29
AA6A19B38D3D831EF
#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のインストール

30. • 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のインストール
失敗！！

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

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

33. • 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が必要

34. • yumで依存関係が出たのが面倒だったけど、RTMになったらyumで
サクッと入るんじゃないかな（根拠無し）
• コマンドラインでASP.NET環境を作る不思議
準備完了

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

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

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

38. • 面倒なのでコマンドをずらー
#brew update
#brew install icu4c
#dnvm upgrade -r coreclr
#dnvm upgrade -r mono
導入完了！！
DNX導入

39. • GitHubのAspnet/homeから
https://github.com/aspnet/Home
サンプルを動かす

40. • サンプルのproject.jsonが配置された位置で
#dnu restore
これでdnuこと(.NET Development Utility)がライブラリをずらずらDLして
くれます
サンプルを動かす

41. • ライブラリをそろえたらkestrelというWebサーバーで実行
#dnx kestrel
Hosting environment: Production
Now listening on: http://*:5004
Application started. Press Ctrl+C to shut down.
サンプルを動かす

42. 開発編

43. • 開発環境は色々あれど、やっぱりVisual Studioだよね！！（not
Visual Stduio Code）
• Visual Studio 2015(フルオプション)を例に紹介
開発を始める

44. • ASP.NET Webアプリケーション
• からの、ASP.NET 5プレビューテンプレート
新しいプロジェクト

45. • Empty – 空のプロジェクトを作成
• Web API – アプリやWeb向けのAPIを作りたいなら
• Web Application – MVCのひな型がある程度用意された状態
• ASP.NET 5ではこの辺が統合されたのでチェックがオフに
新しいプロジェクト

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

47. • wwwrootはCSSや画像などを配置するドキュメントルート以下を表す
Emptyプロジェクト

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

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

50. • ちなみにWeb Applicationプロジェクト
の場合・・・
依存関係が色々
Emptyプロジェクト

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

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

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

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

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

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

57. • 依存関係
色々追加されている
BowerでクライアントサイドJSのバージョン管理
Gulpでタスク管理

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

59. • Model-View-Controllers
MVC

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

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

62. • Model – 違いがわからんから使ってみよう
[参考]Getting Started on ASP.NET 5
http://ef.readthedocs.org/en/latest/getting-started/aspnet5.html#create-a-new-project
↑色々はしょっているので詳しくはここを見てね！！
MVC

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

64. • ツール→NuGetパッケージマネージャー
→パッケージマネージャーコンソール
PM>Install-Package EntityFramework.SqlServer –Pre
project.jsonにも追記されてる
"EntityFramework.SqlServer": "7.0.0-beta8"
},
Models

65. PM>Install-Package EntityFramework.Commands –Pre
以下を追記
"ef": "EntityFramework.Commands“
こっちは手動・・・
Models
"commands": {
"web": "Microsoft.AspNet.Hosting --config hosting.ini“,
"ef": "EntityFramework.Commands"
},

66. Modelsフォルダーとモデルを追加
・・・色々出たの
#dnvm upgrade
Models

67. が、新しくプロジェクトを作成しても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

68. 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

69. startup.csに追記
var connection =
@"Server=(localdb)mssqllocaldb;Database=WebApplication10.AspNet
5;Trusted_Connection=True;";
services.AddEntityFramework()
.AddSqlServer()
.AddDbContext<BloggingContext>(options =>
options.UseSqlServer(connection));
Models

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

71. コントローラーを追加
class BlogsController : Controller
{
private BloggingContext _context;
public BlogsController(BloggingContext context)
{
_context = context;
}
public IActionResult Index()
{
return View(_context.Blogs.ToList());
}
Models

72. Viewを追加
Models

73. コードはこんな感じ
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">

74. 動いた！！
Models

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

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

77. まとめ
• OSS化によりUnix的な雰囲気が出てきた
• IIS＋Visual Studioだと、今までとそんなに変わらない
• .NET Frameworkと.NET Core
• ベータ版なので落とし穴注意

78. 宣伝
明日発売！！

79. • 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
資料

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