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 SDK をインストールしますInstall the .NET Core 3.1 SDK.

  2. オプションで、Blazor WebAssembly テンプレートをインストールします。Optionally install the Blazor WebAssembly template:

    dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview2.20160.5
    

    注意

    3.2 Preview 2 Blazor WebAssembly テンプレートを使用するには、.NET Core SDK バージョン 3.1.102 以降が必要です.NET Core SDK version 3.1.102 or later is required to use the 3.2 Preview 2 Blazor WebAssembly template. コマンド シェルで dotnet --version を実行して、インストールされている .NET Core SDK バージョンを確認します。Confirm the installed .NET Core SDK version by running dotnet --version in a command shell.

  3. 使用するツールに向けたガイダンスに従ってください。Follow the guidance for your choice of tooling:

    1.1. ASP.NET および Web 開発ワークロードを含む Visual Studio 2019 バージョン 16.4 以降をインストールします。Install Visual Studio 2019 version 16.4 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 Server エクスペリエンスについては、 [Blazor Server App] (Blazor Server アプリ) テンプレートを選択します。For a Blazor Server experience, choose the Blazor Server App template. [作成] を選択します。Select Create. 2つの Blazor ホスティング モデル、Blazor ServerBlazor WebAssembly については、「ASP.NET Core Blazor のホスティング モデル」を参照してください。For information on the two Blazor hosting models, Blazor Server and Blazor WebAssembly, see ASP.NET Core Blazor のホスティング モデル. Blazor WebAssembly テンプレートが存在しない場合は、前のステップに戻り、テンプレートを再インストールします。If the Blazor WebAssembly template isn't present, return to the previous step and reinstall the template.

    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.


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

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

Counter ページ上で [クリックしてください] ボタンを選択し、ページを更新することなくカウンターをインクリメントします。On the Counter page, select the Click me button to increment the counter without a page refresh. Web ページでカウンターをインクリメントするには、通常、JavaScript を記述することが必要ですが、Blazor では C# を使用できます。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++;
    }
}

ブラウザーで /counter の要求があると、上部の @page ディレクティブで指定されているように、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. /counter にある Counter コンポーネント (Counter.razor) は、引き続き 1 ずつインクリメントされます。The Counter component (Counter.razor) at /counter continues to increment by one.

次の手順Next steps

最初の Blazor アプリをビルドする

その他の技術情報Additional resources