BlazorでのWebアプリケーション開発手法１【C#】B07_@usingで通常のC#コードを呼び出す

前回までのレクチャーで、計測画面に計測値を表示するところまで作成しました。ただし、これまでの実装は単にランダムな値を生成して表示しているだけで、どこかのサーバーやデータベースと通信しているわけではありません。実際の開発では、外部と通信したりデータベースから値を取得したりする処理になることが多いはずです。

そこで今回は、これまでMeasureメソッドの中に直接書いていた処理を、別のC#のクラスに切り出して、そちらから値を取得するという形に書き換えます。これまではRazorページの中だけでコードを書いてきましたが、Razor構文からは通常のC#コードを普通に呼び出すことができます。今回はそのやり方を解説します。

Objectsフォルダーとクラスの作成

まず、C#のクラスを置くためのフォルダーを作成します。プロジェクトを右クリックして「追加」から「新しいフォルダー」を選択し、「Objects」（Objectに複数形のsを付けた名前）というフォルダーを作成します。

図1　ソリューションエクスプローラーに作成されたObjectsフォルダー

作成したObjectsフォルダーの中に、クラスを1つ追加します。クラス名は「MeasureService」としました。

図2　新しい項目の追加ダイアログでクラス名にMeasureServiceを指定

このMeasureServiceクラスの中で、これまで画面側で行っていた計測値を取得する処理を行うようにします。まずクラス自体をpublic staticにして、静的なクラスにしておきます。

図3　public static classとして定義

戻り値用のMeasureResultクラス

public static Measureメソッドを用意しますが、戻り値を計測値そのものにしたいので、そのための新しいクラスを作成します。クラス名はMeasureResultとしました。

図4　public static void Measure()とMeasureResultクラスの定義開始

MeasureResultクラスには、計測値を表すpublic float MeasureValueプロパティと、計測日時を表すpublic DateTime MeasureDateプロパティを用意します。

図5　MeasureResultクラスにMeasureValueプロパティを追加

続けて、MeasureメソッドのvoidをMeasureResultに変更し、計測結果を返却するメソッドに書き換えます。

図6　Measureメソッドの戻り値をMeasureResultに変更し、MeasureDateプロパティも追加

ランダム値生成処理の移動

画面側（MeasurePage.razor）にあったprivate Randomフィールドは、Ctrl+Xで切り取って、MeasureServiceクラスの中にprivate staticとして貼り付けます。

図7　_randomフィールドをMeasureServiceクラス内に移動

Measureメソッドの中では、var result = new MeasureResult();で新しいインスタンスを作成し、result.MeasureValueに_random.NextSingle()の値を入れます。

図8　result.MeasureValueに_random.NextSingle()を代入

同様にresult.MeasureDateにDateTime.Nowを入れ、最後にreturn result;で計測結果を返却するようにします。これで、これまで画面側でやっていたのと同じ、文字列への加工前のfloat値とDateTime値をMeasureResultに詰めて返却する処理が完成しました。

図9　完成したMeasureメソッド（result.MeasureDateの代入とreturn result;を追加）

完成したMeasureService.csの全体は次のとおりです。

namespace Ander99.Objects
{
    public static class MeasureService
    {
        private static Random _random = new Random();
 
        public static MeasureResult Measure()
        {
            var result = new MeasureResult();
            result.MeasureValue = _random.NextSingle();
            result.MeasureDate = DateTime.Now;
            return result;
        }
    }
 
    public class MeasureResult
    {
        public float MeasureValue { get; set; }
        public DateTime MeasureDate { get; set; }
    }
}

@usingでRazorページから参照する

画面側では、作成したMeasureServiceからMeasureResultを取得したいのですが、この時点ではまだMeasureServiceクラスの色が変わっておらず、正しく参照できていない状態です。MeasureService. と入力すると、IntelliSenseの候補にMeasureメソッドが表示されます。

図10　MeasureService.まで入力するとIntelliSenseの候補にMeasureが表示される

参照できていないクラス名にカーソルを合わせてCtrlを押しながら.（ドット）を押すと、クイックアクションのメニューが表示され、「@using Ander99.Objects」という候補が出てきます。これを選択します。

図11　クイックアクションに表示された「@using Ander99.Objects」を選択

これを選ぶと、ファイルの先頭にusing文が追加されます。通常のC#であればusingとだけ書きますが、Razor構文の中では先頭に@を付けて@usingと書き、その後ろに参照したいネームスペースを指定します。

図12　ファイル先頭に@using Ander99.Objectsが追加された状態

このネームスペースを参照することで、MeasureServiceクラスが見えるようになり、MeasureService.Measure()と書けばMeasureResultが返ってくるようになります。

図13　@using追加後、MeasureService.Measure()が正しく解決された状態

画面側のコードを置き換える

MeasureServiceからMeasureResultが取得できるようになったので、これまで画面側に直接書いていた_random.NextSingle()やDateTime.Nowといった記述は不要になります。それぞれ、取得したmeasureResultのMeasureValueプロパティ、MeasureDateプロパティに置き換えます。

図14　_random.NextSingle()やDateTime.Nowをmeasureresult.MeasureValue／MeasureDateに置き換えた最終形

この時点でのMeasurePage.razorの先頭部分と、書き換え後のMeasureメソッドは次のとおりです。

@page "/measure"
@using Ander99.Objects
@rendermode InteractiveServer

    private void Measure()
    {
        var measureResult = MeasureService.Measure();
        _measureValue = Math.Round(measureResult.MeasureValue, 2) + " m/s";
        _measureDate =
            measureResult.MeasureDate.ToString("yyyy/MM/dd HH:mss:ss");
    }