Blazor を使用して、ASP.NET Core を使用した最初の Web アプリをビルドします
イントロ
目的
Blazor を使用して、ASP.NET Core を使用した最初の Web アプリをビルドします。
前提条件
完了までの時間
10 ～ 15 分 + ダウンロード/インストール時間
シナリオ
シンプルなカウンター コンポーネントの作成、使用、変更を行います。
ダウンロードしてインストール
Visual Studio 2022 のダウンロード
必要に応じて、チュートリアルの コマンド ライン インターフェイス バージョン を使用して Blazor を使い始めることもすることもできます。
インストール中に、ASP.NET と Web 開発 ワークロードを選択する必要があります (上記のインストール リンクでは、そのオプションが既に事前に選択されています)。
Visual Studio 2022 を既にお使いですか?
Visual Studio 2022 が既に存在する場合は、それが最新の状態であり、必要なワークロードがインストールされていることを確認してください。
Windows キーを選択し、Visual Studio インストーラー と入力して、Enter キーを押します。
プロンプトが表示された場合は、インストーラーが自分自身を更新することを許可します。
Visual Studio 2022 の更新プログラムが利用可能な場合は、[更新] ボタンが表示されます。インストールを変更する前に、それを選択して更新してください。このチュートリアルは、Visual Studio 2022 17.8 以降のバージョンでのみ機能します。
Visual Studio 2022 のインストールを見つけて、[変更] ボタンを選択します。
まだ選択されていない場合は、ASP.NET と Web 開発 ワークロードを選択し[変更] ボタンを選択します。それ以外の場合は、ダイアログ ウィンドウを閉じてください。
.NET アプリのビルドを開始するには、.NET SDK をダウンロードしてインストールします。
すべてが正しくインストールされていることを確認する
インストールが完了したら、新しい ターミナルを開き、次のコマンドを実行します:
Command prompt Copy
dotnet --version インストールが成功した場合、バージョン 8.0.100 以降が出力されます。
問題がなければ、下の [続行] を選択して次の手順に進みます。
エラーが発生しましたか?
zsh: コマンドが見つかりません: dotnet エラーが発生した場合、新しい ターミナル ウィンドウが開かれていることを確認してください。問題を解決できない場合は、[問題が発生しました] ボタンを使用して、問題解決のためのサポートを受けてください。
dotnet: コマンドが見つかりません エラーが発生した場合は、新しい ターミナル ウィンドウが開かれていることを確認してください。問題を解決できない場合は、[問題が発生しました ] ボタンを使用して、問題の修正方法を確認してください。
アプリを作成する
Visual Studio を開始し、[新しいプロジェクトの作成] を選択します。
[新しいプロジェクトの作成 ] ウィンドウで、検索ボックスに「Blazor 」と入力し、Enter キーを押します。
Blazor Web アプリ テンプレートを選択し、[次へ] を選択します。
[新しいプロジェクトの構成 ] ウィンドウで、プロジェクト名として「BlazorApp 」と入力し、[次へ ] を選択します。
まだ選択していない場合は、追加情報 ウィンドウで Framework ドロップダウンから .NET 8.0 (Long Term Support) を選択し、[作成] ボタンをクリックします。
Blazor Web アプリを作成するときは、認証を有効にするかどうか、どの対話型レンダリング モードを有効にするか、アプリのうちどれくらいを対話型にするかなど、さまざまなオプションから選択できます。このアプリでは、既定値が次のように選択されていることを確認してください。
認証の種類: なし
対話型レンダリング モード: サーバー
インタラクティビティの場所: ページ/コンポーネントごと
プロジェクトが作成され、Visual Studioに読み込まれます。ソリューション エクスプローラー を使用して、プロジェクトの内容を確認します。
いくつかのファイルが作成され、すぐに実行できるシンプルな Blazor アプリが作成されました。
Program.cs は、サーバーを起動するアプリのエントリ ポイントであり、アプリ サービスとミドルウェアを構成する場所です。
Components ディレクトリ内:
App.razor は、アプリ向けルート コンポーネントです。Routes.razor は、Blazor ルーターを構成します。Pages ディレクトリには、アプリ向けのサンプル Web ページが含まれています。
BlazorApp.csproj は、アプリ プロジェクトとその依存関係を定義するもので、ソリューション エクスプローラーで BlazorApp プロジェクト ノードをダブルクリックすると表示されます。Properties 内の launchSettings.json は、ローカル開発環境のさまざまなプロファイル設定を定義します。ポート番号は、プロジェクトの作成時に自動的に割り当てられ、このファイルに保存されます。
問題がなければ、下の [続行] を選択して次の手順に進みます。
ターミナルで、次のコマンドを実行してアプリを作成します:
Command prompt Copy
dotnet new blazor -o BlazorApp このコマンドは、新しい Blazor Web アプリ プロジェクトを作成し、現在の場所内の BlazorApp という名前の新しいディレクトリに配置します。
前のコマンドによって作成された新しいBlazorAppディレクトリに移動します。
Command prompt Copy
cd BlazorApp BlazorApp ディレクトリの内容にざっと目を通します。
BlazorApp ディレクトリにはいくつかのファイルが作成されており、すぐに実行できるシンプルな Blazor アプリがあります。
Program.cs は、サーバーを起動するアプリのエントリ ポイントであり、アプリ サービスとミドルウェアを構成する場所です。
Components ディレクトリ内:
App.razor は、アプリ向けルート コンポーネントです。Routes.razor は、Blazor ルーターを構成します。Pages ディレクトリには、アプリ向けのサンプル Web ページが含まれています。
BlazorApp.csproj では、アプリ プロジェクトとその依存関係を定義しています。Properties 内の launchSettings.json は、ローカル開発環境のさまざまなプロファイル設定を定義します。ポート番号は、プロジェクトの作成時に自動的に割り当てられ、このファイルに保存されます。
BlazorApp ディレクトリ パスは、チュートリアルの後半で使用するので、メモしておいてください。
問題がなければ、下の [続行] を選択して次の手順に進みます。
アプリケーションを実行する
Visual Studio のデバッグ ツール バーにある [デバッグの開始] ボタン (緑の矢印) をクリックして、アプリを実行します。
アプリが実行されると、[ホット リロード] ボタンをクリックすることで、実行中のアプリにコードの変更を適用できます。
上部のツール バーにある [停止] ボタンをクリックすることで、いつでもアプリを停止できます。
Visual Studio で Web アプリを初めて実行する場合に、HTTPS 経由でアプリをホストするための開発証明書が設定され、その証明書を信頼するよう求めるメッセージが表示されます。この証明書を信頼することに同意することをお勧めします。この証明書はローカル開発にのみ使用され、この証明書がないとほとんどのブラウザーで Web サイトのセキュリティについて苦情が報告されます。
ブラウザーでアプリが起動するのを待ちます。次のページに移動すると、最初の Blazor アプリを正常に実行することができます。
ターミナルで、次のコマンドを実行します:
Command prompt Copy
dotnet watch dotnet watch コマンドは、アプリをビルドして起動し、コードを変更するとすぐ、アプリを更新します。アプリの停止は、Ctrl +C を選択することでいつでも可能です。
アプリが http://localhost:<port number> でリッスンしていることを表示し、ブラウザーがそのアドレスで起動するのを待ちます。
アプリが http://localhost:<port number> でリッスンしていることを表示するまで待ってから、ブラウザーを開き、そのアドレスに移動します。
次のページにアクセスすると、最初の Blazor アプリが正常に実行されます!
表示されるページは、Components/Pages ディレクトリ内にある Home.razor ファイルによって定義されます。内容は次のようになります。
Components/Pages/Home.razor
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app. これには、これをホームページとして設定し、"Hello, world!" と "Welcome to your new app" というテキストを表示するコードが既に含まれています。PageTitle コンポーネントは、現在のページのタイトルを設定し、それがブラウザーのタブに表示されるようにします。
エラーが発生しましたか?
エラー コード NET::ERR_CERT_INVALID で "接続はプライベートではありません" というエラー メッセージが表示される場合は、ブラウザーで新しい証明書を取得してアプリケーションを再度実行できるように、すべてのブラウザー ウィンドウを再起動してみてください。
発生している問題を解決できない場合は、[I ran into an issue] ボタンを選択して、問題の修正方法を確認してください。
カウンターを試す
実行中のアプリで、左側のサイドバーにある [カウンター] タブをクリックして、[カウンター] ページに移動します。すると、次のページが表示されます:
こちらをクリック ボタンを選択すると、ページを更新することなくカウントを増加させることができます。Web ページでカウンターを増やすには、通常は JavaScript を記述する必要がありますが、Blazor では C# を使用することができます。
Counter コンポーネントの実装は、Components/Pages ディレクトリ内にある Counter.razor ファイルにあります。
Components/Pages/Counter.razor Copy
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
} 上部の @page ディレクティブの指定に従って、ブラウザーで /counter を要求すると、Counter コンポーネントがその内容をレンダリングします。@rendermode ディレクティブは、コンポーネントの対話型サーバー レンダリングを有効にして、ブラウザーからユーザー インターフェイス イベントを処理できるようにします。
Click me ボタンが選択されるたび:
onclick イベントが発生します。IncrementCount メソッドが呼び出されます。currentCount が増分されます。コンポーネントがレンダリングされ、更新数が表示されます。
コンポーネントの追加
各 .razor ファイルでは、再利用可能な UI コンポーネントが定義されます。
Visual Studio で Home.razor ファイルを開きます。Home.razor ファイルは、プロジェクトの作成時に作成されており、既に存在しています。このファイルは、先ほど作成した BlazorApp ディレクトリ内の Components/Pages フォルダーにあります。
任意のテキスト エディターで Home.razor ファイルを開きます。Home.razor ファイルは、dotnet new コマンドを実行したときに作成されており、既に存在しています。このファイルは、先ほど作成した BlazorApp ディレクトリ内の Components/Pages フォルダーにあります。
Home.razor ファイルの最後に <Counter /> 要素を追加することで、アプリのホームページに Counter コンポーネントが追加されます。
Components/Pages/Home.razor
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter />
[ホット リロード] ボタンをクリックして、実行中のアプリに変更を適用します。すると、Counter コンポーネントがホーム ページに表示されます。
この変更を保存すると、dotnet watch コマンドを実行すると、実行中のアプリに変更が適用され、Counter コンポーネントがホーム ページに表示されます。
コンポーネントを変更する
コンポーネント パラメーターは、属性または子コンテンツを使用して指定され、それは子コンポーネントのプロパティを設定できます。ボタンをクリックするたびにインクリメントする量を指定するためにCounter コンポーネントのパラメーターを定義します:
IncrementAmount のパブリック プロパティに、[Parameter] 属性を追加しました。IncrementCount メソッドを変更して、currentCount の値を増加させるときに IncrementAmount を使います。
次のコードは、それを実現する方法を示しています。 強調表示された行は変更を示しています。
Components/Pages/Counter.razor Copy
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
[Parameter]
public int IncrementAmount { get; set; } = 1;
private void IncrementCount()
{
currentCount += IncrementAmount;
}
} Home.razor で、<Counter> 要素を更新して、次のコードの強調表示された行に示すように、増分量を 10 に変更する IncrementAmount 属性を追加します。
Components/Pages/Home.razor Copy
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter IncrementAmount="10" />
[ホット リロード] ボタンをクリックして、アプリに変更を適用します。Home コンポーネントは、次の画像に示すように、[Click me] ボタンが選択されるたびに 10 ずつ増加する独自のカウンターを持つようになりました。/counter にある Counter コンポーネント (Counter.razor) で 1 ずつ増加し続けます。
Home コンポーネントは、次の画像に示すように、[Click me] ボタンが選択されるたびに 10 ずつ増加する独自のカウンターを持つようになりました。/counter にある Counter コンポーネント (Counter.razor) で 1 ずつ増加し続けます。
次の手順
おめでとうございます。最初の Blazor アプリをビルドして実行しました。
学習を続ける
基本情報が得られたので、To Do リスト アプリを作成する Microsoft Learn の自習モジュールを使用して Blazor で初めての Blazor アプリの作成を続行します。
Microsoft Learn: Blazor ToDo リスト アプリをビルドする
Blazor for Beginners
完全な Blazor アプリの構築方法を最初から最後まで説明します。
あなたは下記にもご興味がおありかもしれません...
Feedback
![フレームワークのドロップダウンに .NET 8.0 が表示されている Visual Studio の [追加情報] ダイアログ。](https://dotnet.microsoft.com/blob-assets/images/tutorials/blazor/vs-additional-info.png)
![ツール バーには、[デバッグ | デバッグの開始] メニュー (F5) 経由で使用できるコマンドのショートカット ボタンがあります。](https://dotnet.microsoft.com/blob-assets/images/tutorials/blazor/click-debug-button.png)
![ツール バーには、[デバッグ | ホット リロード] メニュー (Shift + F10) 経由で使用できるコマンドのショートカット ボタンがあります。](https://dotnet.microsoft.com/blob-assets/images/tutorials/blazor/hot-reload.png)
![ツール バーには、[デバッグ | デバッグの停止] メニュー (Shift + F5) 経由で使用できるコマンドのショートカット ボタンがあります。](https://dotnet.microsoft.com/blob-assets/images/tutorials/blazor/stop-debug.png)
![カウンター ページには、ページに表示されているカウント数を増やすための [こちらをクリック] ボタンが表示されます。](https://dotnet.microsoft.com/blob-assets/images/tutorials/blazor/screenshot-blazor-tutorial-try.png)
