ASP.NET Core を開始する

このチュートリアルでは、.NET CLI を使用して、ASP.NET Core Blazor Web App を作成、実行、および変更する方法について説明します。 Blazor は、1 つのプログラミング モデルでサーバー側のレンダリングとクライアントの対話機能の両方をサポートする .NET フロントエンド Web フレームワークです。

次の方法について学習します。

• Blazor Web Appを作成します。
• アプリを実行します。
• アプリを変更します。
• アプリをシャットダウンします。

Prerequisites

ダウンロード .NET で最新の .NET SDK を取得してインストールします。

認証要求の処理に使用する Blazor Web App

サンプル アプリに適した場所にコマンド シェルを開き、次のコマンドを使用して Blazor Web Appを作成します。 -o|--output オプションは、プロジェクトのフォルダーを作成し、プロジェクトにBlazorSample名前を付けます。

dotnet new blazor -o BlazorSample

アプリを実行する

次のコマンドを使用して、ディレクトリを BlazorSample フォルダーに変更します。

cd BlazorSample

dotnet watch コマンドは、アプリを実行し、既定のブラウザーを開いてアプリのランディング ページに移動します。

dotnet watch

アプリのサイドバー ナビゲーションを使用して、[カウンター] ページにアクセスし、 Click me ボタンを選択してカウンターをインクリメントできます。

アプリを変更する

[カウンター] ページが読み込まれた状態でブラウザーを開いたままにします。 dotnet watch コマンドを使用してアプリを実行すると、ブラウザーで変更を反映するためにアプリをリビルドしなくても、アプリのマークアップとコードに変更を加えることができます。

Counter Web ページをレンダリングする CounterRazor コンポーネントは、プロジェクトの Components/Pages/Counter.razor にあります。 Razor とは、開発者の生産性のために設計された、C# コードに HTML マークアップを結合するための構文です。

テキスト エディターで Counter.razor ファイルを開き、コンテンツをレンダリングし、コンポーネントのカウンター機能を機能させる興味深い行をいくつかメモします。

Components/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++;
    }
}

ファイルは、コンポーネントの相対パス (/counter) を示す行で始まります。

@page "/counter"

ページのタイトルは、 <PageTitle> タグによって設定されます。

<PageTitle>Counter</PageTitle>

H1 見出しが表示されます。

<h1>Counter</h1>

段落要素 (<p>) には現在のカウントが表示され、 currentCountという名前の変数に格納されます。

<p role="status">Current count: @currentCount</p>

ボタン (<button>) を使用すると、ユーザーはカウンターをインクリメントできます。これは、ボタンクリックが IncrementCount という名前の C# メソッドを実行したときに発生します。

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code ブロックには、コンポーネントが実行する C# コードが含まれています。

• currentCountカウンター変数は、初期値が 0 で確立されます。
• IncrementCount メソッドが定義されています。 メソッド内のコードは、メソッドが呼び出されるたびに、 currentCount 変数を 1 ずつインクリメントします。

private int currentCount = 0;

private void IncrementCount()
{
    currentCount++;
}

IncrementCount メソッドのカウンターの増分を変更してみましょう。

currentCountが呼び出されるたびにIncrementCountが 10 の値だけインクリメントされるように行変更します。

- currentCount++;
+ currentCount += 10;

ファイルを保存します。

ファイルを保存するとすぐに、 dotnet watch コマンドを使用したため、実行中のアプリが自動的に更新されます。 ブラウザーでアプリに戻り、[カウンター] ページで [ Click me ] ボタンを選択します。 カウンターが既存の値 1 から 11 の値にどのようにインクリメントされるかを確認します。 ボタンが選択されるたびに、値は 10 ずつインクリメントされます。

アプリをシャットダウンする

次の手順に従います。

• ブラウザー ウィンドウを閉じます。
• アプリをシャットダウンするには、コマンド シェルで Ctrl+キーを押します。

Congratulations! このチュートリアルは正常に完了しました。

次のステップ

このチュートリアルでは、次の方法を学習しました。

• Blazor Web Appを作成します。
• アプリを実行します。
• アプリを変更します。
• アプリをシャットダウンします。

ASP.NET Core の基礎の詳細については、次を参照してください。

ASP.NET Core の基礎の概要

その他のチュートリアル

アプリの種類	Scenario	Tutorials
Web アプリ	を使用した新しいサーバーとクライアントの Web 開発 Blazor	Blazor todo リスト アプリをビルドし、Blazorムービー データベース アプリをビルドする (概要)
Web API	最小限の API を使用したサーバー ベースのデータ処理	チュートリアル: ASP.NET Core を使用して最小限の API を作成する
リモート プロシージャ コール (RPC) アプリ	プロトコル バッファーを利用したコントラクト優先サービス	ASP.NET Core で .NET gRPC クライアントとサーバーを作成する
リアルタイム アプリ	サーバー/クライアント双方向通信	ASP.NET Core の概要 SignalR

その他のリソース

• .NET の概要
• Visual Studio
• Visual Studio Code
• .NET 開発者コミュニティ
• .NET Live TV