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

Cb0e411d88a1bcd1562890c816970a8e?s=47 Shota Kubota
October 24, 2016

 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

Cb0e411d88a1bcd1562890c816970a8e?s=128

Shota Kubota

October 24, 2016
Tweet

Transcript

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

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

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

  4. Prottͱ͸

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

    w Mac App ։ൃத
  6. None
  7. IUUQTWJNFPDPN ϓϩϞʔγϣϯϏσΦ

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

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

  10. • Jade • Sass(SCSSܗࣜ • CoffeeScript • Angular ver 1.2ܥ

    • Grunt ։ൃ౰ॳͷProttϑϩϯτΤϯυߏ੒
  11. ࡞Γ࢝Ίͨ࣌ظΛ ߟ͑Δͱѱ͘ͳ͍બ୒

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

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

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

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

  18. ՝୊

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

  20. CoffeeScript

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

  23. ͕Μ͹Ζ͏

  24. ਆController

  25. None
  26. None
  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+Ͱ ॻ͍͍ͯΔ

  36. None
  37. None
  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 "OHVMBSWFSܥ

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

    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