![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -戻る --[[ASP.NET]] --[[Single-page application]] --[[WebAssembly]] * 目次 [#h95bdc31] #contents *概要 [#r7bd8e46] -新しい[[SPA>Single-page application]]フレームワーク --[[WebAssembly]]で動作する --C#、Razor、およびHTMLに基づく -C#で開発するので、 --（特にBlazor Serverにおいて）[[Visual Studio]]によって[[ASP.NET]]と強く結合している。 --昨今、 フロントとバックは様々な言語で開発される「統合」より「分離」が主流なので流行っていない。 --現時点、C#採用時点で、その必要性は薄いか。そして、一応、[[Visual Studio]]の販売の目的もありそう。 *詳細 [#pfc8f5c1] **特徴 [#vddc66e1] -Apache License, Version 2.0 -[[.NET Core]]の一部 ***開発環境 [#webbcb86] -前提環境 --[[.NET Core]] 2.1 以降 --[[Visual Studio]] 2017 以降 --Blazor Language Services Extensions -開発スタイル --HTMLベースであり、コンポーネントベース ---[[ASP.NET Web Forms]]的な方式 ---[[ASP.NET Web Forms]]、[[ASP.NET MVC]]的な方式 ---*.cshtmlは原則、BlazorComponentを継承 ---カスタム・コントロールはBlazorComponentを継承して開発 --豊富な IntelliSense とツール --開発中のブラウザでのライブリロード --ブラウザと IDE の両方で完全な .NET デバッグ --パブリッシュとアプリサイズのトリミング ***フレームワーク [#xa66f75a] -Blazor WASM：[[SPA>Single-page application]]フレームワーク --レイアウト --ルーティング --フォーム --バリデーション --[[DI]]: Dependency Injection（依存性の注入） --JavaScript interop --サーバーサイドレンダリング -Blazor Server：ASP.NET の Update Panelの差分更新をSignalRで実現するようなアーキテクチャ --上記の[[SPA>Single-page application]]フレームワーク機能は同梱される。 --大きな差異は、サーバーサイド実装が中心で、フロントエンド処理とWebAPIに依存しない点。 --（Blazor WASMの初回アクセス時の静的サーバーサイドレンダリングが動的化されている） --[[.NET 8]] 以降の「Blazor Web App」では「SSR / Interactive Auto」という挙動が可能になった。~ （≒ 最初はサーバで描き、裏でWASMをDLし、準備ができたらクライアント側に切り替える） ***ハイブリッド化が可能 [#e18ce032] -[[SPA>Single-page application]]フレームワークなので、[[PWA>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?PWA%EF%BC%88Progressive%20Web%20Apps%EF%BC%89]]などで側（皮）ネイティブ的にラップして、ハイブリッド化が可能。 -[[.NET 6]]から、デスクトップアプリの開発にも対応する「Blazor desktop」が加わり、 -以降、Blazor Hybrid や [[.NET 8]] で Blazor United という俗称で呼ばれる新しい Blazorが登場（Blazor + [[Windows Forms]] or [[WPF]] or [[MAUI>.NET MAUI]]） **マークアップ言語 [#u10cd9a3] 特に、外（皮）ネイティブのハイブリッド化で複雑化した。 ***Blazor WASM [#w1c6f8fe] -Blazor単体を見ると、SPAフレームワークと言いつつ、ほぼ、JS代替のWASMなので、マークアップはHTML/CSS。 -SPAフレームワークっぽく見せているのは、ASP.NET MVCから輸入されたMicrosoft 製のテンプレート構文のRazor。 ***Blazor Server [#na079885] [[Blazor WASM>#w1c6f8fe]]と同じだが、実体は動的サーバーサイドレンダリングでSPAではない。 ***Blazor + [[Windows Forms]] [#b920f808] -マークアップはWebView内のHTML/CSSのみ。 -（ただし、C#で画面定義を行うコードUIは可能） ***Blazor + [[WPF]] [#ce8c2667] -[[WPF]]自体はネイティブで、マークアップはXAMLのみ。 -（ただし、C#で画面定義を行うコードUIは可能） -マークアップはWebView内のHTML/CSSと外側のXAML ***Blazor + [[MAUI>.NET MAUI]] [#c8f3be02] -[[MAUI>.NET MAUI]]自体はネイティブで、マークアップはXAMLのみ。 -（ただし、C#で画面定義を行うコードUIは可能） -Blazor + で、WebView内のHTML/CSSも必要になる。 **[[Silverlight]]っポイが、 [#nfb79697] ***同じ点 [#k3d4956e] -クロスプラットフォーム -ブラウザ実行 ≒ 通常実行 -[[ブラウザ外実行>Silverlight#c3bdbd4d]] ≒ [[ハイブリッド化>#e18ce032]] ***異なる点 [#tbe00343] -[[XAML]]ではない。 -プラグイン・アプローチではない。 -従って、[[Silverlight]]やFlashのように、~ 主要ブラウザにプラグインをクローズされて使えなくなることはない。 *参考 [#c6e275d5] -Blazor - Wikipedia~ https://en.wikipedia.org/wiki/Blazor -aspnet/Blazor:~ Blazor is a .NET web framework using C#/Razor and HTML~ that runs in the browser with WebAssembly~ https://github.com/aspnet/Blazor -WebAssemblyとBlazor: 何十年の問題を解決する~ https://www.infoq.com/jp/articles/webassembly-blazor/ -マイクロソフトが提供する「クラウドネイティブ」に欠かせない技術で、~ より効率的な開発を実現しよう【デブサミ2019】 (1/2)：CodeZine（コードジン）~ https://codezine.jp/article/detail/11400 **microsoft.com [#pcb04849] -Blazor | Build client web apps with C# | .NET~ https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor -ASP.NET Blog | Blazor 0.7.0 experimental release now available~ https://devblogs.microsoft.com/aspnet/blazor-0-7-0-experimental-release-now-available/ -ASP.NET Core での Blazor の概要 | Microsoft Docs~ https://docs.microsoft.com/ja-jp/aspnet/core/blazor/ ---- Tags: [[:.NET開発]], [[:.NET Core]], [[:ASP.NET]], [[:ASP.NET Web API]], [[:ASP.NET SPA]], [[:JavaScript]]
