ASP.NET Core Blazor 用のツール

[アーティクル]
02/09/2024

注意

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

重要

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

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

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

Windows で Blazor アプリを作成するには、次のガイダンスに従います。

ASP.NET および Web 開発ワークロードと共に、最新バージョンの Visual Studio をインストールする
使用できる Blazor テンプレートのいずれかを使って、新しいプロジェクトを作成します。
- Blazor Web アプリ: 対話型サーバー側レンダリング (対話型 SSR) とクライアント側レンダリング (CSR) をサポートする Blazor Web アプリを作成します。 Blazor Web アプリテンプレートは、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 アプリ テンプレートを選択します。 [次へ] を選択します。

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

Note

次のガイダンスで使用されるレンダリングの用語と概念は、"基礎" の概要に関する記事の次のセクションで紹介されています。

レンダリングモードの詳細なガイダンスは、ASP.NET Core Blazorレンダリングモードに関する記事で提供されています。

[追加情報] ダイアログの Blazor Web アプリの場合:
- [対話型レンダリングモード] ドロップダウンリスト
  - [サーバー] オプションを使うと、既定で対話型サーバー側レンダリング (対話型 SSR) が有効になります。
  - クライアント側レンダリング (CSR) でのみインタラクティビティを有効にするには、[WebAssembly] オプションを選びます。
  - 両方の対話型レンダリングモードと、実行時に自動的に切り替える機能を有効にするには、[自動 (サーバーと WebAssembly)] (自動) レンダリングモードオプションを選びます。
  - インタラクティビティが None に設定されている場合、生成されるアプリにはインタラクティビティはありません。アプリは、静的なサーバー側レンダリング専用に構成されます。
  対話型自動レンダリングモードでは、.NET アプリバンドルとランタイムがブラウザーにダウンロードされる間は最初に対話型 SSR が使用されます。 .NET WebAssembly ランタイムがアクティブになると、レンダリングモードは対話型の WebAssembly レンダリングに切り替わります。
  
  既定では、Blazor Web アプリテンプレートによって、1 つのプロジェクトを使用する静的および対話型の両方の SSR が有効になります。 CSR も有効にした場合、プロジェクトには、WebAssembly ベースコンポーネント用の追加のクライアントプロジェクト (.Client) も含められます。クライアントプロジェクトからビルドされた出力がブラウザーにダウンロードされ、クライアントで実行されます。 WebAssembly または自動レンダリングモードを使うコンポーネントは、すべてクライアントプロジェクトからビルドする必要があります。
  
  詳細については、「ASP.NET Core Blazor レンダリングモード」を参照してください。
- [インタラクティビティの場所] ドロップダウンリスト
  - ページ/コンポーネントごと: 既定では、ページまたはコンポーネントごとにインタラクティビティを設定します。
  - グローバル: このオプションを選ぶと、アプリ全体のインタラクティビティがグローバルに設定されます。
  インタラクティビティの場所は、[対話型レンダリングモード] が None でなく、認証が有効でない場合にのみ設定できます。
- サンプルページとブートストラップスタイルに基づくレイアウトを含めるには、[サンプルページを含める] チェックボックスを選択します。サンプルページとブートストラップスタイル指定のないプロジェクトでは、このオプションを無効にします。
詳細については、「ASP.NET Core Blazor レンダリングモード」を参照してください。

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

［作成］ を選択します
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 ファイルのみが使用されます。

Linux または macOS で Blazor アプリを作成するには、次のガイダンスを使用します。

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

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

dotnet --version

ご利用のプラットフォーム用の最新バージョンの Visual Studio Code をインストールします。

Visual Studio Code 用の C# 開発キットをインストールします。詳細については、「ASP.NET Core Blazor アプリをデバッグする」を参照してください。

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

既定の対話型サーバー側レンダリングを使用した Blazor Web アプリエクスペリエンスを得るには、blazor プロジェクトテンプレートを使うコマンドシェルで次のコマンドを実行します。
```
dotnet new blazor -o BlazorApp
```
クライアント側レンダリングのみを有効にするには、-int|--interactivity オプションを WebAssembly に設定して使用します。
```
dotnet new blazor -o BlazorApp -int WebAssembly
```
対話型サーバー側レンダリング、その後にクライアント側レンダリングを有効にするには、-int|--interactivity オプションを Auto に設定して使用します。
```
dotnet new blazor -o BlazorApp -int Auto
```
-int|--interactivity オプションを None に設定してインタラクティビティを無効にすると、生成されるアプリにはインタラクティビティはありません。アプリは、静的なサーバー側レンダリング専用に構成されます。
```
dotnet new blazor -o BlazorApp -int None
```
対話型自動レンダリングモードでは、.NET アプリバンドルとランタイムがブラウザーにダウンロードされる間は最初に対話型サーバー側レンダリング (対話型 SSR) が使用されます。 .NET WebAssembly ランタイムがアクティブになると、レンダリングモードは対話型 WebAssembly レンダリングモードに切り替わります。

既定では、Blazor Web アプリテンプレートによって、1 つのプロジェクトを使用する静的および対話型の両方のサーバー側レンダリングが有効になります。対話型 WebAssembly レンダリングモードも有効にした場合、プロジェクトには、WebAssembly ベースコンポーネント用の追加のクライアントプロジェクト (.Client) が含められます。クライアントプロジェクトからビルドされた出力がブラウザーにダウンロードされ、クライアントで実行されます。対話型 WebAssembly または対話型自動レンダリングモードを使用するコンポーネントは、すべてクライアントプロジェクトからビルドする必要があります。

詳細については、「ASP.NET Core Blazor レンダリングモード」を参照してください。

アプリにより、インタラクティビティの場所がコンポーネントごと/ページ単位で既定の設定になります。アプリ全体のインタラクティビティを確立するには、-ai|--all-interactive オプションを使います。
```
dotnet new blazor -o BlazorApp -ai
```
このオプションを選ぶと、最上位レベルの HeadOutlet と Routes コンポーネントに対するレンダリングモードの指定により、App コンポーネント内のアプリ全体のインタラクティビティが設定されます。これらのコンポーネントにインタラクティビティを設定すると、アプリ内のすべての子コンポーネントにインタラクティビティが反映されます。

インタラクティビティの場所は、対話型レンダリングモード (-int|--interactivity) が None でなく、認証が有効でない場合にのみ設定できます。

サンプルページとスタイル指定のないアプリを作成するには、-e|--empty オプションを使います。
```
dotnet new blazor -o BlazorApp -e
```
スタンドアロンの Blazor WebAssembly エクスペリエンスを得るには、blazorwasm テンプレートを使うコマンドシェルで次のコマンドを実行します。
```
dotnet new blazorwasm -o BlazorApp
```
サンプルページとスタイル指定のないスタンドアロンの Blazor WebAssembly アプリを作成するには、-e|--empty オプションを使います。
```
dotnet new blazorwasm -o BlazorApp -e
```

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

デモコードと Bootstrap が含まれる Blazor Server エクスペリエンスの場合は、次のコマンドを実行します。
```
dotnet new blazorserver -o BlazorApp
```
または、blazorserver-empty プロジェクトテンプレートを使用して、デモコードと Bootstrap なしで Blazor Server アプリを作成します。
```
dotnet new blazorserver-empty -o BlazorApp
```
デモコードと Bootstrap を使用したスタンドアロンの Blazor WebAssembly エクスペリエンスの場合は、次のコマンドを実行します。
```
dotnet new blazorwasm -o BlazorApp
```
または、blazorwasm-empty プロジェクトテンプレートを使用して、デモコードと Bootstrap なしでスタンドアロンの Blazor WebAssembly アプリを作成します。
```
dotnet new blazorwasm-empty -o BlazorApp
```
デモコードと Bootstrap が含まれるホステッド Blazor WebAssembly エクスペリエンスの場合は、ホステッドオプション (-ho/--hosted) をコマンドに追加します。
```
dotnet new blazorwasm -o BlazorApp -ho
```
または、ホステッドオプションを含む blazorwasm-empty テンプレートを使用して、デモコードと Bootstrap なしでホステッド Blazor WebAssembly アプリを作成します。
```
dotnet new blazorwasm-empty -o BlazorApp -ho
```

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

Blazor WebAssembly エクスペリエンスの場合、次のコマンドを実行します。
```
dotnet new blazorwasm -o BlazorApp
```
ホステッド Blazor WebAssembly エクスペリエンスの場合は、ホステッドオプション (-ho または --hosted) をコマンドに追加します。
```
dotnet new blazorwasm -o BlazorApp -ho
```
Blazor Server エクスペリエンスの場合、次のコマンドを実行します。
```
dotnet new blazorserver -o BlazorApp
```

Visual Studio Code で BlazorApp フォルダーを開きます。

Visual Studio Code でプロジェクトのビルドとデバッグを行うための資産を追加するように求められたら、[はい] を選択します。

Visual Studio Code でビルドとデバッグの資産 (launch.json と tasks.json ファイルを含む .vscode フォルダー) を追加するように自動的に求められない場合は、[表示]>[コマンドパレット] の順に選び、検索ボックスに「.NET」と入力してください。コマンドの一覧から、.NET: Generate Assets for Build and Debug コマンドを選択してください。

Note

Visual Studio Code の構成と使用の詳細については、Visual Studio Code のドキュメントを参照してください。

プロジェクトの 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"
    }
  ]
}

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",
    ...
],
...

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

開発証明書を信頼する

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

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

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

Visual Studio の外部にあるツールは、ソリューションファイルと対話することができます。

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

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

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

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

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

Visual Studio Code の構成と使用の詳細については、Visual Studio Code のドキュメントを参照してください。

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

Blazor フレームワークには、新しいアプリを作成するためのテンプレートが用意されています。 Blazor 開発用に選択したツール (Visual Studio、Visual Studio Code、または .NET コマンドラインインターフェイス (CLI)) に関わらず、このテンプレートは、新しい Blazor プロジェクトとソリューションを作成するために使用されます。

Blazor Web アプリプロジェクトテンプレート: blazor
Blazor WebAssembly スタンドアロンアプリプロジェクトのテンプレート: blazorwasm

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

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

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

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

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

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

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

ASP.NET Core Blazor 用のツール

開発証明書を信頼する

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

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

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

その他のリソース

フィードバック

その他のリソース

ASP.NET Core Blazor 用のツール

開発証明書を信頼する

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

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

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

その他のリソース

フィードバック

その他のリソース

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

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