Blazorを触ってみた

2023.01.18 フレームワーク

ブログ

ASP.NET

01｜はじめに
02｜Blazorとは
03｜Blazorのメリット
04｜ Blazorのプロジェクトを体験
05｜クリック数カウントプログラム
06｜世界の天気の表示プログラム
07｜触ってみての感想

1. はじめに

初めまして、新卒エンジニアの顧です。

私は今までずっとWebFormsを使っていたのですが、ある日、以下の悲報を見つけました。

2019年にMicrosoftから発表された、.NET 5に関する記事に、リリース予定の.NET 5に、WebFormsの機能が含まれないとのことでした。。

.NET Standard 2.1 で指定されているすべての API がサポートされることを期待するのはもっともですが、Web Forms、Windows Communication Foundation (WCF) サーバー、Windows Workflow を含め、もっと “レガシ” な API のいくつかはサポートされません。

microsoft

WebFormsは今後Microsoftのサポートから外れ、Blazorに移植することを推奨されています。

2020年11月に.NET5がようやくリリースされました。そのため、Blazorについて学び、実際に触ってみようと思います。

2. Blazorとは

Blazor は、.NET を使って対話型のクライアント側 Web UI を構築するためのフレームワークです。

JavaScript の代わりに C# を使って、優れた対話型 UI を作成します。
.NET で記述された、サーバー側とクライアント側のアプリのロジックを共有します。
モバイルブラウザーを含めた広範なブラウザーのサポートのために、HTML および CSS として UI をレンダリングします。
Docker などの最新のホスティングプラットフォームと統合します。

3. Blazorのメリット

クライアント側の Web 開発に .NET を使用すると、次のような利点があります。

JavaScript ではなく C# でコードを記述します。
.NET ライブラリの既存の .NET エコシステムを活用します。- サーバーとクライアント全体でアプリロジックを共有します。
.NET のパフォーマンス、信頼性、およびセキュリティから利点が得られます。
Windows、Linux、macOS 上の Visual Studio を使って生産性を維持します。
多機能で使いやすい安定した言語、フレームワーク、およびツールの共通セットに基づいて構築します。

4. Blazorのプロジェクトを体験

Blazorを実際に体験するべく、サンプルプログラムを書いてみました。

ボタンをクリックするとクリック数がカウントされるプログラムと、世界の天気のデータを表示するプログラムです。

5. クリック数カウントプログラム

カウントのコード

@page <span class="token string">"/counter"</span>

<span class="token operator"><</span>h1<span class="token operator">></span>Counter<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span>

<span class="token operator"><</span>p<span class="token operator">></span><span class="token class-name">Current</span> count<span class="token punctuation">:</span> @currentCount<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>

<span class="token operator"><</span>button <span class="token keyword def">class</span><span class="token operator">=</span><span class="token string">"btn btn-primary"</span> @onclick<span class="token operator">=</span><span class="token string">"IncrementCount"</span><span class="token operator">></span><span class="token class-name">Click</span> me<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>

@code <span class="token punctuation">{</span>
    <span class="token keyword">int</span> currentCount <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>

    <span class="token keyword">void</span> <span class="token function">IncrementCount</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        currentCount<span class="token operator">++</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span>

6. 世界の天気の表示プログラム

天気の表示プログラムのコード

@page <span class="token string">"/fetchdata"</span>

@<span class="token keyword">using</span> BlazorApp1<span class="token punctuation">.</span>Data
@inject <span class="token class-name">WeatherForecastService</span> ForecastService

<span class="token operator"><</span>h1<span class="token operator">></span><span class="token class-name">Weather</span> forecast<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span>

<span class="token operator"><</span>p<span class="token operator">></span><span class="token class-name">This</span> component demonstrates fetching data <span class="token keyword">from</span> a service<span class="token punctuation">.</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>

@<span class="token keyword">if</span> <span class="token punctuation">(</span>forecasts <span class="token operator">==</span> <span class="token keyword">null</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
    <span class="token operator"><</span>p<span class="token operator">></span><span class="token operator"><</span>em<span class="token operator">></span>Loading<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token operator"><</span><span class="token operator">/</span>em<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token punctuation">}</span>
<span class="token keyword">else</span>
<span class="token punctuation">{</span>
    <span class="token operator"><</span>table <span class="token keyword def">class</span><span class="token operator">=</span><span class="token string">"table"</span><span class="token operator">></span>
        <span class="token operator"><</span>thead<span class="token operator">></span>
            <span class="token operator"><</span>tr<span class="token operator">></span>
                <span class="token operator"><</span>th<span class="token operator">></span>Date<span class="token operator"><</span><span class="token operator">/</span>th<span class="token operator">></span>
                <span class="token operator"><</span>th<span class="token operator">></span>Temp<span class="token punctuation">.</span> <span class="token punctuation">(</span>C<span class="token punctuation">)</span><span class="token operator"><</span><span class="token operator">/</span>th<span class="token operator">></span>
                <span class="token operator"><</span>th<span class="token operator">></span>Temp<span class="token punctuation">.</span> <span class="token punctuation">(</span>F<span class="token punctuation">)</span><span class="token operator"><</span><span class="token operator">/</span>th<span class="token operator">></span>
                <span class="token operator"><</span>th<span class="token operator">></span>Summary<span class="token operator"><</span><span class="token operator">/</span>th<span class="token operator">></span>
            <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span>
        <span class="token operator"><</span><span class="token operator">/</span>thead<span class="token operator">></span>
        <span class="token operator"><</span>tbody<span class="token operator">></span>
            @<span class="token keyword">foreach</span> <span class="token punctuation">(</span><span class="token keyword">var</span> forecast <span class="token keyword">in</span> forecasts<span class="token punctuation">)</span>
            <span class="token punctuation">{</span>
                <span class="token operator"><</span>tr<span class="token operator">></span>
                    <span class="token operator"><</span>td<span class="token operator">></span>@forecast<span class="token punctuation">.</span>Date<span class="token punctuation">.</span><span class="token function">ToShortDateString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span>
                    <span class="token operator"><</span>td<span class="token operator">></span>@forecast<span class="token punctuation">.</span>TemperatureC<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span>
                    <span class="token operator"><</span>td<span class="token operator">></span>@forecast<span class="token punctuation">.</span>TemperatureF<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span>
                    <span class="token operator"><</span>td<span class="token operator">></span>@forecast<span class="token punctuation">.</span>Summary<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span>
                <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span>
            <span class="token punctuation">}</span>
        <span class="token operator"><</span><span class="token operator">/</span>tbody<span class="token operator">></span>
    <span class="token operator"><</span><span class="token operator">/</span>table<span class="token operator">></span>
<span class="token punctuation">}</span>

@code <span class="token punctuation">{</span>
    WeatherForecast<span class="token punctuation">[</span><span class="token punctuation">]</span> forecasts<span class="token punctuation">;</span>

    <span class="token keyword">protected</span> <span class="token keyword">override</span> <span class="token keyword">async</span> <span class="token class-name">Task</span> <span class="token function">OnInitializedAsync</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        forecasts <span class="token operator">=</span> <span class="token keyword">await</span> ForecastService<span class="token punctuation">.</span><span class="token function">GetForecastAsync</span><span class="token punctuation">(</span>DateTime<span class="token punctuation">.</span>Now<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span>

7. 触ってみての感想

実際のコードをみるとその形はphpのLaravelと似たような感じでした。
また、簡潔さと便利さを一番感じました。
特にJavaScriptが苦手な人には、魅力的なフレームワークと思います。

今回は、Blazorの導入部分を学びました。すこしだけ新世界の扉を開いたように感じています。これからBlazorが主流のフレームワークになれるかどうか、楽しみにしています。

テックメディア