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"αʔϏεαϛοτ
   

   View Slide

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

   View Slide

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

   View Slide

4. Prottͱ͸
   

   View Slide

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

   View Slide

6. View Slide

7. IUUQTWJNFPDPN
   ϓϩϞʔγϣϯϏσΦ
   

   View Slide

8. ProttϑϩϯτΤϯυͷߏ੒
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. View Slide

15. View Slide

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

    View Slide

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

    View Slide

18. ՝୊
    

    View Slide

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

    View Slide

20. CoffeeScript
    

    View Slide

21. View Slide

22. *.coffee͕
    166ϑΝΠϧ͋Δ
    

    View Slide

23. ͕Μ͹Ζ͏
    

    View Slide

24. ਆController
    

    View Slide

25. View Slide

26. View Slide

27. w ͍ΖΜͳૢ࡞͕Ͱ͖Δ
    w DOMΛݩʹԿ͔ૢ࡞͢Δ΋ͷ͕

    DirectiveԽ͞Ε͍ͯͳ͍
    w ϑΝΠϧ໊΍Ϋϥε໊͕

    ൚༻తͰ੹຿͕͸͖ͬΓ͠ͳ͍
    ͳͥ͜͏ͳ͔ͬͨ
    

    View Slide

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

    View Slide

29. Controllerͱ
    Directiveͷ݁߹
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. ES2015+Ͱͷ։ൃ
    

    View Slide

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

    View Slide

36. View Slide

37. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

42. ੹຿ͷ෼཭
    

    View Slide

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

    View Slide

44. IUUQRJJUBDPN[PFUSPJUFNTBECDCCCFC
    

    View Slide

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

    View Slide

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

    View Slide

47. ͜Ε͔ΒͷऔΓ૊Έ
    

    View Slide

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

    View Slide

49. ϑϩϯτΤϯυσϕϩούʔͱͯ͠

    JavaScript͚ͩͰͳ͘CSS΍ViewͰ
    ͍Ζ͍Ζ͜͏͍ͨ͠ͱ͍͏
    ߟ͕͑๲ΒΉ
    

    View Slide

50. ਓ͕଍Γͳ͍
    

    View Slide

51. IUUQTXXXXBOUFEMZDPNQSPKFDUT
    

    View Slide

52. ProttͰ͸ϑϩϯτΤϯυΤϯδχΞΛ
    ืू͍ͯ͠·͢
    w ࠓΑΓΑ͘ͳΔͱࢥͬͨ΋ͷ͸पΓ΋

    औΓೖΕͯ͘ΕΔ؀ڥ
    w औΓೖΕΔͱ͖ʹϨϏϡʔ͕͋ΔͷͰɺ

    ͦͷͱ͖ʹকདྷੑ΋ؚΊͯٞ࿦Ͱ͖Δ؀ڥ
    w ൺֱతن໛͕େ͖͍41"ʹ৮ΕΒΕΔ௅ઓతͳ؀ڥ
    

    View Slide

53. Ԡื͓଴ͪͯ͠·͢

    ʢ࠙਌ձͰ࿩͔͚͍ͯͩ͘͠͞ʂʣ
    IUUQTXXXXBOUFEMZDPNQSPKFDUT
    

    View Slide