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
270
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
96
僕が新卒として意識している4つのこと
izumisy
0
120
Choo: Fun Functional Framework
izumisy
1
500
StackoverflowでREPを稼ぐ技術
izumisy
1
820
Other Decks in Programming
See All in Programming
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
890
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
630
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
470
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
930
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
310
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
220
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
650
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
720
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
270
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
140
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
Typedesign – Prime Four
hannesfritz
42
2.7k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
250
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Speed Design
sergeychernyshev
32
1k
The Language of Interfaces
destraynor
158
25k
Practical Orchestrator
shlominoach
188
11k
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!