ϑϩϯτΤϯυ όϦσʔγϣϯ 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!