Tweet
Tweet

Slide 1

Slide 1 text

ProttϑϩϯτΤϯυͷ ࠓͱ͜Ε͔Β 41"αʔϏεαϛοτ

Slide 2

Slide 2 text

ϑϩϯτΤϯυσϕϩούʔ !LVCPTIP@

Slide 3

Slide 3 text

ࠓ೔͸ProttΛߏ੒͢Δ JavaScript෦෼ʹয఺Λ౰ͯͯ ࠓͱ͜Ε͔ΒΛ࿩͍͖ͯ͠·͢

Slide 4

Slide 4 text

Prottͱ͸

Slide 5

Slide 5 text

ProttϓϩτλΠϐϯάπʔϧ w Web Appˡࠓ೔͸͜͜ͷ࿩ • iOS App • Android App w Mac App ։ൃத

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

IUUQTWJNFPDPN ϓϩϞʔγϣϯϏσΦ

Slide 8

Slide 8 text

ProttϑϩϯτΤϯυͷߏ੒

Slide 9

Slide 9 text

Prott͸2013೥11݄͔Β ࡞Γ࢝Ί͍ͯΔ ʢGitHubௐ΂ʣ

Slide 10

Slide 10 text

• Jade • Sass(SCSSܗࣜ • CoffeeScript • Angular ver 1.2ܥ • Grunt ։ൃ౰ॳͷProttϑϩϯτΤϯυߏ੒

Slide 11

Slide 11 text

࡞Γ࢝Ίͨ࣌ظΛ ߟ͑Δͱѱ͘ͳ͍બ୒

Slide 12

Slide 12 text

Prott͸Ձ஋ΛੜΈग़͍ͯ͠Δ

Slide 13

Slide 13 text

ଟ͘ͷνʔϜͰ ࢖ΘΕ͍ͯΔ

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

ϓϩτλΠϐϯάͷ ڞಉ࡞ۀΛ௨ͯ͠ ૉ੖Β͍͠ϓϩμΫτΛ ࡞Γग़ͦ͏ͱ͍ͯ͠ΔνʔϜͷ ॿ͚ʹͳ͍ͬͯΔ

Slide 17

Slide 17 text

ΑΓՁ஋Λ ্͍͖͍͛ͯͨ

Slide 18

Slide 18 text

՝୊

Slide 19

Slide 19 text

͍Ζ͍ΖͭΒ͍ ෦෼͕͋Δ

Slide 20

Slide 20 text

CoffeeScript

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

*.coffee͕ 166ϑΝΠϧ͋Δ

Slide 23

Slide 23 text

͕Μ͹Ζ͏

Slide 24

Slide 24 text

ਆController

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

w ͍ΖΜͳૢ࡞͕Ͱ͖Δ w DOMΛݩʹԿ͔ૢ࡞͢Δ΋ͷ͕
 DirectiveԽ͞Ε͍ͯͳ͍ w ϑΝΠϧ໊΍Ϋϥε໊͕
 ൚༻తͰ੹຿͕͸͖ͬΓ͠ͳ͍ ͳͥ͜͏ͳ͔ͬͨ

Slide 28

Slide 28 text

w τϥϯδγϣϯͷฤूɾ࡟আ w εΫϦʔϯͷදࣔɾฤूɾ࡟আ w εΫϦʔϯͷάϧʔϓ࡞੒ɾฤू w εΫϦʔϯͷ഑ஔௐ੔ w σόΠε͝ͱͷεΫϦʔϯαΠζͷग़͠෼͚ w ετϦʔϛϯάઃఆ w ϓϩδΣΫτ΁ͷϝϯόʔ௥Ճɾฤू w ϓϩδΣΫτͷγΣΞ΍ϓϨϏϡʔͷϞʔμϧදࣔ w ʜଞʹ΋͍Ζ͍Ζ͋Δ 1ͭͷίϯτϩʔϥʔͰ ૢ࡞͍ͯ͠Δ͜ͱҰཡ

Slide 29

Slide 29 text

Controllerͱ Directiveͷ݁߹

Slide 30

Slide 30 text

DirectiveͰscopeΛ falseʹͯ͠Controllerͱ ݁߹͍ͯ͠Δ΋ͷ͕ ෳ਺͋Δ

Slide 31

Slide 31 text

# # ͜ͷσΟϨΫςΟϒ͸****Controllerʹີ݁߹͍ͯ͠·͢ # ͜ͷΑ͏ͳίϝϯτ͕͋Δ ॻ͍ͯ͘ΕΔ͚͍͍͔ͩͳʜ

Slide 32

Slide 32 text

scopeͷ஋͕Ͳ͜Ͱ ઃఆ͞Ε͍ͯΔ͔ ௥͍ͮΒ͍໰୊

Slide 33

Slide 33 text

՝୊ʹରͯ͠ ࠓऔΓ૊ΜͰ͍Δ͜ͱ

Slide 34

Slide 34 text

ES2015+Ͱͷ։ൃ

Slide 35

Slide 35 text

৽ػೳ͸ES2015+Ͱ ॻ͍͍ͯΔ

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

ES2016Ͱೖͬͨ Array.prototype.includes΍ ES2017ͰೖΔ༧ఆͷasync/await stage 2ͷPublic Class FieldsΛ࢖༻

Slide 39

Slide 39 text

औΓ૊Έͷ༷ࢠ Prott Front-end in 2016 yoshiko-pg.github.io/slides/ 20160512-frontend-biz/

Slide 40

Slide 40 text

w +BEF w 4BTTʢ4$44ܗࣜʣ w $P⒎FF4DSJQU&4 w "OHVMBSWFSܥ w (SVOU w QPXFSBTTFSU.PDIB,BSNB ݱࡏͷProttϑϩϯτΤϯυߏ੒

Slide 41

Slide 41 text

w +BEF w 4BTTʢ4$44ܗࣜʣ w $P⒎FF4DSJQU&4 w "OHVMBSWFSܥ w (SVOU w QPXFSBTTFSU.PDIB,BSNB ݱࡏͷProttϑϩϯτΤϯυߏ੒

Slide 42

Slide 42 text

੹຿ͷ෼཭

Slide 43

Slide 43 text

Controllerʹશͯॻ͘ͷ͸ ࢮ͕଴͍ͬͯΔ

Slide 44

Slide 44 text

IUUQRJJUBDPN[PFUSPJUFNTBECDCCCFC

Slide 45

Slide 45 text

DOM͕ؔ܎͋Δ ίʔυ͸Directiveʹ෼཭ DOM͕ؔ܎ͳ͍ ίʔυ͸Serviceʹ෼཭

Slide 46

Slide 46 text

ίʔυϨϏϡʔͷ͓͔͛Ͱ ΑΓΑ͍ઃܭΛ ࡞͍͚ͬͯΔ

Slide 47

Slide 47 text

͜Ε͔ΒͷऔΓ૊Έ

Slide 48

Slide 48 text

͜Ε͔Β1SPUUͷϒϥϯυՁ஋Λ ΋ͬͱ໌֬ʹ͠ ੈքతʹڝ૪ྗͷ͋Δ αʔϏεʹ͢ΔͨΊ େ͖͘ϦχϡʔΞϧ͢Δ༧ఆ

Slide 49

Slide 49 text

ϑϩϯτΤϯυσϕϩούʔͱͯ͠
 JavaScript͚ͩͰͳ͘CSS΍ViewͰ ͍Ζ͍Ζ͜͏͍ͨ͠ͱ͍͏ ߟ͕͑๲ΒΉ

Slide 50

Slide 50 text

ਓ͕଍Γͳ͍

Slide 51

Slide 51 text

IUUQTXXXXBOUFEMZDPNQSPKFDUT

Slide 52

Slide 52 text

ProttͰ͸ϑϩϯτΤϯυΤϯδχΞΛ ืू͍ͯ͠·͢ w ࠓΑΓΑ͘ͳΔͱࢥͬͨ΋ͷ͸पΓ΋
 औΓೖΕͯ͘ΕΔ؀ڥ w औΓೖΕΔͱ͖ʹϨϏϡʔ͕͋ΔͷͰɺ
 ͦͷͱ͖ʹকདྷੑ΋ؚΊͯٞ࿦Ͱ͖Δ؀ڥ w ൺֱతن໛͕େ͖͍41"ʹ৮ΕΒΕΔ௅ઓతͳ؀ڥ

Slide 53

Slide 53 text

Ԡื͓଴ͪͯ͠·͢
 ʢ࠙਌ձͰ࿩͔͚͍ͯͩ͘͠͞ʂʣ IUUQTXXXXBOUFEMZDPNQSPKFDUT