フロントエンド・バリデーション

WEBエンジニア勉強会 #03

1. ϑϩϯτΤϯυ όϦσʔγϣϯ Seiya Izumi (@sy_izumi)
2. ϑϩϯτΤϯυͰόϦσʔγϣ ϯ͠Α͏ʂ
3. Vue.jsΛ࢖͍ͬͯΔͷͰ vue-validator࢖͏Αʂ (Vue.js༻ͷศརͳϑΥʔϜόϦσʔγϣϯɾϞδϡʔϧ)
4. aaaa ʢ͜Μͳײ͡ʹ͔͚Δʂʣ
5. Θʙ͍
6. ͦΕͰ͍͍ͷ͔
7. όϦσʔγϣϯͱ͍͏੹຿ • ΞϓϦέʔγϣϯʹ͓͍ͯɺৗʹόϦσʔγϣ ϯ͕ϏϡʔϨΠϠͷ੹຿ͳͷ͔ͱ͍͏͜ͱΛ ߟ͑Δ • ΞϓϦέʔγϣϯΛෳ਺ͷϨΠϠʹ෼͚ʢϨ ΠϠʔυɾΞʔΩςΫνϟʣɺͦͷதͰద੾ ͳϨΠϠʹ੹຿Λ࣋ͨͤΔ
8. ϨΠϠʔυɾΞʔΩςΫνϟ https://dzone.com/articles/layered-architecture-is-good ʢ஫: υϝΠϯ͸લఏͱͯ͠ΠϯϑϥɾϨΠϠ΍ͦͷଞԿʹ΋ґଘ͠ͳ͍ʣ
9. ϞσϧΛҙࣝ͢Δ • ϑϩϯτΤϯυɾΞϓϦέʔγϣϯͰ΋ʮϞ σϧʯΛݟ͚ͭΔɻ • View/ViewModelʹϩδοΫ͕ภΓ͕ͪʹͳ Δͷ͸੹຿ΛϏϡʔίϯϙʔωϯτத৺ʹߟ ͍͑ͯΔՄೳੑ͕ߴ͍ • ͋͘·Ͱ V=Component(State(Model))
10. υϝΠϯͱόϦσʔγϣϯ Ex)ʮબ୒Ͱ͖Δಉ͡঎඼͸3ͭ·Ͱʯ
 Ex)ʮ૯ֹ͕3000ԁҎ্ʹͳΔΑ͏બ୒ඞਢʯ • ΞϓϦέʔγϣϯͷϏδωεݻ༗ͷࣄ৘ʹΑͬ ͯੜ·ΕΔόϦσʔγϣϯɾϩδοΫ͸υϝΠ ϯͷ੹຿ • Ϗδωεݻ༗ͷϩδοΫ͕Ϗϡʔʹ͋Δ͜ͱʹ Αͬͯ੹຿෼ׂ͕ഁ୼͠΍͘͢ͳΔ
11. Ͱ΋ࣗ෼ͰόϦσʔγϣϯ ࣮૷͢Δͷ͸େม
12. ͦ͜Ͱʂ
13. validatable-record Immutable#Record + validate.js = validatable-record
14. 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
15. 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ͷ୅ΘΓʹ࢖༻
16. 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ϝιου͕ϝϯόͱͯ͠࢖͑ΔΑ͏ʹͳΔɻ
17. class Man extends ValidatableMan { ... } const agelessMan = new Man({ name: "Michael", }); agelessMan.validate() // == false agelessMan.getErrors() // == [ "Age is invalid" ] validatable-record getErrorsΛ࢖͏͜ͱͰόϦσʔγϣϯΤϥʔΛऔಘͰ͖Δ
18. ϞσϧͰͷόϦσʔγϣϯ͕ ָʹͳΔ͔΋ʢʁʣ
19. ͕͔ͩ͠͠ • ͔ͳΒͣ͠΋ϏϡʔϨΠϠͰͷόϦσʔγϣ ϯʹѱͰ͸ͳ͍ɻ • ͲͷϨΠϠ͕Կͷ੹຿Λ୲͏͔ͱ͍͏໰୊͸ νʔϜຖͷϓϥΫςΟεΛ࡞Δͷ͕࠷΋ྑ͍ • validatable-record͸ͻͱͭͷΞϓϩʔν☝
20. Happy Hacking!