Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
• 仕組みが色々変わるので用語も色々出てくるよ!!
ASP.NET 5 & MVC 6
• 仕組みが色々変わるので用語も色々出てくるよ!!
.NET Framework 4.6
Bower
Grunt
Unix
Gulp
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 Co...
• DNX(.NET Execution Environment)
• dnu(.NET Development Utility)
パッケージマネージャー
• dnvm(.NET Version Manager)
バージョン管理
覚えにくい・・...
• GitHubで管理
https://github.com/aspnet
.OSS
• Model-View-Controll構造を踏まえたフレームワーク
• Ruby on RailsやCakePHPなどほかの言語でも同様のフレームワーク
があるから馴染みやすい
• Viewエンジン-HTMLの中に動的な値を入れるための仕組...
• MVC5に関しては、これさえあれば安心!!
(特にスポンサードなど無いです)
MVC 6
• 設定はjsonで管理
• ファイル構成はかなり変更されている
• Model-Entity Framework 7(EF7)
MVC 6
• Bower
JS、CSSなどのクライアントサイドの依存関係を管理するパッケージマ
ネージャー
• NPM
サーバーサイド版パッケージマネージャー
• Grunt/gulp
タスクマネージャー
JavaScript界隈に紛れ込んだ気になるツー...
概要編まとめ
• .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 ~/.d...
• Yumコマンドでサクッと導入
#rpm –import
http://keyserver.Ubuntu.com/pks/lookup?op=get&search=0x3FA7E0328081BFF6A14DA29
AA6A19B38D3D8...
• Yumコマンドでサクッと導入
エラー: パッケージ: libgdiplus0-3.12-1.x86_64 (download.mono-
project.com_repo_centos_)
要求: libpng15.so.15(PNG15_...
• これぞ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.ta...
• 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 ~/.dn...
• monoのサイトからMac用のpkgをDLしてきて導入(簡単!!)
• Mac OS X用のパッケージマネージャーhomebrewを導入
#ruby -e "$(curl -fsSL
https://raw.githubuserconten...
• 面倒なのでコマンドをずらー
#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: Production
Now listening on: http://*:5004
Application...
開発編
• 開発環境は色々あれど、やっぱり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(
na...
• 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>
• <h...
• Model – 違いがわからんから使ってみよう
[参考]Getting Started on ASP.NET 5
http://ef.readthedocs.org/en/latest/getting-started/aspnet5.htm...
• Web Applicationプロジェクトを作成する
• 認証はなし(自動でEntity Framework入っちゃうから)
Models
• ツール→NuGetパッケージマネージャー
→パッケージマネージャーコンソール
PM>Install-Package EntityFramework.SqlServer –Pre
project.jsonにも追記されてる
"EntityFra...
PM>Install-Package EntityFramework.Commands –Pre
以下を追記
"ef": "EntityFramework.Commands“
こっちは手動・・・
Models
"commands": {
"we...
Modelsフォルダーとモデルを追加
・・・色々出たの
#dnvm upgrade
Models
が、新しくプロジェクトを作成してもproject.jsonの中身が・・・
"dependencies": {
"Microsoft.AspNet.Diagnostics": "1.0.0-beta5",
"Microsoft.AspNet.Mv...
Microsoft ASP.NET and Web Tools 2015 (Beta8) – Visual Studio 2015
これが必要だった
http://www.microsoft.com/en-us/download/details...
startup.csに追記
var connection =
@"Server=(localdb)mssqllocaldb;Database=WebApplication10.AspNet
5;Trusted_Connection=True;"...
コマンドラインからマイグレーション
プロジェクトのディレクトリに移動
#dnvm use 1.0.0-beta8
#dnx ef migrations add MyFirstMigration
#dnx ef database update
M...
コントローラーを追加
class BlogsController : Controller
{
private BloggingContext _context;
public BlogsController(BloggingContext c...
Viewを追加
Models
コードはこんな感じ
Models
@model WebApplication10.Models.Blog
@{
ViewBag.Title = "New Blog";
}
<h2>@ViewData["Title"]</h2>
<form as...
動いた!!
Models
Macの場合sqliteを使ったり
Getting Started on OSX
http://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...
御清聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

Aspnet mvc 6の今を紹介

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

Aspnet mvc 6の今を紹介

  1. 1. ASP.NET MVC 6の今を紹介 古代魚庵 西村誠
  2. 2. ASP.NET 5 & MVC 6 • これまではWindowsServer(OS) + IIS(Webサーバー)でのみ動作 • ASP.NET 5はMacでもLinuxでも動く!!
  3. 3. ASP.NET 5 & MVC 6 • System.Webとのお別れ using System.Web; using System.Web.Mvc;
  4. 4. ASP.NET 5 & MVC 6 • System.Webとのお別れ using System.Web; using System.Web.Mvc;
  5. 5. ASP.NET 5 & MVC 6 • こんにちはMicrosoft.AspNet using Microsoft.AspNet;
  6. 6. ASP.NET 5 & MVC 6 • OSS的なツールを取り入れる • 色々新しい用語がでてくるよ(Bower、Grunt、Gulp) • そもそもASP.NET 5の動作基盤となる.NET Coreもオープンソース
  7. 7. ASP.NET 5 & MVC 6 • 仕組みが色々変わるので用語も色々出てくるよ!!
  8. 8. ASP.NET 5 & MVC 6 • 仕組みが色々変わるので用語も色々出てくるよ!! .NET Framework 4.6 Bower Grunt Unix Gulp pipeline json kestrel
  9. 9. 概要編
  10. 10. 基盤
  11. 11. 基盤 • 従来の.NET Frameworkと マルチプラットフォームの.NET Core
  12. 12. 基盤 • ASP.NET 5は.NET Framework 4.6、.NET Core 5の どちらでも動く
  13. 13. • 新しく追加された.NET Coreについて .NET Core
  14. 14. • DNX(.NET Execution Environment) • .NET 実行環境 • ビルド&実行するためのSDKおよびランタイム • MacやLinuxで動かすにはmonoが必要 .NET Core
  15. 15. • DNX(.NET Execution Environment) • dnu(.NET Development Utility) パッケージマネージャー • dnvm(.NET Version Manager) バージョン管理 .NET Core
  16. 16. • DNX(.NET Execution Environment) • dnu(.NET Development Utility) パッケージマネージャー • dnvm(.NET Version Manager) バージョン管理 覚えにくい・・・環境構築する際にまた出てくるよ!! .NET Core
  17. 17. • GitHubで管理 https://github.com/aspnet .OSS
  18. 18. • Model-View-Controll構造を踏まえたフレームワーク • Ruby on RailsやCakePHPなどほかの言語でも同様のフレームワーク があるから馴染みやすい • Viewエンジン-HTMLの中に動的な値を入れるための仕組み <h2>@ViewData["Title"].</h2> この辺もRailsのERBやPHPのTwig、Smartyなど馴染みやすい MVC5同様Razorが使える MVC 6
  19. 19. • MVC5に関しては、これさえあれば安心!! (特にスポンサードなど無いです) MVC 6
  20. 20. • 設定はjsonで管理 • ファイル構成はかなり変更されている • Model-Entity Framework 7(EF7) MVC 6
  21. 21. • Bower JS、CSSなどのクライアントサイドの依存関係を管理するパッケージマ ネージャー • NPM サーバーサイド版パッケージマネージャー • Grunt/gulp タスクマネージャー JavaScript界隈に紛れ込んだ気になるツール群・・・でも.NETの話です MVC 6
  22. 22. 概要編まとめ • .NET Coreを追加した二つの実行基盤 • Mac、Linuxでも動かせる • OSS要素が増えてきた(OSS化やBowerなど)
  23. 23. 導入編
  24. 24. • ここからは実際にASP.NET 5環境を作成するお話し • Win、Mac、Unix(Cent OS)上で構築してみるよ 導入編
  25. 25. • Visual Studio 2015をインストールすると自動で入る(以上!!) • VS 2015じゃなくてPorwer Shellとかで入れることもできるけど・・・ Windows
  26. 26. • dnvm list Windows
  27. 27. • CentOS 6.7に入れてみる • ようこそUnixの世界へ!!(コマンドライン成分多め) Unix編
  28. 28. • 一行でサクッと導入 #curl -sSL https://raw.githubusercontent.com/aspnet/Home/dev/dnvminstall.sh | DNX_BRANCH=dev sh && source ~/.dnx/dnvm/dnvm.sh DNVMの導入
  29. 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. 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. 31. • これぞUnixの世界、ビバ依存関係 • というわけでソースからインストール・・・ Monoのインストール
  32. 32. • ここまでやってようやくdnx(実行環境)が入る #dnvm upgrade -r mono DNXを構築
  33. 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. 34. • yumで依存関係が出たのが面倒だったけど、RTMになったらyumで サクッと入るんじゃないかな(根拠無し) • コマンドラインでASP.NET環境を作る不思議 準備完了
  35. 35. • Macへの導入はmonoがパッケージ配布されているからDLしてダブ ルクリックで終わったり、HomeBrewが不具合なく終わってくれたので 楽でした。 • 導入してサンプルを実行してみます。 環境導入後の作業はUnixと共通。 Mac
  36. 36. • ターミナルで作業 #curl -sSL https://raw.githubusercontent.com/aspnet/Home/dev/dnvminstall.sh | DNX_BRANCH=dev sh && source ~/.dnx/dnvm/dnvm.sh DNVM導入
  37. 37. • monoのサイトからMac用のpkgをDLしてきて導入(簡単!!) • Mac OS X用のパッケージマネージャーhomebrewを導入 #ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" mono、HomeBrew導入
  38. 38. • 面倒なのでコマンドをずらー #brew update #brew install icu4c #dnvm upgrade -r coreclr #dnvm upgrade -r mono 導入完了!! DNX導入
  39. 39. • GitHubのAspnet/homeから https://github.com/aspnet/Home サンプルを動かす
  40. 40. • サンプルのproject.jsonが配置された位置で #dnu restore これでdnuこと(.NET Development Utility)がライブラリをずらずらDLして くれます サンプルを動かす
  41. 41. • ライブラリをそろえたらkestrelというWebサーバーで実行 #dnx kestrel Hosting environment: Production Now listening on: http://*:5004 Application started. Press Ctrl+C to shut down. サンプルを動かす
  42. 42. 開発編
  43. 43. • 開発環境は色々あれど、やっぱりVisual Studioだよね!!(not Visual Stduio Code) • Visual Studio 2015(フルオプション)を例に紹介 開発を始める
  44. 44. • ASP.NET Webアプリケーション • からの、ASP.NET 5プレビューテンプレート 新しいプロジェクト
  45. 45. • Empty – 空のプロジェクトを作成 • Web API – アプリやWeb向けのAPIを作りたいなら • Web Application – MVCのひな型がある程度用意された状態 • ASP.NET 5ではこの辺が統合されたのでチェックがオフに 新しいプロジェクト
  46. 46. • まずは一番シンプルな構成で・・・ Emptyプロジェクト
  47. 47. • wwwrootはCSSや画像などを配置するドキュメントルート以下を表す Emptyプロジェクト
  48. 48. • Project.jsonはプロジェクト全体の設定 Emptyプロジェクト
  49. 49. • Project.jsonはプロジェクト全体の設定 Emptyプロジェクト
  50. 50. • ちなみにWeb Applicationプロジェクト の場合・・・ 依存関係が色々 Emptyプロジェクト
  51. 51. • リファレンスで実行環境が見れる Emptyプロジェクト
  52. 52. • hosting.iniで実行環境の設定 Emptyプロジェクト
  53. 53. • Startup.csがプログラムのエントリポイント Emptyプロジェクト
  54. 54. • Startup.csがプログラムのエントリポイント Emptyプロジェクト
  55. 55. • プロジェクトのプロパティ Emptyプロジェクト
  56. 56. • Web Application – MVCのひな型がある程度用意された状態 ここからMVC登場
  57. 57. • 依存関係 色々追加されている BowerでクライアントサイドJSのバージョン管理 Gulpでタスク管理
  58. 58. • Startup.csも色々追記されている // app.Use~で色々な機能を宣言(パイプライン) app.UseMvc(routes => { // ルーティングの書き方も前バージョンとちょっと違う routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); }); 色々追加されている
  59. 59. • Model-View-Controllers MVC
  60. 60. • Controller public class HomeController : Controller { public IActionResult Index() { return View(); } まぁ、MVC 5と似た感覚 MVC
  61. 61. • View – この辺も感覚的にはMVC 5ライク(@awaitとか拡張もあるけ ど) • @{ • ViewData["Title"] = "Contact"; • } • <h2>@ViewData["Title"].</h2> • <h3>@ViewData["Message"]</h3> • <address> MVC
  62. 62. • Model – 違いがわからんから使ってみよう [参考]Getting Started on ASP.NET 5 http://ef.readthedocs.org/en/latest/getting-started/aspnet5.html#create-a-new-project ↑色々はしょっているので詳しくはここを見てね!! MVC
  63. 63. • Web Applicationプロジェクトを作成する • 認証はなし(自動でEntity Framework入っちゃうから) Models
  64. 64. • ツール→NuGetパッケージマネージャー →パッケージマネージャーコンソール PM>Install-Package EntityFramework.SqlServer –Pre project.jsonにも追記されてる "EntityFramework.SqlServer": "7.0.0-beta8" }, Models
  65. 65. PM>Install-Package EntityFramework.Commands –Pre 以下を追記 "ef": "EntityFramework.Commands“ こっちは手動・・・ Models "commands": { "web": "Microsoft.AspNet.Hosting --config hosting.ini“, "ef": "EntityFramework.Commands" },
  66. 66. Modelsフォルダーとモデルを追加 ・・・色々出たの #dnvm upgrade Models
  67. 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. 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. 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. 70. コマンドラインからマイグレーション プロジェクトのディレクトリに移動 #dnvm use 1.0.0-beta8 #dnx ef migrations add MyFirstMigration #dnx ef database update Models
  71. 71. コントローラーを追加 class BlogsController : Controller { private BloggingContext _context; public BlogsController(BloggingContext context) { _context = context; } public IActionResult Index() { return View(_context.Blogs.ToList()); } Models
  72. 72. Viewを追加 Models
  73. 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. 74. 動いた!! Models
  75. 75. Macの場合sqliteを使ったり Getting Started on OSX http://ef.readthedocs.org/en/latest/getting-started/osx.html#install-asp-net-5 追記
  76. 76. 余談 おおっ、GitHub追加されてる!!
  77. 77. まとめ • OSS化によりUnix的な雰囲気が出てきた • IIS+Visual Studioだと、今までとそんなに変わらない • .NET Frameworkと.NET Core • ベータ版なので落とし穴注意
  78. 78. 宣伝 明日発売!!
  79. 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. 80. 御清聴ありがとうございました

×