東京Node学園祭2015
RESTORETHE ORDERϑϩϯτΤϯυʹடংΛऔΓ͢ํ๏@amagitakayosi
View Slide
ૣޱͰ͍͖·͢
ࠓ͞ͳ͍͜ͱ
࠷৽ϥΠϒϥϦͷ͍ํ࠷ߴʹඒ͍͠ઃܭ/PEFKTͷ
ࠓ͢͜ͱ
ϦϑΝΫλϦϯάίʔυنͱΞʔΩςΫνϟϑϨʔϜϫʔΫಋೖςετڥߏங
εϐϦοτ
@amagitakayosi
IUUQCMPHIBUFOBOFKQSFHJTUFS!!!!!!!!!!ࠓ͙͢ొʂ!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
͜͜ʹ4पͷਤΛషΔ2015-11-07ͯͳϒϩάप
͜ͷτʔΫͰฤूը໘ϦχϡʔΞϧʹ͏+4େվͷ༰Λհ͠·͢ʂʂʂʂ
ͯͳϒϩάͷઃܭࢥ
first commitͷը૾ΛషΔ։ൃ։࢝
ͳΔ͘ബ͘w 1FSMw 1MBDLϕʔε03.ͳ͠w +4w 7BOJMMB+4
http://www.slideshare.net/cho45/yapc-asia-2011ࢀߟݩઃܭऀͷεϥΠυ
https://speakerdeck.com/hitode909/perlfalseshang-nimosan-nian-zututoiketerusabisuwozuo-risok-keruji-shuࢀߟαʔόαΠυઃܭͷ
+
+ͦͯ͠4͕ܦաͨ͠……
ൃੜ
1ڊେͳϑΝΠϧ
2౷Ұײͷͳ͍ελΠϧ
3ςετෆՄ
ಓʹվળ͍ͯͧ͘͠ʂʂʂʂʂ
SPLITTHE CODEMission 1:
ͯͳϒϩάͷJSw 5PUBMMJOFT ࣌w ͦΜͳʹڊେͰͳ͍͕ʜʜ
admin-user-blog-edit.jsߦ࣌
ฤूը໘ͷJSw GPSNΛཧ͢ΔΫϥεw ه๏͝ͱͷػೳ 8:4*8:( .BSLEPXO ͯͳه๏w αΠυόʔͷίϯϙʔωϯτ
ैདྷͷJSׂw ໊લۭؒͰϞδϡʔϧԽw ϑΝΠϧΛDPODBUͯ͠৴
໊લۭؒ in JSw ϞδϡʔϧΛ0CKFDUʹ·ͱΊΔw άϩʔόϧมͷཞ༻Λආ͚Δ ݹͷϕετϓϥΫςΟε
໊લۭؒΛ༻ҙͯ͠
໊લۭؒʹಥͬࠐΜͰ
JOEFYKT'PPKT#BSKT
ฤूը໘ͷ+4ׂ͍ͨ͠ʜʜ
ґଘؔΉ͔͍ͣ͠w DPODBUͷॱ൪ม͑ͨΒյΕΔw ม໊Λม͑ΔͱյΕΔ
Foo͕ະఆٛͩͱΤϥʔ
JOEFYKT#BSKT'PPKT
ະఆٛͷมΛݕग़Ͱ͖ͳ͍
ະఆٛͷglobalมlintͰνΣοΫͰ͖Δ͚Ͳ……ະఆٛͷมΛݕग़Ͱ͖ͳ͍
໊લۭؒͷதlintͰνΣοΫͰ͖ͳ͍ʂະఆٛͷมΛݕग़Ͱ͖ͳ͍
࣮ߦ͢Δ·Ͱόά͕Θ͔Βͳ͍ʂ
DPODBUͭΒ͍ʜʜ
browserifyw $PNNPO+4ܗࣜͰϞδϡʔϧΛཧw ڝ߹ͱൺɺγϯϓϧʹ͑Δw 3FRVJSF+4ॻ͖ํ͕໘w 8FCQBDLେ؋ڊ๒ओٛ
ґଘཧָ͕ʹͳΔw DPODBUॱΛߟ͑ͳ͍Ͱྑ͍w ଘࡏ͠ͳ͍ϑΝΠϧΛϩʔυ͢Δͱ Τϥʔు͍ͯ͘ΕΔ
Ϗϧυ࣌ʹΤϥʔग़ͯ͘͠ΕΔʂ
browserifyಋೖw ಋೖ։࢝w গͣͭ͠$PNNPO+4ʹมw Ϗϧυͨ͠+4Λ طଘͷ+4ͱDPODBU
$PNNPO+4ܗࣜʹॻ͖ͯ͠
໊લۭؒʹͭͬ͜ΜͰ
ઓུϏϧυͨ͠+4Λ͜Ε·Ͱͷ+4ͱDPODBUϏϧυͨ͠+4͜Ε·Ͱͷ+4
མͱ݀͠
ڞ௨Խਖ਼͘͠ߦ͏
ڞ௨Խਖ਼͘͠ߦ͏w ଞͷ໊લۭؒΛࢀরͯ͠Δͱ ׂͮ͠Β͍w ઌʹϦϑΝΫλϦϯά͢͠
ݱࡏͷঢ়گ
admin-user-blog-edit.jsߦߦ
ʙʙ
browserifyཧԼͷϑΝΠϧconcatͯ͠ΔϑΝΠϧ
browserifyཧԼͷϑΝΠϧconcatͯ͠ΔϑΝΠϧࡉ͔͘ϞδϡʔϧԽ͢ΔͱݩϑΝΠϧΑΓଟ͘ͳΔ
browserifyཧԼͷϑΝΠϧconcatͯ͠ΔϑΝΠϧࡉ͔͘ϞδϡʔϧԽ͢ΔͱݩϑΝΠϧΑΓଟ͘ͳΔԶୡͷઓ͍͜Ε͔Βͩʂʂʂʂʂʂʂ
KEEPTHE STYLEMission 2:
ઃܭελΠϧίʔσΟϯάελΠϧ
Vanilla ArchitectureVanillaJSͰͷίϯϙʔωϯτઃܭ
طଘJSͷw σʔλͱ%0.͕ີ݁߹w ίϯϙʔωϯτؒͷ࿈ܞ͕Ϝζ͍w αʔόͱͷ࿈ܞ͕μϧ͍
σʔλͱDOM͕ີ݁߹w %0.ଐੑʹσʔλΛอଘw ͋ͪͪ͜Ͱ%0.ૢ࡞w σʔλؒͷ߹ੑ͕յΕ͍͢
ίϯϙʔωϯτؒͷ࿈ܞw σʔλϑϩʔʹܾ·Γ͕ͳ͍w ॥ࢀরͰݺͼ߹ͬͨΓw ࠷ѱ%0.ΠϕϯτΛ͏
αʔόͱͷ࿈ܞw )5.-ߏ͔ΒσʔλΛ࡞Δw +40/ͱ͔Ͱͳ͍w %#ߋ৽ͷʹαʔόଆͰඳը
͜͜ΛΫϦοΫ͢Δͱ%#͕ߋ৽͞Εͯ
αʔόͰ)5.-Λඳը͠BKBYͰड͚औͬͯSFQMBDF8JUI ͢Δ
εςʔτϨεͰඒ͍͠ઃܭ
+4Ͱඳը͢Εຊདྷෆཁ
VanillaJSͷ··࠶ઃܭw σʔλͱ%0.Λw ػೳຖʹ7JFX.PEFMΛ࡞Δw ػೳಉ࢜ΠϕϯτͰΓͱΓ
σʔλͱDOMΛw ॳظԽ࣌ʹσʔλΛશͯ༻ҙw %0.ૢ࡞ઐ༻ϝιουͰߦ͏
%0.Λ͞ΘΒͣʹ
ॳظԽ࣌ʹσʔλΛ༻ҙ
DOMૢ࡞ઐ༻ϝιουͰw +4ͰϨϯμϦϯάw σʔλมߋͷʹશ෦࠶ඳըw ߹ੑɺϝϯς͢͠͞Λ༏ઌw ύϑΥʔϚϯε֎ࢹ
ػೳຖʹViewModelw ίϯϙʔωϯτΛͱࢠʹׂw 4NBSU%VNC$PNQPOFOU
ίϯϙʔωϯτw σʔλɺϏδωεϩδοΫΛཧw &WFOU&NJUUFSΛܧঝw %0.&WFOUΛۃྗ͔ͭΘͳ͍ʂ
ࢠίϯϙʔωϯτw ͷࢀরΛ࣋ͭw σʔλͷඳըͱΠϕϯτൃߦͷΈ
ྫ4JEFCBS
SidebarSidebarButtonsConfig
4JEFCBS#VUUPOT $POpH
4JEFCBS#VUUPOT $POpHϘλϯΫϦοΫ
4JEFCBS#VUUPOT $POpHϘλϯΫϦοΫσʔλมߋ + emit(‘change’)
4JEFCBS#VUUPOT $POpHϘλϯΫϦοΫσʔλөσʔλมߋ + emit(‘change’)
ίϯϙʔωϯτؒͷΓͱΓFotolifeMarkdownEditor
ίϯϙʔωϯτؒͷΓͱΓw ্Ґͷ7JFX.PEFMΛͭͬͯ͘ ΠϕϯτΛൃੜͤ͞Δw ·ͨ$window.trigger()
্Ґͷ7JFX.PEFMΛ࡞FotolifeMarkdownEditorEditor
&EJUPS.BSLEPXO 'PUPMJGF'PUP-JTU 'PPUFSϘλϯΫϦοΫը૾Λૠೖͯ͘͠Εը૾Λૠೖͯ͘͠Ε5FYU"SFBૠೖ
நతͳΠϕϯτ໊ʹ͢Δ' buttonClicked( insertImage
.BSLEPXO 'PUPMJGF'PUP-JTU 'PPUFSϘλϯΫϦοΫը૾Λૠೖͯ͘͠Εը૾Λૠೖͯ͘͠Ε5FYU"SFBૠೖ&EJUPS
&EJUPS.BSLEPXO 'PUPMJGF'PUP-JTU 'PPUFSϘλϯΫϦοΫը૾Λૠೖͯ͘͠Εը૾Λૠೖͯ͘͠Ε5FYU"SFBૠೖநతͳΠϕϯτ.BSLEPXO 'PUPMJGFը૾Λૠೖͯ͘͠Εը૾Λૠೖͯ͘͠Ε&EJUPS
σʔλͱ%0.ͷෆ߹ى͖ʹ͘͘ͳͬͨʂ
͕
͚ͬ͜͏େมw ઃܭͷ߹ҙͱΔͷ͕େมw %0.ૢ࡞μϧ͍w ϥΠϒϥϦʹͬͯ΄͍͠
7JFXϑϨʔϜϫʔΫ͍͍ͨʜʜʂ
WT
Vue.js✔ݹ͖ྑ͖7JFX.PEFM✔ຊޠυΩϡϝϯτ✗͍ΖΜͳॻ͖ํͰ͖Δ
React✔֮͑Δ͜ͱ͕গͳ͍✔ใ͕๛✗+49
1ϲ݄΄Ͳٞw ֶशίετʁw ඞཁͳ࣌ʹࣺͯΒΕΔ͔ʁw ৽ػೳΛ྆ํͰ࣮ͨ͠Γ
ReactΛ࠾༻w ΑΓγϯϓϧʹॻ͚Δw 3FBDUˠ7VF؆୯ͦ͏
σβΠφʔ͕৮Εͳ͍ʁw +49͘Β͍৮ΕΔͣw $44ͰࣗࡏʹελΠϧͰ͖Δ Α͍ઃܭΛࢦ͢
ಋೖw +49ͷͨΊʹಋೖͱ͍͏ޱ࣮w TUBHFҎԼ༻ېࢭw ษڧձ JTTVFͰݟΛγΣΞ
http://azu.github.io/slide-what-is-ecmascript/ࢀߟ&$."4DSJQUͱԿ͔ CZ!B[V͞Μ
ࣾษڧձͷΑ͏͢
JTTVFͰݟΛूΊΔ
React ArchitectureReact༻࣌ͷίϯϙʔωϯτઃܭ
جຊతͳߟ͑ํw 'MVYϑϨʔϜϫʔΫ͍ͨ͘ͳ͍w &WFOU&NJUUFS͚ͩͰؤுΔw نʹΑͬͯɺஈ֊తʹ 'MVYͬΆ͍ͯ͘͘͠
খ͞ͳػೳͷͱ͖w 7JFX.PEFM͚ͩͰ݁w ҎલͷίʔυͷSFOEFS Λ ஔ͖͑Δ͚ͩ
େ͖ͳػೳͷͱ͖w &WFOU&NJUUFSͰ෦తʹ'MVYw 4UPSF "DUJPO$SFBUPS͕ෳͳΒ %JTQBUDIFSΛಋೖ
.PEFMখن : ViewModel7JFX.PEFMΠϕϯτөσʔλมߋ
"DUJPO$SFBUPSதن : Flux෩Πϕϯτө4UPSFActionσʔλมߋ
େن : DispatcherΛಋೖΠϕϯτөActionσʔλมߋ%JTQBUDIFS
Coding ConventionίʔσΟϯάελΠϧͷνΣοΫ
ैདྷJSHintͰνΣοΫಠࣗϧʔϧ1FSMͰॻ͍ͯͨ✗ϧʔϧΛඍௐ͠ʹ͍͘✗+49&4ʹඇରԠ
✔ඪ४ϧʔϧ͕ॆ࣮✔ઃఆ͕ΧελϚΠζ͍͢͠✔ಠࣗϧʔϧ͕؆୯ʹॻ͚Δ
https://gist.github.com/fand/c13213f81bfce11f4132ࢀߟಠࣗϧʔϧྫ
ಋೖͷํw શͯͷඪ४ϧʔϧͰ Τϥʔ͕ग़ΔΑ͏ʹઃఆw طଘίʔυͰΤϥʔফ͑Δ·Ͱ ϧʔϧΛ؇ΊΔ
˔ͷ͍ͭͨߦશ෦ܯࠂ
ౖΒΕͯศརʂ
TESTTHE COMPONENTMission 3:
4݄·ͰͷJSςετw $BTQFS+4ͷ&&ͷΈw هࣄߘɺࠂͷද͚ࣔͩ
JS͕յΕ͍͢w ϦϑΝΫλϦϯάͰΤϯόάw ϦϦʔεޙΤϥʔͰ·ͬͯ͘ 3FWFSUͨ͠ࣄʜʜ
http://0-9.sakura.ne.jp/pub/frontrend/start.html
ʮE2E͔Β࢝ΊΖʯͱݴ͏͚ΕͲ……w γφϦΦ͕ෳࡶʮ͋ΔॱংͰϖʔδભҠͨ࣌͠ʹ উखʹλϒ͕ดͯ͡͠·͏ʯόάͷςετͨ͘͠ͳ͍ʜʜ
ςετ͍ͨ͠ʂ
୯ମςετ͔Β͡ΊΑ͏
Unit Test୯ମςετڥߏங
ཧ
ςετॻ͘ςετམͪͳ͍Α͏ʹϦϑΝΫλϦϯά
ݱ࣮
ςελϒϧͳઃܭͰϦϑΝΫλϦϯάςετॻ͘
ςελϒϧͳઃܭΛ৺͕͚Δw ίʔυׂେલఏw 7JFXૢ࡞͢Δw %0.৮ΔϞδϡʔϧ ςετͮ͠Β͍
w ݩ"OHVMBS༻ͷςετϥϯφʔw ϒϥβΛͬͯςετͰ͖Δw ୯ମςετ͚w ϒϥβૢ࡞ॆ࣮͍ͯ͠ͳ͍
গͣͭ͠ςετ૿͢w ৽͍͠Ϟδϡʔϧςετඞਢw ϦϑΝΫλϦϯάˠςετՃw 6UJMܥϞδϡʔϧΛ༏ઌ
Viewͷςετw &WFOU&NJUUFSͷ͓͔͛Ͱ ςετ͘͢͠ͳͬͨʂw Πϕϯτൃߦ͞ΕΔ͔ʁw %0.ཁૉ͕ඳը͞ΕͯΔ͔ʁ
4JEFCBS#VUUPOT $POpHϘλϯΫϦοΫσʔλөσʔλมߋ + emit(‘change’)$POpHϘλϯΫϦοΫΠϕϯτ͕ਖ਼͘͠ൃߦ͞ΕΔ͔ʁ
4JEFCBS#VUUPOT $POpHϘλϯΫϦοΫσʔλөσʔλมߋ + emit(‘change’)4JEFCBSσʔλมߋ + emit(‘change’)Πϕϯτʹର͠σʔλ͕มߋ͞ΕΔ͔ʁ
4JEFCBS#VUUPOT $POpHϘλϯΫϦοΫσʔλөσʔλมߋ + emit(‘change’)σʔλਖ਼͘͠ඳը͞ΕΔ͔ʁ#VUUPOTσʔλө
ςετॻ͚Δ
ςετϑΝΠϧ
·ͩ·ͩൃల్্
E2E TestE2EςετڥͷϦχϡʔΞϧ
CasperJSw 3FBDUΛ͏ͱ 1IBOUPN+4ͰΤϥʔग़Δʂw 1IBOUPN+4ɺ͍͠
ଞͷखஈΛݕ౼
&MFDUSPOϕʔεͷεΫϨΠύʔ✔γϯϓϧͳ"1*✗ࡉ͔͍"1*͕Γͳ͍✗ϝιουνΣʔϯ͕໘
ݩ"OHVMBS+4ͷςετ༻✔Ϣʔβʔɺใ͕ଟ͍✔ಉظతʹॻ͚Δ✗"OHVMBSઐ༻"1*ෆཁProtractor
4FMFOJVNͷόΠϯσΟϯά✔ಉظతʹॻ͚Δ✔ׂͱυΩϡϝϯτॆ࣮♨$-*ςετϥϯφʔ͖
4FMFOJVNͷόΠϯσΟϯά✔ಉظతʹॻ͚Δ✔ׂͱυΩϡϝϯτॆ࣮♨$-*ςετϥϯφʔ͖࠾༻
Ұ൪ͷཧ༝w 4FMFOJVNܥͳͷͰ ଞϥΠϒϥϦʹΓ͍͑ͣ͢w 1SPUSBDUPS UFTUJVN
&4HFOFSBUPSͰςετΛॻ͘
ςετಈ͍ͨʂ
http://amagitakayosi.hatenablog.com/entry/2015/10/30/083000ࢀߟ͓͠ΖΤϐιʔυ
͔ͯ͘͠டংकΒΕͨ
ࠓͨ͜͠ͱw ϦϑΝΫλϦϯάצॴw ਐతʹΞʔΩςΫνϟΛਐԽͤ͞Δw ϑϨʔϜϫʔΫಋೖw ςετڥߏங
ࠓͨ͜͠ͱw ϦϑΝΫλϦϯάצॴw ਐతʹΞʔΩςΫνϟΛਐԽͤ͞Δw ϑϨʔϜϫʔΫಋೖw ςετڥߏஙྑ͍ઃܭΛࢦͨ͢Ίͷ࡞Γ
ࠓ͞ͳ͔ͬͨ͜ͱw ඒ͍͠ϥΠϒϥϦઃܭͷڞ༗w ඇΤϯδχΞͱͷઃܭw രͰαʔϏεͭ͘Δ։ൃϑϩʔ
ࠓ͞ͳ͔ͬͨ͜ͱw ͯͳϒϩάνʔϜͷ։ൃϑϩʔw ࣾϥΠϒϥϦͷઃܭํ๏w αʔόଆݴޠͱͷઃܭͷڞ༗·ͩ·ͩൃల్্
Ί͛ͣʹվળ͢ΔεϐϦοτ
ྑ͍αʔϏεΛ࡞͍ͬͯͧ͘ʂʂʂʂʂʂʂʂʂʂʂʂʂʂʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠
גࣜձࣾͯͳͰ࠷ߴͷΞʔΩςΫνϟΛࢦ͋͘͠ͳ͖୳ٻΛ͚ͭͮΔΤϯδχΞΛืू͍ͯ͠·͢ʂ
fand
k1low
nagix
minorun365
hakubishin3
naohachi89
palark
rilmayer
optimisuke
oracle4engineer
sansantech
coconala_engineer
kawagoi
danielanewman
eileencodes
samlambert
rocio
jrom
jacobian
dougneiner
addyosmani
edds
afnizarnur
jmmastey
vanstee