Razor コンポーネント : 開発者向けの働き

Razor Componentsとは

Razor Componentsは、C#とHTMLを組み合わせてウェブページを構築できるASP.NET CoreのUIフレームワークで、サーバーサイドのロジックをクライアントサイドで実行する機能も備えています。Razor ComponentsはBlazorフレームワークの一部であり、WebAssembly (Wasm) または SignalR を使用してブラウザ内でC#コードを実行するクライアントサイドのウェブUIフレームワークです。 Razor Componentsは、モダンなウェブアプリケーションを構築するためのコンポーネントベースのアーキテクチャを提供します。このアーキテクチャでは、UIを小さく自己完結型のコンポーネントに分割し、それらを組み合わせて完全なウェブページを作成できます。

Razor ComponentsはRazor構文と呼ばれるマークアップ言語を使用し、これはC#とHTMLを組み合わせたもので、サーバーサイドとクライアントサイドのコードをシームレスに統合できます。 Razor Componentsは、React、Angular、およびVueなどの他のコンポーネントベースのUIフレームワークに似ていますが、C#で記述されており、ホスティングモデル（WebAssemblyまたはSignalR）に応じてサーバーまたはクライアントサイドで実行される点が異なります。

Razor Componentsの利点

Razor Componentsはウェブ開発者にいくつかの利点を提供します。

Razor Componentの始め方

Razor Componentsを始めるには、システムに.NET Core 3.0以降をインストールする必要があります。 Visual Studioまたは.NET Core CLIでBlazorテンプレートを使用して新しいASP.NET Coreプロジェクトを作成します。

dotnet new blazorserver

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

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

この例では、"Counter"というRazorコンポーネントがあり、クリックすると currentCount 変数が増加するボタンがあります。 @code ブロックは、コンポーネントの C# コードを定義するために使用されます。

カスタムRazorコンポーネントを作成する

プロジェクト内で"Components"という新しいフォルダーを作成し、そこでRazor Componentsを保存します。

"Components"フォルダー内に".razor"拡張子付きの新しいRazor Componentファイルを追加します。 このファイルにはコンポーネントのC#とHTMLコードが含まれます。

Razor Componentファイルを開いて、Razor構文でコンポーネントを定義します。 Razor構文を使用すると、1つのファイルでC#とHTMLコードを組み合わせて、動的なウェブページを簡単に作成できます。 例えば、次のようにシンプルなRazor Componentを定義することができます。

<h1>Hello, World!</h1>
<p>This is a Razor Component.</p>

@code {
    // C# code for the component can be added here
}

Razor Componentタグ名を使用してHTMLマークアップに含めることで、ウェブアプリケーションの他の部分でRazor Componentを使用できます。 例えば、メインRazorページで次のようにコンポーネントを使用できます。

<MyComponent />

また、コンポーネントパラメータを使用してRazor Componentにデータを渡すこともできます。 コンポーネントパラメータにより、親コンポーネントから子コンポーネントへのデータの受け渡しが可能になり、コンポーネント間の通信が行えます。 例えば、コンポーネントに以下のようにパラメータを定義することができます。

@code {
    [Parameter]
    public string Message { get; set; }
}

そして、以下のようにRazor Componentクラスでコンポーネントパラメーターを使用します。

<p>@Message</p>

また、親コンポーネントからコンポーネントにデータを渡すこともできます。

<MyComponent Message="Hello from parent component!" />

Razor Componentsはクライアントサイドで実行可能なサーバーサイドのロジックを含むこともできます。例えば、処理ロジックを書いたり、HTTPリクエストを行ったり、ユーザーイベントを処理したり、C#コードを使用してRazor Componentsから他のサーバーサイド操作を直接実行することができます。 これにより、JavaScriptコードを書くことなく、動的かつインタラクティブなウェブページを作成できます。

再利用可能なRazor Componentsの作成

Razor Componentsの利点の一つは、複数のページやアプリケーションで使用できる再利用可能なUIコンポーネントを作成できることです。 再利用可能なコンポーネントを作成するには、プロジェクトの"Shared"フォルダーに新しい".razor"ファイルを作成します。

例えば、書籍のリストを表示するコンポーネントを作成する場合を考えてみましょう。 次のように、"Shared"フォルダに新しい BookList.razor ファイルを作成できます。

次のようにRazorコンポーネントを定義できます。

@typeparam TItem

@foreach (var book in Books)
{
    <p>@book.Title by @book.Author</p>
}

@code {
    [Parameter]
    public List<TItem> Books { get; set; }
}

この例では、 Razorパラメータとして"Book"オブジェクトのリストを受け取る BookList というコンポーネントがあります。 @foreach ループはリストを反復処理し、各書籍のタイトルと著者を表示するために使用されます。

次のセクションでは、IronPDFをRazor Componentsと連携して、ウェブアプリケーションからPDFファイルを生成する方法を見ていきます。

Razor ComponentsでIronPDFを使用する

IronPDFは、開発者がHTML、CSS、JavaScriptからPDFファイルを作成できるC#ライブラリです。 これは、Google Chromeを動かすオープンソースのブラウザであるChromiumの上に構築されています。 IronPDFを使用すると、開発者はRazor ComponentsをHTMLに簡単に変換してからPDFファイルを作成できます。

IronPDFはHTMLからPDFへの変換を得意とし、レイアウトやスタイルが損なわれないようにします。 これは、レポート、請求書、ドキュメントなど、ウェブベースのコンテンツからPDFを生成するのに特に便利です。 HTMLファイル、URL、およびHTML文字列を簡単にPDFファイルに変換することができます。

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

IronPDFのインストール

Razor ComponentsでIronPDFを使用するには、まずIronPDF NuGetパッケージをインストールする必要があります。 これを行うには、次の手順に従ってください:

1. Visual Studioでプロジェクトを開きます。
2. プロジェクトを右クリックし、"NuGetパッケージの管理"を選択します。
3. "IronPDF"を検索し、IronPDFパッケージを選択します。
4. "インストール"をクリックしてパッケージをインストールします。

IronPDF NuGetパッケージをインストールした後、Razor Componentsアプリケーションでそれを使用できます。

パッケージをインストールすると、IronPdf.ChromePdfRenderer クラスを使用して、 Razorコンポーネントから新しい PDF ファイルを作成できます。

ASP.NET Core Razorコンポーネントで PDF ファイルを作成するには、HTML 構文文字列、HTML ファイル、または URL を IronPdf.ChromePdfRenderer メソッドに渡すことができます。 例えば、カウンターのインクリメントを伴うPDFファイルを作成する場合を考えてみましょう。

var renderer = new IronPdf.ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" + currentCount + "</h1>");
pdf.SaveAs("myPdf" + currentCount + ".pdf");

var renderer = new IronPdf.ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" + currentCount + "</h1>");
pdf.SaveAs("myPdf" + currentCount + ".pdf");

この例では、ChromePdfRenderer の新しいインスタンスを作成します。 次に、PdfDocument クラスの新しいインスタンスを作成し、文字列を RenderHtmlAsPdf メソッドに渡します。 最後に、PdfDocument.SaveAs メソッドを使用して、結果の PDF ファイルをディスクに保存します。

この例では、カウンターコンポーネントを修正しました。 カウンター ボタンの onClick 機能を変更しました。このボタンをクリックすると、カウンターのカウントを含む PDF が作成されます。

結論

この記事では、ウェブアプリケーションからPDFファイルを作成するためにRazor ComponentsとIronPDFを連携して使用する方法を探りました。 Razor Componentsの基本、IronPDFのインストールと使用方法を解説し、始めるためのコード例も提供しました。

Razor ComponentsとIronPDFは、強力で機能豊富なウェブアプリケーションを作成するためのツールです。 これらの技術を組み合わせることで、開発者は非常に機能的で視覚的に魅力的なウェブアプリケーションを作成することができます。

IronPDFは、RazorページやURLのPDFへの変換、さらにPDFドキュメントの読み取り、作成、操作にも使用できます。 IronPDFはヘッダーやフッター、ページ番号、デジタル署名、パスワードなど、既存または新たに生成されたPDFドキュメントに対する高度なPDF操作機能も提供します。 開発には無料ですが、プロダクションには無料のトライアルライセンスまたは商用ライセンスが必要です。