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

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

2. @amagitakayosi

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

4. None

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

6. None

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

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

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

10. લճͷ͋Β͢͡

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

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

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

14. ίʔυ෼ׂ w ैདྷ͸໊લۭؒͰ෼ׂͯ͠
 DPODBUͯͨ͠
    w $PNNPO+4ܗࣜʹॻ͖௚͠
 CSPXTFSJGZͰϞδϡʔϧԽ

15. ໊લۭؒͰ෼ׂͯͨ͠ w ैདྷ͸໊લۭؒͰ෼ׂͯ͠
 DPODBUͯͨ͠
    w CSPXTFSJGZͰϞδϡʔϧԽ
    ໊લۭؒʹΑΔϞδϡʔϧ؅ཧ

16. CSPXTFSJGZͰϞδϡʔϧԽ

17. DPODBUͭͭ͠CVOEMF

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

19. ςετ؀ڥߏங w ,BSNB
    
    1IBOUPN+4
    w ϒϥ΢βґଘͷίϯϙʔωϯτ΋
 ςετՄೳ
    w MPDBM4UPSBHFΑ͘࢖͏

20. None

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

22. ೥·Ͱʹ
    ΍ͬͨ͜ͱ

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

    ΦϨΦϨ'MVY੔උ

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

25. Mission 1: SPLIT THE
 CODE

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

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

28. None

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

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

31. None

32. TEST THE
 COMPONENT Mission 2:

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

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

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

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

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

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

    TPVSDFNBQ෇͚Δ

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

    ༗ࢤʹΑΔҠ২൛ΛΠϯετʔϧ
40. None

41. jQueryUI୤ग़ w EBUFQJDLFSΛ
    QJLBEBZ
    ʹ
    w UBCT
    BVUPDPNQMFUF
    Λ
 ࣗ෼Ͱ࣮૷
    w ·ͩTPSUBCMF͕࢒ͬͯΔʜʜ

42. None

43. yarnಋೖ w OQNͷόάͰ
 OQNTISJOLXSBQ͕࢖͑ͳ͘ͳΓ
 ࢓ํͳ͘ZBSOʹʜʜ
    w ݱࡏ͸OQN΋௚ͬͯΔΒ͍͠

44. ఆظΞοϓσʔτσʔ w ຖ݄ୈҰ݄༵೔Λ
 OQNΞοϓσʔτσʔʹ
    w HSFFOLFFQFS࢖͍͍ͨʜʜ

45. SlackͰप஌

46. Mission 3: MVVM OR
 FLUX?

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

48. None
49. None

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

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

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

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

54. ࠷ۙ΍ͬͯͨ͜ͱ w ॳظͷΦϨΦϨ'MVY࣮૷Λ
 ϦϑΝΫλϦϯά
    w 3FEVYΞʔΩςΫνϟʹ͚ۙͮΔ

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

56. Reduxʹ͚ۙͮΔ w ඇಉظॲཧ෭࡞༻͋ΔॲཧΛ
 "DUJPO$SFBUPS
    ʹҠಈ
    w 4UPSFͷߋ৽ॲཧΛSFEVDFSʹ
    w 4UPSFΛ౷߹

57. ྫ
    ࣸਅαΠυόʔ

58. ඇಉظॲཧ/෭࡞༻ w ඇಉظॲཧ
    ࣸਅҰཡͷऔಘ
    w ෭࡞༻
    هࣄຊจ΁ͷૠೖ
    w هࣄຊจ͸ੜ%0.ʹ஋Λอଘ͢Δ
    w ੜ%0.ͷߋ৽ॲཧ͸
 αΠυόʔͷ4UPSFͱ͸ؔ܎ͳ͍ͷͰɺ


    ෭࡞༻ͱΈͳ͢

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

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

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

62. ·ͩ·ͩ
    ൃల్্

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

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

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

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

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

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