フロントエンドに秩序は戻ったか？

Kyoto.js 12発表スライドです。
https://speakerdeck.com/fand/hurontoendonizhi-xu-woqu-rili-sufang-fa の続編です。

Transcript

1. IS THE
   ORDER

   RESTORED?
   IS THE
   ORDER

   RESTORED?
   IS THE
   ORDER

   RESTORED?
   IS THE
   ORDER

   RESTORED?
   IS THE
   ORDER

   RESTORED?
   IS THE
   ORDER

   RESTORED?
   ϑϩϯτΤϯυʹடং͸໭͔ͬͨʁ
   @amagitakayosi
   

   View Slide

2. @amagitakayosi
   

   View Slide

3. http://developer.hatenastaff.com/entry/2016/12/16/120000
   1PEDBTU΍ͬͯ·͢
   

   View Slide

4. View Slide

5. IUUQCMPHIBUFOBOFKQSFHJTUFS
   !!!!!!!!!!
   ࠓ͙͢ొ࿥ʂ
   !!!!!!!!!!!
   !!!!!!!!!!
   !!!!!!!!!!
   !!!!!!!!!!!
   !!!!!!!!!!
   

   View Slide

6. View Slide

7. ͜͜ʹ4प೥ͷਤΛషΔ
   2016-11-07
   ͸ͯͳϒϩά
   प೥
   

   View Slide

8. ೥෺ͷ
   ྺ࢙͋Δ
   ιʔείʔυ܊
   

   View Slide

9. /PEFֶԂࡇͰ࿩͠·ͨ͠
   

   View Slide

10. લճͷ͋Β͢͡
    

    View Slide

11. +
    ౰ॳͷٕज़ελοΫ
    

    View Slide

12. ཱͪ͸͔ͩΔ໰୊ͨͪ
    

    View Slide

13. ஍ಓʹվળ
    w ίʔυ෼ׂϦϑΝΫλϦϯά
    w ϑϨʔϜϫʔΫಋೖ
    w ςετ؀ڥߏங
    

    View Slide

14. ίʔυ෼ׂ
    w ैདྷ͸໊લۭؒͰ෼ׂͯ͠

    DPODBUͯͨ͠
    w $PNNPO+4ܗࣜʹॻ͖௚͠

    CSPXTFSJGZͰϞδϡʔϧԽ
    

    View Slide

15. ໊લۭؒͰ෼ׂͯͨ͠
    w ैདྷ͸໊લۭؒͰ෼ׂͯ͠

    DPODBUͯͨ͠
    w CSPXTFSJGZͰϞδϡʔϧԽ
    ໊લۭؒʹΑΔϞδϡʔϧ؅ཧ
    

    View Slide

16. CSPXTFSJGZͰϞδϡʔϧԽ
    

    View Slide

17. DPODBUͭͭ͠CVOEMF
    

    View Slide

18. Reactಋೖ
    w ΦϨΦϨ'MVY؀ڥΛ࡞੒
    w ͍ͭͰʹ#BCFMಋೖ
    

    View Slide

19. ςετ؀ڥߏங
    w ,BSNB1IBOUPN+4
    w ϒϥ΢βґଘͷίϯϙʔωϯτ΋

    ςετՄೳ
    w MPDBM4UPSBHFΑ͘࢖͏
    

    View Slide

20. View Slide

21. ͜ͷτʔΫͰ͸
    /PEFGFTUൃදͷ
    ͦͷޙ΍ͬͨ͜ͱΛ
    ঺հ͠·͢ʂʂʂʂ
    

    View Slide

22. ೥·Ͱʹ
    ΍ͬͨ͜ͱ
    

    View Slide

23. 2017೥1݄·Ͱʹ΍ͬͨ͜ͱ
    w ίʔυ෼ׂ͖ͭͮ
    w ςετվળ
    w σϓϩΠϏϧυϓϩηεվળ
    w ϥΠϒϥϦ·ΘΓ੔උ
    w ΦϨΦϨ'MVY੔උ
    

    View Slide

24. ͦΕͧΕʹ͍ͭͯ
    ղઆ͠·͢
    

    View Slide

25. Mission 1:
    SPLIT
    THE

    CODE
    

    View Slide

26. 2015೥11݄·Ͱͷάϥϑ
    

    View Slide

27. browserify؅ཧԼͷ
    ϑΝΠϧ਺
    ϕλॻ͖ϑΝΠϧ਺
    

    View Slide

28. View Slide

29. 2017೥1݄·Ͱͷάϥϑ
    

    View Slide

30. ৽ن։ൃʹΑΓ
    ૿͍͑ͯ͘ϑΝΠϧ
    ෼ׂ͍͍ͩͨ׬ྃ
    

    View Slide

31. View Slide

32. TEST
    THE

    COMPONENT
    Mission 2:
    

    View Slide

33. JSςετ΋CI·Θ͢Α͏ʹ
    w ݩʑ1FSMଆ͔͠$*ͯ͠ͳ͔ͬͨ
    w खݩͰςετ௨Ε͹0,ͯͨ͠
    w +FOLJOTͰ+4ςετ͢ΔΑ͏ʹ
    

    View Slide

34. Commit Statusʹ݁ՌΛදࣔ
    +4ςετ࣮ߦ݁Ռ
    

    View Slide

35. ͦͷଞͷςετ
    w ͪΌΜͱϏϧυͰ͖Δ͔ςετ
    w &4-JOUςετ
    w มͳίʔυॻ͍ͯͨΒམͱ͢
    w evalͱ͔withͱ͔
    

    View Slide

36. &4-JOUςετͷ༷ࢠ
    

    View Slide

37. &4-JOUςετͷ༷ࢠ
    

    View Slide

38. CIͰຊ൪JS/CSSΛϏϧυ
    w Ϗϧυ݁ՌΛHJUJHOPSFͨ͠
    w EJ⒎ಡΉͷָ͕ʹ
    w खݩͱຊ൪ͰϏϧυ؀ڥม͑Δ
    w NJOJGZ֎ͯ͠Ϗϧυ࣌ؒ୹ॖ
    w TPVSDFNBQ෇͚Δ
    

    View Slide

39. bower୤ग़
    w OQNʹ͋Δ΍ͭ͸OQNʹҠ؅
    w OQNʹͳ͍৔߹
    w (JU)VC͔ΒΠϯετʔϧ

    4)"Ͱόʔδϣϯࢦఆ
    
    w ༗ࢤʹΑΔҠ২൛ΛΠϯετʔϧ
    

    View Slide

40. View Slide

41. jQueryUI୤ग़
    w EBUFQJDLFSΛQJLBEBZʹ
    w UBCT BVUPDPNQMFUFΛ

    ࣗ෼Ͱ࣮૷
    w ·ͩTPSUBCMF͕࢒ͬͯΔʜʜ
    

    View Slide

42. View Slide

43. yarnಋೖ
    w OQNͷόάͰ

    OQNTISJOLXSBQ͕࢖͑ͳ͘ͳΓ

    ࢓ํͳ͘ZBSOʹʜʜ
    w ݱࡏ͸OQN΋௚ͬͯΔΒ͍͠
    

    View Slide

44. ఆظΞοϓσʔτσʔ
    w ຖ݄ୈҰ݄༵೔Λ

    OQNΞοϓσʔτσʔʹ
    w HSFFOLFFQFS࢖͍͍ͨʜʜ
    

    View Slide

45. SlackͰप஌
    

    View Slide

46. Mission 3:
    MVVM
    OR

    FLUX?
    

    View Slide

47. 2015೥࣌఺ͰͷReactઃܭ
    w খن໛.77.ͬΆ͘
    w େن໛'MVYͬΆ͘
    

    View Slide

48. View Slide

49. View Slide

50. ΦϨΦϨFlux
    w %JTQBUDIFS͸&WFOU&NJUUFS
    w 4UPSF΋&WFOU&NJUUFS
    w this.stateʹঢ়ଶΛอଘ
    

    View Slide

51. 4UPSF
    γϯάϧτϯ
    
    "DUJPO$SFBUPS
    

    View Slide

52. ஈʑਏ͘ͳ͖ͬͯͨ
    w ৔ॴʹΑͬͯॻ͖ํ͕ҧ͏
    w 3FBDU΁ͷ׳Ε
    w ίϯϙʔωϯτͷن໛
    w աڈͷ࣮૷΁ͷ൓ল
    

    View Slide

53. ઃܭํ਑ͷڞ༗Ή͍ͣ
    w 3FBDU'MVYք۾ͷ஌͕ࣝඞཁ
    w νʔϜͷΤϯδχΞ͸օ

    ϑϩϯτɾαʔό݉ۀ
    

    View Slide

54. ࠷ۙ΍ͬͯͨ͜ͱ
    w ॳظͷΦϨΦϨ'MVY࣮૷Λ

    ϦϑΝΫλϦϯά
    w 3FEVYΞʔΩςΫνϟʹ͚ۙͮΔ
    

    View Slide

55. Ұ൪ਓؾͷ'MVYϑϨʔϜϫʔΫ
    ✔υΩϡϝϯτɺπʔϧ͕ॆ࣮
    ✗ඇಉظॲཧͷํ๏͕͍Ζ͍Ζ͋Δ
    

    View Slide

56. Reduxʹ͚ۙͮΔ
    w ඇಉظॲཧ෭࡞༻͋ΔॲཧΛ

    "DUJPO$SFBUPSʹҠಈ
    w 4UPSFͷߋ৽ॲཧΛSFEVDFSʹ
    w 4UPSFΛ౷߹
    

    View Slide

57. ྫࣸਅαΠυόʔ
    

    View Slide

58. ඇಉظॲཧ/෭࡞༻
    w ඇಉظॲཧࣸਅҰཡͷऔಘ
    w ෭࡞༻هࣄຊจ΁ͷૠೖ
    w هࣄຊจ͸ੜ%0.ʹ஋Λอଘ͢Δ
    w ੜ%0.ͷߋ৽ॲཧ͸

    αΠυόʔͷ4UPSFͱ͸ؔ܎ͳ͍ͷͰɺ

    ෭࡞༻ͱΈͳ͢
    

    View Slide

59. Storeͷߋ৽ॲཧΛreducerʹ
    w SFEVDFS TUBUF BDUJPO
    TUBUF
    w ෳ਺ͷTUPSFΛ߹੒Ͱ͖ΔΑ͏ʹ
    w ςετ͠΍͍͢
    

    View Slide

60. ͚ͬ͜͏͔͔࣌ؒͬͨ……
    

    View Slide

61. IS THE
    ORDER

    RESTORED?
    IS THE
    ORDER

    RESTORED?
    IS THE
    ORDER

    RESTORED?
    IS THE
    ORDER

    RESTORED?
    IS THE
    ORDER

    RESTORED?
    IS THE
    ORDER

    RESTORED?
    ϑϩϯτΤϯυʹடং͸໭͔ͬͨʁ
    @amagitakayosi
    

    View Slide

62. ·ͩ·ͩ
    ൃల్্
    

    View Slide

63. վળʹ
    ΰʔϧ͸
    ແ͍ʂʂ
    

    View Slide

64. ࠓޙͷվળʹඞཁͳ΋ͷ
    w νʔϜϝϯόʔͱͷ૬ஊ
    w ࣮૷ํ਑ͷυΩϡϝϯτԽ
    w ޻਺
    

    View Slide

65. Ί͛ͣʹ
    վળ͢Δ
    εϐϦοτ
    

    View Slide

66. ྑ͍αʔϏεΛ
    ࡞͍ͬͯͧ͘ʂ
    ʂʂʂʂʂʂʂ
    ʂʂʂʂʂʂʂ
    

    View Slide

67. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide

68. גࣜձࣾ͸ͯͳͰ͸
    ࠷ߴͷΞʔΩςΫνϟΛ໨ࢦ͠
    ͋͘ͳ͖୳ٻΛ͚ͭͮΔ
    ΤϯδχΞΛืू͍ͯ͠·͢ʂ
    

    View Slide