Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Real world es201x and future

Real world es201x and future

現場のES201x と未来のアーキテクチャ - インサイドフロントエンド2

Koutarou Chikuba

February 11, 2018
Tweet

More Decks by Koutarou Chikuba

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. ফ໣ͯ͠·͔͢ʁ

    View Slide

  6. View Slide

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

    View Slide

  8. ΍͍͖ͬͯ·͠ΐ͏

    View Slide

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

    View Slide

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

    View Slide

  11. View Slide

  12. View Slide

  13. ଠݹ: ηϧϑεΫϨΠϐϯάͷ࣌୅
    • खͰ໦Λॻ͖׵͍͑ͯͨ࣌୅
    • ෆ҆ఆͳ DOM API Λ jQuery ͕ٵऩ
    • IE6͕ࢮͶͣ௕ظԽ

    View Slide

  14. View Slide

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

    View Slide

  16. View Slide

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

    View Slide

  18. ݱ୅

    View Slide

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

    View Slide

  20. Flux/Obvervable ͷ࣌୅
    • Event ͱ State ͱ View Λ׬શʹ෼཭
    • EventSource ͱ subscribe ͷܗଶ
    • FRPͷ֓೦Λ༌ೖ
    ex: Rx / Elm / Redux

    View Slide

  21. View Slide

  22. View Slide

  23. ߟ͑ํ
    • Component ͷ಺ଆʹӅΕͨ State ͷଘࡏ͸جຊతʹѱ
    • Event ͷετϦʔϜ͔Β State ͷεφοϓγϣοτΛੜ੒

    View Slide

  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

    View Slide

  25. ϑϨʔϜϫʔΫͷτϨϯυ
    • ϋʔυ/ιϑτ྆ऀͷൃୡʹΑͬͯ…
    • ϝϞϦ্ʹͨ͘͞ΜσʔλΛஔ͘Α͏ʹͳΔ(ྫ: Ծ૝DOM
    ʹΑΔόοϑΝϦϯά)
    • ϒϥ΢βͷػೳΛΑΓݡ࣮͘૷͢Δ(ྫ: ࣗલͷϨϯμϥʔ)
    • ෋߽తͳઃܭ <=> ϚΠΫϩνϡʔχϯά Λ܁Γฦͯ͠ൃల

    View Slide

  26. View Slide

  27. Webͷ։ൃݴޠͷมԽ

    View Slide

  28. View Slide

  29. ։ൃݴޠ
    • JavaScript
    • TC39Ͱຖ೥ਐԽ / ϓϦίϯύΠϥͰ interop
    • ଞݴޠ͔ΒͷτϥϯεύΠϥܥ
    • ϊ΢ϋ΢ͷӽڥ
    • WebAssemblyܥ
    • ࢼߦࡨޡஈ֊

    View Slide

  30. AltJS ͕Ռͨͨ͠໾ׂ
    • ES2015 ΁ͷจ๏௥Ճ/ػೳఏҊ
    • ClassɺArrow Function, etc...
    • ࢓༷͕௥͍͔ͭͳ͍΋ͷ͸ϓϦίϯύΠϥͰઌऔΓ͢ΔจԽ

    View Slide

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

    View Slide

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

    View Slide

  33. View Slide

  34. View Slide

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

    View Slide

  36. ະདྷͷ࿩

    View Slide

  37. WebComponents

    View Slide

  38. View Slide

  39. View Slide

  40. WebComponents ͷޙͷੈք
    • View ͷ຤୺͸ Custom Elements ΁
    • ঢ়ଶ؅ཧ૚ͱͯ͠ͷϑϨʔϜϫʔΫ͸(ͨͿΜ)࢒Δ
    • ύϥμΠϜʹదͨ͠৽͍͠ϑϨʔϜϫʔΫ΋ग़ͯ͘Δ͸ͣ
    • SkateJSͱ͔ʁ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  44. View Slide

  45. ະདྷ΁ͷಓΛ࡞Δ

    View Slide

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

    View Slide

  47. ݹ͍ίʔυΛखջ͚Δ
    • lint Λॻ͘
    • ܕΛॻ͘
    • ͋Δ͍͸ܕ͕ͭ͘Α͏ͳίʔυΛॻ͘
    • άϩʔόϧม਺౉͠ => ES Modules
    • Ϗϧυ࣌ʹґଘղੳ
    • ςετΛॻ͘

    View Slide

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

    View Slide

  49. ྫ: Qiita Ͱࣗ෼͕΍ͬͨ͜ͱ
    • Rails Sprockets => Browserify
    • άϩʔόϧม਺౉͠Λ ESM ʹ
    • Backbone.View => React
    • View૚ ͱ State૚ Λ෼཭(Flux)

    View Slide

  50. ྫ: freeeࣾͰࣗ෼͕΍ͬͯΔ͜ͱ
    • Rails Sprockets => Webpacker
    • άϩʔόϧม਺౉͠ΛESMʹ
    • Backbone.Router Λղମ
    • ݹ͍ίʔυʹ flow ͷܕΛ෇͚ͯճΔ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  54. View Slide

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

    View Slide

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

    View Slide

  57. ͓ΘΓ

    View Slide