Slide 1
Slide 1 text
ݱͷES201xͱະདྷͷΞʔΩςΫνϟ
@mizchi / InsideFrontend 2
Slide 2
Slide 2 text
ࣗݾհ
• @mizchi
• ॴଐ: ϑϦʔϥϯε
• ઐ: Node.js / SPA৬ਓ
Slide 3
Slide 3 text
CAUTION!!!
• ྺ࢙ͷͰɺѻͬͯΔൣғ͕͘ͳͬͨͷͰɺݴٴൣғ͕ҙਤ
తʹߜ͍ͬͯ·͢
• ͋Β͔͡Ίྃ͝ঝ͍ͩ͘͞
Slide 4
Slide 4 text
ϑϩϯτΤϯυͷΈͳ͞Μ
Slide 5
Slide 5 text
ফͯ͠·͔͢ʁ
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
ຊൃදͷΰʔϧ
• ΞʔΩςΫνϟͷมભΛཧ
• มԽʹڧ͍ઃܭͷͨΊͷಎΛಘͯɺࣗͷίʔυʹඞཁͳ
ͷɺΔ෦ɺΒͳ͍෦ͷར͖͕Ͱ͖ΔΑ͏ʹͳͬͯ΄
͍͠
Slide 8
Slide 8 text
͍͖ͬͯ·͠ΐ͏
Slide 9
Slide 9 text
ࠓͷ͓
1.ϑϨʔϜϫʔΫৼΓฦΓ
1.աڈ
2.ݱࡏ
3.ະདྷ
2.ݱࡏ͔ΒະདྷࢸΔಓ
Slide 10
Slide 10 text
ϑϨʔϜϫʔΫৼΓฦΓ
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
ଠݹ: ηϧϑεΫϨΠϐϯάͷ࣌
• खͰΛॻ͖͍͑ͯͨ࣌
• ෆ҆ఆͳ DOM API Λ jQuery ͕ٵऩ
• IE6͕ࢮͶͣظԽ
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
ςϯϓϨʔςΟϯάͷ࣌
• HTMLͷॳظੜ͕ΫϥΠΞϯτଆ
• ೋॏςϯϓϨʔτ | SEO
Ex. mustache, handlebars, underscore.template
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
σʔλόΠϯσΟϯάͷ࣌
• จࣈྻΛల։͢Δͷ͔ΒɺߏΛग़ྗ͢Δ ͷ
• ޮతͳ෦ॻ͖͑ | Ϧετల։
• MVVMͷ༌ೖ
ex. backbone.stickit / knockout / angularjs / vue
Slide 18
Slide 18 text
ݱ
Slide 19
Slide 19 text
Client Side MVC ͷऴᖼ
• Rails ༝དྷͷ Backbone ͷ MVC Ϟσϧഁ
• ΫϥαόͰඞཁͳநผ 2
• ղ & ࠶ߏங
• ୯ํσʔλϑϩʔ
2 MVC ͱ MVC2 ʹ͍ͭͯվΊͯߟ͑ͯΈΔ http://www.s-arcana.co.jp/tech/2011/07/mvc-mvc2.html
Slide 20
Slide 20 text
Flux/Obvervable ͷ࣌
• Event ͱ State ͱ View Λશʹ
• EventSource ͱ subscribe ͷܗଶ
• FRPͷ֓೦Λ༌ೖ
ex: Rx / Elm / Redux
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
ߟ͑ํ
• Component ͷଆʹӅΕͨ State ͷଘࡏجຊతʹѱ
• Event ͷετϦʔϜ͔Β State ͷεφοϓγϣοτΛੜ
Slide 24
Slide 24 text
ؓ: 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
Slide 25
Slide 25 text
ϑϨʔϜϫʔΫͷτϨϯυ
• ϋʔυ/ιϑτ྆ऀͷൃୡʹΑͬͯ…
• ϝϞϦ্ʹͨ͘͞ΜσʔλΛஔ͘Α͏ʹͳΔ(ྫ: ԾDOM
ʹΑΔόοϑΝϦϯά)
• ϒϥβͷػೳΛΑΓݡ࣮͘͢Δ(ྫ: ࣗલͷϨϯμϥʔ)
• ߽తͳઃܭ <=> ϚΠΫϩνϡʔχϯά Λ܁Γฦͯ͠ൃల
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Webͷ։ൃݴޠͷมԽ
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
։ൃݴޠ
• JavaScript
• TC39ͰຖਐԽ / ϓϦίϯύΠϥͰ interop
• ଞݴޠ͔ΒͷτϥϯεύΠϥܥ
• ϊϋͷӽڥ
• WebAssemblyܥ
• ࢼߦࡨޡஈ֊
Slide 30
Slide 30 text
AltJS ͕Ռׂͨͨ͠
• ES2015 ͷจ๏Ճ/ػೳఏҊ
• ClassɺArrow Function, etc...
• ༷͕͍͔ͭͳ͍ͷϓϦίϯύΠϥͰઌऔΓ͢ΔจԽ
Slide 31
Slide 31 text
ۙΓ্͕Δݴޠ…
• ੩తͳܕڥ͕͋Δ͜ͱ
• ॊೈͳܕએݴ͕Ͱ͖Δ͜ͱ
• ܕਪ͕͋Δ͜ͱ
• ͱʹ͔͘ܕɺܕɺܕ
Slide 32
Slide 32 text
ϑϩϯτΤϯυͷ੩తܕ͚ͷधཁ
• ͱʹ͔͘ςετ͕ॻ͖ͮΒ͍ͷͰ੩తݕࠪͰࡁ·͍ͤͨ
• Observable Immutable Λલఏʹ͢Δͱ੩తݕ͕ࠪͳ͍
ͱίʔυ͕ॻ͚ͳ͍
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
ͳͥJSʹܕ͕ඞཁͳͷ͔
• ʮςετ͕͍͠GUIڥͰͷʯ৺ཧత҆શੑͷͨΊ
• ҠΓมΘΓ͕͍ΤίγεςϜͰɺ੩తղੳͰίʔυΛࣺͯΔ
ͨΊ
※ ͜ΕҎ্୯ͳΔݴޠؒͷରཱἤΓʹͳΔͷͰΊ·͢…
Slide 36
Slide 36 text
ະདྷͷ
Slide 37
Slide 37 text
WebComponents
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
WebComponents ͷޙͷੈք
• View ͷ Custom Elements
• ঢ়ଶཧͱͯ͠ͷϑϨʔϜϫʔΫ(ͨͿΜ)Δ
• ύϥμΠϜʹదͨ͠৽͍͠ϑϨʔϜϫʔΫग़ͯ͘Δͣ
• SkateJSͱ͔ʁ
Slide 41
Slide 41 text
WebComponents Ͱࢮ͵ͷ
• ʙσβΠϯͷʙ࣮
• ϚςϦΞϧσβΠϯ
• ϑϥοτσβΠϯ
• Bootstrap
Slide 42
Slide 42 text
Έͳ͞Μߴ·͖ͬͯ·͔ͨ͠ʁ
Slide 43
Slide 43 text
Ұམͪண͍ͯߟ͑Δ
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
ະདྷͷಓΛ࡞Δ
Slide 46
Slide 46 text
ݱ
• ͦ͏͍ͬͨͬͯݱͷฅίʔυΛΑ
• Կ͔ΒखΛ͚Δʁ
Slide 47
Slide 47 text
ݹ͍ίʔυΛखջ͚Δ
• lint Λॻ͘
• ܕΛॻ͘
• ͋Δ͍ܕ͕ͭ͘Α͏ͳίʔυΛॻ͘
• άϩʔόϧม͠ => ES Modules
• Ϗϧυ࣌ʹґଘղੳ
• ςετΛॻ͘
Slide 48
Slide 48 text
ྑ͍ίʔυͱѱ͍ίʔυ
• ྑ͍ίʔυ
• ੩తݕࠪͰ͖Δ
• ΠϯλʔϑΣʔε͕໌Β͔
• ؆୯ʹࣺͯΒΕΔ
• ѱ͍ίʔυ
• Ϟδϡʔϧڥք͕໌Β͔Ͱͳ͍
Slide 49
Slide 49 text
ྫ: Qiita Ͱ͕ࣗͬͨ͜ͱ
• Rails Sprockets => Browserify
• άϩʔόϧม͠Λ ESM ʹ
• Backbone.View => React
• View ͱ State Λ(Flux)
Slide 50
Slide 50 text
ྫ: freeeࣾͰ͕ࣗͬͯΔ͜ͱ
• Rails Sprockets => Webpacker
• άϩʔόϧม͠ΛESMʹ
• Backbone.Router Λղମ
• ݹ͍ίʔυʹ flow ͷܕΛ͚ͯճΔ
Slide 51
Slide 51 text
ͱΓ͋͑ͣͬͱ͚
• prettier
• eslint: no-unused-vars
• eslint: prefer-const
Slide 52
Slide 52 text
कഁ
• OSSΤίγεςϜʹै͏
• Webඪ४ʹै͏
• ϨΠϠʔΛղ͢Δ
Slide 53
Slide 53 text
ϑϩϯτΤϯυΤϯδχΞͱԿ͔
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
ͦΕͧΕͷΰʔϧͷઃఆ
• εϐʔυΛಥ͖٧ΊΔUXͳͷ͔
• ܧଓͯ͠ՁΛಧ͚ΔͨΊͷίʔυ࣭ͳͷ͔
Slide 56
Slide 56 text
ϑϩϯτΤϯυΞʔΩςΫνϟ: ·ͱΊ
• Webಛ༗ͷΞʔΩςΫνϟ͔ΒɺීวతͳGUIઃܭͷ߹ྲྀ
• ࠓͷϑϩϯτΤϯυ OOP, FP, GUIઃܭͷݟ͕ͬͨ͝
ࣽͷɺ༷ʑͳࢥΛͿ͚ͭ߹͏ઓ
• ࣗʹඞཁͳநΛબͿ
Slide 57
Slide 57 text
͓ΘΓ