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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@amagitakayosi

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

/PEFֶԂࡇͰ࿩͠·ͨ͠

Slide 10

Slide 10 text

લճͷ͋Β͢͡

Slide 11

Slide 11 text

+ ౰ॳͷٕज़ελοΫ

Slide 12

Slide 12 text

ཱͪ͸͔ͩΔ໰୊ͨͪ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

໊લۭؒͰ෼ׂͯͨ͠ w ैདྷ͸໊લۭؒͰ෼ׂͯ͠  DPODBUͯͨ͠ w CSPXTFSJGZͰϞδϡʔϧԽ ໊લۭؒʹΑΔϞδϡʔϧ؅ཧ

Slide 16

Slide 16 text

CSPXTFSJGZͰϞδϡʔϧԽ

Slide 17

Slide 17 text

DPODBUͭͭ͠CVOEMF

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

೥·Ͱʹ ΍ͬͨ͜ͱ

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ͦΕͧΕʹ͍ͭͯ ղઆ͠·͢

Slide 25

Slide 25 text

Mission 1: SPLIT THE  CODE

Slide 26

Slide 26 text

2015೥11݄·Ͱͷάϥϑ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

2017೥1݄·Ͱͷάϥϑ

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

TEST THE  COMPONENT Mission 2:

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Commit Statusʹ݁ՌΛදࣔ +4ςετ࣮ߦ݁Ռ

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

&4-JOUςετͷ༷ࢠ

Slide 37

Slide 37 text

&4-JOUςετͷ༷ࢠ

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

bower୤ग़ w OQNʹ͋Δ΍ͭ͸OQNʹҠ؅ w OQNʹͳ͍৔߹ w (JU)VC͔ΒΠϯετʔϧ  4)"Ͱόʔδϣϯࢦఆ w ༗ࢤʹΑΔҠ২൛ΛΠϯετʔϧ

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

jQueryUI୤ग़ w EBUFQJDLFSΛQJLBEBZʹ w UBCT BVUPDPNQMFUFΛ  ࣗ෼Ͱ࣮૷ w ·ͩTPSUBCMF͕࢒ͬͯΔʜʜ

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

SlackͰप஌

Slide 46

Slide 46 text

Mission 3: MVVM OR  FLUX?

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

ΦϨΦϨFlux w %JTQBUDIFS͸&WFOU&NJUUFS w 4UPSF΋&WFOU&NJUUFS w this.stateʹঢ়ଶΛอଘ

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

ྫࣸਅαΠυόʔ

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Slide 62

Slide 62 text

·ͩ·ͩ ൃల్্

Slide 63

Slide 63 text

վળʹ ΰʔϧ͸ ແ͍ʂʂ

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Ί͛ͣʹ վળ͢Δ εϐϦοτ

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

͋Γ͕ͱ͏͍͟͝·ͨ͠

Slide 68

Slide 68 text

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