Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Blazorにおける入力値検証について

 Blazorにおける入力値検証について

.NETラボ勉強会2023年3月
Blazorにおける入力値検証について

tomokusaba

March 11, 2023
Tweet

More Decks by tomokusaba

Other Decks in Programming

Transcript

  1. Blazorにおける入力値検証
    について
    株式会社SAKURUG
    エンジニアリングユニット
    草場 友光
    .NETラボ 2023年3月

    View Slide

  2. 自己紹介
    • 普段は主にWebFormsアプリの保守の
    お仕事をしてます。
    • 古めのシステムが多いので時代に取り
    残されぬよう新しい技術を一つでも入
    れるよう日々努力しています。
    • 2022/08-2023 Microsoft MVP
    (Developer Technologies)
    • tomo_kusaba

    View Slide

  3. 宣伝
    【VISION】ひとの可能性を開花させる企業であり続ける
    VISIONに共感できる仲間募集中。

    View Slide

  4. 注意
    • 個人の見解・解釈が多分に入っています。
    • 見解の相違・事実誤認などありましたらご指摘ください。
    • #dotnetlabでtweetすると右側に表示されます

    View Slide

  5. 今日の目的
    • Blazorでは組み込みの入力コンポーネント及びモデルに検証属
    性をつけることで基本的な入力値検証が行えます。
    • 従来のWebアプリケーションであれば入力値検証のロジックを
    クライアント側およびサーバ側で記述していましたがそれらが
    不要になるので生産性が飛躍的に向上します。
    • さらに、基本の入力値検証で不足する分はカスタム検証として
    記述できます。これらの方法を本セッションでは紹介していき
    ます。
    • 今回は、Blazor WebAssembly + ASP.NET Core WebAPIの
    プロジェクトです。

    View Slide

  6. 入力値検証の基本
    • 一般的に入力値検証(バリデーション)はクライアント側、
    サーバ側双方で行われることが一般的。
    • クライアント側で入力値検証が行われることでユーザ利便性を
    提供する。
    • サーバ側で入力値検証が行われることでセキュリティを担保す
    る。

    View Slide

  7. Blazor WebAssembly(クライアント側)
    • 入力値検証のためのフォーム(EditForm)が用意されている
    • DataAnnotationsValidatorによって検証属性に基づいて検証
    を行うことができる。

    View Slide

  8. 組み込みの入力コンポーネント
    入力コンポーネント 説明
    InputCheckbox チェックボックス
    InputDate 日付入力
    InputFile ファイルアップロード
    InputNumber 数値入力
    InputRadio ラジオボタン
    InputSelect ドロップダウンリスト
    InputText テキストボックス
    InputTextArea テキストエリア

    View Slide

  9. ASP.NET Core WebAPI
    • ApiController属性によりモデル検証エラーが発生すると
    HTTP400応答が自動的にトリガーされる。
    • 必要な検証属性はクライアント側と共通
    • 組み込みのデータ検証とカスタム検証ロジックの両方が検証さ
    れる。

    View Slide

  10. 代表的な組み込みの検証属性
    属性 説明
    Required 入力がされているかどうかを検証します。
    Range 入力が指定した範囲内であるかどうかを検証します。
    StringLength 入力文字列が指定した長さを超えてないかどうかを検証しま
    す。
    RegularExpression 入力が指定した正規表現と一致することを検証します。

    View Slide

  11. モデル例

    View Slide

  12. クライアント側検証エラー例
    必須入力の名前を空欄とし

    View Slide

  13. サーバ側検証エラー例
    名前を空欄とした

    View Slide

  14. カスタム検証属性
    • ValidationAttributeを継承してカスタム検証クラスを作成す

    • IsValidメソッドをオーバーライドする

    View Slide

  15. カスタム検証属性エラー例
    未来日を入力

    View Slide

  16. カスタム検証属性エラー例
    未来日を入力

    View Slide

  17. ここまでのまとめ
    • モデルに検証属性を記述することによりクライアント側もサー
    バ側も非常に簡単に入力検証を実施することが可能。
    • 基本的な検証項目についてはコードの記述の必要はないのでと
    ても高効率。
    • カスタム検証属性もクライアント側とサーバ側のコードを共通
    とできるのでテストも1回で済む。

    View Slide

  18. モデルが複合型になる場合
    • 例えば、1-Nのデータ構造を持つ入力フォームが必要になる場

    View Slide

  19. モデルが複合型になる場合
    • 例えば、1-Nのデータ構造を持つ入力フォームが必要になる場

    View Slide

  20. モデルが複合型になる場合の問題
    よし、クライアント側でちゃんと検証
    されてるぞ!!
    送信ボタンを押してみる
    なぜか、サーバ側に送られて
    400が返ってきた!

    View Slide

  21. 解決策(試験的)
    • 「 Microsoft.AspNetCore.Components.DataAnnotations.V
    alidation」をNuGet(プレリリース)
    • DataAnnotationsValidatorの代わりに
    ObjectGraphDataAnnotationsValidatorを使用する。
    • ValidateComplexTypeでモデルのプロパティに注釈をつける

    View Slide

  22. 変更点(フォーム)

    View Slide

  23. 変更点(モデル)

    View Slide

  24. 無事
    よし、クライアント側でちゃんと検証
    されてるぞ!!
    送信ボタンを押してみる
    サーバ送信されてない。
    めでたし。

    View Slide

  25. デモコード
    • https://github.com/tomokusaba/Dotn
    etLab202303Hosted
    • LocalDBを使用
    • Visual Studioのパッケージマネージャコ
    ンソールで「update-database」

    View Slide

  26. .NET8 Preview2で追加
    • .NET8 Preview2で組み込みのデータ検証に拡張属性がいくつ
    か追加されました。
    属性 説明
    Required(DisallowAllDefalutValues) 構造体がデフォルト値と等しくないことを検証
    DateOnlyなら0001/01/01
    Range(MinimumIsExclusive,MaximumIsE
    xclusive)
    範囲の検証で境界値を拒否できるようになった
    (0,10)としたときは0と10はダメのように設定可能
    ex) Length(10, 20) 文字列またはコレクションの長さの下限と上限を設定できるようになりました。
    AllowedValues プロパティを検証するための許可リストを指定できる
    DeniedValues プロパティを検証するための拒否リストを指定できる

    View Slide

  27. デモコード
    • https://github.com/tomokusaba/DataAnnotationsTestDo
    tnet8pre2

    View Slide

  28. 参考文献
    • ASP.NET Core Blazor のフォームと入力コンポーネント

    View Slide

  29. おしまい
    おしまい

    View Slide