Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Blazorにおける入力値検証について
Search
tomokusaba
March 11, 2023
Programming
0
900
Blazorにおける入力値検証について
.NETラボ勉強会2023年3月
Blazorにおける入力値検証について
tomokusaba
March 11, 2023
Tweet
Share
More Decks by tomokusaba
See All by tomokusaba
Semantic Kernelの最新状況及び入門
tomokusaba
0
7
Fluent UI Blazor 最新Update
tomokusaba
1
200
アクセシビリティの観点からみたFluent UI Blazorのすすめ
tomokusaba
1
270
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
280
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
1.2k
プロンプトエンジニアリング入門
tomokusaba
2
1.5k
Sementic Kernelのネイティブ関数について
tomokusaba
0
1k
C#でのPlaywrightを使ったE2Eテストの実際
tomokusaba
0
670
「インフラ初心者」…からのPlaywright Testing
tomokusaba
1
370
Other Decks in Programming
See All in Programming
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
最近追加した型の紹介とその振り返り
aki19035vc
0
170
CSC307 Lecture 11
javiergs
PRO
0
240
【Go言語】ジェネリクス
tomo1227
0
170
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
GraphQLとの向き合い方2022年版
quramy
36
13k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
Docker and Python
trallard
37
2.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
A Philosophy of Restraint
colly
200
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
How to name files
jennybc
67
96k
Transcript
Blazorにおける入力値検証 について 株式会社SAKURUG エンジニアリングユニット 草場 友光 .NETラボ 2023年3月
自己紹介 • 普段は主にWebFormsアプリの保守の お仕事をしてます。 • 古めのシステムが多いので時代に取り 残されぬよう新しい技術を一つでも入 れるよう日々努力しています。 • 2022/08-2023
Microsoft MVP (Developer Technologies) • tomo_kusaba
宣伝 【VISION】ひとの可能性を開花させる企業であり続ける VISIONに共感できる仲間募集中。
注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。 • #dotnetlabでtweetすると右側に表示されます
今日の目的 • Blazorでは組み込みの入力コンポーネント及びモデルに検証属 性をつけることで基本的な入力値検証が行えます。 • 従来のWebアプリケーションであれば入力値検証のロジックを クライアント側およびサーバ側で記述していましたがそれらが 不要になるので生産性が飛躍的に向上します。 • さらに、基本の入力値検証で不足する分はカスタム検証として
記述できます。これらの方法を本セッションでは紹介していき ます。 • 今回は、Blazor WebAssembly + ASP.NET Core WebAPIの プロジェクトです。
入力値検証の基本 • 一般的に入力値検証(バリデーション)はクライアント側、 サーバ側双方で行われることが一般的。 • クライアント側で入力値検証が行われることでユーザ利便性を 提供する。 • サーバ側で入力値検証が行われることでセキュリティを担保す る。
Blazor WebAssembly(クライアント側) • 入力値検証のためのフォーム(EditForm)が用意されている • DataAnnotationsValidatorによって検証属性に基づいて検証 を行うことができる。
組み込みの入力コンポーネント 入力コンポーネント 説明 InputCheckbox チェックボックス InputDate 日付入力 InputFile ファイルアップロード InputNumber
数値入力 InputRadio ラジオボタン InputSelect ドロップダウンリスト InputText テキストボックス InputTextArea テキストエリア
ASP.NET Core WebAPI • ApiController属性によりモデル検証エラーが発生すると HTTP400応答が自動的にトリガーされる。 • 必要な検証属性はクライアント側と共通 • 組み込みのデータ検証とカスタム検証ロジックの両方が検証さ
れる。
代表的な組み込みの検証属性 属性 説明 Required 入力がされているかどうかを検証します。 Range 入力が指定した範囲内であるかどうかを検証します。 StringLength 入力文字列が指定した長さを超えてないかどうかを検証しま す。
RegularExpression 入力が指定した正規表現と一致することを検証します。
モデル例
クライアント側検証エラー例 必須入力の名前を空欄とし た
サーバ側検証エラー例 名前を空欄とした
カスタム検証属性 • ValidationAttributeを継承してカスタム検証クラスを作成す る • IsValidメソッドをオーバーライドする
カスタム検証属性エラー例 未来日を入力
カスタム検証属性エラー例 未来日を入力
ここまでのまとめ • モデルに検証属性を記述することによりクライアント側もサー バ側も非常に簡単に入力検証を実施することが可能。 • 基本的な検証項目についてはコードの記述の必要はないのでと ても高効率。 • カスタム検証属性もクライアント側とサーバ側のコードを共通 とできるのでテストも1回で済む。
モデルが複合型になる場合 • 例えば、1-Nのデータ構造を持つ入力フォームが必要になる場 合
モデルが複合型になる場合 • 例えば、1-Nのデータ構造を持つ入力フォームが必要になる場 合
モデルが複合型になる場合の問題 よし、クライアント側でちゃんと検証 されてるぞ!! 送信ボタンを押してみる なぜか、サーバ側に送られて 400が返ってきた!
解決策(試験的) • 「 Microsoft.AspNetCore.Components.DataAnnotations.V alidation」をNuGet(プレリリース) • DataAnnotationsValidatorの代わりに ObjectGraphDataAnnotationsValidatorを使用する。 • ValidateComplexTypeでモデルのプロパティに注釈をつける
変更点(フォーム)
変更点(モデル)
無事 よし、クライアント側でちゃんと検証 されてるぞ!! 送信ボタンを押してみる サーバ送信されてない。 めでたし。
デモコード • https://github.com/tomokusaba/Dotn etLab202303Hosted • LocalDBを使用 • Visual Studioのパッケージマネージャコ ンソールで「update-database」
.NET8 Preview2で追加 • .NET8 Preview2で組み込みのデータ検証に拡張属性がいくつ か追加されました。 属性 説明 Required(DisallowAllDefalutValues) 構造体がデフォルト値と等しくないことを検証
DateOnlyなら0001/01/01 Range(MinimumIsExclusive,MaximumIsE xclusive) 範囲の検証で境界値を拒否できるようになった (0,10)としたときは0と10はダメのように設定可能 ex) Length(10, 20) 文字列またはコレクションの長さの下限と上限を設定できるようになりました。 AllowedValues プロパティを検証するための許可リストを指定できる DeniedValues プロパティを検証するための拒否リストを指定できる
デモコード • https://github.com/tomokusaba/DataAnnotationsTestDo tnet8pre2
参考文献 • ASP.NET Core Blazor のフォームと入力コンポーネント
おしまい おしまい