Help us understand the problem. What is going on with this article?

Blazorで令和表示する

More than 1 year has passed since last update.

概要

今年開催されていたde:code2019のセッションMW51 C# ドキドキ・ライブコーディング対決 @ de:code - ONLY C#!! Blazor Web 開発バトル -を受けてきました。
4人の掛け合いが楽しい素敵なセッションでございました。

その中で出たお題に対して、Blazorの勉強がてらやってみようと思った次第です。
ちなみに、お題はこちら(これは問題2ですが、問題1は元年なし)
IMG_2510.jpg

Blazor環境構築

ここに全部書いてあるんですけど、一応やります。
ちなみに、今回はVisual Studio Codeを使います。

NET Core 3.0 Preview SDK のインストール

  • 環境にあったやつをダウンロードしてインストールするだけ。

Blazor拡張機能のインストール

  • PowerShellで以下を実行する。
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview5-19227-01

Visual Studio Code向けのC#の拡張機能インストール

  • これはVisual Studio Code立ち上げてインストールした方が早い。

Blazorの最小テンプレートインストール

dotnet new -i Toolbelt.AspNetCore.Blazor.Minimum.Templates::3.0.0-preview5-19227-01

プロジェクト作成

md blazor-reiwa
cd blazor-reiwa
dotnet new blazormin

Blazorのプロジェクトができました。良いですね。

実装

  • App.razorを書き換える。
  • セッションでは、CultureInfo使った後、平成令和書き換えようとしてたのでそれを踏襲。
  • 元年表示はチェックボックスにしてみた。
  • バリデーションはとりあえず考えない。
App.razor
@using System;
@using System.Globalization;

<form onsubmit="@OnSubmit">
    <div>
        <label>
            <input type="checkbox" bind="@IsGannen" />元年表示
        </label>
    </div>
    <input type="text" bind="@InputText" />
    <button>変換</button>
    <div>
        @OutputText
    </div>
</form>

@functions {
    public bool IsGannen { get; set; }

    public string InputText { get; set; }

    public string OutputText { get; set; }

    public void OnSubmit()
    {
        var cultureInfo = new CultureInfo("ja-JP", true);
        cultureInfo.DateTimeFormat.Calendar = new JapaneseCalendar();

        var inputDate = DateTime.Parse(InputText);
        var gengo = inputDate.ToString("gg", cultureInfo);
        int year =  int.Parse(inputDate.ToString("yy", cultureInfo));

        if (inputDate >= new DateTime(2019, 5, 1))
        {
            gengo = "令和";
            year = year - 30;
        }

        OutputText = $"{gengo}{(year == 1 && IsGannen ? "元" : year.ToString())}{inputDate.ToString("年M月d日", cultureInfo)}";
    }
}

実行

dotnet run

サーバーが立ち上がるので、http://localhost:5000/ をブラウザで開く。

GIF.gif
いいですね。

まとめ

これをあの状況で10分でやるのは無理ゲーやで…。

ソースコード

https://github.com/obuchi3/blazor-reiwa

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした