Blazor Server テンプレート解説
1 like1,027 views
https://katte.connpass.com/event/172105/
Ad
More Related Content
What's hot (20)
Similar to Blazor Server テンプレート解説 (20)
Ad
More from Yuta Matsumura (20)
Ad
Blazor Server テンプレート解説
- 1. #勝手に勉強会 Blazor Server テンプレート解説 2020/04/05 勝手に勉強会 @tsubakimoto_s
- 2. #勝手に勉強会 Yuta Matsumura Developer (C#, PHP, Azure) Microsoft MVP (Development Technologies) Fukuoka.NET Organizer https://twitter.com/tsubakimoto_s Currently working for
- 3. #勝手に勉強会 株式会社オルターブース 2015 年 3 月設立 (6 期目) Microsoft Azure を得意とするクラウドインテグレーター 2017 年 8 月 Japan Microsoft Partner of the Year (OSS on Azure) 受賞 2019 年 9 月 Japan Microsoft Partner of the Year (特別賞) 受賞 https://www.alterbooth.com/
- 4. #勝手に勉強会 今日のテーマ • Blazor とは • Blazor の種類 • Blazor Server テンプレート解説 ※初学者向けの内容です
- 6. #勝手に勉強会 Blazor とは クライアントサイドの Web UI を構築するフレームワーク • JavaScript の代わりに C# でクライアントサイドコードを実装 • C# と Razor で再利用可能な Web UI コンポーネントを作成 • サーバーサイドとクライアントサイドで .NET のコードを共有 • JavaScript のライブラリやブラウザー API を呼び出し可能
- 7. #勝手に勉強会 .NET Core • クロスプラットフォームの実行環境 • Windows, macOS, Linux をサポート • GitHub で管理されているオープンソースなフレームワーク • https://try.dot.net/ ←すぐ試せます
- 8. #勝手に勉強会 .NET Core サポートポリシー https://qiita.com/tsubakimoto_s/items/73aa31cce1cb662a0de4 ※LTS : Long Term Support / 安定版 ※Current : 新機能を含むが将来的な変更の可能性あり / 継続的なアップデートが必要 ※Maintenance : セキュリティアップデートが提供される
- 10. #勝手に勉強会 Blazor の種類 1. Blazor Server 2. Blazor WebAssembly
- 11. #勝手に勉強会 Blazor の種類 1. Blazor Server ←サーバーサイド 2. Blazor WebAssembly
- 12. #勝手に勉強会 Blazor の種類 1. Blazor Server ←サーバーサイド 2. Blazor WebAssembly ←クライアントサイド
- 13. #勝手に勉強会 Blazor Server テンプレート解説 dotnet new blazorserver
- 14. #勝手に勉強会 Blazor Server dotnet run → ASP.NET Core で実行 https://github.com/dotnet-presentations/dotNETConf/blob/master/2020/FocusOnBlazor/Technical/Roth-Welcome-to-Blazor.pptx SignalR SignalR で通信 → UI 更新、イベント処理、JS 呼出 Server-Side Client-Side
- 15. #勝手に勉強会> dotnet new blazorserver -o ServerSideApp The template "Blazor Server App" was created successfully. This template contains technologies from parties other than Microsoft, see https://aka.ms/aspneore/3.1-third-party-notices for details. Processing post-creation actions... Running 'dotnet restore' on ServerSideApp¥ServerSideApp.csproj... D:¥ServerSideApp¥ServerSideApp.csproj の復元が 282.39 ms で完了しました Restore succeeded.
- 16. #勝手に勉強会 C# プロジェクトファイル ASP.NET Core SDK 3.1 が必要
- 18. #勝手に勉強会 アプリケーションのスタートアップ • Razor Pages 機能の追加 • Server-Side Blazor 機能の追加 • 依存関係の挿入 (Dependency Injection)
- 19. #勝手に勉強会 アプリケーションの要求処理パイプライン • endpoints.MapBlazorHub • リアルタイム処理 (SignalR) の追加 • endpoints.MapFallbackToPage • ルートページの設定
- 22. #勝手に勉強会 実際のページを Razor 構文で記述する • @page : ルートの指定 • @onclick : イベントの指定 • @code : クライアントサイドのコード →JavaScript の代わり
- 23. #勝手に勉強会
- 26. #勝手に勉強会 アプリケーションの設定ファイル • appsettings.json : 必ず読み込む • appsettings.{Environment}.json • 実行環境毎の設定を読込んでオーバーライド -> IHostingEnvironment.EnvironmentName
- 27. #勝手に勉強会 Appendix • Documents • https://blazor.net • https://docs.microsoft.com/ja-jp/aspnet/core/blazor/ • https://devblogs.microsoft.com/aspnet/category/blazor/ • .NET Conf Focus on Blazor (2020/01/14) • GitHub : Technical Contents • Playlist : Channel9 or YouTube