ASP.NET Core Blazor プロジェクトの構造

この記事では、Blazor プロジェクト テンプレートから生成された Blazor アプリを構成するファイルとフォルダーについて説明します。

Blazor Server

Blazor Server プロジェクト テンプレート: blazorserverblazorserver-empty

Blazor Server テンプレートによって、Blazor Server アプリの初期ファイルとディレクトリの構造が作成されます。

  • blazorserver テンプレートを使用する場合、アプリは以下と共に設定されます。
    • 天気予報サービス (WeatherForecastService) からデータを読み込む FetchData コンポーネントと、Counter コンポーネントを使用したユーザー操作のためのデモ コード。
    • Bootstrap フロントエンド ツールキット。
  • blazorserver-empty テンプレートを使用する場合、アプリはデモ コードと Bootstrap なしで作成されます。

プロジェクトの構造:

  • Data フォルダー:アプリの FetchData コンポーネントに気象データの例を提供する、WeatherForecast クラスと WeatherForecastService の実装が含まれます。

  • Pages フォルダー:Blazor アプリと Blazor Server アプリのルート Razor ページを構成するルーティング可能なコンポーネントまたはページ (.razor) が含まれています。 各ページのルートは、@page ディレクティブを使用して指定します。 テンプレートには以下が含まれています。

    • _Host.cshtml: Razor ページとして実装されるアプリのルート ページ。
      • アプリのいずれかのページが最初に要求されると、このページが表示されて応答として返されます。
      • [ホスト] ページは、ルート App コンポーネント (App.razor) を表示する場所を指定します。
    • Counter コンポーネント (Counter.razor): カウンター ページを実装します。
    • Error コンポーネント (Error.razor): アプリでハンドルされない例外が発生したときに表示されます。
    • FetchData コンポーネント (FetchData.razor): フェッチ データ ページを実装します。
    • Index コンポーネント (Index.razor): Home ページを実装します。
  • Properties/launchSettings.json:開発環境の構成を保持します。

  • Shared フォルダー:次の共有コンポーネントおよびスタイルシートが含まれています。

    • MainLayout コンポーネント (MainLayout.razor): アプリのレイアウト コンポーネント
    • MainLayout.razor.css: アプリのメイン レイアウト用のスタイルシート。
    • NavMenu コンポーネント (NavMenu.razor): サイドバー ナビゲーションを実装します。 ナビゲーション リンクを他の Razor コンポーネントに表示する NavLink コンポーネント (NavLink) が含まれます。 NavLink コンポーネントは、そのコンポーネントが読み込まれると、自動的に選択された状態を示します。これは、ユーザーが現在どのコンポーネントが表示されているかを理解するために役立ちます。
    • NavMenu.razor.css: アプリのナビゲーション メニュー用のスタイルシート。
    • SurveyPrompt コンポーネント (SurveyPrompt.razor): Blazor のアンケート用コンポーネント。
  • wwwroot:アプリのパブリックな静的アセットを含むアプリの Web ルート フォルダー。

  • _Imports.razor:名前空間の @using ディレクティブなど、アプリのコンポーネント (.razor) に含める一般的な Razor ディレクティブが含まれます。

  • App.razor:Router コンポーネントを使用してクライアント側のルーティングを設定するアプリのルート コンポーネント。 Router コンポーネントは、ブラウザーのナビゲーションをインターセプトし、要求されたアドレスに一致するページをレンダリングします。

  • appsettings.json および環境アプリ設定ファイル:アプリの構成設定を指定します。

  • Program.cs: ASP.NET Core ホストを設定するアプリのエントリ ポイントであり、サービス登録や要求処理パイプライン構成など、アプリのスタートアップ ロジックが含まれています。

    • アプリの依存関係の挿入 (DI) サービスを指定します。 AddServerSideBlazor を呼び出すことによってサービスが追加されます。WeatherForecastService は、サンプルの FetchData コンポーネントで使用するためにサービス コンテナーに追加されます。
    • アプリの要求処理パイプラインを構成します。
      • MapBlazorHub は、ブラウザーとのリアルタイム接続用のエンドポイントを設定するために呼び出されます。 この接続は SignalR で作成されます。これは、アプリにリアルタイム Web 機能を追加するためのフレームワークです。
      • MapFallbackToPage("/_Host") は、アプリ (Pages/_Host.cshtml) のルート ページを設定し、ナビゲーションを有効にするために呼び出されます。

追加のオプションが構成されている場合は、Blazor Server プロジェクト テンプレートから生成されたアプリで、追加のファイルとフォルダーが表示されることがあります。 たとえば、ASP.NET Core Identity でアプリを生成すると、認証と承認の機能に関する追加の資産が含まれます。

Blazor WebAssembly

Blazor WebAssembly プロジェクト テンプレート: blazorwasmblazorwasm-empty

Blazor WebAssembly テンプレートによって、Blazor WebAssembly アプリの初期ファイルとディレクトリの構造が作成されます。

  • blazorwasm テンプレートを使用する場合、アプリは以下と共に設定されます。
    • 静的資産 (weather.json) からデータを読み込む FetchData コンポーネントと、Counter コンポーネントを使用したユーザー操作のためのデモ コード。
    • Bootstrap フロントエンド ツールキット。
  • blazorwasm-empty テンプレートを使用する場合、アプリはデモ コードと Bootstrap なしで作成されます。

プロジェクトの構造:

  • Pages フォルダー:Blazor アプリを構成するルーティング可能なコンポーネントまたはページ (.razor) が含まれています。 各ページのルートは、@page ディレクティブを使用して指定します。 テンプレートには、以下のコンポーネントが含まれています。

    • Counter コンポーネント (Counter.razor): カウンター ページを実装します。
    • FetchData コンポーネント (FetchData.razor): フェッチ データ ページを実装します。
    • Index コンポーネント (Index.razor): Home ページを実装します。
  • Properties/launchSettings.json:開発環境の構成を保持します。

  • Shared フォルダー:次の共有コンポーネントおよびスタイルシートが含まれています。

    • MainLayout コンポーネント (MainLayout.razor): アプリのレイアウト コンポーネント
    • MainLayout.razor.css: アプリのメイン レイアウト用のスタイルシート。
    • NavMenu コンポーネント (NavMenu.razor): サイドバー ナビゲーションを実装します。 ナビゲーション リンクを他の Razor コンポーネントに表示する NavLink コンポーネント (NavLink) が含まれます。 NavLink コンポーネントは、そのコンポーネントが読み込まれると、自動的に選択された状態を示します。これは、ユーザーが現在どのコンポーネントが表示されているかを理解するために役立ちます。
    • NavMenu.razor.css: アプリのナビゲーション メニュー用のスタイルシート。
    • SurveyPrompt コンポーネント (SurveyPrompt.razor): Blazor のアンケート用コンポーネント。
  • wwwroot: アプリのパブリックな静的資産が含まれる、アプリの Web ルート フォルダー。構成設定のための appsettings.json と環境アプリ設定ファイルなどが含まれます。 index.html Web ページは、HTML ページとして実装されるアプリのルート ページです。

    • アプリのいずれかのページが最初に要求されると、このページが表示されて応答として返されます。
    • このページは、ルート App コンポーネントを表示する場所を指定します。 コンポーネントは、appid (<div id="app">Loading...</div>) を持つ div DOM 要素の位置にレンダリングされます。
  • _Imports.razor:名前空間の @using ディレクティブなど、アプリのコンポーネント (.razor) に含める一般的な Razor ディレクティブが含まれます。

  • App.razor:Router コンポーネントを使用してクライアント側のルーティングを設定するアプリのルート コンポーネント。 Router コンポーネントは、ブラウザーのナビゲーションをインターセプトし、要求されたアドレスに一致するページをレンダリングします。

  • Program.cs: WebAssembly ホストを設定するアプリのエントリ ポイントです。

    • App コンポーネントは、アプリのルート コンポーネントです。 App コンポーネントは、ルート コンポーネント コレクション (builder.RootComponents.Add<App>("#app")) に対する appid (wwwroot/index.html<div id="app">Loading...</div>) を持つ div DOM 要素として指定されます。
    • サービスが追加され、構成されます (例: builder.Services.AddSingleton<IMyDependency, MyDependency>())。

追加のオプションが構成されている場合は、Blazor WebAssembly プロジェクト テンプレートから生成されたアプリで、追加のファイルとフォルダーが表示されることがあります。 たとえば、ASP.NET Core Identity でアプリを生成すると、認証と承認の機能に関する追加の資産が含まれます。

<head> コンテンツの場所

Blazor Server アプリでは、<head> コンテンツは Pages/_Host.cshtml ファイル内にあります。

Blazor WebAssembly アプリでは、<head> コンテンツは wwwroot/index.html ファイル内にあります。

デュアル Blazor Server/Blazor WebAssembly アプリ

Blazor Server アプリ、または Blazor WebAssembly アプリのいずれかとして実行できるアプリを作成する方法の 1 つは、アプリのロジックとコンポーネントをすべて Razor クラス ライブラリ (RCL) に配置し、別の Blazor Server および Blazor WebAssembly プロジェクトからその RCL を参照することです。 ホスティング モデルに基づいて実装が異なる一般的なサービスの場合は、RCL でサービス インターフェイスを定義し、Blazor Server および Blazor WebAssembly プロジェクトでサービスを実装します。

その他の技術情報

Blazor Server

Blazor Server プロジェクト テンプレート: blazorserver

Blazor Server テンプレートによって、Blazor Server アプリの初期ファイルとディレクトリの構造が作成されます。 このアプリには、登録済みサービスからデータを読み込む FetchData コンポーネント、WeatherForecastService、および Counter コンポーネントとのユーザーの対話のためのデモンストレーション コードが設定されます。

  • Data フォルダー:アプリの FetchData コンポーネントに気象データの例を提供する、WeatherForecast クラスと WeatherForecastService の実装が含まれます。

  • Pages フォルダー:Blazor アプリと Blazor Server アプリのルート Razor ページを構成するルーティング可能なコンポーネントまたはページ (.razor) が含まれています。 各ページのルートは、@page ディレクティブを使用して指定します。 テンプレートには以下が含まれています。

    • _Host.cshtml: Razor ページとして実装されるアプリのルート ページ。
      • アプリのいずれかのページが最初に要求されると、このページが表示されて応答として返されます。
      • [ホスト] ページは、ルート App コンポーネント (App.razor) を表示する場所を指定します。
    • _Layout.cshtml: アプリの _Host.cshtml ルート ページのレイアウト ページ。
    • Counter コンポーネント (Counter.razor): カウンター ページを実装します。
    • Error コンポーネント (Error.razor): アプリでハンドルされない例外が発生したときに表示されます。
    • FetchData コンポーネント (FetchData.razor): フェッチ データ ページを実装します。
    • Index コンポーネント (Index.razor): Home ページを実装します。
  • Properties/launchSettings.json:開発環境の構成を保持します。

  • Shared フォルダー:次の共有コンポーネントおよびスタイルシートが含まれています。

    • MainLayout コンポーネント (MainLayout.razor): アプリのレイアウト コンポーネント
    • MainLayout.razor.css: アプリのメイン レイアウト用のスタイルシート。
    • NavMenu コンポーネント (NavMenu.razor): サイドバー ナビゲーションを実装します。 ナビゲーション リンクを他の Razor コンポーネントに表示する NavLink コンポーネント (NavLink) が含まれます。 NavLink コンポーネントは、そのコンポーネントが読み込まれると、自動的に選択された状態を示します。これは、ユーザーが現在どのコンポーネントが表示されているかを理解するために役立ちます。
    • NavMenu.razor.css: アプリのナビゲーション メニュー用のスタイルシート。
    • SurveyPrompt コンポーネント (SurveyPrompt.razor): Blazor のアンケート用コンポーネント。
  • wwwroot:アプリのパブリックな静的アセットを含むアプリの Web ルート フォルダー。

  • _Imports.razor:名前空間の @using ディレクティブなど、アプリのコンポーネント (.razor) に含める一般的な Razor ディレクティブが含まれます。

  • App.razor:Router コンポーネントを使用してクライアント側のルーティングを設定するアプリのルート コンポーネント。 Router コンポーネントは、ブラウザーのナビゲーションをインターセプトし、要求されたアドレスに一致するページをレンダリングします。

  • appsettings.json および環境アプリ設定ファイル:アプリの構成設定を指定します。

  • Program.cs: ASP.NET Core ホストを設定するアプリのエントリ ポイントであり、サービス登録や要求処理パイプライン構成など、アプリのスタートアップ ロジックが含まれています。

    • アプリの依存関係の挿入 (DI) サービスを指定します。 AddServerSideBlazor を呼び出すことによってサービスが追加されます。WeatherForecastService は、サンプルの FetchData コンポーネントで使用するためにサービス コンテナーに追加されます。
    • アプリの要求処理パイプラインを構成します。
      • MapBlazorHub は、ブラウザーとのリアルタイム接続用のエンドポイントを設定するために呼び出されます。 この接続は SignalR で作成されます。これは、アプリにリアルタイム Web 機能を追加するためのフレームワークです。
      • MapFallbackToPage("/_Host") は、アプリ (Pages/_Host.cshtml) のルート ページを設定し、ナビゲーションを有効にするために呼び出されます。

追加のオプションが構成されている場合は、Blazor Server プロジェクト テンプレートから生成されたアプリで、追加のファイルとフォルダーが表示されることがあります。 たとえば、ASP.NET Core Identity でアプリを生成すると、認証と承認の機能に関する追加の資産が含まれます。

Blazor WebAssembly

Blazor WebAssembly プロジェクト テンプレート: blazorwasm

Blazor WebAssembly テンプレートによって、Blazor WebAssembly アプリの初期ファイルとディレクトリの構造が作成されます。 このアプリには、静的資産からデータを読み込む FetchData コンポーネント、weather.json、および Counter コンポーネントとのユーザーの対話のためのデモンストレーション コードが設定されます。

  • Pages フォルダー:Blazor アプリを構成するルーティング可能なコンポーネントまたはページ (.razor) が含まれています。 各ページのルートは、@page ディレクティブを使用して指定します。 テンプレートには、以下のコンポーネントが含まれています。

    • Counter コンポーネント (Counter.razor): カウンター ページを実装します。
    • FetchData コンポーネント (FetchData.razor): フェッチ データ ページを実装します。
    • Index コンポーネント (Index.razor): Home ページを実装します。
  • Properties/launchSettings.json:開発環境の構成を保持します。

  • Shared フォルダー:次の共有コンポーネントおよびスタイルシートが含まれています。

    • MainLayout コンポーネント (MainLayout.razor): アプリのレイアウト コンポーネント
    • MainLayout.razor.css: アプリのメイン レイアウト用のスタイルシート。
    • NavMenu コンポーネント (NavMenu.razor): サイドバー ナビゲーションを実装します。 ナビゲーション リンクを他の Razor コンポーネントに表示する NavLink コンポーネント (NavLink) が含まれます。 NavLink コンポーネントは、そのコンポーネントが読み込まれると、自動的に選択された状態を示します。これは、ユーザーが現在どのコンポーネントが表示されているかを理解するために役立ちます。
    • NavMenu.razor.css: アプリのナビゲーション メニュー用のスタイルシート。
    • SurveyPrompt コンポーネント (SurveyPrompt.razor): Blazor のアンケート用コンポーネント。
  • wwwroot: アプリのパブリックな静的資産が含まれる、アプリの Web ルート フォルダー。構成設定のための appsettings.json と環境アプリ設定ファイルなどが含まれます。 index.html Web ページは、HTML ページとして実装されるアプリのルート ページです。

    • アプリのいずれかのページが最初に要求されると、このページが表示されて応答として返されます。
    • このページは、ルート App コンポーネントを表示する場所を指定します。 コンポーネントは、appid (<div id="app">Loading...</div>) を持つ div DOM 要素の位置にレンダリングされます。
  • _Imports.razor:名前空間の @using ディレクティブなど、アプリのコンポーネント (.razor) に含める一般的な Razor ディレクティブが含まれます。

  • App.razor:Router コンポーネントを使用してクライアント側のルーティングを設定するアプリのルート コンポーネント。 Router コンポーネントは、ブラウザーのナビゲーションをインターセプトし、要求されたアドレスに一致するページをレンダリングします。

  • Program.cs: WebAssembly ホストを設定するアプリのエントリ ポイントです。

    • App コンポーネントは、アプリのルート コンポーネントです。 App コンポーネントは、ルート コンポーネント コレクション (builder.RootComponents.Add<App>("#app")) に対する appid (wwwroot/index.html<div id="app">Loading...</div>) を持つ div DOM 要素として指定されます。
    • サービスが追加され、構成されます (例: builder.Services.AddSingleton<IMyDependency, MyDependency>())。

追加のオプションが構成されている場合は、Blazor WebAssembly プロジェクト テンプレートから生成されたアプリで、追加のファイルとフォルダーが表示されることがあります。 たとえば、ASP.NET Core Identity でアプリを生成すると、認証と承認の機能に関する追加の資産が含まれます。

<head> コンテンツの場所

Blazor Server アプリでは、<head> コンテンツは Pages/_Layout.cshtml ファイル内にあります。

Blazor WebAssembly アプリでは、<head> コンテンツは wwwroot/index.html ファイル内にあります。

デュアル Blazor Server/Blazor WebAssembly アプリ

Blazor Server アプリ、または Blazor WebAssembly アプリのいずれかとして実行できるアプリを作成する方法の 1 つは、アプリのロジックとコンポーネントをすべて Razor クラス ライブラリ (RCL) に配置し、別の Blazor Server および Blazor WebAssembly プロジェクトからその RCL を参照することです。 ホスティング モデルに基づいて実装が異なる一般的なサービスの場合は、RCL でサービス インターフェイスを定義し、Blazor Server および Blazor WebAssembly プロジェクトでサービスを実装します。

その他の技術情報

Blazor Server

Blazor Server プロジェクト テンプレート: blazorserver

Blazor Server テンプレートによって、Blazor Server アプリの初期ファイルとディレクトリの構造が作成されます。 このアプリには、登録済みサービスからデータを読み込む FetchData コンポーネント、WeatherForecastService、および Counter コンポーネントとのユーザーの対話のためのデモンストレーション コードが設定されます。

  • Data フォルダー:アプリの FetchData コンポーネントに気象データの例を提供する、WeatherForecast クラスと WeatherForecastService の実装が含まれます。

  • Pages フォルダー:Blazor アプリと Blazor Server アプリのルート Razor ページを構成するルーティング可能なコンポーネントまたはページ (.razor) が含まれています。 各ページのルートは、@page ディレクティブを使用して指定します。 テンプレートには以下が含まれています。

    • _Host.cshtml: Razor ページとして実装されるアプリのルート ページ。
      • アプリのいずれかのページが最初に要求されると、このページが表示されて応答として返されます。
      • [ホスト] ページは、ルート App コンポーネント (App.razor) を表示する場所を指定します。
    • Counter コンポーネント (Counter.razor): カウンター ページを実装します。
    • Error コンポーネント (Error.razor): アプリでハンドルされない例外が発生したときに表示されます。
    • FetchData コンポーネント (FetchData.razor): フェッチ データ ページを実装します。
    • Index コンポーネント (Index.razor): Home ページを実装します。
  • Properties/launchSettings.json:開発環境の構成を保持します。

  • Shared フォルダー:次の共有コンポーネントおよびスタイルシートが含まれています。

    • MainLayout コンポーネント (MainLayout.razor): アプリのレイアウト コンポーネント
    • MainLayout.razor.css: アプリのメイン レイアウト用のスタイルシート。
    • NavMenu コンポーネント (NavMenu.razor): サイドバー ナビゲーションを実装します。 ナビゲーション リンクを他の Razor コンポーネントに表示する NavLink コンポーネント (NavLink) が含まれます。 NavLink コンポーネントは、そのコンポーネントが読み込まれると、自動的に選択された状態を示します。これは、ユーザーが現在どのコンポーネントが表示されているかを理解するために役立ちます。
    • NavMenu.razor.css: アプリのナビゲーション メニュー用のスタイルシート。
    • SurveyPrompt コンポーネント (SurveyPrompt.razor): Blazor のアンケート用コンポーネント。
  • wwwroot:アプリのパブリックな静的アセットを含むアプリの Web ルート フォルダー。

  • _Imports.razor:名前空間の @using ディレクティブなど、アプリのコンポーネント (.razor) に含める一般的な Razor ディレクティブが含まれます。

  • App.razor:Router コンポーネントを使用してクライアント側のルーティングを設定するアプリのルート コンポーネント。 Router コンポーネントは、ブラウザーのナビゲーションをインターセプトし、要求されたアドレスに一致するページをレンダリングします。

  • appsettings.json および環境アプリ設定ファイル:アプリの構成設定を指定します。

  • Program.cs: ASP.NET Core ホストを設定するアプリのエントリ ポイント。

  • Startup.cs: アプリのスタートアップ ロジックを含みます。 Startup クラスには、次の 2 つのメソッドがあります。

    • ConfigureServices:アプリの依存関係の挿入 (DI)サービスを構成します。 AddServerSideBlazor を呼び出すことによってサービスが追加されます。WeatherForecastService は、サンプルの FetchData コンポーネントで使用するためにサービス コンテナーに追加されます。
    • Configure:アプリの要求処理パイプラインを構成します。
      • MapBlazorHub は、ブラウザーとのリアルタイム接続用のエンドポイントを設定するために呼び出されます。 この接続は SignalR で作成されます。これは、アプリにリアルタイム Web 機能を追加するためのフレームワークです。
      • MapFallbackToPage("/_Host") は、アプリ (Pages/_Host.cshtml) のルート ページを設定し、ナビゲーションを有効にするために呼び出されます。

追加のオプションが構成されている場合は、Blazor Server プロジェクト テンプレートから生成されたアプリで、追加のファイルとフォルダーが表示されることがあります。 たとえば、ASP.NET Core Identity でアプリを生成すると、認証と承認の機能に関する追加の資産が含まれます。

Blazor WebAssembly

Blazor WebAssembly プロジェクト テンプレート: blazorwasm

Blazor WebAssembly テンプレートによって、Blazor WebAssembly アプリの初期ファイルとディレクトリの構造が作成されます。 このアプリには、静的資産からデータを読み込む FetchData コンポーネント、weather.json、および Counter コンポーネントとのユーザーの対話のためのデモンストレーション コードが設定されます。

  • Pages フォルダー:Blazor アプリを構成するルーティング可能なコンポーネントまたはページ (.razor) が含まれています。 各ページのルートは、@page ディレクティブを使用して指定します。 テンプレートには、以下のコンポーネントが含まれています。

    • Counter コンポーネント (Counter.razor): カウンター ページを実装します。
    • FetchData コンポーネント (FetchData.razor): フェッチ データ ページを実装します。
    • Index コンポーネント (Index.razor): Home ページを実装します。
  • Properties/launchSettings.json:開発環境の構成を保持します。

  • Shared フォルダー:次の共有コンポーネントおよびスタイルシートが含まれています。

    • MainLayout コンポーネント (MainLayout.razor): アプリのレイアウト コンポーネント
    • MainLayout.razor.css: アプリのメイン レイアウト用のスタイルシート。
    • NavMenu コンポーネント (NavMenu.razor): サイドバー ナビゲーションを実装します。 ナビゲーション リンクを他の Razor コンポーネントに表示する NavLink コンポーネント (NavLink) が含まれます。 NavLink コンポーネントは、そのコンポーネントが読み込まれると、自動的に選択された状態を示します。これは、ユーザーが現在どのコンポーネントが表示されているかを理解するために役立ちます。
    • NavMenu.razor.css: アプリのナビゲーション メニュー用のスタイルシート。
    • SurveyPrompt コンポーネント (SurveyPrompt.razor): Blazor のアンケート用コンポーネント。
  • wwwroot: アプリのパブリックな静的資産が含まれる、アプリの Web ルート フォルダー。構成設定のための appsettings.json と環境アプリ設定ファイルなどが含まれます。 index.html Web ページは、HTML ページとして実装されるアプリのルート ページです。

    • アプリのいずれかのページが最初に要求されると、このページが表示されて応答として返されます。
    • このページは、ルート App コンポーネントを表示する場所を指定します。 コンポーネントは、appid (<div id="app">Loading...</div>) を持つ div DOM 要素の位置にレンダリングされます。
  • _Imports.razor:名前空間の @using ディレクティブなど、アプリのコンポーネント (.razor) に含める一般的な Razor ディレクティブが含まれます。

  • App.razor:Router コンポーネントを使用してクライアント側のルーティングを設定するアプリのルート コンポーネント。 Router コンポーネントは、ブラウザーのナビゲーションをインターセプトし、要求されたアドレスに一致するページをレンダリングします。

  • Program.cs: WebAssembly ホストを設定するアプリのエントリ ポイントです。

    • App コンポーネントは、アプリのルート コンポーネントです。 App コンポーネントは、ルート コンポーネント コレクション (builder.RootComponents.Add<App>("#app")) に対する appid (wwwroot/index.html<div id="app">Loading...</div>) を持つ div DOM 要素として指定されます。
    • サービスが追加され、構成されます (例: builder.Services.AddSingleton<IMyDependency, MyDependency>())。

追加のオプションが構成されている場合は、Blazor WebAssembly プロジェクト テンプレートから生成されたアプリで、追加のファイルとフォルダーが表示されることがあります。 たとえば、ASP.NET Core Identity でアプリを生成すると、認証と承認の機能に関する追加の資産が含まれます。

<head> コンテンツの場所

Blazor Server アプリでは、<head> コンテンツは Pages/_Host.cshtml ファイル内にあります。

Blazor WebAssembly アプリでは、<head> コンテンツは wwwroot/index.html ファイル内にあります。

デュアル Blazor Server/Blazor WebAssembly アプリ

Blazor Server アプリ、または Blazor WebAssembly アプリのいずれかとして実行できるアプリを作成する方法の 1 つは、アプリのロジックとコンポーネントをすべて Razor クラス ライブラリ (RCL) に配置し、別の Blazor Server および Blazor WebAssembly プロジェクトからその RCL を参照することです。 ホスティング モデルに基づいて実装が異なる一般的なサービスの場合は、RCL でサービス インターフェイスを定義し、Blazor Server および Blazor WebAssembly プロジェクトでサービスを実装します。

その他の技術情報

Blazor Server

Blazor Server プロジェクト テンプレート: blazorserver

Blazor Server テンプレートによって、Blazor Server アプリの初期ファイルとディレクトリの構造が作成されます。 このアプリには、登録済みサービスからデータを読み込む FetchData コンポーネント、WeatherForecastService、および Counter コンポーネントとのユーザーの対話のためのデモンストレーション コードが設定されます。

  • Data フォルダー:アプリの FetchData コンポーネントに気象データの例を提供する、WeatherForecast クラスと WeatherForecastService の実装が含まれます。

  • Pages フォルダー:Blazor アプリと Blazor Server アプリのルート Razor ページを構成するルーティング可能なコンポーネントまたはページ (.razor) が含まれています。 各ページのルートは、@page ディレクティブを使用して指定します。 テンプレートには以下が含まれています。

    • _Host.cshtml: Razor ページとして実装されるアプリのルート ページ。
      • アプリのいずれかのページが最初に要求されると、このページが表示されて応答として返されます。
      • [ホスト] ページは、ルート App コンポーネント (App.razor) を表示する場所を指定します。
    • Counter コンポーネント (Counter.razor): カウンター ページを実装します。
    • Error コンポーネント (Error.razor): アプリでハンドルされない例外が発生したときに表示されます。
    • FetchData コンポーネント (FetchData.razor): フェッチ データ ページを実装します。
    • Index コンポーネント (Index.razor): Home ページを実装します。
  • Properties/launchSettings.json:開発環境の構成を保持します。

  • Shared フォルダー:次の共有コンポーネントが含まれています。

    • MainLayout コンポーネント (MainLayout.razor): アプリのレイアウト コンポーネント
    • NavMenu コンポーネント (NavMenu.razor): サイドバー ナビゲーションを実装します。 ナビゲーション リンクを他の Razor コンポーネントに表示する NavLink コンポーネント (NavLink) が含まれます。 NavLink コンポーネントは、そのコンポーネントが読み込まれると、自動的に選択された状態を示します。これは、ユーザーが現在どのコンポーネントが表示されているかを理解するために役立ちます。
    • SurveyPrompt コンポーネント (SurveyPrompt.razor): Blazor のアンケート用コンポーネント。
  • wwwroot:アプリのパブリックな静的アセットを含むアプリの Web ルート フォルダー。

  • _Imports.razor:名前空間の @using ディレクティブなど、アプリのコンポーネント (.razor) に含める一般的な Razor ディレクティブが含まれます。

  • App.razor:Router コンポーネントを使用してクライアント側のルーティングを設定するアプリのルート コンポーネント。 Router コンポーネントは、ブラウザーのナビゲーションをインターセプトし、要求されたアドレスに一致するページをレンダリングします。

  • appsettings.json および環境アプリ設定ファイル:アプリの構成設定を指定します。

  • Program.cs: ASP.NET Core ホストを設定するアプリのエントリ ポイント。

  • Startup.cs: アプリのスタートアップ ロジックを含みます。 Startup クラスには、次の 2 つのメソッドがあります。

    • ConfigureServices:アプリの依存関係の挿入 (DI)サービスを構成します。 AddServerSideBlazor を呼び出すことによってサービスが追加されます。WeatherForecastService は、サンプルの FetchData コンポーネントで使用するためにサービス コンテナーに追加されます。
    • Configure:アプリの要求処理パイプラインを構成します。
      • MapBlazorHub は、ブラウザーとのリアルタイム接続用のエンドポイントを設定するために呼び出されます。 この接続は SignalR で作成されます。これは、アプリにリアルタイム Web 機能を追加するためのフレームワークです。
      • MapFallbackToPage("/_Host") は、アプリ (Pages/_Host.cshtml) のルート ページを設定し、ナビゲーションを有効にするために呼び出されます。

追加のオプションが構成されている場合は、Blazor Server プロジェクト テンプレートから生成されたアプリで、追加のファイルとフォルダーが表示されることがあります。 たとえば、ASP.NET Core Identity でアプリを生成すると、認証と承認の機能に関する追加の資産が含まれます。

Blazor WebAssembly

Blazor WebAssembly プロジェクト テンプレート: blazorwasm

Blazor WebAssembly テンプレートによって、Blazor WebAssembly アプリの初期ファイルとディレクトリの構造が作成されます。 このアプリには、静的資産からデータを読み込む FetchData コンポーネント、weather.json、および Counter コンポーネントとのユーザーの対話のためのデモンストレーション コードが設定されます。

  • Pages フォルダー:Blazor アプリを構成するルーティング可能なコンポーネントまたはページ (.razor) が含まれています。 各ページのルートは、@page ディレクティブを使用して指定します。 テンプレートには、以下のコンポーネントが含まれています。

    • Counter コンポーネント (Counter.razor): カウンター ページを実装します。
    • FetchData コンポーネント (FetchData.razor): フェッチ データ ページを実装します。
    • Index コンポーネント (Index.razor): Home ページを実装します。
  • Properties/launchSettings.json:開発環境の構成を保持します。

  • Shared フォルダー:次の共有コンポーネントが含まれています。

    • MainLayout コンポーネント (MainLayout.razor): アプリのレイアウト コンポーネント
    • NavMenu コンポーネント (NavMenu.razor): サイドバー ナビゲーションを実装します。 ナビゲーション リンクを他の Razor コンポーネントに表示する NavLink コンポーネント (NavLink) が含まれます。 NavLink コンポーネントは、そのコンポーネントが読み込まれると、自動的に選択された状態を示します。これは、ユーザーが現在どのコンポーネントが表示されているかを理解するために役立ちます。
    • SurveyPrompt コンポーネント (SurveyPrompt.razor): Blazor のアンケート用コンポーネント。
  • wwwroot: アプリのパブリックな静的資産が含まれる、アプリの Web ルート フォルダー。構成設定のための appsettings.json と環境アプリ設定ファイルなどが含まれます。 index.html Web ページは、HTML ページとして実装されるアプリのルート ページです。

    • アプリのいずれかのページが最初に要求されると、このページが表示されて応答として返されます。
    • このページは、ルート App コンポーネントを表示する場所を指定します。 コンポーネントは app DOM 要素 (<app>Loading...</app>) の位置に表示されます。
  • _Imports.razor:名前空間の @using ディレクティブなど、アプリのコンポーネント (.razor) に含める一般的な Razor ディレクティブが含まれます。

  • App.razor:Router コンポーネントを使用してクライアント側のルーティングを設定するアプリのルート コンポーネント。 Router コンポーネントは、ブラウザーのナビゲーションをインターセプトし、要求されたアドレスに一致するページをレンダリングします。

  • Program.cs: WebAssembly ホストを設定するアプリのエントリ ポイントです。

    • App コンポーネントは、アプリのルート コンポーネントです。 App コンポーネントは、ルート コンポーネント コレクション (builder.RootComponents.Add<App>("app")) に対する app DOM 要素 (wwwroot/index.html<app>Loading...</app>) として指定されます。
    • サービスが追加され、構成されます (例: builder.Services.AddSingleton<IMyDependency, MyDependency>())。

追加のオプションが構成されている場合は、Blazor WebAssembly プロジェクト テンプレートから生成されたアプリで、追加のファイルとフォルダーが表示されることがあります。 たとえば、ASP.NET Core Identity でアプリを生成すると、認証と承認の機能に関する追加の資産が含まれます。

<head> コンテンツの場所

Blazor Server アプリでは、<head> コンテンツは Pages/_Host.cshtml ファイル内にあります。

Blazor WebAssembly アプリでは、<head> コンテンツは wwwroot/index.html ファイル内にあります。

デュアル Blazor Server/Blazor WebAssembly アプリ

Blazor Server アプリ、または Blazor WebAssembly アプリのいずれかとして実行できるアプリを作成する方法の 1 つは、アプリのロジックとコンポーネントをすべて Razor クラス ライブラリ (RCL) に配置し、別の Blazor Server および Blazor WebAssembly プロジェクトからその RCL を参照することです。 ホスティング モデルに基づいて実装が異なる一般的なサービスの場合は、RCL でサービス インターフェイスを定義し、Blazor Server および Blazor WebAssembly プロジェクトでサービスを実装します。

その他の技術情報