TECH MEDIA

テックメディア


フレームワーク
ブログ

Blazorを触ってみた

ASP.NET
目次
  1. 01|はじめに
  2. 02|Blazorとは
  3. 03|Blazorのメリット
  4. 04| Blazorのプロジェクトを体験
  5. 05|クリック数カウントプログラム
  6. 06|世界の天気の表示プログラム
  7. 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のプロジェクトを体験

サンプルサイトを立ち上げます(UIはBootstrap風)

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

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

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

カウントのコード

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}
クリック数を計算するカウンタイメージ

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

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

@page "/fetchdata"

@using BlazorApp1.Data
@inject WeatherForecastService ForecastService

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from a service.</p>

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

@code {
    WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}
世界の天気の表示イメージ

7. 触ってみての感想

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

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

RECRUIT 採用情報

「eビジネスに関わる全ての人を幸せにする」
私達とともに新たな時代をつくりませんか?