Real world es201x and future

Transcript

1. ݱ৔ͷES201xͱະདྷͷΞʔΩςΫνϟ @mizchi / InsideFrontend 2

2. ࣗݾ঺հ • @mizchi • ॴଐ: ϑϦʔϥϯε • ઐ໳: Node.js /

   SPA৬ਓ

3. CAUTION!!! • ྺ࢙ͷ࿩ͰɺѻͬͯΔൣғ͕޿͘ͳͬͨͷͰɺݴٴൣғ͕ҙਤ తʹߜ͍ͬͯ·͢ • ͋Β͔͡Ίྃ͝ঝ͍ͩ͘͞

4. ϑϩϯτΤϯυͷΈͳ͞Μ

5. ফ໣ͯ͠·͔͢ʁ

6. None

7. ຊൃදͷΰʔϧ • ΞʔΩςΫνϟͷมભΛ੔ཧ • มԽʹڧ͍ઃܭͷͨΊͷಎ࡯Λಘͯɺࣗ෼ͷίʔυʹඞཁͳ΋ ͷɺ෗Δ෦෼ɺ෗Βͳ͍෦෼ͷ໨ར͖͕Ͱ͖ΔΑ͏ʹͳͬͯ΄ ͍͠

8. ΍͍͖ͬͯ·͠ΐ͏

9. ࠓ೔ͷ͓୊ 1.ϑϨʔϜϫʔΫৼΓฦΓ 1.աڈ 2.ݱࡏ 3.ະདྷ 2.ݱࡏ͔Βະདྷ΁ࢸΔಓ

10. ϑϨʔϜϫʔΫৼΓฦΓ

11. None
12. None

13. ଠݹ: ηϧϑεΫϨΠϐϯάͷ࣌୅ • खͰ໦Λॻ͖׵͍͑ͯͨ࣌୅ • ෆ҆ఆͳ DOM API Λ jQuery

    ͕ٵऩ • IE6͕ࢮͶͣ௕ظԽ
14. None

15. ςϯϓϨʔςΟϯάͷ࣌୅ • HTMLͷॳظੜ੒͕ΫϥΠΞϯτଆ΁ • ೋॏςϯϓϨʔτ໰୊ | SEO໰୊ Ex. mustache, handlebars,

    underscore.template
16. None

17. σʔλόΠϯσΟϯάͷ࣌୅ • จࣈྻΛల։͢Δ΋ͷ͔Βɺ໦ߏ଄Λग़ྗ͢Δ ΋ͷ΁ • ޮ཰తͳ෦෼ॻ͖׵͑ | Ϧετల։ • MVVMͷ༌ೖ

    ex. backbone.stickit / knockout / angularjs / vue

18. ݱ୅

19. Client Side MVC ͷऴᖼ • Rails ༝དྷͷ Backbone ͷ MVC

    Ϟσϧ͸ഁ୼ • ΫϥαόͰඞཁͳந৅͸ผ෺ 2 • ෼ղ & ࠶ߏங • ୯ํ޲σʔλϑϩʔ΁ 2 MVC ͱ MVC2 ʹ͍ͭͯվΊͯߟ͑ͯΈΔ http://www.s-arcana.co.jp/tech/2011/07/mvc-mvc2.html

20. Flux/Obvervable ͷ࣌୅ • Event ͱ State ͱ View Λ׬શʹ෼཭ •

    EventSource ͱ subscribe ͷܗଶ • FRPͷ֓೦Λ༌ೖ ex: Rx / Elm / Redux
21. None
22. None

23. ߟ͑ํ • Component ͷ಺ଆʹӅΕͨ State ͷଘࡏ͸جຊతʹѱ • Event ͷετϦʔϜ͔Β State

    ͷεφοϓγϣοτΛੜ੒

24. ؓ࿩: Redux ͸ Rx ͷ֓೦తͳαϒηοτ const actions$ = Rx.Observable.from([add(1), add(2),

    add(3)]) const store = actions$.scan(rootReducer, undefined) store.subscribe(x => { console.log('subscribe', x) }) 1 1 Redux ͸ ֓೦తʹ Rx ͷαϒηοτͰ͋Δͱ͍͏࿩ - mizchi's blog http://mizchi.hatenablog.com/entry/2017/09/30/013420

25. ϑϨʔϜϫʔΫͷτϨϯυ • ϋʔυ/ιϑτ྆ऀͷൃୡʹΑͬͯ… • ϝϞϦ্ʹͨ͘͞ΜσʔλΛஔ͘Α͏ʹͳΔ(ྫ: Ծ૝DOM ʹΑΔόοϑΝϦϯά) • ϒϥ΢βͷػೳΛΑΓݡ࣮͘૷͢Δ(ྫ: ࣗલͷϨϯμϥʔ)

    • ෋߽తͳઃܭ <=> ϚΠΫϩνϡʔχϯά Λ܁Γฦͯ͠ൃల
26. None

27. Webͷ։ൃݴޠͷมԽ

28. None

29. ։ൃݴޠ • JavaScript • TC39Ͱຖ೥ਐԽ / ϓϦίϯύΠϥͰ interop • ଞݴޠ͔ΒͷτϥϯεύΠϥܥ

    • ϊ΢ϋ΢ͷӽڥ • WebAssemblyܥ • ࢼߦࡨޡஈ֊

30. AltJS ͕Ռͨͨ͠໾ׂ • ES2015 ΁ͷจ๏௥Ճ/ػೳఏҊ • ClassɺArrow Function, etc... •

    ࢓༷͕௥͍͔ͭͳ͍΋ͷ͸ϓϦίϯύΠϥͰઌऔΓ͢ΔจԽ

31. ۙ೥੝Γ্͕Δݴޠ͸… • ੩తͳܕ؀ڥ͕͋Δ͜ͱ • ॊೈͳܕએݴ͕Ͱ͖Δ͜ͱ • ܕਪ࿦͕͋Δ͜ͱ • ͱʹ͔͘ܕɺܕɺܕ

32. ϑϩϯτΤϯυͷ੩తܕ෇͚ͷधཁ • ͱʹ͔͘ςετ͕ॻ͖ͮΒ͍ͷͰ੩తݕࠪͰࡁ·͍ͤͨ • Observable ΍ Immutable Λલఏʹ͢Δͱ੩తݕ͕ࠪͳ͍ ͱίʔυ͕ॻ͚ͳ͍

33. None
34. None

35. ͳͥJSʹܕ͕ඞཁͳͷ͔ • ʮςετ͕೉͍͠GUI؀ڥͰͷʯ৺ཧత҆શੑͷͨΊ • ҠΓมΘΓ͕଎͍ΤίγεςϜͰɺ੩తղੳͰίʔυΛࣺͯΔ ͨΊ ※ ͜ΕҎ্͸୯ͳΔݴޠؒͷରཱἤΓʹͳΔͷͰ΍Ί·͢…

36. ະདྷͷ࿩

37. WebComponents

38. None
39. None

40. WebComponents ͷޙͷੈք • View ͷ຤୺͸ Custom Elements ΁ • ঢ়ଶ؅ཧ૚ͱͯ͠ͷϑϨʔϜϫʔΫ͸(ͨͿΜ)࢒Δ

    • ύϥμΠϜʹదͨ͠৽͍͠ϑϨʔϜϫʔΫ΋ग़ͯ͘Δ͸ͣ • SkateJSͱ͔ʁ

41. WebComponents Ͱࢮ͵΋ͷ • ʙσβΠϯͷʙ࣮૷ • ϚςϦΞϧσβΠϯ • ϑϥοτσβΠϯ • Bootstrap

42. Έͳ͞Μߴ·͖ͬͯ·͔ͨ͠ʁ

43. Ұ౓མͪண͍ͯߟ͑Δ

44. None

45. ະདྷ΁ͷಓΛ࡞Δ

46. ݱ৔ • ͦ͏͸͍ͬͨͬͯݱ৔ͷฅίʔυΛΑ • Կ͔ΒखΛ෇͚Δʁ

47. ݹ͍ίʔυΛखջ͚Δ • lint Λॻ͘ • ܕΛॻ͘ • ͋Δ͍͸ܕ͕ͭ͘Α͏ͳίʔυΛॻ͘ • άϩʔόϧม਺౉͠

    => ES Modules • Ϗϧυ࣌ʹґଘղੳ • ςετΛॻ͘

48. ྑ͍ίʔυͱѱ͍ίʔυ • ྑ͍ίʔυ • ੩తݕࠪͰ͖Δ • ΠϯλʔϑΣʔε͕໌Β͔ • ؆୯ʹࣺͯΒΕΔ •

    ѱ͍ίʔυ • Ϟδϡʔϧڥք͕໌Β͔Ͱ͸ͳ͍

49. ྫ: Qiita Ͱࣗ෼͕΍ͬͨ͜ͱ • Rails Sprockets => Browserify • άϩʔόϧม਺౉͠Λ

    ESM ʹ • Backbone.View => React • View૚ ͱ State૚ Λ෼཭(Flux)

50. ྫ: freeeࣾͰࣗ෼͕΍ͬͯΔ͜ͱ • Rails Sprockets => Webpacker • άϩʔόϧม਺౉͠ΛESMʹ •

    Backbone.Router Λղମ • ݹ͍ίʔυʹ flow ͷܕΛ෇͚ͯճΔ

51. ͱΓ͋͑ͣ΍ͬͱ͚ • prettier • eslint: no-unused-vars • eslint: prefer-const

52. कഁ཭ • OSSΤίγεςϜʹै͏ • Webඪ४ʹै͏ • ϨΠϠʔΛ෼ղ͢Δ

53. ϑϩϯτΤϯυΤϯδχΞͱ͸Կ͔

54. None

55. ͦΕͧΕͷΰʔϧͷઃఆ • εϐʔυΛಥ͖٧ΊΔUXͳͷ͔ • ܧଓͯ͠Ձ஋Λಧ͚ΔͨΊͷίʔυ඼࣭ͳͷ͔

56. ϑϩϯτΤϯυΞʔΩςΫνϟ: ·ͱΊ • Webಛ༗ͷΞʔΩςΫνϟ͔ΒɺීวతͳGUIઃܭͷ߹ྲྀ • ࠓͷϑϩϯτΤϯυ͸ OOP, FP, GUIઃܭ࿦ͷ஌ݟ͕ͬͨ͝ ࣽͷɺ༷ʑͳࢥ૝ΛͿ͚ͭ߹͏ઓ৔

    • ࣗ෼ʹඞཁͳந৅ΛબͿ

57. ͓ΘΓ