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
290
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
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
330
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
200
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.2k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
280
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
400
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
730
型で語るカタ
irof
0
670
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
220
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
610
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
Model Pollution
hschwentner
1
160
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Balancing Empowerment & Direction
lara
1
450
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
Making the Leap to Tech Lead
cromwellryan
134
9.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Typedesign – Prime Four
hannesfritz
42
2.7k
GitHub's CSS Performance
jonrohan
1031
460k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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!