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

  • [アーティクル]

注意

これは、この記事の最新バージョンではありません。 現在のリリースについては、この記事の .NET 7 バージョンを参照してください。

重要

この情報はリリース前の製品に関する事項であり、正式版がリリースされるまでに大幅に変更される可能性があります。 Microsoft はここに示されている情報について、明示か黙示かを問わず、一切保証しません。

現在のリリースについては、この記事の .NET 7 バージョンを参照してください。

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

Blazor Web アプリ

Blazor Web アプリ プロジェクト テンプレート: blazor

プロジェクトの構造:

  • サーバー プロジェクト:

    • Components フォルダー:

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

        • MainLayout コンポーネント (MainLayout.razor): アプリのレイアウト コンポーネント。
        • MainLayout.razor.css: アプリのメイン レイアウト用のスタイルシート。
        • NavMenu コンポーネント (NavMenu.razor): サイドバー ナビゲーションを実装します。 ナビゲーション リンクを他の Razor コンポーネントに表示する NavLink コンポーネント (NavLink) が含まれます。 NavLink コンポーネントは、現在表示されているコンポーネントをユーザーに示します。
        • NavMenu.razor.css: アプリのナビゲーション メニュー用のスタイルシート。

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

        • Counter コンポーネント (Counter.razor): Counter ページを実装します。
        • Home コンポーネント (Home.razor): Home ページを実装します。
        • Weather コンポーネント (Weather.razor): Weather forecast ページを実装します。
        • Error コンポーネント (Error.razor): エラー ページを実装します。

      • App コンポーネント (App.razor): HTML <head> マークアップ、 Routes コンポーネント、および Blazor<script> タグを含むアプリのルート コンポーネント。

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

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

    • Properties フォルダー: 開発環境の構成を launchSettings.json ファイル内に保持します。

    • wwwroot フォルダー: アプリのパブリックな静的アセットを含む、サーバー プロジェクトの Web ルート フォルダー。

    • Program.cs ファイル: ASP.NET Core Web アプリケーションのホストを設定し、アプリのスタートアップ ロジック (サービス登録、構成、ログ、要求処理パイプラインなど) を含んでいるサーバー プロジェクトのエントリ ポイント。

      • Razor コンポーネントのサービスは、AddRazorComponents を呼び出すことによって追加されます。 AddServerComponents によってサービスを追加し、対話型サーバー コンポーネントのレンダリングをサポートします。
      • MapRazorComponents は使用可能なコンポーネントを発見し、アプリのルート コンポーネントを特定します。これは既定では App コンポーネント (App.razor) です。 AddServerRenderMode は、アプリのサーバー レンダリング モードを構成します。

    • アプリ設定ファイル (appsettings.Development.json、appsettings.json): サーバー プロジェクトの構成設定を指定します。

  • クライアント プロジェクト: .Client

    • Pages フォルダー: アプリのルーティング可能なクライアント側の Razor コンポーネント (.razor) が含まれています。 各ページのルートは、@page ディレクティブを使用して指定します。 テンプレートには、 カウンター ページを実装する Counter コンポーネント (Counter.razor) が含まれています。

    • アプリのパブリックな静的アセットが含まれる、クライアント側プロジェクトの Web ルート フォルダー。クライアント側プロジェクトの構成設定を提供するアプリ設定ファイル (appsettings.Development.json、appsettings.json) が含まれます。

    • Program.cs ファイル: WebAssembly ホストを設定し、プロジェクトのスタートアップ ロジック (サービス登録、構成、ログ、要求処理パイプラインなど) を含んでいるクライアント側プロジェクトのエントリ ポイント。

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

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

Blazor Server

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

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

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

プロジェクトの構造:

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

  • Pages フォルダー: Blazor アプリのルーティング可能な Razor コンポーネント (.razor) と、Blazor Server アプリのルート 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 Server プロジェクト テンプレート: blazorserver

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

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

  • Pages フォルダー: Blazor アプリのルーティング可能な Razor コンポーネント (.razor) と、Blazor Server アプリのルート 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 Server プロジェクト テンプレート: blazorserver

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

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

  • Pages フォルダー: Blazor アプリのルーティング可能な Razor コンポーネント (.razor) と、Blazor Server アプリのルート 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 Server プロジェクト テンプレート: blazorserver

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

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

  • Pages フォルダー: Blazor アプリのルーティング可能な Razor コンポーネント (.razor) と、Blazor Server アプリのルート 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、blazorwasm-empty

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

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

プロジェクトの構造:

  • Pages フォルダー: Blazor アプリのルーティング可能な Razor コンポーネント (.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) ("ASP.NET Core 7.0 以前"): Blazor アンケート用コンポーネント。

  • wwwroot フォルダー: アプリのパブリックな静的アセットが含まれる、アプリの Web ルート フォルダー。構成設定のための appsettings.json と環境アプリ設定ファイルなどが含まれます。 index.html Web ページは、HTML ページとして実装されるアプリのルート ページです。

    • アプリのいずれかのページが最初に要求されると、このページが表示されて応答として返されます。
    • このページは、ルート App コンポーネントを表示する場所を指定します。 コンポーネントは、app の id (<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")) に対する app の id (wwwroot/index.html の <div id="app">Loading...</div>) を持つ div DOM 要素として指定されます。
    • サービスが追加され、構成されます (例: builder.Services.AddSingleton<IMyDependency, MyDependency>())。

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

"ホストされた Blazor WebAssembly ソリューション" には、次の ASP.NET Core プロジェクトが含まれています。

  • "Client": Blazor WebAssembly アプリ。
  • "Server": Blazor WebAssembly アプリと気象データをクライアントに提供するアプリ。
  • "Shared": 共通のクラス、メソッド、リソースを保持するプロジェクト。

ソリューションは、Visual Studio の Blazor WebAssembly プロジェクト テンプレートから、[ASP.NET Core でホストされた] チェックボックスをオンにして、または .NET CLI の dotnet new blazorwasm コマンドを使って -ho|--hosted オプションを指定して生成されます。 詳しくは、「ASP.NET Core Blazor 用のツール」をご覧ください。

ホストされた Blazor Webassembly ソリューションのクライアント側アプリのプロジェクト構造 ("Client" プロジェクト) は、スタンドアロン Blazor WebAssembly アプリのプロジェクト構造と同じです。 ホストされた Blazor WebAssembly ソリューションの追加のファイルは次のとおりです。

  • "Server" プロジェクトには、"Client" プロジェクトの FetchData コンポーネントに気象データを返す天気予報コントローラーが Controllers/WeatherForecastController.cs で含まれています。
  • "Shared" プロジェクトには、"Client" プロジェクトと "Server" プロジェクトの気象データを表す天気予報クラスが WeatherForecast.cs で含まれています。

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

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

  • Pages フォルダー: Blazor アプリのルーティング可能な Razor コンポーネント (.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 コンポーネントを表示する場所を指定します。 コンポーネントは、app の id (<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")) に対する app の id (wwwroot/index.html の <div id="app">Loading...</div>) を持つ div DOM 要素として指定されます。
    • サービスが追加され、構成されます (例: builder.Services.AddSingleton<IMyDependency, MyDependency>())。

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

"ホストされた Blazor WebAssembly ソリューション" には、次の ASP.NET Core プロジェクトが含まれています。

  • "Client": Blazor WebAssembly アプリ。
  • "Server": Blazor WebAssembly アプリと気象データをクライアントに提供するアプリ。
  • "Shared": 共通のクラス、メソッド、リソースを保持するプロジェクト。

ソリューションは、Visual Studio の Blazor WebAssembly プロジェクト テンプレートから、[ASP.NET Core でホストされた] チェックボックスをオンにして、または .NET CLI の dotnet new blazorwasm コマンドを使って -ho|--hosted オプションを指定して生成されます。 詳しくは、「ASP.NET Core Blazor 用のツール」をご覧ください。

ホストされた Blazor Webassembly ソリューションのクライアント側アプリのプロジェクト構造 ("Client" プロジェクト) は、スタンドアロン Blazor WebAssembly アプリのプロジェクト構造と同じです。 ホストされた Blazor WebAssembly ソリューションの追加のファイルは次のとおりです。

  • "Server" プロジェクトには、"Client" プロジェクトの FetchData コンポーネントに気象データを返す天気予報コントローラーが Controllers/WeatherForecastController.cs で含まれています。
  • "Shared" プロジェクトには、"Client" プロジェクトと "Server" プロジェクトの気象データを表す天気予報クラスが WeatherForecast.cs で含まれています。

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

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

  • Pages フォルダー: Blazor アプリのルーティング可能な Razor コンポーネント (.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 コンポーネントを表示する場所を指定します。 コンポーネントは、app の id (<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")) に対する app の id (wwwroot/index.html の <div id="app">Loading...</div>) を持つ div DOM 要素として指定されます。
    • サービスが追加され、構成されます (例: builder.Services.AddSingleton<IMyDependency, MyDependency>())。

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

"ホストされた Blazor WebAssembly ソリューション" には、次の ASP.NET Core プロジェクトが含まれています。

  • "Client": Blazor WebAssembly アプリ。
  • "Server": Blazor WebAssembly アプリと気象データをクライアントに提供するアプリ。
  • "Shared": 共通のクラス、メソッド、リソースを保持するプロジェクト。

ソリューションは、Visual Studio の Blazor WebAssembly プロジェクト テンプレートから、[ASP.NET Core でホストされた] チェックボックスをオンにして、または .NET CLI の dotnet new blazorwasm コマンドを使って -ho|--hosted オプションを指定して生成されます。 詳しくは、「ASP.NET Core Blazor 用のツール」をご覧ください。

ホストされた Blazor Webassembly ソリューションのクライアント側アプリのプロジェクト構造 ("Client" プロジェクト) は、スタンドアロン Blazor WebAssembly アプリのプロジェクト構造と同じです。 ホストされた Blazor WebAssembly ソリューションの追加のファイルは次のとおりです。

  • "Server" プロジェクトには、"Client" プロジェクトの FetchData コンポーネントに気象データを返す天気予報コントローラーが Controllers/WeatherForecastController.cs で含まれています。
  • "Shared" プロジェクトには、"Client" プロジェクトと "Server" プロジェクトの気象データを表す天気予報クラスが WeatherForecast.cs で含まれています。

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

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

  • Pages フォルダー: Blazor アプリのルーティング可能な Razor コンポーネント (.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 でアプリを生成すると、認証と承認の機能に関する追加の資産が含まれます。

"ホストされた Blazor WebAssembly ソリューション" には、次の ASP.NET Core プロジェクトが含まれています。

  • "Client": Blazor WebAssembly アプリ。
  • "Server": Blazor WebAssembly アプリと気象データをクライアントに提供するアプリ。
  • "Shared": 共通のクラス、メソッド、リソースを保持するプロジェクト。

ソリューションは、Visual Studio の Blazor WebAssembly プロジェクト テンプレートから、[ASP.NET Core でホストされた] チェックボックスをオンにして、または .NET CLI の dotnet new blazorwasm コマンドを使って -ho|--hosted オプションを指定して生成されます。 詳しくは、「ASP.NET Core Blazor 用のツール」をご覧ください。

ホストされた Blazor Webassembly ソリューションのクライアント側アプリのプロジェクト構造 ("Client" プロジェクト) は、スタンドアロン Blazor WebAssembly アプリのプロジェクト構造と同じです。 ホストされた Blazor WebAssembly ソリューションの追加のファイルは次のとおりです。

  • "Server" プロジェクトには、"Client" プロジェクトの FetchData コンポーネントに気象データを返す天気予報コントローラーが Controllers/WeatherForecastController.cs で含まれています。
  • "Shared" プロジェクトには、"Client" プロジェクトと "Server" プロジェクトの気象データを表す天気予報クラスが WeatherForecast.cs で含まれています。

<head> および <body> コンテンツの場所

Blazor Web アプリでは、<head> および <body> コンテンツは Components/App.razor ファイル内にあります。

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

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

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

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

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

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

その他の技術情報