デザインリニューアルでJavaScriptのViewライブラリを使った話

Transcript

1. σβΠϯϦχϡʔΞϧͰ
   +BWB4DSJQUͷ7JFXϥΠϒϥϦΛ
   ͔ͭͬͨ࿩
2. 
   
   !LB[V ϗεςΟϯάࣄۀ෦ϩϦϙοϓʂνʔϜ
3. ϩϦϘϯϓϩδΣΫτ ೥ͿΓʹσβΠϯΛ࡮৽
   αʔϏε։࢝Ҏདྷ͸͡ΊͯͷϒϥϯυϦχϡʔΞϧ ʮ͙͢ʹ࢖͑Δɺͣͬͱ࢖͑ΔʯϗεςΟϯάαʔϏε΁
4. ͖͔͚ͬ
5. σβΠφʔ͔Β
 ݕࡧϖʔδͷσβΠϯมߋ͍ͨ͠ͱ͍͏ґཔ
6. ಈػ  +BWB4DSJQU಺Ͱಈతʹ)5.-Λ૊Έཱ͍ͯͯΔ
    ੜ੒͢Δ)5.-ͷ%0.ͷΠϕϯτ΋؅ཧ
    ผϑΝΠϧͷม਺ΛHMPCBMΛ௨ͯ͡ม਺Λࢀর
    ӡ༻ͱͱ΋ʹपลͷॲཧ͕௥Ճ͞Ε͍༷ͯͬͨࢠ ݕࡧͷ+BWB4DSJQUͷ֓ཁ
7. Πϝʔδ 6TFS GPSN )5.-ੜ੒ ϝΠϯϩδοΫ 7JFXͷঢ়ଶ WJFXΛੜ੒ Πϕϯτ WJFXঢ়ଶʹ
   Ԡͨ͡ॲཧ WJFX
8. ղܾ͍ͨ͠ͱ͜Ζ  ಈతੜ੒͍ͯ͠ΔWJFXΛ)5.-ϕʔεͷUFNQMBUFϑΝΠ ϧʹมߋ͍ͨ͠
    ϑΝΠϧؒͷґଘؔ܎Λղফ͍ͨ͠
    %0.ͷΠϕϯτɺ7JFXͷঢ়ଶ؅ཧΛϝΠϯϩδοΫ͔Β ੾Γ཭͍ͨ͠
9. ͜͏ͳΕ͹Α͍ʁ 6TFS GPSN )5.-จࣈྻ ϝΠϯϩδοΫ 7JFXͷঢ়ଶ WJFXΛੜ੒ Πϕϯτ WJFX ঢ়ଶʹԠͨ͡ॲཧ
10. ͜͏ͳΕ͹Α͍ʁ 6TFS GPSN )5.-จࣈྻ ϝΠϯϩδοΫ 7JFXͷঢ়ଶ WJFX Πϕϯτ WJFX ঢ়ଶʹԠͨ͡ॲཧ Ͳ͔͜Ͱݟͨ͜ͱ͋ΔΑ͏ͳ
11. 7JFX.PEFM  7JFXͷঢ়ଶͷ؅ཧ
     7FJXͷΠϕϯτΛ.PEFMʹ౉͢
     .PEFMͷมߋΛड͚औΓɺ7JFXͷঢ়ଶΛมߋ͢Δ .PEFM 7JFX.PEFM 7JFX ͜ͷύλʔϯʹ͍ۙ
12. 7JFXͷϥΠϒϥϦʁ
14. ❌ ෳࡶͳ%0.ૢ࡞Λঢ়ଶ NPEFM ͱͷ
    ੔߹ੑอͪͭͭߦ͏ͷ͕େม
15. 7JFXϥΠϒϥϦΛ࢖͏ ਺͋ΔதͰ7VFKTΛબΜͩཧ༝ 
    খ͍͞ίϯϙʔωϯτΛ࡞Γ΍͍͢
     γϯϓϧͳ7JFX.PEFM
     )5.-ߏจͷςϯϓϨʔτ͕࢖͑Δ
     σβΠϯͱ+BWB4DSJQU͕͜Ε·Ͱͷؔ܎ʹ͍ۙ
     ΋ͪΖΜ%BUB#JOEJOHͰΠϕϯτ؅ཧͰ͖Δ
     μϝͩͬͨΒผͷ΋ͷʹஔ͖׵͑Δؾ࣋ͪ
16. %BUB#JOEJOHͱ5FNQMBUFͷงғؾ EJW
    JEBQQ
    
    
    Q\\
    NFTTBHF
    ^^Q
    
    
    JOQVU
    WNPEFMNFTTBHF
    EJW WBS
    BQQ
    
    OFX
    7VF \
    
    
    FM
    BQQ
    
    
    EBUB
    \
    
    
    
    
    NFTTBHF
    -PMJQPQ
    
    
    ^
    ^ ϑΥʔϜೖྗͱग़ྗ͕ಉظ
17. K2VFSZͰಉ͜͡ͱΛ͢Δͱ WBS
    NFTTBHF
    
    -PMQPQ
    WBS
    JOQVU
    
     BQQ pOE JOQVU
    WBS
    TFU.FTTBHF
    
    GVODUJPO FWFOU
    \
    
    
    
    
    FWFOUQSFWFOU%FGBVMU 
    
    
    
    
    JOQVUWBM NFTTBHF 
    ^
    JOQVUPO LFZVQ
    TFU.FTTBHF
     GVODUJPO
    \
    ɹ
    JOQVUWBM b-PMJQPQ`
    
    
    
    
    TFU.FTTBHFDBMM
    ^ ΠϕϯτΛݕ஌ͯ͠
    ৭ʑͱը໘ʹ൓ө͢Δॲཧ
18. ΄͔ʹ΋͍Ζ͍ΖͰ͖Δ w ΠϕϯτϋϯυϦϯά
    w ΫϥεͱελΠϧͷόΠϯσΟϯά
    w ৚݅෇͖ϨϯμϦϯά
    w ϦετϨϯμϦϯά
    FUD w1)1FSͷͨΊͷ7VFKTೖ໳ͱ7VFKT
    ͷະདྷ
19. ΍Εͦ͏ͳ
20. ͦͷ·͑ʹ
    ϥΠϒϥϦͷґଘؔ܎Λղܾ
21. ґଘؔ܎ͱ࣮ߦॱং  ґଘؔ܎͕͋Δ৔߹ɺಡࠐॱংɺఆٛͷ࣮ߦॱং͕ॏཁʹ ͳΔ
     ґଘؔ܎͕ଟ͘ͳΔͱωʔϜεϖʔεͷিಥɺґଘؔ܎͕ Θ͔Γʹ͘͘ͳΔ  ॲཧ͕ϑΝΠϧΛ෼ׂͯ͠࡞੒͞Ε͍ͯΔ
     HMPCBMείʔϓΛ௨ؔ͡਺ɾม਺Λࢀর͠ར༻͍ͯ͠Δ ݱࡏͷঢ়گ ໰୊఺
22. ґଘؔ܎ͱ࣮ߦॱং module-c.js module-b.js module-a.js module-c.js module-a.js module-b.js NPEVMFBKT͸ɺNPEVMFCKT͔Βม਺΍
    ϝιουΛࢀরͰ͖·͢ɻ
    ͔͠͠ٯ޲͖ͷࢀর͸Ͱ͖ͳ͍ɻ
23. Ϟδϡʔϧόϯυϥ /PEFKTͷSFRVJSFͷ࢓૊ΈΛར༻ɻ
    άϩʔόϧείʔϓΛԚછ͠ͳ͍ɻ
    SFRVJSFΛϒϥ΢βͰ΋࢖͑ΔΑ͏ʹͯ͠ɺ
    ϑΝΠϧͷґଘؔ܎Λղফͨ͠ϑΝΠϧʹ·ͱΊΔɻ
24. Ϟδϡʔϧόϯυϥ GVODUJPO
    PKJTBO
    \
    
    
    SFUVSO
    b-PMJQPQ`
    ^
    NPEVMFFYQPSUT
    
    PKJTPO DPOTU
    -PM0KJTBO
    
    
    
    \
    
    
    DPOTU
    PKJTBO
    
    SFRVJSF bPKJTBO
    
    
    
    SFUVSO
    PKJTBODBMM 
    ^ FYQPSU SFRVJSF
25. Ϟδϡʔϧόϯυϥ WBS
    7VF
    
    SFRVJSF WVF
    OFX
    7VF \
    
    
    FM
    BQQ
    
    
    EBUB
    \
    
    
    
    
    NFTTBHF
    )FMMP 8PSME
    
    
    ^
    ^ ࢀরΤϥʔʹ͸ͳΒͳ͍
26. Ϟδϡʔϧόϯυϥ CSPXTFSJGZ \
    
    
    
    
    FOUSJFT
    <
    
    >
    
    
    ^
    
    
    USBOTGPSN CBCFMJGZ
    CBCFMJGZ0QUJPO
    
    
    CVOEMF
    
    
    QJQF TPVSDF bCVOEMFKT
    
    ʜ ϑΝΠϧͷґଘؔ܎Λղফͨ͠
    ϑΝΠϧʹ·ͱΊΔ SFRVJSFͨ͠ϥΠϒϥϦΛCVOEMFͨ͠ϑΝΠϧΛ࡞੒͢Δɻ
    ϒϥ΢βͰ࢖͑ΔΑ͏ʹͳΔɻ
27. ΤίγεςϜ
28. 7JFXϥΠϒϥϦʹ৐Γ׵͑Δ
29. 7JFXϥΠϒϥϦʹ৐Γ׵͑Δ 6TFS GPSN )5.-ੜ੒ ϝΠϯϩδοΫ 7JFXͷঢ়ଶ WJFXΛੜ੒ Πϕϯτ WJFXঢ়ଶʹ
    Ԡͨ͡ॲཧ WJFX
30. ϝΠϯϩδοΫ੾Γग़͠ 6TFS GPSN )5.- ϝΠϯϩδοΫ 7JFX WJFX Πϕϯτ WJFXঢ়ଶʹ
    Ԡͨ͡ॲཧ WJFX
31. ϝΠϯϩδοΫ੾Γग़͠ 
    
    
    TFBSDI+TPO
    
    
    KTPOσʔλΛݕࡧ
    
    
    
    
    -PM)PHFNPHFQSPUPUZQFFYFDVUF
    
    GVODUJPO LFZXPSE
    KTPO
    \
    
    
    
    
    UIJTLFZXPSE
    
    LFZXPSE
    
    
    
    
    UIJTWBMJE,FZXPSE
    
    UIJTTFQBSFUF,FZXPSET UIJTWBMJEBUF LFZXPSE 
    
    
    
    
    SFUVSO
    UIJTTFBSDI+TPO KTPO 
    ^
    
32. UFNQMBUFͷ੾Γग़͠ 6TFS 6TFS 6TFS GPSN )5.-ੜ੒ ϝΠϯϩδοΫ 7JFX WJFX Πϕϯτ WJFX Ԡͨ͡ॲཧ WJFX
33. UFNQMBUFΛ࡞੒ UFNQMBUF
    JETJUFTFBSDISFTVMUUFNQMBUF
    
    
    
    
    VM
    DMBTTMPMTJUFTFBSDISFTVMUQBHFT@@MJTU
    
    
    
    
    
    
    
    
    MJ
    
    
    
    
    
    
    
    
    
    
    
    
    WGPS LFZ
    JUFN
    JO
    JUFNT
    
    
    
    
    
    
    
    
    
    
    
    
    
    DMBTTMPMTJUFTFBSDISFTVMUQBHFT@@JUFN
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    TQBO
    DMBTTMPMTJUFTFBSDISFTVMUQBHFT@@JOEFY
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    \\LFZ^^
    
    
    
    
    
    
    
    
    
    
    
    
    TQBO
    
    
    
    
    
    
    
    
    MJ
    
    
    
    
    VM
    UFNQMBUF ΦϒδΣΫτͷల։
34. UFNQMBUFΛSFRVJSF͢Δ
    NPEVMFFYQPSUT
    
    \
    
    
    
    UFNQMBUF
    UFNQMBUFUFNQMBUF
    
    ^
    WBS
    7VF
    
    SFRVJSF WVF 
    OFX
    7VF \
    
    
    
    
    
    
    
    
    
    UFNQMBUF
    SFRVJSF UFNQMBUF 
    ^ 
35. 7JFXϩδοΫͷ੾Γग़͠ 6TFS 6TFS GPSN )5.- ϝΠϯϩδοΫ 7JFXͷঢ়ଶ WJFXΛੜ੒ Πϕϯτ WJFX Ԡͨ͡ॲཧ WJFX
36. EBUBΛ࡞੒ DPOTU
    TFUUJOH
    
    \
    
    
    
    
    EBUB
    \
    
    
    
    
    
    
    
    
    
    
    
    
    
    ^
    
    
    
    
    UFNQMBUF
    TJUFTFBSDIUFNQMBUF
    
    
    
    
    
    NFUIPET
    \
    
    
    
    
    
    
    
    
    GFUDI%BUB
    GVODUJPO LFZXPSE
    \
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ^
    
    
    
    
    ^
    ^
    DPOTU
    7VF
    
    SFRVJSF WVF 
    OFX
    7VF TFUUJOH 
    ΠϯελϯεͷϓϩύςΟ ςϯϓϨʔτཁૉ
    Πϯελϯεϝιου 7VFΠϯελϯੜ੒
37. 7JFXϥΠϒϥϦΛ࢖͏ ϝΠϯ
    ϩδοΫ %0.Πϕϯτ؂ࢹ 7JFX.PEFM %BUB
    CJOEJOH 6TFS ϩδοΫ͸ͦͷ··ʹWJFXͱͷͭͳ͙෦෼Λ
    ৐ͤม͑ͨ GPSNͷ
    Πϕϯτϋϯυϥ WJFX ͦͷ·· WJFXΛੜ੒
38. 7JFXϥΠϒϥϦʹ৐Γ׵͑ͨ݁Ռ
39. ײͨ͜͡ͱ w খ͞ͳ୯ҐͰϥΠϒϥϦʹࡌ͍ͤͯ͘ͱӡ༻͠΍͘͢ͳΔ ͔΋
    w খ࢝͘͞ΊͯμϝͳΒࣺͯΔؾ࣋ͪ΋େࣄ
    w ΤίγεςϜʹͷͤΔͱ͋Δఔ౓ͷ͜ͱ͸Ͱ͖ΔͷͰվળ ଎౓͸্͕Δ
    w ͦͷ͏ͪ41"ʹͳ͍͔ͬͯ͘΋ʜ
    w Ϣʔβʔઐ༻ϖʔδͷϦχϡʔΞϧͷώϯτʹ΋ͳͬͨ
40. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·͢