Unity使いがBlazorを触ってみた感想
概要
この記事は「Unityゲーム開発者ギルド Advent Calendar 2021」の7日目の記事です。
最近の活動はc#を使ったWebアプリケーション制作について興味が出てきたので手探りで色々遊んでいます。
成果物としてはまだまだ手探りですが、自分のサイトでYoutubeを再生できるようにして遊んでみたりしてます。
今回はそのWebアプリケーションで使っているc#のフレームワーク「Blazor」について軽く紹介させていただければと思います。
Blazorとは
簡単に言うと、C#でのWeb UIを構築するためのフレームワークです。
Unityと同じくコンポーネント指向で、UIパーツを作ったら流用できるので、Unityでいう
uguiを使って画面(Blazorではページと呼びます)を作るイメージをしていただければ幸いです。
Blazorならではの特徴
html側のパラメーターとC#側のパラメータが連動できる
C#のプロパティにParameterAttributeをつけることで、html側のUIコンポーネントにパラメーターと連動することができます(いわゆるMVVMというやつです。)
<div class="sample">
<div class="name">@Name</div> //ここがNameに連動してHogeHogeになる
</div>
//@codeを記述することでclassを記述するみたいに書ける
@code{
[Parameter]
public string Name { get; set; } = "HogeHoge"
}
html内でc#のコードがかける
例えば、配列の数分だけ要素を表示したいとします。
そんなときはc#のforeachをhtml内に書くことができます。
先程のサンプルを配列にしてみた例です。
<div class="Sample">
@foreach (var Name in @Names)
{
<div class="sample">
<div class="name">Name</div>
</div>
}
</div>
@code{
[Parameter]
public string[] Names { get; set; } = new string[]{"Hoge","HogeHoge"};
}
直感的に書けるのが書けるのがとても良いですね。
C#とJavascriptで連携できる
例えばJavascript上でしか操作できない処理を、IJSRuntimeというクラスを使えばC#側から呼び出すことができます、
また、その逆でJavascript上からC#の処理を呼び出す事もできます。
例えば、自分のアプリでいうとボタンを押したらYoutubeプレイヤーを再生させるなどもできます。
window.playVideo = function (videoId) {
//何かしらの処理
}
<div class="Sample">
<button class="" @onclick="PlayVideoAsync">Button1</button>
</div>
@code{
[Inject]
public IJSRuntime JsRuntime { get; set; } //DIでJavasriptを操作するクラスを持ってくる
public async Task PlayVideoAsync(){
await JsRuntime.InvokeAsync<string>("playVideo", "hogehoge"); //引数も渡せる
}
}
まとめ
簡単にですが、Blazorについて書かせていただきました。
Unityとはまた違った面白さがあって、手探りですが触っていて面白いです。
普段使ってるC#でもWebアプリケーションを作ってみたい…！という方の参考にもしなれば幸いです。
まだ手探りのWebアプリケーションもまだまだ改良を加える予定ですので、気になった方はTwitterで動向を見守っていてください。
最後まで見ていただいてありがとうございました…！
Discussion