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

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