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

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

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

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

// MyTest.razor
@page "/myTest"

@using BlazorApp4.Data
@inject MyTestService MyTestService

テスト

@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メッセージを呼び出しています。

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