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
1.4k
Blazorにおける入力値検証について
.NETラボ勉強会2023年3月
Blazorにおける入力値検証について
tomokusaba
March 11, 2023
Tweet
Share
More Decks by tomokusaba
See All by tomokusaba
GitHub Copilot の概要
tomokusaba
1
160
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
460
Azure AI Foundry Agent Serviceを使用してコードファースト アプリを構築する
tomokusaba
1
290
Part1 GitHubってなんだろう?その1
tomokusaba
3
950
Part1 GitHubってなんだろう?その2
tomokusaba
2
920
Part2 GitHub Copilotってなんだろう
tomokusaba
2
1k
Global Azure2025(GitHub Copilot ハンズオン)
tomokusaba
2
930
ASP.NETアプリケーションのモダナイゼーションについて
tomokusaba
0
340
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
270
Other Decks in Programming
See All in Programming
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
13
4.7k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.6k
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
110
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
920
効率的な開発手段として VRTを活用する
ishkawa
0
140
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
580
ふつうの技術スタックでアート作品を作ってみる
akira888
1
890
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
210
GPUを計算資源として使おう!
primenumber
1
120
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
4 Signs Your Business is Dying
shpigford
184
22k
Statistics for Hackers
jakevdp
799
220k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Why Our Code Smells
bkeepers
PRO
336
57k
Speed Design
sergeychernyshev
32
1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Optimizing for Happiness
mojombo
379
70k
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 のフォームと入力コンポーネント
おしまい おしまい