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
280
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
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
150
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.8k
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
110
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
How STYLIGHT went responsive
nonsquared
100
5.6k
Producing Creativity
orderedlist
PRO
346
40k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Optimizing for Happiness
mojombo
379
70k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
We Have a Design System, Now What?
morganepeng
53
7.7k
Side Projects
sachag
455
42k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
For a Future-Friendly Web
brad_frost
179
9.8k
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!