Blazorアプリに静的解析を導入する | ソフトウェア品質向上・セキュリティツールのParasoft

C#には、Webアプリのフロントエンドを開発するためのフレームワークとしてBlazorがあります。比較的新しいフレームワークですが、採用しているという現場も徐々に増えてきているのではないでしょうか。dotTESTの静的解析では、そんなBlazorで開発されたフロントエンドのソースコードの品質までチェックすることできますのでご紹介します。

Blazorとは

Blazorは、Webアプリのフロントエンドを開発するためのフレームワークです。フロントエンドの処理といえば、一般的にJavaScriptがイメージされますがBlazorではJavaScirptの代わりにC#で実装することができます。C#の開発者でもフロントエンドの開発ができるというメリットがあり、.razorファイルにRazor構文で実装します。
Blazorには、次の2つのモデルがあり、大きな違いは処理が実行される場所です。

Blazor Server：サーバー上で処理を実行
Blazor WebAssembly：Webブラウザ上で処理を実行

静的解析の実行例

dotTESTは、.razorファイルの静的解析をサポートしており、.razorファイル内のC#で実装されたソースコードの品質をチェックすることができます。(C#で書かれている部分のみでHTMLなどの解析はサポートされていません)
Blazor WebAssemblyで作成した四則演算のサンプルWebアプリケーションに静的解析を実行してみます。

このサンプルは、四則演算のWebアプリです。2つの入力フォームに整数を入力して四則演算子のボタンを押下すると計算結果が画面に出力されます。.razorファイルにC#で四則演算の処理を実装していますが、除算の際に入力値の検証処理が実装されていないため、ゼロ除算が発生する問題を抱えています。

@page "/calculator"

<PageTitle>Calculator</PageTitle>

<h1>Calculator</h1>

p1 : <input type="number" @bind="@p1"> p2 : <input type="number" @bind="@p2"><br>
<button @onclick="doAdd">+</button>
<button @onclick="doSub">-</button>
<button @onclick="doMul">*</button>
<button @onclick="doDiv">/</button>
<p>Result: @result</p>

@code {
    private int p1;
    private int p2;
    private int result;

    private void doAdd()
    {
        result = p1 + p2;
    }
    private void doSub()
    {
        result = p1 - p2;
    }
    private void doMul()
    {
        result = p1 * p2;
    }
    private void doDiv()
    {
        result = p1 / p2; //ゼロ除算の可能性
    }
}

dotTESTで解析を実行すると、C#で実装されているソースコードの問題を検出することができます。dotTESTはVisual Studio、Visual Studio Codeまたはコマンドラインから実行できます。

この例では、ソースコードの実行パスを解析してゼロ除算の問題を検出していますが他にもNull参照などの様々なチェックをすることができます。また、問題の検出だけではなくパターンマッチングによるコーディング規約のチェックなどもすることができます。

このように、dotTESTではフロントエンドの.razorファイルの解析ができます。もちろん、バックエンドの解析も可能ですので、フロントエンドとバックエンドの両方のソースコードの品質をチェックすることができます。

まとめ

dotTESTによるBlazorアプリの静的解析についてご紹介しました。dotTESTではフロントエンドのC#のソースコード品質もチェックすることできますので、ご興味がある方はぜひdotTESTをお試しください。

Blazorとは

静的解析の実行例

まとめ

Parasoft dotTESTについて