メッセージアイコン
  1. IronPDF
  2. IronPDFブログ
  3. .NET ヘルプ
  4. Blazorフレームワーク
.NET ヘルプ

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

更新済み 1月 31, 2023
共有:

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とは何か、そしてどのように機能するのか - 図1

    いくつかのファイルが作成され、すぐに実行可能なシンプルなBlazorアプリが提供されました。

  • Program.cs は、サーバーを開始し、アプリケーションサービスとミドルウェアを構成するためのアプリのエントリーポイントです。
  • App.razorはアプリのルートコンポーネントです。
  • Pagesディレクトリには、アプリ用のいくつかのサンプルウェブページが含まれています。

  • Propertiesディレクトリ内のlaunchSettings.jsonファイルは、ローカル開発環境の異なるプロファイル設定を定義します。 プロジェクト作成時にポート番号が自動的に割り当てられ、このファイルに保存されます。

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

Blazorアプリの実行

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

ホームコンポーネント

Blazorとは何か、およびその仕組み - 図2

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

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

Blazorとは何かその仕組み - 図3

私たちは、ソリューション内の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. 使いやすく、多くの機能を含んでおり、開発のために無料です。 BlazorアプリでIronPDFを使用する方法について詳しく知るには、こちらの資料を読んでください。 Blazorチュートリアル.

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

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

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

Install-Package IronPdf

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

Blazorとは何か、どのように動作するのか - 図4

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#

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

Blazorとは何か、そしてその仕組み - 図5

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

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

Blazorとは何か、その仕組み - 図6

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

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

サマリー

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

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

  • Dockerなどの最新のホスティングプラットフォームと統合します。

  • .NETおよびBlazorを使用してハイブリッドデスクトップおよびモバイルアプリを構築します。

    クライアントサイドのウェブ開発に.NETを使用することには次の利点があります：

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

問題を報告

準備はできましたか？ バージョン: 2024.9 新発売

無料のNuGetダウンロード 総ダウンロード数: 10,659,073 View Licenses >

無料で手に入れましょう

30日間の試用キー 即座に。

15日間のトライアルキー 即座に。

bullet_checkedクレジットカードやアカウント作成は不要です。
試用フォームが送信されました
成功しました。

あなたのトライアルキーはメールの中にあります。
お問い合わせは、
support@ironsoftware.com

バレットテスト本番環境でのテスト
透かしなし
バレットカレンダー30日間完全に
機能的な製品
弾丸_サポート24/5 テクニカル
体験期間中のサポート

ありがとう！

ライセンスキーが指定されたメールアドレスに送られました。お問い合わせ

24時間アップグレードオファー:

Save 50% で
プロフェッショナル アップグレード

Go プロフェッショナル 10人の開発者をカバーするために
無制限のプロジェクト。

時間

:

分

:

秒

プロフェッショナルにアップグレード

アップグレード

プロフェッショナル

$600 米ドル

$299 米ドル

  • 10人の開発者
  • 10 個のロケーション
  • 10プロジェクト
本日 以下の内容を日本語に翻訳してください: この操作を実行するには、最新のIronPDF for .NETをインストールする必要があります。インストール手順については、公式ウェブサイトのドキュメントを参照してください。

2つの価格で5つの.NET製品

IronPDF IronOCR IronXL IronBarcode IronWebscraper

総合スイート価値:

$7,192 米ドル

アップグレード価格

本日
以下の内容を日本語に翻訳してください: この操作を実行するには、最新のIronPDF for .NETをインストールする必要があります。インストール手順については、公式ウェブサイトのドキュメントを参照してください。

$499 米ドル

24時間後

$1,098 米ドル

無料トライアルを開始 無料トライアルを開始

完全に機能する製品、キーを即座に取得