ASP.NET Core Blazor 用のツール

  • [アーティクル]

この記事では、さまざまなプラットフォームで Blazor アプリを構築するためのツールについて説明します。

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

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

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

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

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

  1. [プロジェクト名] を指定して、 [場所] が正しいことを確認します。 [次へ] を選択します。

  2. [追加情報] ダイアログで、ホストされている Blazor WebAssembly アプリに対し、[ASP.NET Core でホストされた] チェックボックスをオンにします。 ［作成］ を選択します

    Blazor の 2 つのホスティング モデル、Blazor WebAssembly (スタンドアロンとホストされたもの)、Blazor Server については、「ASP.NET Core Blazor のホスティング モデル」をご覧ください。

  3. Ctrl+F5 キー (Windows) または ⌘+F5 キー (macOS) を押してアプリを実行します。

    Visual Studio で、ホストされている Blazor WebAssembly ソリューションを実行する場合、ソリューションのスタートアップ プロジェクトは Server プロジェクトになります。

ASP.NET Core HTTPS 開発証明書の信頼の詳細については、「ASP.NET Core で HTTPS を適用する」を参照してください。

重要

ホストされている Blazor WebAssembly アプリを実行する場合は、ソリューションの Server プロジェクトから、そのアプリを実行します。

アプリを起動すると、Server プロジェクト内の Properties/launchSettings.json ファイルのみが使用されます。

.NET コマンドライン インターフェイス (CLI) を使用し、Linux コマンド シェルでコマンドを実行します。

  1. 最新バージョンの .NET Core SDK をインストールします。 以前に SDK をインストールした場合、次のコマンドを実行し、インストールされているバージョンを判断できます。

    dotnet --version

  2. Visual Studio Code の最新版をインストールします。

  3. 最新の C# for Visual Studio Code 拡張機能をインストールします。

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

    dotnet new blazorserver -o WebApplication1

    または、blazorserver-empty プロジェクト テンプレートを使用して、デモ コードと Bootstrap なしでアプリを作成します。

    dotnet new blazorserver-empty -o WebApplication1

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

    dotnet new blazorwasm -o WebApplication1

    または、blazorwasm-empty プロジェクト テンプレートを使用して、デモ コードと Bootstrap なしでアプリを作成します。

    dotnet new blazorwasm-empty -o WebApplication1

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

    dotnet new blazorwasm -o WebApplication1 -ho

    または、ホステッド オプションを含む blazorwasm-empty テンプレートを使用して、デモ コードと Bootstrap なしでホステッド Blazor WebAssembly アプリを作成します。

    dotnet new blazorwasm-empty -o WebApplication1 -ho

    Blazor の 2 つのホスティング モデル、Blazor WebAssembly (スタンドアロンとホストされたもの)、Blazor Server については、「ASP.NET Core Blazor のホスティング モデル」をご覧ください。

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

    dotnet new blazorwasm -o WebApplication1

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

    dotnet new blazorwasm -o WebApplication1 -ho

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

    dotnet new blazorserver -o WebApplication1

    Blazor の 2 つのホスティング モデル、Blazor WebAssembly (スタンドアロンとホストされたもの)、Blazor Server については、「ASP.NET Core Blazor のホスティング モデル」をご覧ください。

  1. Visual Studio Code で WebApplication1 フォルダーを開きます。

  2. IDE によって、プロジェクトをビルドおよびデバッグするためにアセットを追加するよう要求されます。 [はい] を選択します。

    Visual Studio Code でアセットが自動的に作成されない場合は、次のファイルを使用します。

    .vscode/launch.json (Blazor WebAssembly アプリの起動およびデバッグ用に構成されています)

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "blazorwasm",
      "name": "Launch and Debug Blazor WebAssembly Application",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "browser": "edge"
    }
  ]
}

.vscode/tasks.json:

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

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "blazorwasm",
            "name": "Launch and Debug Blazor WebAssembly Application",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "browser": "edge"
        }
    ]
}

.vscode/tasks.json:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "command": "dotnet",
            "type": "shell",
            "args": [
                "build",
                // Ask dotnet build to generate full paths for file names.
                "/property:GenerateFullPaths=true",
                // Do not generate summary otherwise it leads to duplicate errors in Problems panel
                "/consoleloggerparameters:NoSummary",
            ],
            "group": "build",
            "presentation": {
                "reveal": "silent"
            },
            "problemMatcher": "$msCompile"
        }
    ]
}

プロジェクトの Properties/launchSettings.json ファイルには、ファイルの profiles セクションに任意のプロファイルのデバッグ プロキシに関する inspectUri プロパティが含まれています。

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",

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

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

重要

ホストされている Blazor WebAssembly アプリを実行する場合は、ソリューションの Server プロジェクトから、そのアプリを実行します。

アプリを起動すると、Server プロジェクト内の Properties/launchSettings.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"
    }
  ]
}
  1. Ctrl+F5 キー (Windows) または ⌘+F5 キー (macOS) を押してアプリを実行します。

Note

現時点ではブラウザー デバッグのみサポートされています。

dotnet watch run を使用してアプリを実行するなどして、デバッグ中にホステッド Blazor WebAssembly ソリューションのバックエンド Server アプリを自動的に再構築することはできません。

.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",
    ...
],
...
  1. Ctrl+F5 キー (Windows) または ⌘+F5 キー (macOS) を押してアプリを実行します。

開発証明書を信頼する

詳細については、「ASP.NET Core で HTTPS を適用する」を参照してください。

  1. Visual Studio for Mac をインストールします。 インストーラーがインストールするワークロードを要求したら、.NET を選択します。

  2. [ファイル] メニューから [新しいプロジェクト] を選択するか、スタート ウィンドウから新しいプロジェクトを作成します。

  1. サイドバーで、 [Web and Console](Web とコンソール)>[アプリ] の順に選択します。

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

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

    Blazor の 2 つのホスティング モデル、Blazor WebAssembly (スタンドアロンとホストされたもの)、Blazor Server については、「ASP.NET Core Blazor のホスティング モデル」をご覧ください。

  1. サイドバーで、 [Web and Console](Web とコンソール)>[アプリ] の順に選択します。

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

    Blazor の 2 つのホスティング モデル、Blazor WebAssembly (スタンドアロンとホストされたもの)、Blazor Server については、「ASP.NET Core Blazor のホスティング モデル」をご覧ください。

  1. [認証] に [認証なし] が設定されていることを確認します。 [続行] を選択します。

  2. ホステッド Blazor WebAssembly エクスペリエンスの場合は、[ASP.NET Core でホストされた] チェックボックスをオンにします。

  3. [プロジェクト名] フィールドで、アプリに WebApplication1 という名前を付けます。 ［作成］ を選択します

  4. "デバッガーを使用せずに" アプリを実行するには、[デバッグ] メニューから [デバッグなしで開始] コマンドを選択します。 [デバッグ]>[デバッグの開始] か [実行] (▶) ボタンでアプリを実行して、"デバッガー付き" でアプリを実行します。

開発証明書を信頼することを求めるメッセージが表示されたら、証明書を信頼して続行します。 証明書を信頼するには、ユーザーとキーチェーンのパスワードが必要です。 ASP.NET Core HTTPS 開発証明書の信頼の詳細については、「ASP.NET Core で HTTPS を適用する」を参照してください。

重要

ホストされている Blazor WebAssembly アプリを実行する場合は、ソリューションの Server プロジェクトから、そのアプリを実行します。

アプリを起動すると、Server プロジェクト内の Properties/launchSettings.json ファイルのみが使用されます。

Visual Studio ソリューション ファイル (.sln)

"ソリューション" とは、1 つまたは複数の関連するコード プロジェクトを整理するためのコンテナーです。 Visual Studio および Visual Studio for Mac は、ソリューション ファイル (.sln) を使用してソリューションの設定を格納します。 ソリューション ファイルでは独自の形式が使用され、直接編集することは意図されていません。

Visual Studio や Visual Studio for Mac 以外のツールを使用して、ソリューション ファイルを処理することができます。

  • .NET CLI では、dotnet sln コマンド を使用して、ソリューション ファイルの作成やソリューション ファイル内のプロジェクトの一覧表示/変更を行うことができます。 発行、テスト、パッケージ化など、他のさまざまな .NET CLI コマンドで、ソリューション ファイルのパスが使用されます。
  • Visual Studio Code は、dotnet sln コマンドおよび他の .NET CLI コマンドを統合ターミナルから実行できますが、ソリューション ファイル内の設定を直接使用することはありません。

Blazor ドキュメント全体で、"ソリューション" は、Blazor WebAssembly プロジェクト テンプレート ([ASP.NET Core でホストされた] オプションが有効) またはBlazor Hybrid プロジェクト テンプレートから作成されたアプリを示すために使用されます。 これらのプロジェクト テンプレートから生成されたアプリには、既定でソリューション ファイル (.sln) が含まれています。 開発者が Visual Studio または Visual Studio for Mac を使用していない、ホストされている Blazor WebAssembly アプリの場合、.NET CLI コマンドで使用されていない場合には、ソリューション ファイルを無視または削除できます。

詳細については、Visual Studio ドキュメントの次のリソースを参照してください。

クロスプラットフォームの Blazor 開発に Visual Studio Code を使用する

Visual Studio Code は、Blazor アプリの開発に使用できるオープン ソースのクロスプラットフォーム統合開発環境 (IDE) です。 .NET CLI を使用して、Visual Studio Code で開発用の新しい Blazor アプリを作成します。 詳細については、この記事の Linux バージョンを参照してください。

クロスプラットフォームの Blazor 開発に Visual Studio Code を使用する

Visual Studio Code は、Blazor アプリの開発に使用できるオープン ソースのクロスプラットフォーム統合開発環境 (IDE) です。 .NET CLI を使用して、Visual Studio Code で開発用の新しい Blazor アプリを作成します。 詳細については、この記事の Linux バージョンを参照してください。

Blazor テンプレート オプション

Blazor フレームワークには、Blazor ホスティング モデルのそれぞれに対して新しいアプリを作成するためのテンプレートが用意されています。 テンプレートは、Blazor 開発用に選択したツール (Visual Studio、Visual Studio for Mac、Visual Studio Code、または .NET コマンド ライン インターフェイス (CLI)) に関係なく、新しい Blazor プロジェクトとソリューションを作成するために使用されます。

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

Blazor のホスティング モデルについて詳しくは、「ASP.NET Core Blazor のホスティング モデル」をご覧ください。 Blazor プロジェクト テンプレートについて詳しくは、「ASP.NET Core Blazor プロジェクトの構造」をご覧ください。

テンプレート オプションの詳細については、以下のリソースを参照してください。

  • .NET Core ドキュメント内の記事「dotnet new 用の .NET の既定のテンプレート」:
  • コマンド シェルで dotnet new CLI コマンドにヘルプ オプション (-h または --help) を渡します。
    • dotnet new blazorserver -h
    • dotnet new blazorwasm -h

.NET WebAssembly ビルド ツール

.NET WebAssembly ビルド ツールは、Web プラットフォーム用のコンパイラ ツールチェーンである Emscripten をベースにしています。 ビルド ツールをインストールするには、次の "いずれかの" 方法を使用します。

  • Visual Studio インストーラーの ASP.NET と Web 開発ワークロードの場合は、オプションのコンポーネントの一覧から [.NET WebAssembly ビルド ツール] オプションを選択します。
  • 管理コマンド シェルで dotnet workload install wasm-tools を実行します。

Ahead-Of-Time (AOT) コンパイルを使用すると、現時点では Apple Safari を除き、WebAssembly Single Instruction, Multiple Data (SIMD) がサポートされます。 アプリのプロジェクト ファイル (.csproj) の <WasmEnableSIMD> プロパティを true の値で使用します。

<PropertyGroup>
  <WasmEnableSIMD>true</WasmEnableSIMD>
  <RunAOTCompilation>true</RunAOTCompilation>
</PropertyGroup>

WebAssembly 例外処理を有効にするには、アプリのプロジェクト ファイル (.csproj) 内の <WasmEnableExceptionHandling> プロパティを true の値で使用します。

<PropertyGroup>
  <WasmEnableExceptionHandling>true</WasmEnableExceptionHandling>
</PropertyGroup>

注意

.NET 6 プロジェクト用の .NET WebAssembly ビルド ツール

wasm-tools ワークロードでは .NET 7 プロジェクト用のビルド ツールをインストールします。 ただし、.NET 7 バージョンのビルド ツールは、.NET 6 でビルドされた既存のプロジェクトと互換性がありません。 .NET 6 と .NET 7 の両方をサポートすることが必要なビルド ツールを使用するプロジェクトでは、マルチターゲットを使用する必要があります。

.NET 7 SDK を使用してアプリを開発する場合は、.NET 6 プロジェクト用の wasm-tools-net6 ワークロードを使用します。 wasm-tools-net6 ワークロードをインストールするには、管理コマンド シェルから次のコマンドを実行します。

dotnet workload install wasm-tools-net6

詳細については、次のリソースを参照してください。

.NET WebAssembly ビルド ツールは、Web プラットフォーム用のコンパイラ ツールチェーンである Emscripten をベースにしています。 ビルド ツールをインストールするには、次の "いずれかの" 方法を使用します。

  • Visual Studio インストーラーの ASP.NET と Web 開発ワークロードの場合は、オプションのコンポーネントの一覧から [.NET WebAssembly ビルド ツール] オプションを選択します。
  • コマンド シェルで dotnet workload install wasm-tools を実行する。

詳細については、次のリソースを参照してください。

その他の技術情報