ASP.NET Core ではじめる簡単Web開発 / 高専カンファレンス in 名古屋 2018

Transcript

1. ASP.NET Core ではじめる
   簡単Web開発
   Siketyan
   @ 高専カンファレンス in 名古屋 2018
   © Pronama LLC
   

   View Slide

2. 自己紹介
   • 豊田高専 情報工学科 １年
   • C# と Java で API バックエンドを書く人
   （ただしプロコンではフロントエンドを担当）
   • 最近は部活用システムを製作中
   © Pronama LLC
   Siketyan
   @siketyan
   

   View Slide

3. ASP.NET Core とは
   • .NET Core 上で動くWebフレームワーク
   • オープンソース
   • MVC として動かすことも，
   APIとして動かすこともできる
   • IIS をはじめ，Docker や Microsoft Azure
   との連携も容易
   © Pronama LLC
   

   View Slide

4. .NET Core とは
   • C# は，機械語にコンパイルせず，中間言語（IL）にコンパイルする
   スタイルが主流
   • そのフレームワークとして， .NET が存在する
   • Visual Basic，C#，F# をサポート
   （VB.NET，C#.NET といった呼び名はこのため）
   © Pronama LLC
   VB
   C#
   F#
   IL
   機械語
   .NET
   ランタイム
   .NET
   コンパイラ
   （.NET ネイティブコンパイラ）
   

   View Slide

5. .NET Core とは
   © Pronama LLC
   実装の種類
   .NET Standard
   .NET Framework .NET Core
   Windows のみ
   プロプライエタリ
   マルチプラットフォーム
   オープンソース
   .NET ファミリではないが，Mono も .NET 実装の一つ
   .NET
   

   View Slide

6. ASP.NET Core の使い方
   • MVC（Model-View-Controller） で
   SSR（Server-Side Rendering） サイトを作る
   • API サーバを作る
   ＋
   • EntityFramework Core でデータベース連携
   © Pronama LLC
   

   View Slide

7. MVC で SSR サイトを作る
   © Pronama LLC
   View
   .cshtml
   Model
   .cs
   Controller
   .cs
   アタッチ
   作成
   表示
   

   View Slide

8. .cshtml とは
   • Razor 文法を使うことで HTML の中で C# が使える形式
   • 以前は .aspx が使われていた
   • VB で使用する場合は .vbhtml
   • これを使うことで簡単に Model を埋め込める
   （Vue.js のようなイメージ）
   © Pronama LLC
   
   @foreach(var product in products) {
   @product.Name ($@product.Price)
   }
   
   

   View Slide

9. Web API サーバを作る
   © Pronama LLC
   Model
   Controller
   レスポンス
   作成
   リクエスト
   Router
   

   View Slide

10. Web API サーバを作る
    • パスでルーティングし，ControllerがModelを作成して返す
    • 一つのModelに対して，GET/POST/PUT/DELETE
    それぞれのActionを定義する
    © Pronama LLC
    [Controller(“api/[controller]”）] // api/users
    public class UsersController
    {
    [HttpGet(“{id}”）] // GET api/users/:id
    public User Get(string id)
    {
    return new User(id);
    }
    }
    

    View Slide

11. EntityFramework Core で DB 連携
    © Pronama LLC
    • EntityFramework Core は，.NET Core 上で各種データ
    ベースを扱うためのフレームワーク
    • あらかじめ Model で各エンティティの属性を定義
    しておけば，コードファーストでデータベースと連携が
    できる
    • LINQ to SQL で絞り込みなども可能
    

    View Slide

12. EntityFramework Core で DB 連携
    © Pronama LLC
    [Table(“users”）]
    public class Users
    {
    [Key]
    [MaxLength(32)]
    [Column(“id”）]
    public string Id { get; set; }
    [MaxLength(256)]
    [Column(“name”）]
    public string Name { get; set; }
    }
    // _sql は DbContext で，あらかじめ定義して DI する
    _sql.Users.FirstOrDefault(x => x.Id == id);
    

    View Slide

13. デモ
    © Pronama LLC
    • ASP.NET Core + EntityFramework Core での
    コード生成がとても便利
    • Controller-Model-DbContext の関係を一瞬で
    生成できる
    

    View Slide

14. まとめ； なぜ ASP.NET Core なのか
    © Pronama LLC
    • C# や .NET を使ったことある人にとって親しみやすい
    • C# 未習得でも，C 系の言語なので C や Java の
    経験者であれば習得しやすい
    • ASP.NET と違い，.NET Core 上で動くので，
    もちろんマルチプラットフォーム
    • EntityFramework Core を使ったデータベースとの
    連携がとても簡単
    • 認証などのミドルウェアも，あらかじめ用意されている
    

    View Slide

15. 参考文献
    © Pronama LLC
    • .NET Core - .NET Core による .NET のクロスプラットフォームへの移行
    https://msdn.microsoft.com/ja-jp/magazine/mt694084.aspx
    • ASP.NET Core 2.0 EntityFrameworkCoreでMySQLを使う CodeFirst - Qiita
    https://qiita.com/hadasui/items/c0b76131f957fb6e0baa
    • “Razor”の紹介 － ASP.NET向け新ビュー・エンジン - ＠IT
    http://www.atmarkit.co.jp/fdotnet/scottgublog/20100714razor/
    razor.html
    • ASP.NET Core - 新しいデータベース - EF Core の概要 |
    Microsoft Docs
    https://docs.microsoft.com/ja-jp/ef/core/get-started/aspnetcore/
    new-db
    

    View Slide

16. 質疑応答
    いつでも @siketyan まで
    © Pronama LLC
    

    View Slide

17. ASP.NET Core で
    よい Web 開発ライフを!
    ご清聴ありがとうございました
    このスライドは SpeakerDeck で公開予定です
    © Pronama LLC
    

    View Slide