Razor クラス ライブラリの作成と概念
Web アプリケーションのコンポーネントにより、開発者はアプリケーション全体でアプリケーション ユーザー インターフェイスの一部を再利用できます。 開発者は、Razor クラス ライブラリを使用して、これらのコンポーネントを多くのアプリケーション間で共有し、再利用することができます。
このユニットでは、Razor クラス ライブラリを作成する方法と、それを使用して、Blazor アプリケーションをカスタマイズおよび表示するために、レンダリングされた静的コンテンツを共有する方法について学習します。
Razor クラス ライブラリについて
Razor クラス ライブラリは、Razor コンポーネント、ページ、HTML、CSS (カスケード スタイル シート) ファイル、JavaScript、画像、および Blazor アプリケーションで参照できるその他の静的 Web コンテンツを含む .NET プロジェクトの種類です。 Razor クラス ライブラリは、他の .NET クラス ライブラリ プロジェクトと同様に、NuGet パッケージとしてバンドルし、NuGet.org などの NuGet パッケージ リポジトリ上で共有できます。
Razor クラス ライブラリを作成するための既定のテンプレートを見てみましょう。
既定のテンプレートを使用してプロジェクトを作成する
必要に応じて、Visual Studio で [ファイル]>[新しいプロジェクト] を選択して、Razor クラス ライブラリの作成を開始することもできます。
次のコマンドを実行して、コマンド ライン インターフェイスでプロジェクトを作成することもできます。
dotnet new razorclasslib -o MyProjectName
このテンプレートでは、コンポーネントで使用できるいくつかの重要な機能を含む Component1 という名前の初期コンポーネントが提供されます。
- Component1.razor.css という名前の分離されたカスケード スタイル シート。Component1.razor と同じフォルダーに格納されます。 Component1.razor.css ファイルは、Component1 を参照する Blazor アプリケーションに条件付きで含まれます。
- イメージや JavaScript ファイルなどの静的コンテンツ。実行時に Blazor アプリケーションで使用でき、Component1 内で参照されます。 このコンテンツは、ASP.NET Core または Blazor アプリケーションの wwwroot フォルダーと同様に動作する wwwroot フォルダーに配信されます。
- 含まれている JavaScript ファイルに存在する関数を実行する .NET コード。
クラス ライブラリと Razor クラス ライブラリの違い
クラス ライブラリは .NET アプリケーションの一般的なパッケージ配信構造であり、Razor クラス ライブラリはプロジェクト ファイルに構成される他のいくつかの機能と構造が似ています。
<Project Sdk="Microsoft.NET.Sdk.Razor">
<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
<ItemGroup>
<SupportedPlatform Include="browser" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" />
</ItemGroup>
</Project>
- プロジェクト ファイルには、Microsoft.NET.Sdk.Razor への SDK 参照が含まれており、Razor クラス ライブラリとして Razor コンテンツが含まれていてそれらを作成することを宣言します。
SupportedPlatformエントリで、このライブラリをbrowserプラットフォーム (つまり WebAssembly) で使用できることを宣言しています。Microsoft.AspNetCore.Components.WebライブラリへのPackageReferenceにより、フレームワークに同梱されている基本 Blazor コンポーネントにアクセスできます。 これにより、それらの単純なコンポーネントを使用して、より複雑なコンポーネントを作成できます。
Razor コンポーネントのコンテンツ
提供される初期の Razor コンポーネントは単純です。 これには、短いテキスト ブロックを含む HTML div 要素のみが含まれます。
<div class="my-component">
This component is defined in the <strong>FirstRazorLibrary</strong> library.
</div>
このコンポーネントでは、同じプロジェクトで提供されるコンポーネントで予期される動作と同様に、それを参照する他の Blazor コンポーネントやページとやり取りします。 つまり、Component1.razor.css ファイルの CSS 分離スクリプトは、application.css ファイル内のアプリケーションの残りの CSS と調和するようにレンダリングされます。
静的資産の提供
wwwroot フォルダーの内容は、そのフォルダーの他のコンテンツとコンポーネントの個々の CSS ファイル (Component1.razor.css など) の間で、同じ基本フォルダー内のファイルとして相対的に参照できます。 たとえば、既定の CSS では、2 ピクセルの赤い破線の境界線と、wwwroot フォルダー内の background.png 画像を使う背景画像スタイルが追加されます。 CSS から wwwroot フォルダーに存在するコンテンツへのこの参照を行う場合、パスは必要ありません。
.my-component {
border: 2px dashed red;
padding: 1em;
margin: 1em 0;
background-image: url('background.png');
}
wwwroot フォルダーのコンテンツは、次の形式の絶対フォルダー参照を使用して、ホストされている Blazor アプリケーションで参照できます。
/_content/{PACKAGE_ID}/{PATH_AND_FILENAME_INSIDE_WWWROOT}
Razor クラス ライブラリを参照する
ディスク上で、ライブラリを参照する Blazor アプリケーションの横に Razor クラス ライブラリが存在する .NET ソリューションでは、Visual Studio の標準の [参照の追加] ダイアログを使用するか、次に示す .NET CLI の add reference コマンドを使用して、Razor クラス ライブラリを参照するように Blazor アプリケーションを更新できます。
dotnet add reference ../MyClassLibrary
NuGet パッケージ形式で提供されるライブラリの場合は、Visual Studio の NuGet パッケージ インストーラーを使用するか、次に示す .NET CLI の add package コマンドを使用して、参照を追加できます。
dotnet add package MyClassLibrary