ASP.NET Core Blazor 用のツール
注意
これは、この記事の最新バージョンではありません。 現在のリリースについては、この記事の .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 または自動レンダリング モードを使うコンポーネントは、すべてクライアント プロジェクトからビルドする必要があります。重要
Blazor Web アプリを使用する場合、Blazor ドキュメントのサンプル コンポーネントのほとんどは、機能するために、また記事で説明されている概念を実証するためにインタラクティビティを "必要とします"。 記事で提供されるコンポーネントの例をテストする場合は、アプリがグローバル対話機能を採用しているか、コンポーネントが対話型レンダリング モードを採用していることを確認してください。
詳細については、「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 の既定のテンプレート」:
- コマンド シェルで
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 の既定のテンプレート」:
- コマンド シェルで
dotnet new
CLI コマンドにヘルプ オプション (-h
または--help
) を渡します:dotnet new blazorserver -h
dotnet new blazorwasm -h
その他のリソース
ASP.NET Core
フィードバック
https://aka.ms/ContentUserFeedback」を参照してください。
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「フィードバックの送信と表示