.NET ヘルプ

Blazorフレームワークとは（開発者向けチュートリアルの仕組み）

公開済み 2023年1月31日

共有:

Blazorは、2018年にMicrosoftによって発表されたASP.NETフレームワークです。Blazorフレームワークの登場は、開発者がJavaScriptの代わりにC#を使用してシングルページWebアプリケーションを作成できるようになったため、有益でした。

Blazor を使用すると、WebAssembly を使用してブラウザで実行する C# を使用してインタラクティブな Web UI を構築できます。(「Wasm」と略される). Blazor アプリは、C#、HTML、および CSS を使用して実装された再利用可能な Web UI コンポーネントで構成されています。クライアントコードとサーバーコードの両方がC#で記述されているため、コードやライブラリを共有することができます。

Blazorは、WebAssemblyを使用してクライアント側のC#コードをブラウザで直接実行することができます。 WebAssembly上で動作する.NETなので、アプリケーションのサーバーサイド部分のコードやライブラリを再利用できます。

あるいは、Blazorはサーバー上でクライアントロジックを実行することができます。クライアントUIイベントは、リアルタイムメッセージングフレームワークであるSignalRを使用してサーバーに送信されます。実行が完了すると、必要なUIの変更がクライアントに送信され、Document Object Modelに統合されます。(DOM（文書オブジェクトモデル）).

WebAssemblyとは何ですか？

Blazor WebAssembly は単一ページアプリケーションです(シングルページアプリケーション).NETを使用してインタラクティブなクライアントサイドのWebアプリを構築するためのフレームワーク。 Blazor WebAssemblyは、プラグインや他の言語への再コンパイルなしで開発できるオープンなウェブ標準を使用しています。 Blazor WebAssemblyはすべての最新のウェブブラウザで動作します。

WebAssemblyによってWebブラウザ内で.NETコードを実行することが可能になります。 WebAssemblyは、高速ダウンロードと最大実行速度に最適化されたコンパクトなバイトコード形式です。 WebAssemblyはオープンウェブ標準であり、プラグインなしでウェブブラウザーでサポートされています。

WebAssemblyコードはJavaScriptを介してブラウザの全機能にアクセスできます。 JavaScript相互運用性として知られており、_JavaScript interopまたはJS interop_と略されることがよくあります。 WebAssembly経由で実行される.NETコードは、クライアントマシン上での悪意のある動作から保護するために、ブラウザのJavaScriptサンドボックス内で実行されます。

ネイティブアプリを構築する

既存のBlazor Web UIコンポーネントを使用して、Blazor Hybridでネイティブクライアントアプリを構築することができます。 Blazorコンポーネントは、ネイティブクライアントの機能へのフルアクセスを利用しながら、モバイル、デスクトップ、およびウェブで共有できます。 Blazor Hybrid を使用して、.NET Multi-platform App UI でクロスプラットフォームアプリを構築できます。(MAUI)または、既存のWindows Presentation Foundationを最新化するために(WPF)Windowsフォームアプリケーション。

Blazorハイブリッドアプリでは、Razorコンポーネントがデバイス上でネイティブに実行されます。コンポーネントはローカルのインターロップチャネルを介して埋め込みWebビューコントロールにレンダリングされます。コンポーネントはブラウザ上で実行されず、WebAssemblyは関与しません。 Razorコンポーネントは、迅速にコードを読み込みおよび実行し、.NETプラットフォームを通じてデバイスのネイティブ機能に完全にアクセスできます。

Blazorアプリの動作をよりよく理解するために、デモアプリケーションを作成しましょう。

Blazorサーバーアプリケーションの作成

最初のBlazorアプリを作成するには、新しいVisual Studioプロジェクトを作成する必要があります。

Visual Studioを開きます。
「Create New Project」ボタンをクリックしてください。
Blazor Server アプリテンプレートを選択してください。
「次へ」ボタンをクリックしてください。
アプリケーションに名前を付けてください。
「次へ」ボタンをクリックしてください。
ターゲットフレームワークを選択してください。
「プロジェクト作成」ボタンをクリックしてください。

以下のように新しいプロジェクトが作成されます。

いくつかのファイルが作成され、すぐに実行可能なシンプルなBlazorアプリが提供されました。
Program.cs は、サーバーを開始し、アプリケーションサービスとミドルウェアを構成するためのアプリのエントリーポイントです。
App.razorはアプリのルートコンポーネントです。
Pagesディレクトリには、アプリ用のいくつかのサンプルウェブページが含まれています。
Propertiesディレクトリ内のlaunchSettings.jsonファイルは、ローカル開発環境の異なるプロファイル設定を定義します。プロジェクト作成時にポート番号が自動的に割り当てられ、このファイルに保存されます。

このテンプレートアプリを実行してください。

Blazorアプリの実行

テンプレートには、自動的に作成される3つのBlazorコンポーネントがあります。

ホームコンポーネント

サイドメニューの「Counter」をクリックします。ボタンをクリックすると、ページを変更またはリロードすることなくカウンターが増加することがわかります。通常、Webアプリケーションでカウンターを動的にインクリメントするにはJavaScriptが必要ですが、Blazorを使用するとC#でこれを実現できます。これがASP.NET開発者がBlazorを非常に気に入っている理由です。それにより、.NET開発者はウェブアプリを迅速かつ簡単に構築できます。

カウンターコンポーネント

私たちは、ソリューション内のPagesフォルダーにあるCounter.razorファイル内のCounterコンポーネントのコードを見ることができます。

@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Friend page "/counter" (Of h1) Counter</h1> (Of p) Current count
	Inherits currentCount</p> <button class="btn btn-primary" onclick="IncrementCount"> Click [me]</button> code

	Private currentCount As Integer = 0

	Private Sub IncrementCount()
		currentCount += 1
	End Sub
End Class

VB C#

ブラウザで /counter へのリクエストは、上部の @page 指示によって指定されるとおり、Counter コンポーネントがその内容をレンダリングする原因となります。

Click meボタンが選択されるたびに：

onclickイベントが実行されます。
インクリメントカウントメソッドが呼び出されます。
currentCountが増加されます。
コンポーネントは更新されたカウントを表示するようにレンダリングされます。

各 .razor ファイルは、再利用可能なUIコンポーネントを定義します。

Visual StudioでIndex.razorファイルを開きます。プロジェクト作成時に作成されたため、Index.razorファイルは既に存在しています。それは、先ほど作成したBlazorAppディレクトリ内のPagesフォルダにあります。

フェッチコンポーネント

「Fetch Component」という別のコンポーネントがあります。このコンポーネントは、バックエンドサーバーサイド開発に使用されるサービスも注入します。このコードを置き換えて、URLからPDFを生成し、Blazorウェブ開発の力をよりよく理解しましょう。

URL から PDF を生成

まず最初に、PDFファイルを生成するためのサードパーティライブラリをインストールする必要があります。使用するライブラリはIronPDF - .NET用PDF生成ツール. 使いやすく、多くの機能を含んでおり、開発のために無料です。 BlazorアプリでIronPDFを使用する詳細についてはIronPDF Blazorドキュメント.

IronPDF NuGetパッケージをインストールする

Blazor WebAssemblyアプリにIronPDFのNuGetパッケージを通常のASP.NET Coreアプリケーションと同様にインストールすることもできます。

NuGet パッケージマネージャーコンソールを開き、次のコマンドを入力してください:

Install-Package IronPdf

ライブラリは以下のようにインストールされます。

FetchData.razor ファイルからすべての既存のコードを削除し、以下のコードサンプルを追加してください：

@page "/fetchdata"

@using myBlazorAPP.Data
@inject WeatherForecastService ForecastService

<h1>Generate PDF FROM URL</h1>
<p>This component demonstrates generating PDF from URL using IronPDF in Blazor Application</p>
<input type="text" @bind="URL" placeholder="URL HERE..."/>
<button @onclick="generatePDF" > Generate PDF </button>

@code {

    private string URL { get; set; }
    protected async Task generatePDF()
    {
        await ForecastService.GeneratePDFfromURL(URL);
    }
}

@page "/fetchdata"

@using myBlazorAPP.Data
@inject WeatherForecastService ForecastService

<h1>Generate PDF FROM URL</h1>
<p>This component demonstrates generating PDF from URL using IronPDF in Blazor Application</p>
<input type="text" @bind="URL" placeholder="URL HERE..."/>
<button @onclick="generatePDF" > Generate PDF </button>

@code {

    private string URL { get; set; }
    protected async Task generatePDF()
    {
        await ForecastService.GeneratePDFfromURL(URL);
    }
}

'INSTANT VB TODO TASK: The following line could not be converted:
page "/fetchdata" [using] myBlazorAPP.Data inject WeatherForecastService ForecastService (Of h1) Generate PDF FROM URL</h1> (Of p) This component demonstrates generating PDF from URL using IronPDF in Blazor Application</p> <input type="text" bind="URL" placeholder="URL HERE..."/> <button onclick="generatePDF" > Generate PDF </button> code
If True Then

	private String URL {get;set;}
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	protected async Task generatePDF()
'	{
'		await ForecastService.GeneratePDFfromURL(URL);
'	}
End If

VB C#

上記は、PDFファイルを生成するためのクライアント側のBlazorコードです。次のように定義されています。ボタン一つと入力ボックス一つ。入力フィールドはURL変数にバインドされています。

では、アプリケーションのためのサーバーサイドコードを書きましょう。

WeatherForecastService.csファイルを開き、既存のコードをすべて次のコードスニペットに置き換えます。

using System;
using System.Linq;
using System.Threading.Tasks;
using IronPdf;

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        public async Task GeneratePDFfromURL (string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDoc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDoc.SaveAs(@"myFile.pdf");
        }
    }
}

using System;
using System.Linq;
using System.Threading.Tasks;
using IronPdf;

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        public async Task GeneratePDFfromURL (string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDoc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDoc.SaveAs(@"myFile.pdf");
        }
    }
}

Imports System
Imports System.Linq
Imports System.Threading.Tasks
Imports IronPdf

Namespace myBlazorAPP.Data
	Public Class WeatherForecastService
		Public Async Function GeneratePDFfromURL(ByVal URL As String) As Task
			Dim renderer As New ChromePdfRenderer()
			Dim pdfDoc = Await renderer.RenderUrlAsPdfAsync(URL)
			pdfDoc.SaveAs("myFile.pdf")
		End Function
	End Class
End Namespace

VB C#

アプリケーションを実行して出力を確認しましょう。

入力ボックスにURLを貼り付け、「Generate PDF」をクリックしてください。 PDFファイルが生成され、アプリフォルダ内でファイルを確認できます。

以下のようにPDFファイルを開きます。

次のわずか3行のコードで、URLからPDFを生成しました。これがIronPDFの力です。

IronPDFはIron Softwareによって提供されており、これはソフトウェアのIron Suite製品. 以下の方法で、5つの製品を2つの製品の購入費で購入することができます:完全なIron Suiteを入手する.

サマリー

Blazor は、インタラクティブなクライアントサイド Web UI を構築するためのフレームワークです。Microsoftの.NET Framework.

JavaScriptの代わりにC#を使用して、リッチなインタラクティブUIを作成します。
.NET で記述されたサーバーサイドおよびクライアントサイドのアプリロジックを共有する。
UIをHTMLおよびCSSとしてレンダリングし、モバイルブラウザを含む広範なブラウザサポートを実現します。
Dockerなどの最新のホスティングプラットフォームと統合します。
.NETおよびBlazorを使用してハイブリッドデスクトップおよびモバイルアプリを構築します。

クライアントサイドのウェブ開発に.NETを使用することには次の利点があります：
JavaScriptではなくC#でコードを書く。
既存の.NETライブラリの.NETエコシステムを活用します。
サーバーとクライアントの間でアプリのロジックを共有します。
.NETのパフォーマンス、信頼性、およびセキュリティの恩恵を受ける。
開発環境であるVisual StudioやVisual Studio Codeを使用して、Windows、Linux、またはmacOS上で生産性を維持しましょう。
安定しており、機能が豊富で使いやすい共通の言語、フレームワーク、ツールのセットを基盤に構築します。