ASP.NET Core Blazor を使ってみるGet started with ASP.NET Core Blazor

作成者: Daniel RothLuke LathamBy Daniel Roth and Luke Latham

重要

プレビュー段階の Blazor WebAssemblyBlazor WebAssembly in preview

Blazor サーバーは ASP.NET Core 3.0 でサポートされています。Blazor Server is supported in ASP.NET Core 3.0. Blazor WebAssembly は、ASP.NET Core 3.1 のプレビュー段階です。Blazor WebAssembly is in preview for ASP.NET Core 3.1.

Blazorの概要:Get started with Blazor:

  1. .Net Core 3.1 PREVIEW SDKをインストールします。Install the .NET Core 3.1 Preview SDK.

  2. コマンドシェルで次のコマンドを実行して、 Blazor WebAssemblyテンプレートをインストールします。Install the Blazor WebAssembly template by running the following command in a command shell. BlazorAspNetCore です。テンプレートパッケージにはプレビューバージョンがありますが、プレビュー段階で Blazor Webasはプレビュー版です。The Microsoft.AspNetCore.Blazor.Templates package has a preview version while Blazor WebAssembly is in preview.

    dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview2.19528.8
    
  3. ツールの選択に関するガイダンスに従ってください。Follow the guidance for your choice of tooling:

    1 \。1. ASP.NET と web 開発ワークロードを使用して、 Visual Studio 16.4 Preview 2以降をインストールします。Install Visual Studio 16.4 Preview 2 or later with the ASP.NET and web development workload.

    2 \。2. 新しいプロジェクトを作成します。Create a new project.

    3 \。3. Blazor アプリを選択します。Select Blazor App. [次へ] を選択します。Select Next.

    4 \。4. [プロジェクト名] フィールドにプロジェクト名を入力するか、既定のプロジェクト名をそのまま使用します。Provide a project name in the Project name field or accept the default project name. 場所エントリが正しいことを確認するか、プロジェクトの場所を指定します。Confirm the Location entry is correct or provide a location for the project. [作成] を選択します。Select Create.

    5 \。5. Blazor webassembly については、 Blazor Webassemblyテンプレートを選択してください。For a Blazor WebAssembly experience, choose the Blazor WebAssembly App template. Blazor サーバーのエクスペリエンスについては、 Blazor Server アプリテンプレートを選択してください。For a Blazor Server experience, choose the Blazor Server App template. [作成] を選択します。Select Create. 2つの Blazor ホスティングモデル、 Blazor ServerBlazor webasについては、「Blazor ホスティングモデルの ASP.NET Core」を参照してください。For information on the two Blazor hosting models, Blazor Server and Blazor WebAssembly, see Blazor ホスティングモデルの ASP.NET Core.

    6 \。6. Ctrl + F5 キーを押してアプリを実行します。Press Ctrl+F5 to run the app.

    注意

    ASP.NET Core Blazor (Preview 6 以前) の以前のプレビューリリースに Blazor Visual Studio 拡張機能をインストールした場合は、拡張機能をアンインストールできます。If you installed the Blazor Visual Studio extension for a prior preview release of ASP.NET Core Blazor (Preview 6 or earlier), you can uninstall the extension. Visual Studio でテンプレートを表示するには、コマンドシェルに Blazor テンプレートをインストールするだけで十分です。Installing the Blazor templates in a command shell is now sufficient to surface the templates in Visual Studio.


  1. 最新の.Net Core 3.0 SDKリリースをインストールします。Install the latest .NET Core 3.0 SDK release.

  2. 必要に応じて、 .Net Core 3.1 PREVIEW SDKをインストールし、コマンドシェルで次のコマンドを実行して、 Blazor webassemblyテンプレートをインストールします。Optionally install the Blazor WebAssembly template by installing the .NET Core 3.1 Preview SDK and then running the following command in a command shell:

    dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview2.19528.8
    
  3. ツールの選択に関するガイダンスに従ってください。Follow the guidance for your choice of tooling:

    1 \。1. ASP.NET と web 開発ワークロードを使用して、最新のVisual Studioをインストールします。Install the latest Visual Studio with the ASP.NET and web development workload.

    2 \。2. 必要に応じて、アプリ開発 Blazor のためのASP.NET および web 開発ワークロードと共にVisual Studio 16.4 Preview 2 以降をインストールします。Optionally install Visual Studio 16.4 Preview 2 or later with the ASP.NET and web development workload for Blazor WebAssembly app development.

    3 \。3. 新しいプロジェクトを作成します。Create a new project.

    4 \。4. Blazor アプリを選択します。Select Blazor App. [次へ] を選択します。Select Next.

    5 \。5. [プロジェクト名] フィールドにプロジェクト名を入力するか、既定のプロジェクト名をそのまま使用します。Provide a project name in the Project name field or accept the default project name. 場所エントリが正しいことを確認するか、プロジェクトの場所を指定します。Confirm the Location entry is correct or provide a location for the project. [作成] を選択します。Select Create.

    6 \。6. Blazor webassembly については、 Blazor Webassemblyテンプレートを選択してください。For a Blazor WebAssembly experience, choose the Blazor WebAssembly App template. Blazor サーバーのエクスペリエンスについては、 Blazor Server アプリテンプレートを選択してください。For a Blazor Server experience, choose the Blazor Server App template. [作成] を選択します。Select Create. 2つの Blazor ホスティングモデル、 Blazor ServerBlazor webasについては、「Blazor ホスティングモデルの ASP.NET Core」を参照してください。For information on the two Blazor hosting models, Blazor Server and Blazor WebAssembly, see Blazor ホスティングモデルの ASP.NET Core.

    7 \。7. F5 キーを押してアプリを実行します。Press F5 to run the app.

    注意

    ASP.NET Core Blazor (Preview 6 以前) の以前のプレビューリリースに Blazor Visual Studio 拡張機能をインストールした場合は、拡張機能をアンインストールできます。If you installed the Blazor Visual Studio extension for a prior preview release of ASP.NET Core Blazor (Preview 6 or earlier), you can uninstall the extension. Visual Studio でテンプレートを表示するには、コマンドシェルに Blazor テンプレートをインストールするだけで十分です。Installing the Blazor templates in a command shell is now sufficient to surface the templates in Visual Studio.


サイドバーのタブからは、複数のページを使用できます。Multiple pages are available from tabs in the sidebar:

  • HomeHome
  • カウンターCounter
  • データのフェッチFetch data

Counter ページ上で [クリックしてください] ボタンを選択し、ページを更新することなくカウンターをインクリメントします。On the Counter page, select the Click me button to increment the counter without a page refresh. 通常、web ページのカウンターを増やすには JavaScript を記述する必要がありC#ますが、Blazor 使用できます。Incrementing a counter in a webpage normally requires writing JavaScript, but with Blazor you can use C#.

Pages/Counter.razor:Pages/Counter.razor:

@page "/counter"

<h1>Counter</h1>

<p>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 コンポーネントによってそのコンテンツがレンダリングされます。A request for /counter in the browser, as specified by the @page directive at the top, causes the Counter component to render its content. コンポーネントは、レンダリングツリーのメモリ内表現にレンダリングされ、柔軟で効率的な方法で UI を更新するために使用できます。Components render into an in-memory representation of the render tree that can then be used to update the UI in a flexible and efficient way.

[クリックしてください] ボタンが選択されるたびに、次のようになります。Each time the Click me button is selected:

  • onclick イベントが発生します。The onclick event is fired.
  • IncrementCount メソッドが呼び出された場合。The IncrementCount method is called.
  • currentCount がインクリメントされます。The currentCount is incremented.
  • コンポーネントが再び表示されます。The component is rendered again.

ランタイムは、新しいコンテンツを前のコンテンツと比較し、変更されたコンテンツのみをドキュメントオブジェクトモデル (DOM) に適用します。The runtime compares the new content to the previous content and only applies the changed content to the Document Object Model (DOM).

HTML 構文を使用してコンポーネントを別のコンポーネントに追加します。Add a component to another component using HTML syntax. たとえば、Index コンポーネントに <Counter /> 要素を追加して、Counter コンポーネントをアプリのホームページに追加します。For example, add the Counter component to the app's homepage by adding a <Counter /> element to the Index component.

Pages/Index.razor:Pages/Index.razor:

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter />

アプリを実行します。Run the app. ホームページには、Counter コンポーネントによって提供される独自のカウンターがあります。The homepage has its own counter provided by the Counter component.

コンポーネントのパラメーターは、属性または子コンテンツを使用して指定されます。これにより、子コンポーネントのプロパティを設定できます。Component parameters are specified using attributes or child content, which allow you to set properties on the child component. Counter コンポーネントにパラメーターを追加するには、コンポーネントの @code ブロックを更新します。To add a parameter to the Counter component, update the component's @code block:

  • [Parameter] 属性を持つ IncrementAmount のパブリックプロパティを追加します。Add a public property for IncrementAmount with a [Parameter] attribute.
  • currentCount の値を増やすときに IncrementAmount を使うように IncrementCount メソッドを変更します。Change the IncrementCount method to use the IncrementAmount when increasing the value of currentCount.

Pages/Counter.razor:Pages/Counter.razor:

@page "/counter"

<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 コンポーネントの <Counter> 要素に IncrementAmount を指定します。Specify the IncrementAmount in the Index component's <Counter> element using an attribute.

Pages/Index.razor:Pages/Index.razor:

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter IncrementAmount="10" />

アプリを実行します。Run the app. Index コンポーネントには、 [クリックしてください] ボタンが選択されるたびに10ずつ増加する独自のカウンターがあります。The Index component has its own counter that increments by ten each time the Click me button is selected. /counterCounter コンポーネント (Counter) は、1つずつ増加し続けます。The Counter component (Counter.razor) at /counter continues to increment by one.

次のステップNext steps

最初の Blazor アプリを構築する

その他の技術情報Additional resources