Prottフロントエンドのいまとこれから

## Prottではフロントエンドエンジニアを募集しています

https://www.wantedly.com/projects/54185

## スライド内のリンク

- Twitter: https://twitter.com/kubosho_
- Prott - Prototyping tool for Web, iOS, Android apps on Vimeo: https://vimeo.com/140384043
- Prott Front-end in 2016: http://yoshiko-pg.github.io/slides/20160512-frontend-biz/
- AngularJSのMVWパターンを理解する - Qiita: http://qiita.com/zoetro/items/a45dbc18bb2b22e944b2

Transcript

1. ProttϑϩϯτΤϯυͷ ࠓͱ͜Ε͔Β 41"αʔϏεαϛοτ
   
2. ϑϩϯτΤϯυσϕϩούʔ !LVCPTIP@
3. ࠓ೔͸ProttΛߏ੒͢Δ JavaScript෦෼ʹয఺Λ౰ͯͯ ࠓͱ͜Ε͔ΒΛ࿩͍͖ͯ͠·͢
4. Prottͱ͸
5. Prott
   
   ϓϩτλΠϐϯάπʔϧ w Web App
   ˡࠓ೔͸͜͜ͷ࿩
   • iOS App • Android App w Mac App
   ։ൃத
7. IUUQTWJNFPDPN ϓϩϞʔγϣϯϏσΦ
8. ProttϑϩϯτΤϯυͷߏ੒
9. Prott͸2013೥11݄͔Β
   ࡞Γ࢝Ί͍ͯΔ
   ʢGitHubௐ΂ʣ
10. • Jade • Sass(SCSSܗࣜ • CoffeeScript • Angular ver 1.2ܥ • Grunt ։ൃ౰ॳͷProttϑϩϯτΤϯυߏ੒
11. ࡞Γ࢝Ίͨ࣌ظΛ
    ߟ͑Δͱѱ͘ͳ͍બ୒
12. Prott͸Ձ஋ΛੜΈग़͍ͯ͠Δ
13. ଟ͘ͷνʔϜͰ
    ࢖ΘΕ͍ͯΔ
16. ϓϩτλΠϐϯάͷ
    ڞಉ࡞ۀΛ௨ͯ͠
    ૉ੖Β͍͠ϓϩμΫτΛ
    ࡞Γग़ͦ͏ͱ͍ͯ͠ΔνʔϜͷ
    ॿ͚ʹͳ͍ͬͯΔ
17. ΑΓՁ஋Λ
    ্͍͖͍͛ͯͨ
18. ՝୊
19. ͍Ζ͍ΖͭΒ͍ ෦෼͕͋Δ
20. CoffeeScript
22. *.coffee͕ 166ϑΝΠϧ͋Δ
23. ͕Μ͹Ζ͏
24. ਆController
27. w ͍ΖΜͳૢ࡞͕Ͱ͖Δ
    w DOMΛݩʹԿ͔ૢ࡞͢Δ΋ͷ͕
 DirectiveԽ͞Ε͍ͯͳ͍
    w ϑΝΠϧ໊΍Ϋϥε໊͕
 ൚༻తͰ੹຿͕͸͖ͬΓ͠ͳ͍ ͳͥ͜͏ͳ͔ͬͨ
28. w τϥϯδγϣϯͷฤूɾ࡟আ
    w εΫϦʔϯͷදࣔɾฤूɾ࡟আ
    w εΫϦʔϯͷάϧʔϓ࡞੒ɾฤू
    w εΫϦʔϯͷ഑ஔௐ੔
    w σόΠε͝ͱͷεΫϦʔϯαΠζͷग़͠෼͚
    w ετϦʔϛϯάઃఆ
    w ϓϩδΣΫτ΁ͷϝϯόʔ௥Ճɾฤू
    w ϓϩδΣΫτͷγΣΞ΍ϓϨϏϡʔͷϞʔμϧදࣔ
    w ʜଞʹ΋͍Ζ͍Ζ͋Δ 1ͭͷίϯτϩʔϥʔͰ ૢ࡞͍ͯ͠Δ͜ͱҰཡ
29. Controllerͱ Directiveͷ݁߹
30. DirectiveͰscopeΛ falseʹͯ͠Controllerͱ ݁߹͍ͯ͠Δ΋ͷ͕ ෳ਺͋Δ
31. # # ͜ͷσΟϨΫςΟϒ͸****Controllerʹີ݁߹͍ͯ͠·͢ # ͜ͷΑ͏ͳίϝϯτ͕͋Δ ॻ͍ͯ͘ΕΔ͚͍͍͔ͩͳʜ
32. scopeͷ஋͕Ͳ͜Ͱ ઃఆ͞Ε͍ͯΔ͔ ௥͍ͮΒ͍໰୊
33. ՝୊ʹରͯ͠
    ࠓऔΓ૊ΜͰ͍Δ͜ͱ
34. ES2015+Ͱͷ։ൃ
35. ৽ػೳ͸ES2015+Ͱ ॻ͍͍ͯΔ
38. ES2016Ͱೖͬͨ Array.prototype.includes΍
    ES2017ͰೖΔ༧ఆͷasync/await stage 2ͷPublic Class FieldsΛ࢖༻
39. औΓ૊Έͷ༷ࢠ Prott Front-end in 2016 yoshiko-pg.github.io/slides/ 20160512-frontend-biz/
40. w +BEF
    w 4BTTʢ4$44ܗࣜʣ
    w $P⒎FF4DSJQU
    
    &4
    w "OHVMBS
    WFS
    ܥ
    w (SVOU
    w QPXFSBTTFSU
    
    .PDIB
    
    ,BSNB ݱࡏͷProttϑϩϯτΤϯυߏ੒
41. w +BEF
    w 4BTTʢ4$44ܗࣜʣ
    w $P⒎FF4DSJQU
    
    &4
    w "OHVMBS
    WFS
    ܥ
    w (SVOU
    w QPXFSBTTFSU
    
    .PDIB
    
    ,BSNB ݱࡏͷProttϑϩϯτΤϯυߏ੒
42. ੹຿ͷ෼཭
43. Controllerʹશͯॻ͘ͷ͸
    ࢮ͕଴͍ͬͯΔ
44. IUUQRJJUBDPN[PFUSPJUFNTBECDCCCFC
45. DOM͕ؔ܎͋Δ ίʔυ͸Directiveʹ෼཭ DOM͕ؔ܎ͳ͍ ίʔυ͸Serviceʹ෼཭
46. ίʔυϨϏϡʔͷ͓͔͛Ͱ
    ΑΓΑ͍ઃܭΛ
    ࡞͍͚ͬͯΔ
47. ͜Ε͔ΒͷऔΓ૊Έ
48. ͜Ε͔Β1SPUUͷϒϥϯυՁ஋Λ
    ΋ͬͱ໌֬ʹ͠
    ੈքతʹڝ૪ྗͷ͋Δ
    αʔϏεʹ͢ΔͨΊ
    େ͖͘ϦχϡʔΞϧ͢Δ༧ఆ
49. ϑϩϯτΤϯυσϕϩούʔͱͯ͠
 JavaScript͚ͩͰͳ͘CSS΍ViewͰ ͍Ζ͍Ζ͜͏͍ͨ͠ͱ͍͏ ߟ͕͑๲ΒΉ
50. ਓ͕଍Γͳ͍
51. IUUQTXXXXBOUFEMZDPNQSPKFDUT
52. ProttͰ͸ϑϩϯτΤϯυΤϯδχΞΛ ืू͍ͯ͠·͢ w ࠓΑΓΑ͘ͳΔͱࢥͬͨ΋ͷ͸पΓ΋
 औΓೖΕͯ͘ΕΔ؀ڥ
    w औΓೖΕΔͱ͖ʹϨϏϡʔ͕͋ΔͷͰɺ
 ͦͷͱ͖ʹকདྷੑ΋ؚΊͯٞ࿦Ͱ͖Δ؀ڥ
    w ൺֱతن໛͕େ͖͍41"ʹ৮ΕΒΕΔ௅ઓతͳ؀ڥ
53. Ԡื͓଴ͪͯ͠·͢
 ʢ࠙਌ձͰ࿩͔͚͍ͯͩ͘͠͞ʂʣ IUUQTXXXXBOUFEMZDPNQSPKFDUT