Blazorのサーバーアプリを動かしてみた

こんにちは。エンジニアの今井です。
最近は新しく出てきた.NETのWEBフレームワークであるBlazorを触っています。
Blazorそのものの解説は世の中にたくさんありますし、弊社エンジニアの顧さんも以前記事に書いていますので、本記事ではその辺は省略してお話していきたいと思います!

こちらも是非ご覧ください

今回試したこと

今回はBlazorサーバーアプリで簡単なコードを書いて動かし方を勉強してみました。

作ったもの

今回は文字をテキストボックスに入力し、入力に応じて表示が切り替わるアプリを作りました。

上のテキストボックスの入力に応じて表示が変化

これを実現するために、以下の2つのファイルを書きました。MyTest.razorがページファイルであり、MyTest.csがC#のコードになります。

// MyTest.razor
@page "/myTest"

@using BlazorApp4.Data
@inject MyTestService MyTestService

<h1>テスト</h1>

<input id="text1" type="text" @bind="@value" />
<br />
<div>@myTest.GetMessage(value)</div>

@code {
    private string value;
    private BlazorApp4.Data.MyTest myTest = new BlazorApp4.Data.MyTest();
}

// MyTest.sc
namespace BlazorApp4.Data
{
    public class MyTest
    {
        public string GetMessage(string value)
        {
            if (int.TryParse(value, out int intValue) == false)
            {
                return "数字を入力してください";
            }
            else if (intValue > 10)
            {
                return "10より大きいです";
            }
            else
            {
                return "10以下です";
            }
        }
    }
}

Blazorを触ったことがなくても、上のコードはオブジェクト指向言語を利用したことがある人ならば、何となくわかると思います。

念のため解説をすると、MyTest.razorの以下の箇所でMyTest.csのオブジェクトを生成します。

@code {
    private string value;
    private BlazorApp4.Data.MyTest myTest = new BlazorApp4.Data.MyTest();
}

次に、以下の箇所でテキストボックスから値を受け取り、その値にもとづいてMyTesstオブジェクトのGetMessageメッセージを呼び出しています。

<input id="text1" type="text" @bind="@value" />
<br />
<div>@myTest.GetMessage(value)</div>

感想

Blazorはとても直感的に書くことができました。また、C#のコードが直接ブラウザ上で動くことはバックエンドとフロントエンドのコードを共有できてとても楽なのではないかと思いました。

関連記事

プロジェクトストーリー

おすすめ記事

技術

コメント

この記事へのコメントはありません。

カテゴリー

TOP
TOP