Blazor を使用した最初の Web アプリをビルドします。
ありません。
macOS 10.15 以降のバージョン。
10 ~ 15 分 + ダウンロード/インストール時間
シンプルなカウンター コンポーネントの作成、使用、変更を行います。
必要に応じて、チュートリアルの コマンド ライン インターフェイス バージョンを使用して Blazor を使い始めることもすることもできます。
インストール中に、ASP.NET と Web 開発 ワークロードを選択する必要があります (上記のインストール リンクでは、そのオプションが既に事前に選択されています)。
Visual Studio 2022 を既にお持ちの場合は、以下の ASP.NET と Web 開発 ワークロードを追加できます。
.NET アプリの構築を開始するには、.NET SDK (ソフトウェア開発キット) をダウンロードしてインストールします。
.NET 7 SDK のダウンロード (64 ビット)
ARM64 のダウンロード
Apple M1 チップを搭載した Mac をお使いの場合は、Arm64 バージョンの SDK をインストールする必要があります。
インストールが完了したら、新しい ターミナルを開き、次のコマンドを実行します:
dotnet
インストールが成功した場合、次のような出力が表示されます:
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 Server アプリ テンプレートを選択し、[次へ] を選択します。
追加情報 ウィンドウで、まだ選択していない場合はFramework ドロップダウンから .NET 7.0 (Standard Term Support) を選択し、作成 ボタンをクリックします。
プロジェクトが作成され、Visual Studioに読み込まれます。ソリューション エクスプローラー を使用して、プロジェクトの内容を確認します。
いくつかのファイルが作成され、すぐに実行できるシンプルな Blazor アプリが作成されました。
Program.cs
は、サーバーを起動するアプリのエントリ ポイントであり、アプリ サービスとミドルウェアを構成する場所です。App.razor
は、アプリ向けルート コンポーネントです。Pages
ディレクトリには、アプリ向けのサンプル Web ページが含まれています。BlazorApp.csproj
は、アプリ プロジェクトとその依存関係を定義するもので、ソリューション エクスプローラーで BlazorApp プロジェクト ノードをダブルクリックすると表示されます。Properties
内の launchSettings.json
は、ローカル開発環境のさまざまなプロファイル設定を定義します。ポート番号は、プロジェクトの作成時に自動的に割り当てられ、このファイルに保存されます。問題がなければ、下の [続行] を選択して次の手順に進みます。
ターミナルで、次のコマンドを実行してアプリを作成します:
dotnet new blazorserver -o BlazorApp --no-https -f net7.0
このコマンドは、新しい Blazor アプリ プロジェクトを作成し、現在の場所内の BlazorApp
という名前の新しいディレクトリに配置します。
前のコマンドによって作成された新しいBlazorApp
ディレクトリに移動します。
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 アプリを正常に実行することができます。
ターミナルで、次のコマンドを実行します:
dotnet watch
dotnet watch
コマンドは、アプリをビルドして起動し、コードを変更するとすぐ、アプリを更新します。アプリの停止は、Ctrl+C を選択することでいつでも可能です。
アプリが http://localhost:<port number>でリッスンしていることを表示し、ブラウザーがそのアドレスで起動するのを待ちます。
アプリが http://localhost:<port number> でリッスンしていることを表示するまで待ってから、ブラウザーを開き、そのアドレスに移動します。この例では、dotnet watch
は、http://localhost:7178
でリッスンしていることを示しています。
次のページにアクセスすると、最初の Blazor アプリが正常に実行されます!
表示されるページは、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
ファイルにあります。
@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
コンポーネントが追加されます。
@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
を使います。次のコードは、それを実現する方法を示しています。 強調表示された行は変更を示しています。
@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
属性を追加します:
@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 シリーズを使用した、6 部からなる Web 開発入門をご覧ください。ここでは、優れたプロジェクトを構築し、Razor Pages、最小 API、Blazor などのすべてを学びます。
Jeff が最初から最後まで完全な Blazor アプリを構築する手順を説明します。
あなたは下記にもご興味がおありかもしれません...