Chapter 03

開発環境について

Kazuki Ota
Kazuki Ota
2022.06.26に更新

はじめに

ここでは、ASP.NET Core Blazor WebAssembly の開発環境について説明します。

ASP.NET Core Blazor WebAssembly を開発するには .NET 6 の SDK が必要です。.NET 6 の SDK を個別に入れて環境を構築することも出来ますが Visual Studio 2022 をインストールすることで .NET 6 の SDK や開発に必要なツールが一括でセットアップされるのでお勧めです。

Visual Studio 2022 は以下のサイトからダウンロードしてインストールできます。

https://visualstudio.microsoft.com/ja/vs/

Windows と macOS では上記のサイトから Visual Studio 2022 か Visual Studio 2022 for Mac をインストールをすることで開発環境が整います。Linux の場合は .NET 6 SDK を以下のサイトからインストールしてください。

https://dotnet.microsoft.com/download

エディターはお好みのもので構いませんが、インテリセンスなどのコード補完機能の充実度合いから Windows と macOS では Visual Studio 2022 をお勧めします。Linux の場合は Visual Studio Code に C# for Visual Studio Code 拡張機能をインストールしたものを使用することをお勧めします。

https://code.visualstudio.com/

https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp

プロジェクトの新規作成から実行

開発環境が正しくセットアップされていることを確認するために以下の手順でプロジェクトの新規作成から実行まで出来るか確認をしてください。ここでは Windows での手順について解説を行います。

Windows の場合

Visual Studio 2022 を起動して「新しいプロジェクトの作成」を選択します。

「Blazor WebAssembly アプリ」を選択します。

プロジェクト名を入力して「次へ」を選択します。

.NET 6.0 (長期的なサポート) が選択されていることを確認して「作成」を選択します。

プロジェクトが作成されます。プロジェクトが作成されたら、ツールバーの緑の三角の再生ボタンを選択してデバッグ実行を行います。デバッグ実行のショートカットキーは F5 なので F5 キーでもデバッグ実行が行えます。お好みの方法で行ってください。初回のデバッグ実行時には ASP.NET Core の HTTPS 開発証明書を信頼するかを確認するダイアログが表示されるので、指示にしたがってインストールをしてください。

証明書のインストールいついての詳細は以下のドキュメントを参照してください。

https://docs.microsoft.com/ja-jp/aspnet/core/security/enforcing-ssl?view=aspnetcore-6.0&tabs=visual-studio#trust-the-aspnet-core-https-development-certificate-on-windows-and-macos

以下のようにブラウザーと DOS 窓が起動してブラウザーに Blazor WebAssembly のアプリケーションが表示されます。

プロジェクトテンプレートに含まれているもの

プロジェクト テンプレートで作成されたアプリケーションにはトップページのほかに Counter と Fetch data というページが含まれています。
Counter ページでは、ボタンがありユーザーがクリックすることで数字がカウントアップしていく機能が含まれています。

Fetch data ページでは、プロジェクト内の wwwroot/sample-data/weather.json ファイルを HttpClient クラスを使って取得してきて table タグを使って表示しています。

ページを足してみよう

ここにページを足していきます。数字を 2 つ入力して、ボタンを押すと数字の合計を表示するシンプルな足し算ページを作成していきます。ASP.NET Core Blazor ではページは Razor コンポーネントして作成します。Visual Studio には Razor コンポーネントを作成するためのアイテム テンプレートがあるので、それを使ってページを作成します。

ソリューションエクスプローラーの Pages フォルダーの右クリックメニューから「追加」→「Razor コンポーネント」を選択します。

名前に Calc.razor と入力して「追加」を選択します。

以下のような内容のファイルが作成されます。

Calc.razor
<h3>Calc</h3>

@code {

}

Razor コンポーネントをページとして表示されるには @page "/ページのパス" のような定義を追加する必要があります。今回は /calc というパスで表示されるようにしたいので以下のように Calc.razor を変更します。

Calc.razor
@page "/calc"

<h3>Calc</h3>

@code {

}

アプリの画面の左側の画面遷移のためのメニューに Calc.razor への遷移をするリンクも追加しましょう。画面の左側のリンクは Shared/NavMenu.razor に書かれています。NavLink タグで画面遷移のリンクを作成できます。NavMenu.razor に Calc.razor に遷移するための NavLink を追加します。追加したコードは以下のようになります。コメント (@* *@ で括った部分が Razor のコメントになります) で示している部分が追加した部分になります。

NavMenu.razor
<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">BlazorApp4</a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
        @* ここから追加 *@
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="calc">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Calc
            </NavLink>
        </div>
        @* ここまで追加 *@
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

この状態で実行すると、以下のように画面の左側に Calc のメニューが追加されて、選択すると Calc.razor が表示されます。

ここに足し算機能を追加していきます。Razor ファイルでは @code { ... } で囲まれた部分に C# の構文を使ってプロパティやメソッドを定義できます。それ以外の部分は HTML や @C#の式 のように @ の後に C# の式を書いて、その式の評価結果を表示することが出来ます。Razor の構文については後ろの章で詳しく解説を行います。

Calc.razor を以下のように変更します。

Calc.razor
@page "/calc"

<h3>Calc</h3>

<input @bind="Lhs" />
+
<input @bind="Rhs" />
=
@Answer
<br />
<button @onclick="Add" class="btn btn-primary">足し算</button>

@code {
    private string Lhs { get; set; } = "0";
    private string Rhs { get; set; } = "0";
    private double Answer { get; set; }

    private void Add()
    {
        Answer = (double.TryParse(Lhs, out var lhs), double.TryParse(Rhs, out var rhs)) switch
        {
            (true, true) => lhs + rhs,
            _ => 0.0,
        };
    }
}

input タグが 2 つあり、それぞれに入力された値を Lhs プロパティと Rhs プロパティに@bind という属性を使ってバインドしています。また、button タグの @onclick という属性を使ってボタンクリック時のイベントハンドラに Add メソッドを指定しています。
Add メソッドでは入力された値を double 型にパースして、パースに成功した場合は足し算の結果を Answer プロパティに代入しています。もし、パースに失敗した場合は Answer プロパティに 0 を代入しています。

実行すると以下のような結果になります。

テキストボックスに数字を入れて足し算ボタンを選択すると以下のように計算結果が表示されます。

まとめ

プロジェクトの新規作成から実行、簡単な足し算機能を持ったページの追加までの動作確認が出来ました。次章以降では、ASP.NET Core Blazor WebAssembly の構成要素の解説に移りたいと思います。