イントロ
目的
Blazor を使用した最初の Web アプリをビルドします。
前提条件
完了までの時間
10 分から 15 分
シナリオ
シンプルなカウンター コンポーネントの作成、使用、変更を行います。
ダウンロードしてインストール
.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. 問題がなければ、下の [続行] を選択して次の手順に進みます。
エラーが発生しましたか?
“'dotnet' は内部コマンドまたは外部コマンドとして認識されていません ” というエラーを受信した場合は、新しい コマンド プロンプトを開いていることを確認してください。問題が解決しない場合は、[問題発生] ボタンを押して、問題解決のためのサポートを受けてください。
zsh: コマンドが見つかりません: dotnet エラーが発生した場合、新しい ターミナル ウィンドウが開かれていることを確認してください。問題を解決できない場合は、[問題が発生しました] ボタンを使用して、問題解決のためのサポートを受けてください。
dotnet: コマンドが見つかりません エラーが発生した場合は、新しい ターミナル ウィンドウが開かれていることを確認してください。問題を解決できない場合は、[問題が発生しました ] ボタンを使用して、問題の修正方法を確認してください。
アプリを作成する
コマンド プロンプトで、次のコマンドを実行してアプリを作成します:
ターミナルで、次のコマンドを実行してアプリを作成します:
Terminal Copy
dotnet new blazorserver -o BlazorApp --no-https -f net6.0 このコマンドは、新しい Blazor アプリ プロジェクトを作成し、現在の場所内の BlazorApp という名前の新しいディレクトリに配置します。
前のコマンドによって作成された新しいBlazorAppディレクトリに移動します。
BlazorApp ディレクトリの内容をさっと目を通します。BlazorApp ディレクトリにはいくつかのファイルが作成されており、すぐに実行できるシンプルな Blazor アプリがあります。
Program.cs は、サーバーを起動するアプリのエントリ ポイントであり、アプリ サービスとミドルウェアを構成する場所です。App.razor は、アプリ向けルート コンポーネントです。Pages ディレクトリには、アプリ向けのサンプル Web ページが含まれています。BlazorApp.csproj では、アプリ プロジェクトとその依存関係を定義しています。Properties 内の launchSettings.json は、ローカル開発環境のさまざまなプロファイル設定を定義します。5000 - 5300 の範囲のポート番号は、プロジェクトの作成時に自動的に割り当てられ、このファイルに保存されます。
BlazorApp ディレクトリ パスは、チュートリアルの後半で使用するので、メモしておいてください。
問題がなければ、下の [続行] を選択して次の手順に進みます。
エラーが発生しましたか?
Template "Blazor Server App" could not be created. Access to the path 'C:\Windows\System32\BlazorApp' is denied に類似したメッセージを受信した場合は、現在のディレクトリを、新しいフォルダーを作成する権限のあるディレクトリに変更して、コマンドを再実行してみてください。問題を解決できない場合は、I ran into an issue ボタンを使用して、問題の修正についてサポートを受けてください。
SDK がインストールされていることが確実でありながら、プロジェクトの作成中に SDK が見つからない場合は、マシンの PATH 環境変数に問題がある可能性があります。この問題を診断して解決する方法については、 Stack Overflow 投稿 の手順をご覧ください。
発生している問題を解決できない場合は、[I ran into an issue] ボタンを選択して、問題の修正方法を確認してください。
アプリケーションを実行する
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 コンポーネントが定義されます。
任意のテキスト エディターで 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 /> この変更を保存すると、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 ずつ増加し続けます。
次の手順
おめでとうございます。最初の Blazor アプリをビルドして実行しました。
学習を続ける
基本情報が得られたので、To Do リスト アプリを作成する Microsoft Learn の自習モジュールを使用して Blazor で初めての Blazor アプリの作成を続行します。
Microsoft Learn: Blazor ToDo リスト アプリをビルドする
Blazor for Beginners
Jeff が最初から最後まで完全な Blazor アプリを構築する手順を説明します。
あなたは下記にもご興味がおありかもしれません...
![カウンター ページには、ページに表示されているカウント数を増やすための [こちらをクリック] ボタンが表示されます。](/static/images/screenshot-blazor-tutorial-try.png?v=3WUZSPnIc0RMqqFajFCwEkakmsmt-VW2UARfR_sSe0U)
