Razor クラス ライブラリの作成と概念
- 5 分
Web アプリケーションのコンポーネントを使用すると、開発者はアプリケーション ユーザー インターフェイスの一部をアプリケーション全体で再利用できます。 Razor クラス ライブラリを使用することで、開発者はこれらのコンポーネントを多くのアプリケーションで共有および再利用できます。
このユニットでは、Razor クラス ライブラリを作成する方法について説明します。 次に、Blazor アプリケーションがカスタマイズして表示できるように、レンダリングされた静的コンテンツを共有するために使用します。
Razor クラス ライブラリ
Razor クラス ライブラリは、.NET プロジェクトの種類です。 これには、Razor コンポーネント、ページ、HTML、カスケード スタイル シート (CSS) ファイル、JavaScript、イメージ、Blazor アプリケーションが参照できるその他の静的 Web コンテンツが含まれています。 他の .NET クラス ライブラリ プロジェクトと同様に、Razor クラス ライブラリは NuGet パッケージとしてバンドルされ、NuGet.org などの NuGet パッケージ リポジトリで共有できます。
Razor クラス ライブラリを作成するための既定のテンプレートを見てみましょう。
既定のテンプレートを使用してプロジェクトを作成する
必要に応じて、[ ファイル>新しいプロジェクト] を選択して、Visual Studio で Razor クラス ライブラリの作成を開始できます。
![Visual Studio の [Create a new project]\(新しいプロジェクトの作成\) ペインの Razor コンポーネント ライブラリ テンプレート のリンクのスクリーンショット。](../../aspnetcore/blazor-build-reusable-components/media/visual-studio-create.png)
次のコマンドを実行して、コマンド ライン インターフェイスでプロジェクトを作成することもできます。
dotnet new razorclasslib -o MyProjectName
このテンプレートは 、Component1 という名前の初期コンポーネントを提供します。これには、コンポーネントで使用できるいくつかの重要な機能が含まれています。
- Component1.razor と同じフォルダーに格納される、Component1.razor.cssという名前の分離されたカスケード スタイル シート。 Component1.razor.css ファイルは、Component1 を参照する Blazor アプリケーションに条件付きで含まれます。
- イメージや JavaScript ファイルなどの静的コンテンツ。これは、実行時に Blazor アプリケーションで使用でき、 Component1 内で参照されます。 このコンテンツは 、ASP.NET Core または Blazor アプリケーションの wwwroot フォルダーと同じように動作する wwwroot フォルダーに配信されます。
- .NET コード。含まれている JavaScript ファイルに存在する関数を実行します。
クラス ライブラリと 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) で使用できることを宣言します。 -
PackageReferenceライブラリへのMicrosoft.AspNetCore.Components.Webにより、フレームワークに付属している基本 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 フォルダーの内容は、そのフォルダーの他の内容の中から比較的参照できます。 また、 Component1.razor.cssなどのコンポーネントの個々の CSS ファイルを、同じベース フォルダー内のファイルとして比較的参照することもできます。 たとえば、既定の CSS では、wwwroot フォルダー内の background.png イメージを使用する 2 ピクセルの破線の赤い境界線と背景画像スタイルが追加されます。 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