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