イントロ
目的
Blazor を使用して、ASP.NET Core を使用した最初の Web アプリをビルドします。
前提条件
完了までの時間
10 分から 15 分
シナリオ
シンプルなカウンター コンポーネントの作成、使用、変更を行います。
Visual Studio を使用しますか?
代わりに Visual Studio チュートリアルをお試しいただくこともできます。
ダウンロードしてインストール
.NET アプリのビルドを開始するには、.NET SDK をダウンロードしてインストールします。
すべてが正しくインストールされていることを確認する
インストールが完了したら、新しい コマンド プロンプトを開き、次のコマンドを実行します:
インストールが完了したら、新しい ターミナルを開き、次のコマンドを実行します:
Command prompt
dotnet --version
インストールが成功した場合、バージョン 8.0.100 以降が出力されます。
問題がなければ、下の [続行] を選択して次の手順に進みます。
エラーが発生しましたか?
"'dotnet' は内部コマンドまたは外部コマンドとして認識されていません" というエラーを受信した場合は、新しいコマンド プロンプトを開いていることを確認してください。コンピューターを再起動しても問題が解決しない場合は、[問題が発生しました] ボタンを使用して問題解決のためのサポートを受けてください。
アプリを作成する
コマンド プロンプトで、次のコマンドを実行してアプリを作成します:
Command prompt
dotnet new blazor -o BlazorApp
このコマンドは、新しい Blazor Web アプリ プロジェクトを作成し、現在の場所内の BlazorApp
という名前の新しいディレクトリに配置します。
前のコマンドによって作成された新しいBlazorApp
ディレクトリに移動します。
Command prompt
cd BlazorApp
BlazorApp
ディレクトリの内容にざっと目を通します。
BlazorApp
ディレクトリにはいくつかのファイルが作成されており、すぐに実行できるシンプルな Blazor アプリがあります。
Program.cs
は、サーバーを起動するアプリのエントリ ポイントであり、アプリ サービスとミドルウェアを構成する場所です。
-
Components
ディレクトリ内:
App.razor
は、アプリ向けルート コンポーネントです。
Routes.razor
は、Blazor ルーターを構成します。
Pages
ディレクトリには、アプリ向けのサンプル Web ページが含まれています。
BlazorApp.csproj
では、アプリ プロジェクトとその依存関係を定義しています。
Properties
内の launchSettings.json
は、ローカル開発環境のさまざまなプロファイル設定を定義します。ポート番号は、プロジェクトの作成時に自動的に割り当てられ、このファイルに保存されます。
BlazorApp
ディレクトリ パスは、チュートリアルの後半で使用するので、メモしておいてください。
問題がなければ、下の [続行] を選択して次の手順に進みます。
エラーが発生しましたか?
「Template "Blazor Web App" を作成できませんでした。パス 'C:\Windows\System32\BlazorApp' へのアクセスが拒否されました」のようなメッセージが表示される場合は、現在のディレクトリを新しいフォルダーを作成するためのアクセス許可を持つディレクトリに変更してから、コマンドを再実行してください。
SDK がインストールされていることが確実でありながら、プロジェクトの作成中に SDK が見つからない場合は、マシンの PATH 環境変数に問題がある可能性があります。この問題を診断して解決する方法については、 Stack Overflow 投稿 の手順をご覧ください。
発生している問題を解決できない場合は、[I ran into an issue] ボタンを選択して、問題の修正方法を確認してください。
アプリケーションを実行する
Command prompt
dotnet watch
dotnet watch
コマンドは、アプリをビルドして起動し、コードを変更するとすぐ、アプリを更新します。アプリの停止は、Ctrl+C を選択することでいつでも可能です。
アプリが 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
コンポーネントは、現在のページのタイトルを設定し、それがブラウザーのタブに表示されるようにします。
エラーが発生しましたか?
発生している問題を解決できない場合は、[I ran into an issue] ボタンを選択して、問題の修正方法を確認してください。
カウンターを試す
実行中のアプリで、左側のサイドバーにある [カウンター] タブをクリックして、[カウンター] ページに移動します。すると、次のページが表示されます:
こちらをクリック ボタンを選択すると、ページを更新することなくカウントを増加させることができます。Web ページでカウンターを増やすには、通常は JavaScript を記述する必要がありますが、Blazor では C# を使用することができます。
Counter
コンポーネントの実装は、Components/Pages
ディレクトリ内にある Counter.razor
ファイルにあります。
Components/Pages/Counter.razor
@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
コンポーネントがその内容をレンダリングします。
Click me ボタンが選択されるたび:
onclick
イベントが発生します。
IncrementCount
メソッドが呼び出されます。
currentCount
が増分されます。
- コンポーネントがレンダリングされ、更新数が表示されます。
コンポーネントの追加
各 .razor ファイルでは、再利用可能な UI コンポーネントが定義されます。
任意のテキスト エディターで 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 />
この変更を保存すると、dotnet watch
コマンドを実行すると、実行中のアプリに変更が適用され、Counter
コンポーネントがホーム ページに表示されます。
コンポーネントを変更する
コンポーネント パラメーターは、属性または子コンテンツを使用して指定され、それは子コンポーネントのプロパティを設定できます。ボタンをクリックするたびにインクリメントする量を指定するためにCounter
コンポーネントのパラメーターを定義します:
IncrementAmount
のパブリック プロパティに、[Parameter]
属性を追加しました。
IncrementCount
メソッドを変更して、currentCount
の値を増加させるときに IncrementAmount
を使います。
次のコードは、それを実現する方法を示しています。 強調表示された行は変更を示しています。
Components/Pages/Counter.razor
@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
@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 ずつ増加し続けます。
次の手順
おめでとうございます。最初の Blazor アプリをビルドして実行しました。
学習を続ける
基本情報が得られたので、To Do リスト アプリを作成する Microsoft Learn の自習モジュールを使用して Blazor で初めての Blazor アプリの作成を続行します。
Microsoft Learn: Blazor ToDo リスト アプリをビルドする
Blazor for Beginners
完全な Blazor アプリの構築方法を最初から最後まで説明します。
あなたは下記にもご興味がおありかもしれません...