【Blazor】 ホットリロードの使い方

通常、デバッグを行う際には毎回ビルドをして実行する必要があります。 そのため、コード修正する度にビルドをかける必要があるため、開発に時間がかかってしまいます。 ホットリロードはその問題を軽減するための機能です。 この機能はデバッグ中に変更したソースコードをブラウザへ自動的に更新することができます。

Blazorの初期から用意されているカウンターページを使って検証してみます。 カウンターページの初期コードは以下のようになっています。

@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"

<PageTitle>Counter</PageTitle>

@* ここのコードを変更する *@
<h1>ホットリロード検証</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++;
    }
}

変更後に保存して、炎のアイコンを押してみましょう。

すこし時間はかかりますが、ビルドするよりは短い時間で反映することが確認できると思います。

この機能を使うだけで生産性がかなり上がるので、有難いですね。