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
260
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
93
僕が新卒として意識している4つのこと
izumisy
0
120
Choo: Fun Functional Framework
izumisy
1
500
StackoverflowでREPを稼ぐ技術
izumisy
1
820
Other Decks in Programming
See All in Programming
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
390
生成AIで日々のエラー調査を進めたい
yuyaabo
0
630
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
120
Is Xcode slowly dying out in 2025?
uetyo
1
180
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
250
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
480
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
830
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
300
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
360
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
250
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
170
SODA - FACT BOOK
sodainc
1
1.1k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
How GitHub (no longer) Works
holman
314
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
Designing for Performance
lara
609
69k
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!