ASP.NET Core Blazor 用のツール

• ASP.NET および Web 開発ワークロードと共に、最新バージョンの Visual Studio をインストールする

• 使用できる Blazor テンプレートのいずれかを使って、新しいプロジェクトを作成します。

  • Blazor Web App: 対話型サーバー側レンダリング (対話型 SSR) とクライアント側レンダリング (CSR) をサポートする Blazor Web アプリを作成します。 Blazor Web App テンプレートは、Blazor で作業を開始して、サーバー側とクライアント側の Blazor 機能についての学習を開始するのにお勧めです。
  • Blazor WebAssembly スタンドアロン アプリ: 静的サイトとしてデプロイできるスタンドアロンのクライアント Web アプリを作成します。

[次へ] を選択します。

• ASP.NET および Web 開発ワークロードと共に、最新バージョンの Visual Studio をインストールする

• 新しいプロジェクトを作成します。

  • Blazor Server エクスペリエンスの場合は、デモ コードと Bootstrap を含む Blazor Server アプリ テンプレートを選択するか、デモ コードと Bootstrap を含まない Blazor Server App Empty テンプレートを選択します。 [次へ] を選択します。
  • スタンドアロンの Blazor WebAssembly エクスペリエンスの場合は、デモ コードと Bootstrap を含む Blazor WebAssembly App テンプレートを選択するか、デモ コードと Bootstrap を含まない Blazor WebAssembly App Empty テンプレートを選択します。 [次へ] を選択します。

• ASP.NET および Web 開発ワークロードと共に、最新バージョンの Visual Studio をインストールする

• 新しいプロジェクトを作成します。

  • Blazor Server エクスペリエンスの場合は、 Blazor Server アプリ テンプレートを選択します。 [次へ] を選択します。
  • Blazor WebAssembly エクスペリエンスの場合は、 Blazor WebAssembly アプリ テンプレートを選択します。 [次へ] を選択します。

• "ホストされている" Blazor WebAssembly アプリの場合は、[追加情報] ダイアログで [ASP.NET Core Hosted] (ホストされている ASP.NET Core) チェックボックスをオンにします。

ホストされている Blazor WebAssembly の起動とタスクの構成

ホストされている Blazor WebAssemblyソリューションについては、launch.json ファイルと tasks.json ファイルを含む .vscode フォルダーを追加 (または移動) します。このフォルダーには、通常のプロジェクト フォルダーである Client、Server、Shared が含まれます。 Server プロジェクトでホストされている Blazor WebAssembly アプリが launch.json ファイルと tasks.json ファイルの構成によって実行されるように更新または確認します。

Properties/launchSettings.json ファイルを調べ、applicationUrl プロパティからアプリの URL を確認します。 フレームワークのバージョンによって、URL プロトコルはセキュリティで保護されている (HTTPS) https://localhost:{PORT}、またはセキュリティで保護されていない (HTTP) http://localhost:{PORT} です。この {PORT} プレースホルダーは割り当てられたポートです。 launch.json ファイルで使うために、この URL をメモしておきます。

.vscode/launch.json ファイルの起動構成で:

• 現在の作業ディレクトリ (cwd) を Server プロジェクト フォルダーに設定します。
• url プロパティを使用して、アプリの URL を指定します。 Properties/launchSettings.json ファイルからの以前に記録した値を使用します。

"cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
"url": "{URL}"

上記の構成例では:

• {SERVER APP FOLDER} プレースホルダーは Server プロジェクトのフォルダーです (通常は Server)。
• {URL} プレースホルダーはアプリの URL であり、アプリの Properties/launchSettings.json ファイルの applicationUrl プロパティに指定されています。

Microsoft Edge よりも Google Chrome が優先される場合は、構成に "browser": "chrome" という追加のプロパティを更新または追加します。

次の .vscode/launch.json ファイルの例では:

• 現在の作業ディレクトリを Server フォルダーに設定します。
• アプリの URL を http://localhost:7268 に設定します。
• 既定のブラウザーを Microsoft Edge から Google Chrome に変更します。

"cwd": "${workspaceFolder}/Server",
"url": "http://localhost:7268",
"browser": "chrome"

完全な .vscode/launch.json ファイル:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "blazorwasm",
      "name": "Launch and Debug Blazor WebAssembly Application",
      "request": "launch",
      "cwd": "${workspaceFolder}/Server",
      "url": "http://localhost:7268",
      "browser": "chrome"
    }
  ]
}

.vscode/tasks.json で、 Server アプリのプロジェクト ファイルへのパスを指定する build 引数を追加します。

"${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",

前の引数は次のとおりです。

• {SERVER APP FOLDER} プレースホルダーは Server プロジェクトのフォルダーです (通常は Server)。
• {PROJECT NAME} プレースホルダーはアプリの名前です。通常、Blazor WebAssembly プロジェクト テンプレートから生成されたアプリ内のソリューションの名前の後に .Server が付けられています。

ソリューションの Server フォルダーに BlazorHosted という名前の Server プロジェクトを含むサンプル .vscode/tasks.json ファイルを次に示します。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "dotnet",
      "type": "process",
        "args": [
          "build",
          "${workspaceFolder}/Server/BlazorHosted.Server.csproj",
          "/property:GenerateFullPaths=true",
          "/consoleloggerparameters:NoSummary",
        ],
        "group": "build",
        "presentation": {
          "reveal": "silent"
        },
        "problemMatcher": "$msCompile"
    }
  ]
}

.vscode/launch.json (launch の構成):

...
"cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
...

現在の作業ディレクトリの前の構成 (cwd) では、{SERVER APP FOLDER} プレースホルダーは Server プロジェクトのフォルダーです (通常は "Server")。

システム上で Microsoft Edge が使用されており、Google Chrome がインストールされていない場合は、"browser": "edge" の追加のプロパティを構成に追加します。

Server のプロジェクト フォルダー、およびそれによって、既定のブラウザーである Google Chrome ではなく、Microsoft Edge がデバッグ実行用のブラウザーとして生成される例を次に示します。

...
"cwd": "${workspaceFolder}/Server",
"browser": "edge"
...

.vscode/tasks.json (dotnet コマンド 引数):

...
"${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",
...

前の引数は次のとおりです。

• {SERVER APP FOLDER} プレースホルダーは Server プロジェクトのフォルダーです (通常は "Server")。
• {PROJECT NAME} プレースホルダーはアプリの名前です。通常、Blazor プロジェクト テンプレートから生成されたアプリ内のソリューションの名前の後に ".Server" が付けられた名前となっています。

Blazor WebAssembly アプリでの SignalR の使用に関するチュートリアルの次の例では、Server のプロジェクト フォルダー名と BlazorWebAssemblySignalRApp.Server のプロジェクト名を使用します。

...
"args": [
  "build",
    "${workspaceFolder}/Server/BlazorWebAssemblySignalRApp.Server.csproj",
    ...
],
...

新しいプロジェクトを作成します。

• cd コマンドを使用して、プロジェクト フォルダーを作成するディレクトリに移動します (たとえば、cd c:/users/Bernie_Kopell/Documents)。

• 既定の対話型サーバー側レンダリング (対話型 SSR) を使用した Blazor Web App エクスペリエンスを得るには、次のコマンドを実行します。

  dotnet new blazor -o BlazorApp
  

• スタンドアロンの Blazor WebAssembly エクスペリエンスを得るには、blazorwasm テンプレートを使うコマンド シェルで次のコマンドを実行します。

  dotnet new blazorwasm -o BlazorApp
  

新しいプロジェクトを作成します。

• cd コマンドを使用して、プロジェクト フォルダーを作成するディレクトリに移動します (たとえば、cd c:/users/Bernie_Kopell/Documents)。

• デモ コードと Bootstrap が含まれる Blazor Server エクスペリエンスの場合は、次のコマンドを実行します。

  dotnet new blazorserver -o BlazorApp
  

• デモ コードと Bootstrap を使用したスタンドアロンの Blazor WebAssembly エクスペリエンスの場合は、次のコマンドを実行します。

  dotnet new blazorwasm -o BlazorApp
  

• デモ コードと Bootstrap が含まれるホステッド Blazor WebAssembly エクスペリエンスの場合は、ホステッド オプション (-ho/--hosted) をコマンドに追加します。

  dotnet new blazorwasm -o BlazorApp -ho
  

  Note

  ホストされた Blazor WebAssembly プロジェクト テンプレートは、ASP.NET Core 8.0 以降では使用できません。 .NET 8.0 以降の SDK を使用してホストされた Blazor WebAssembly アプリを作成するには、7.0 ターゲット フレームワーク (net7.0) で -f|--framework オプションを渡します。

  dotnet new blazorwasm -o BlazorApp -ho -f net7.0
  

新しいプロジェクトを作成します。

• cd コマンドを使用して、プロジェクト フォルダーを作成するディレクトリに移動します (たとえば、cd c:/users/Bernie_Kopell/Documents)。

• Blazor WebAssembly エクスペリエンスの場合、次のコマンドを実行します。

  dotnet new blazorwasm -o BlazorApp
  

• ホステッド Blazor WebAssembly エクスペリエンスの場合は、ホステッド オプション (-ho または --hosted) をコマンドに追加します。

  dotnet new blazorwasm -o BlazorApp -ho
  

  Note

  ホストされた Blazor WebAssembly プロジェクト テンプレートは、ASP.NET Core 8.0 以降では使用できません。 .NET 8.0 以降の SDK を使用してホストされた Blazor WebAssembly アプリを作成するには、ターゲット フレームワーク モニカー (たとえば、net6.0) で -f|--framework オプションを渡します。

  dotnet new blazorwasm -o BlazorApp -ho -f net6.0
  

• Blazor Server エクスペリエンスの場合、次のコマンドを実行します。

  dotnet new blazorserver -o BlazorApp