イントロ
目的
Blazor を使用した最初の Web アプリをビルドします。
前提条件
完了までの時間
10 ～ 15 分 + ダウンロード/インストール時間
シナリオ
シンプルなカウンター コンポーネントの作成、使用、変更を行います。
ダウンロードしてインストール
Visual Studio 2022 のダウンロード
If you prefer, you can also get started with Blazor using the command-line interface version of the tutorial.
インストール中に、ASP.NET と Web 開発 ワークロードを選択する必要があります (上記のインストール リンクでは、そのオプションが既に事前に選択されています)。
Visual Studio 2022 を既にお使いですか?
Visual Studio 2022 を既にお持ちの場合は、以下の ASP.NET と Web 開発 ワークロードを追加できます。
Windows キーを選択し、Visual Studio インストーラー と入力して、Enter キーを押します。
プロンプトが表示された場合は、インストーラーが自分自身を更新することを許可します。
Visual Studio 2022 の更新プログラムが利用可能な場合は、Update ボタンが表示されます。それを選択して、インストールを変更する前に更新します。
Visual Studio 2022 のインストールを見つけて、[変更] ボタンを選択します。
まだ選択されていない場合は、ASP.NET と Web 開発 ワークロードを選択し[変更] ボタンを選択します。それ以外の場合は、ダイアログ ウィンドウを閉じてください。
.NET アプリの構築を開始するには、.NET SDK (ソフトウェア開発キット) をダウンロードしてインストールします。
すべてが正しくインストールされていることを確認する
インストールが完了したら、新しい ターミナルを開き、次のコマンドを実行します:
インストールが成功した場合、次のような出力が表示されます:
Command prompt
Usage: dotnet [options]
Usage: dotnet [path-to-application]
Options:
-h|--help Display help.
--info Display .NET information.
--list-sdks Display the installed SDKs.
--list-runtimes Display the installed runtimes.
path-to-application:
The path to an application .dll file to execute. 問題がなければ、下の [続行] を選択して次の手順に進みます。
エラーが発生しましたか?
zsh: コマンドが見つかりません: dotnet エラーが発生した場合、新しい ターミナル ウィンドウが開かれていることを確認してください。問題を解決できない場合は、[問題が発生しました] ボタンを使用して、問題解決のためのサポートを受けてください。
dotnet: コマンドが見つかりません エラーが発生した場合は、新しい ターミナル ウィンドウが開かれていることを確認してください。問題を解決できない場合は、[問題が発生しました ] ボタンを使用して、問題の修正方法を確認してください。
アプリを作成する
Visual Studio を開始し、[新しいプロジェクトの作成] を選択します。
[新しいプロジェクトの作成] ダイアログで、検索ボックスに「Blazor 」と入力し、Enter キーを押します。
Blazor Server アプリ テンプレートを選択し、[次へ] を選択します。
[新しいプロジェクトの構成] ダイアログで、プロジェクト名として「BlazorApp 」を入力し、[次へ] を選択します。[追加情報] ダイアログで、すべてを既定値のままにして、[作成] を選択できます。
ソリューション エクスプローラー を使用してプロジェクトの内容をご覧ください。
いくつかのファイルが作成され、すぐに実行できるシンプルな Blazor アプリが作成されました。
Program.cs は、サーバーを起動するアプリのエントリ ポイントであり、アプリ サービスとミドルウェアを構成する場所です。App.razor は、アプリ向けルート コンポーネントです。Pages ディレクトリには、アプリ向けのサンプル Web ページが含まれています。BlazorApp.csproj は、アプリ プロジェクトとその依存関係を定義するもので、ソリューション エクスプローラーで BlazorApp プロジェクト ノードをダブルクリックすると表示されます。Properties 内の launchSettings.json は、ローカル開発環境のさまざまなプロファイル設定を定義します。ポート番号は、プロジェクトの作成時に自動的に割り当てられ、このファイルに保存されます。
問題がなければ、下の [続行] を選択して次の手順に進みます。
ターミナルで、次のコマンドを実行してアプリを作成します:
Command prompt Copy
dotnet new blazorserver -o BlazorApp --no-https -f net6.0 このコマンドは、新しい Blazor アプリ プロジェクトを作成し、現在の場所内の BlazorApp という名前の新しいディレクトリに配置します。
前のコマンドによって作成された新しいBlazorAppディレクトリに移動します。
Command prompt Copy
cd BlazorApp BlazorApp ディレクトリの内容をさっと目を通します。BlazorApp ディレクトリにはいくつかのファイルが作成されており、すぐに実行できるシンプルな Blazor アプリがあります。
Program.cs は、サーバーを起動するアプリのエントリ ポイントであり、アプリ サービスとミドルウェアを構成する場所です。App.razor は、アプリ向けルート コンポーネントです。Pages ディレクトリには、アプリ向けのサンプル Web ページが含まれています。BlazorApp.csproj では、アプリ プロジェクトとその依存関係を定義しています。Properties 内の launchSettings.json は、ローカル開発環境のさまざまなプロファイル設定を定義します。5000 - 5300 の範囲のポート番号は、プロジェクトの作成時に自動的に割り当てられ、このファイルに保存されます。
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> をリッスンしていることを表示するまで待ち、次にブラウザーを開いてそのアドレスに移動します。この例では、dotnet watchはhttp://localhost:5000 についてリッスンしていることを示しました。
次のページにアクセスすると、最初の Blazor アプリが正常に実行されます!
表示されるページは、Pages ディレクトリ内にある Index.razor ファイルによって定義されます。内容は次のようになります:
Pages/Index.razor
@page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" /> ホームページとして設定し、"Hello, world!" や "Welcome to your new app" を表示するコードが含まれています。これには、Blazor フィードバック アンケートへのリンクをレンダリングする SurveyPrompt コンポーネントも含まれています。
カウンターを試す
実行中のアプリで、左側のサイドバーにある [カウンター] タブをクリックして、[カウンター] ページに移動します。すると、次のページが表示されます:
こちらをクリック ボタンを選択すると、ページを更新することなくカウントを増加させることができます。Web ページでカウンターを増やすには、通常は JavaScript を記述する必要がありますが、Blazor では C# を使用することができます。
Counter コンポーネントの実装は、Pages ディレクトリ内にある Counter.razor ファイルにあります。
Pages/Counter.razor Copy
@page "/counter"
<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 コンポーネントがその内容をレンダリングします。
Click me ボタンが選択されるたび:
onclick イベントが発生します。IncrementCount メソッドが呼び出されます。currentCount が増分されます。コンポーネントがレンダリングされ、更新数が表示されます。
コンポーネントの追加
各 .razor ファイルでは、再利用可能な UI コンポーネントが定義されます。
Visual Studio で Index.razor ファイルを開きます。Index.razor ファイルは既に存在し、プロジェクトの作成時に作成されました。これは、先ほど作成した BlazorApp ディレクトリ内の Pages フォルダーにあります。
任意のテキスト エディターで Index.razor ファイルを開きます。Index.razor ファイルは既に存在し、dotnet new コマンドを実行したときに作成されました。これは、先ほど作成した BlazorApp ディレクトリ内の Pages フォルダーにあります。
Index.razor ファイルの最後に <Counter /> 要素を追加することで、アプリのホームページに Counter コンポーネントが追加されます。
Pages/Index.razor Copy
@page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<Counter />
[ホット リロード] ボタンをクリックして、実行中のアプリに変更を適用します。すると、Counter コンポーネントがホーム ページに表示されます。
この変更を保存すると、dotnet watch コマンドを実行すると、実行中のアプリに変更が適用され、Counter コンポーネントがホーム ページに表示されます。
コンポーネントを変更する
コンポーネント パラメーターは、属性または子コンテンツを使用して指定され、それは子コンポーネントのプロパティを設定できます。ボタンをクリックするたびにインクリメントする量を指定するためにCounter コンポーネントのパラメーターを定義します:
IncrementAmount のパブリック プロパティに、[Parameter] 属性を追加しました。IncrementCount メソッドを変更して、currentCount の値を増加させるときに IncrementAmount を使います。
次のコードは、それを実現する方法を示しています。 強調表示された行は変更を示しています。
Pages/Counter.razor Copy
@page "/counter"
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p>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;
}
} Index.razor で <Counter> 要素を更新して、以下のコードの強調表示されている行に示すように、インクリメントの増分量を 10 に変更するIncrementAmount 属性を追加します:
Pages/Index.razor Copy
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<Counter IncrementAmount="10" />
[ホット リロード] ボタンをクリックして、アプリに変更を適用します。Index コンポーネントは、次の画像に示すように、[Click me] ボタンが選択されるたびに 10 ずつ増加する独自のカウンターを持つようになりました。/counter にある Counter コンポーネント (Counter.razor) で 1 ずつ増加し続けます。
Index コンポーネントは、次の画像に示すように、Click me ボタンが選択されるたびに 10 ずつ増加する独自のカウンターを持つようになりました。/counter にある Counter コンポーネント (Counter.razor) で 1 ずつ増加し続けます。
次の手順
おめでとうございます。最初の Blazor アプリをビルドして実行しました。
学習を続ける
基本情報が得られたので、To Do リスト アプリを作成する Microsoft Learn の自習モジュールを使用して Blazor で初めての Blazor アプリの作成を続行します。
Microsoft Learn: Blazor ToDo リスト アプリをビルドする
.NET を使用したその他の Web 開発
.NET シリーズを使用した、6 部からなる Web 開発入門をご覧ください。ここでは、優れたプロジェクトを構築し、Razor Pages、最小 API、Blazor などのすべてを学びます。
.NET を使用した Web 開発入門
Blazor for Beginners
Jeff が最初から最後まで完全な Blazor アプリを構築する手順を説明します。
あなたは下記にもご興味がおありかもしれません...
![カウンター ページには、ページに表示されているカウント数を増やすための [こちらをクリック] ボタンが表示されます。](/static/images/blazor-tutorial/screenshot-blazor-tutorial-try.png?v=3WUZSPnIc0RMqqFajFCwEkakmsmt-VW2UARfR_sSe0U)
![ツール バーには、[デバッグ | デバッグの開始] メニュー (F5) 経由で使用できるコマンドのショートカット ボタンがあります。](/static/images/blazor-tutorial/click-debug-button.png?v=0ZmK1ZI0iAPdiuxLHiUGIZuwkFzC8Iz2M5RgIilum84)
![ツール バーには、[デバッグ | ホット リロード] メニュー (Shift + F10) 経由で使用できるコマンドのショートカット ボタンがあります。](/static/images/blazor-tutorial/hot-reload.png?v=rFMyhNLnxMTmqGGtaiLXa4N7vcb6GX0r0_KSkjh1UqI)
![ツール バーには、[デバッグ | デバッグの停止] メニュー (Shift + F5) 経由で使用できるコマンドのショートカット ボタンがあります。](/static/images/blazor-tutorial/stop-debug.png?v=Ns9KiniT9TPScGavXjQpZZlcDwBjpxW4wZsijYgqIu0)
