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
フロントエンド・バリデーション
Search
Seiya IZUMI
October 07, 2017
Programming
5
3.6k
フロントエンド・バリデーション
WEBエンジニア勉強会 #03
Seiya IZUMI
October 07, 2017
Tweet
Share
More Decks by Seiya IZUMI
See All by Seiya IZUMI
TailorにおけるSchema-driven UIの実践例
izumisy
0
240
Elm, the functional frontend
izumisy
3
1.1k
Elmの歩き方2019
izumisy
5
3.4k
Our Journey with the Biggest Elm App in Japan
izumisy
0
160
jQueryからElmまで
izumisy
1
1.6k
Ordering and Ordered
izumisy
1
88
僕が新卒として意識している4つのこと
izumisy
0
120
Choo: Fun Functional Framework
izumisy
1
490
StackoverflowでREPを稼ぐ技術
izumisy
1
820
Other Decks in Programming
See All in Programming
OpenNext + Hono on Cloudflare でイマドキWeb開発スタックを実現する
rokuosan
0
110
Interface vs Types ~型推論が過多推論~
hirokiomote
1
230
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
130
漸進。
ssssota
0
1.1k
CQRS/ESのクラスとシステムフロー ~ RailsでフルスクラッチでCQRSESを組んで みたことから得た学び~
suzukimar
0
190
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
taniiicom
2
570
iOSアプリ開発もLLMで自動運転する
hiragram
6
2.1k
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
290
型安全なDrag and Dropの設計を考える
yudppp
5
660
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
cuebic9bic
1
260
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6k
Blueskyのプラグインを作ってみた
hakkadaikon
1
280
Featured
See All Featured
Music & Morning Musume
bryan
47
6.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Optimizing for Happiness
mojombo
378
70k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
660
Faster Mobile Websites
deanohume
307
31k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Producing Creativity
orderedlist
PRO
346
40k
Scaling GitHub
holman
459
140k
A designer walks into a library…
pauljervisheath
205
24k
Transcript
ϑϩϯτΤϯυ όϦσʔγϣϯ Seiya Izumi (@sy_izumi)
ϑϩϯτΤϯυͰόϦσʔγϣ ϯ͠Α͏ʂ
Vue.jsΛ͍ͬͯΔͷͰ vue-validator͏Αʂ (Vue.js༻ͷศརͳϑΥʔϜόϦσʔγϣϯɾϞδϡʔϧ)
aaaa ʢ͜Μͳײ͡ʹ͔͚Δʂʣ
Θʙ͍
ͦΕͰ͍͍ͷ͔
όϦσʔγϣϯͱ͍͏ • ΞϓϦέʔγϣϯʹ͓͍ͯɺৗʹόϦσʔγϣ ϯ͕ϏϡʔϨΠϠͷͳͷ͔ͱ͍͏͜ͱΛ ߟ͑Δ • ΞϓϦέʔγϣϯΛෳͷϨΠϠʹ͚ʢϨ ΠϠʔυɾΞʔΩςΫνϟʣɺͦͷதͰద ͳϨΠϠʹΛ࣋ͨͤΔ
ϨΠϠʔυɾΞʔΩςΫνϟ https://dzone.com/articles/layered-architecture-is-good ʢ: υϝΠϯલఏͱͯ͠ΠϯϑϥɾϨΠϠͦͷଞԿʹґଘ͠ͳ͍ʣ
ϞσϧΛҙࣝ͢Δ • ϑϩϯτΤϯυɾΞϓϦέʔγϣϯͰʮϞ σϧʯΛݟ͚ͭΔɻ • View/ViewModelʹϩδοΫ͕ภΓ͕ͪʹͳ ΔͷΛϏϡʔίϯϙʔωϯτத৺ʹߟ ͍͑ͯΔՄೳੑ͕ߴ͍ • ͋͘·Ͱ
V=Component(State(Model))
υϝΠϯͱόϦσʔγϣϯ Ex)ʮબͰ͖Δಉ͡3ͭ·Ͱʯ Ex)ʮ૯ֹ͕3000ԁҎ্ʹͳΔΑ͏બඞਢʯ • ΞϓϦέʔγϣϯͷϏδωεݻ༗ͷࣄʹΑͬ ͯੜ·ΕΔόϦσʔγϣϯɾϩδοΫυϝΠ ϯͷ • Ϗδωεݻ༗ͷϩδοΫ͕Ϗϡʔʹ͋Δ͜ͱʹ Αׂ͕ͬͯഁ͘͢͠ͳΔ
ͰࣗͰόϦσʔγϣϯ ࣮͢Δͷେม
ͦ͜Ͱʂ
validatable-record Immutable#Record + validate.js = validatable-record
Immutable#Record const Man = new Record({ name: null, age: null
}); const man = new Man({ name: "Justine", age: 10 }); man.get("name") // "Justine" man.get("age") // 10 man.age = 20 // Here raises an error ϞσϧߏΛ࡞ΔͷʹΑ͘ΘΕΔImmutable#Record
validatable-record const hello = 100 console.log("hello world"); • const ValidatableMan
= ValidatableRecord({ name: null, age: null }, { name: { presence: true }, age: { presence: { message: "is invalid" } } }); ValidatableRecordΛImmutable#RecordͷΘΓʹ༻
class Man extends ValidatableMan { ... } const man =
new Man({ name: "Michael", age: "55" }); man.validate() // == true man.get("name") // "Michael" man.get("age") // 55 validatable-record validateϝιου͕ϝϯόͱͯ͑͠ΔΑ͏ʹͳΔɻ
class Man extends ValidatableMan { ... } const agelessMan =
new Man({ name: "Michael", }); agelessMan.validate() // == false agelessMan.getErrors() // == [ "Age is invalid" ] validatable-record getErrorsΛ͏͜ͱͰόϦσʔγϣϯΤϥʔΛऔಘͰ͖Δ
ϞσϧͰͷόϦσʔγϣϯ͕ ָʹͳΔ͔ʢʁʣ
͕͔ͩ͠͠ • ͔ͳΒͣ͠ϏϡʔϨΠϠͰͷόϦσʔγϣ ϯʹѱͰͳ͍ɻ • ͲͷϨΠϠ͕ԿͷΛ୲͏͔ͱ͍͏ νʔϜຖͷϓϥΫςΟεΛ࡞Δͷ͕࠷ྑ͍ • validatable-recordͻͱͭͷΞϓϩʔν☝
Happy Hacking!