Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Naoki Ikeguchi

December 22, 2018
Tweet

More Decks by Naoki Ikeguchi

Other Decks in Programming

Transcript

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

    View Slide

  2. 自己紹介
    • 豊田高専 情報工学科 1年
    • 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 ([email protected])
    }

    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