イントロ
目的
Visual Studio Code で Blazor を使用して、ASP.NET Core を使用した最初の Web アプリをビルドします。
前提条件
完了までの時間
10 ～ 15 分 + ダウンロード/インストール時間
シナリオ
シンプルなカウンター コンポーネントの作成、使用、変更を行います。
Visual Studioまたは CLI をお好みですか?
必要に応じて、Visual Studio またはコマンド ライン インターフェイスを使用して Blazor を使い始めることもできます。
ダウンロードしてインストール
最初の .NET アプリケーションをビルドするには、.NET SDK、Visual Studio Code、および C# 開発キットをインストールする必要があります。
.NET SDK (ソフトウェア開発キット) は、C# を使用してアプリケーションをビルドおよび実行するのに必要なツールとライブラリの、無料のオープンソース コレクションです。C# は、最新のオブジェクト指向プログラミング言語であり、このチュートリアルで使用されています。
Visual Studio Code (VS Code) は、軽量かつ無料の、世界的に人気の高いオープンソース コード エディターです。これは、C# コードを記述するために使用します。
C# 開発キットは、C# の開発を容易にする、一連の強力な VS Code 拡張機能です。これは、アプリのビルド時にコードを記述、テスト、デバッグするのに役立ちます。
.NET Winget 構成ファイルでは、.NET 8 SDK、VS Code、および C# 開発キットが自動的にインストールされます。既にインストールされているものがあれば、Winget はそのインストール手順をスキップします。
Visual Studio Code を使用して初めての .NET アプリケーションをビルドするには、環境を設定します。
-
.NET SDK をダウンロードしてインストールします:
-
VS Code をダウンロードしてインストールします:
VS Code のダウンロード
-
VS Code を開き、左側にある VS Code のアクティビティ バーにある 拡張機能 ボタンを選択します。検索バーに C# と入力し、C# 開発キットを選択し、C# 開発キット拡張機能ページの インストール ボタンを選択します。
![VS Codeの C# 開発キット']()
ファイルをダウンロードするには、下のリンクをクリックしてください。
ダウンロード フォルダーを開き、ファイルをダブルクリックしてインストールを開始します。
![ダウンロード フォルダー内の dotnet 構成ファイル]()
ターミナルまたは Dev Home のインストール手順を選択する
ファイルをダブルクリックするとターミナルが開き、Winget 構成ファイルにおいて、.NET 8 SDK と、(ない場合は) VS Code、および C# 開発キットをインストールする準備が整ったことが表示されます。
![dotnet sdk、vscode、および c sharp 開発キットのインストール]()
使用許諾契約書を読み、ターミナルに 「y」と入力し、Enter キーを押して、この契約書に同意します。
注: 実行するために構成設定を選択する際は、その内容を理解しておく必要があります。Microsoft は、ユーザーが作成またはインポートした構成ファイルについて責任を負いません。この構成により、Windows の設定の変更、ソフトウェアのインストール、ソフトウェアの (セキュリティを含む) 設定の変更、およびサード パーティのパッケージとサービスへのユーザー契約が、ユーザーに代わって行われる場合があります。この構成ファイルを実行すると、これらのリソースとその設定について理解し、同意したことになります。インストールされているアプリケーションは、すべて、その所有者によってライセンスされます。Microsoft は、サード パーティのパッケージまたはサービスに対して一切の責任を負わず、ライセンスも付与しません。
![使用許諾契約書画面]()
Winget は、作業を開始するために必要なものをすべてインストールしています。この完了には約 5 分かかります。完了すると、ターミナルに次の出力が表示されます。
![dotnet sdk、vscode、および c sharp 開発キットのインストールの完了]()
ファイルをダブルクリックすると、Dev Home が開き、Winget 構成ファイルにおいて、.NET 8 SDK と、(ない場合は) VS Code、および C# 開発キットをインストールする準備が整ったことが表示されます。
![devhome 上の dotnet sdk、vscode、および c sharp 開発キットのインストール]()
使用許諾契約書を読み、左下にある [同意して続行する] をクリックし、次に右下の [管理者として設定] の順にクリックして、この契約書に同意します。Dev Home にデバイスの変更を許可するかどうかを確認するメッセージが表示されたら、[はい] を選択します。
注: 実行するために構成設定を選択する際は、その内容を理解しておく必要があります。Microsoft は、ユーザーが作成またはインポートした構成ファイルについて責任を負いません。この構成により、Windows の設定の変更、ソフトウェアのインストール、ソフトウェアの (セキュリティを含む) 設定の変更、およびサード パーティのパッケージとサービスへのユーザー契約が、ユーザーに代わって行われる場合があります。この構成ファイルを実行すると、これらのリソースとその設定について理解し、同意したことになります。インストールされているアプリケーションは、すべて、その所有者によってライセンスされます。Microsoft は、サード パーティのパッケージまたはサービスに対して一切の責任を負わず、ライセンスも付与しません。
![devhome の [使用許諾契約書] 画面]()
Dev Home は、作業を開始するために必要なものをすべてインストールしています。これは、完了までに約 5 分かかります。完了すると、ウィンドウに以下の出力が表示されます。
![devhome 上の dotnet sdk、vscode、および c sharp 開発キットのインストールの完了]()
すべてが正しくインストールされていることを確認する
これで環境が設定されるので、Windows タスク バー の[検索] に移動し、「Visual Studio Code」と入力します。アプリケーションをクリックして、VS Code を開きます。
環境を設定したら、新しい VS Code ターミナルを開きます。ツール バーで ターミナル を選択し、それから 新しいターミナル を選択します。
![Windows 検索バーで VSCode を検索する]()
注: ターミナルで VS Code を開く場合は、ワークスペースの信頼を有効にする必要があることに注意してください。
次に、ツール バーに移動し、[ターミナル]、[新しいターミナル] の順に選択します。
![VS Code の新しいターミナル]()
ターミナルで、次のコマンドを実行してインストールを確認します。
インストールが成功した場合、次のような出力が表示されます:
Terminal
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' は内部コマンドまたは外部コマンドとして認識されていません というエラーを受信した場合は、新しい VS Code ターミナルを開きます。VS Code を再起動しても、コンピューターを再起動しても問題が解決しない場合はで問題が解決しない場合は問題が発生しました ボタンを使用して、問題の解決に役立ててください。
アプリを作成する
- CTRL+SHIFT+P を押して、VS Code でコマンド パレットを開きます。
- CMD+SHIFT+P を押して、VS Code でコマンド パレットを開きます。
- .NET: と入力して、C# 開発キットで実行できるコマンドを確認します!
- .NET: 新規プロジェクト を見つけて選択し、新しい .NET プロジェクトを作成します。
- 下にスクロールし、Blazor Web App を選択します。
- プロジェクトを保存するフォルダーの場所を選択します。
- プロンプトが表示されたら、コマンド パレットでプロジェクトに "
BlazorApp" という名前を付けます。Enter キーを押して確認します。
ワークスペースの信頼を有効にするには、チェック ボックスをオンにして、[はい、作成者を信頼します] を選択します。
![ワークスペースの信頼ダイアログ]()
Visual Studio Subscription をお持ちの場合は、アカウントにサインインします。プロンプトが表示されない場合は、ウィンドウの右下にある VS Code のステータス バーの C# アイコンをクリックします。
![VS サブスクリプションでサインインする]()
サイド バーで、VS Code エクスプローラーが開かれていることを確認します。ここには、BlazorApp フォルダーとソリューション エクスプローラーが表示されます。次のビデオに従って、BlazorApp フォルダーを折りたたみ、ソリューション エクスプローラーを開き、BlazorApp プロジェクトを開いて、ソリューション エクスプローラー を上にドラッグ アンド ドロップします。
- VS Code エクスプローラーにある
BlazorApp フォルダーを折りたたみます。
- ソリューション エクスプローラーの左側にある V 字マークをクリックして展開します。
- ソリューション エクスプローラーの
BlazorApp プロジェクトの左側にある V 字マークをクリックして展開します。
- BlazorApp の下のソリューション エクスプローラーをドラッグ アンド ドロップします。
プロジェクトが作成され、Visual Studio Code に読み込まれます。ソリューション エクスプローラー を使用して、プロジェクトの内容を確認します。
![ソリューション エクスプローラーには、プロジェクト用に作成されたフォルダーとファイルの一覧があります]()
いくつかのファイルが作成され、すぐに実行できるシンプルな Blazor アプリが作成されました。
Program.cs は、サーバーを起動するアプリのエントリ ポイントであり、アプリ サービスとミドルウェアを構成する場所です。-
Components ディレクトリ内:
App.razor は、アプリ向けルート コンポーネントです。Routes.razor は、Blazor ルーターを構成します。Pages ディレクトリには、アプリ向けのサンプル Web ページが含まれています。
BlazorApp.csproj は、アプリ プロジェクトとその依存関係を定義するもので、ソリューション エクスプローラーで BlazorApp プロジェクト ノードをダブルクリックすると表示されます。Properties 内の launchSettings.json は、ローカル開発環境のさまざまなプロファイル設定を定義します。ポート番号は、プロジェクトの作成時に自動的に割り当てられ、このファイルに保存されます。
問題がなければ、下の [続行] を選択して次の手順に進みます。
アプリケーションを実行する
ワークスペースの左側にあるアクティビティ バーで [実行とデバッグ] アイコンを選択します。
![VS Code 実行 ボタン使用してアプリケーションを実行する]()
青い [実行とデバッグ] ボタンを選択します。
Visual Studio Code で起動構成のメニューが開きます。[C#: BlazorApp [既定の構成]] を選択します。
![VS Code 実行 ボタン使用してアプリケーションを実行する]()
次に、デバッガーを選択する必要があります。[C#] を選択します。
![VS Code 実行 ボタン使用してアプリケーションを実行する]()
ブラウザーでアプリが起動するのを待ちます。次のページに移動すると、最初の Blazor アプリを正常に実行することができます。
![サイトのホーム ページにはいくつかのテキストが含まれており、左側にはクリックして検索する複数のタブが表示されています。]()
上部のツール バーにある [停止] ボタンをクリックすることで、いつでもアプリを停止できます。
![VS Code 実行 ボタン使用してアプリケーションを実行する]()
アプリケーションを再実行するには、右上の実行ボタンの右側にあるドロップダウン メニューを選択し、このファイルに関連付けられているプロジェクトを実行を選択します。
![VS Code 実行 ボタン使用してアプリケーションを実行する]()
表示されるページは、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
@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
@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 ずつ増加し続けます。
Home コンポーネントは、次の画像に示すように、[Click me] ボタンが選択されるたびに 10 ずつ増加する独自のカウンターを持つようになりました。/counter にある Counter コンポーネント (Counter.razor) で 1 ずつ増加し続けます。
![ホームページには、10 ずつ増加し、40 個表示されるカウンターが含まれるようになりました。]()
次の手順
おめでとうございます。最初の Blazor アプリをビルドして実行しました。
学習を続ける
基本情報が得られたので、To Do リスト アプリを作成する Microsoft Learn の自習モジュールを使用して Blazor で初めての Blazor アプリの作成を続行します。
Microsoft Learn: Blazor ToDo リスト アプリをビルドする
Blazor for Beginners
完全な Blazor アプリの構築方法を最初から最後まで説明します。
あなたは下記にもご興味がおありかもしれません...
![devhome の [使用許諾契約書] 画面](https://dotnet.microsoft.com/blob-assets/images/tutorials/dotnet-hello-world/devhome_agreement.png)
![カウンター ページには、ページに表示されているカウント数を増やすための [こちらをクリック] ボタンが表示されます。](https://dotnet.microsoft.com/blob-assets/images/tutorials/blazor/screenshot-blazor-tutorial-try.png)
