フルコンポーネント化へ 〜 進化を続けるアメブロの道

2018/07/06 Frontrend Vol.12 - サービスの誕生と成長

発表者: 侯　斌
Github: https://github.com/kouhin
Twitter: https://twitter.com/houbin217jz

https://frontrend.connpass.com/event/90107/

Transcript

1. ਐԽΛଓ͚ΔΞϝϒϩͷಓ ϑϧίϯϙʔωϯτԽ΁ ި ඾ @ CYBERAGENT
2. ࣗݾ঺հ ިɹ඾ʢί΢ɹώϯʣɹ 33࠽ ▸ ത࢜ʢ޻ֶʣ ▸ ग़਎ɿதࠃɾྒྷೡʢ౦๺஍ํʣ ▸ גࣜձࣾαΠόʔΤʔδΣϯτ
 Ξϝʔόϒϩά ϒϥ΢βνʔϜ
 ϑϩϯτͷج൫ɾӡ༻Λ୲౰ ▸ 2014೥4݄ɹגࣜձࣾαΠόʔΤʔδΣϯτɹ৽ଔೖࣾ
 2014೥5݄ɹϓϥοτϑΥʔϜɹαʔόʔΤϯδχΞʢJavaʣ
 2015೥4݄ɹ৽نϓϩδΣΫτɹαʔόʔΤϯδχΞʢGoʣ
 2015೥9݄ɹAmeba Ownd ɹɹ ϑϩϯτΤϯδχΞʢAngularJSʣ
 2016೥1݄ɹΞϝʔόϒϩάɹɹϑϩϯτΤϯδχΞʢReact + Node.jsʣɹ ▸ https://twitter.com/houbin217jz ▸ https://github.com/kouhin
3. BEFORE લճ঺հ ▸ 2017/9/8 (Frontrend Vol.10)
 
 Ξϝϒϩ: IsomprhicΞϓϦέʔ γϣϯͷύϑΥʔϚϯεɾνϡʔ χϯά ▸ https://speakerdeck.com/ kouhin/ameburo- isomprhicapurikesiyonfalsepa huomansutiyuningu
4. BEFORE BACKGROUND ▸ 2016/1 ʙ ΞϝϒϩϑϩϯτϦχϡʔΞϧ ▸ ݴޠ: Java → JavaScript (Node.js) ▸ ϑϨʔϜϫʔΫ: Spring MVC / Freemarker → React.js ▸ ࠓճͷൃද͸ϦχϡʔΞϧ͔ͯ͠Βࠓ·ͰΞϝϒϩϑϩϯτ શମͷٕज़తͳਐԽɺͦͯ͠কདྷͷਐԽํ޲ʹ͍ͭͯઆ໌͞ ͍͖ͤͯͨͩ·͢
5. ▸ STEP0: ίϯϙʔωϯτԽ΁ͷํ޲Λཱ֬ ▸ STEP1: ίϯϙʔωϯτԽͰ͖Δٕज़Λಋೖ ▸ STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ ▸ STEP3: RouterίϯϙʔωϯτԽ ▸ STEP4?: ڞ௨ίϯϙʔωϯτಋೖͰ͖Δ ▸ STEP5?: ίϯϙʔωϯτಈతʹγΣΞͰ͖Δ ▸ STEP6?: ಛఆͷίϯϙʔωϯτٕज़ʹറΒΕͳ͍ OUTLINE Full Componentization Current
6. ▸ STEP0: ίϯϙʔωϯτԽ΁ͷํ޲Λཱ֬ ▸ STEP1: ίϯϙʔωϯτԽͰ͖Δٕज़Λಋೖ ▸ STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ ▸ STEP3: RouterίϯϙʔωϯτԽ ▸ STEP4?: ڞ௨ίϯϙʔωϯτಋೖͰ͖Δ ▸ STEP5?: ίϯϙʔωϯτಈతʹγΣΞͰ͖Δ ▸ STEP6?: ಛఆͷίϯϙʔωϯτٕज़ʹറΒΕͳ͍ OUTLINE Full Componentization Current
7. STEP0: ίϯϙʔωϯτԽ΁ͷํ޲Λཱ֬ STEP0: ίϯϙʔωϯτԽ΁ͷํ޲Λཱ֬ ▸ ਐԽ ▸ ੈͷதͷେݪଇͱͯ͠ɺ͢΂ͯ͸ਐԽ͍ͯ͠Δ ▸ ಛʹٕज़ͷਐԽ͕૝૾Ҏ্ૣ͍ ▸ Dojo, Ext.js, YUI, Mootools , Prototype.js, jQuery, BackboneJS, Anguar, React, Vue, Polymer, WebComponent, wasm ਐԽ͠ͳ͍Μͩ
8. STEP0: ίϯϙʔωϯτԽ΁ͷํ޲Λཱ֬ STEP0: ίϯϙʔωϯτԽ΁ͷํ޲Λཱ֬ expect(abbr(“ “) .toEqual(“ “) ਐԽ͠ͳ͍Μͩ ͠ Μ ͔ ࢮΜͩ ͠
9. STEP0: ίϯϙʔωϯτԽ΁ͷํ޲Λཱ֬ STEP0: ίϯϙʔωϯτԽ΁ͷํ޲Λཱ֬ ▸ େݪଇ: ਐԽ͠ଓ͚Δ ▸ Ξϝϒϩ ▸ 10೥Ҏ্ͷྺ࢙͕͋Δ ▸ ٕज़తͳةػײΛ࣋ͭ ▸ ਐԽ͸େࣄͩΑʂ
 ɹਐԽ͸େࣄͩΑʂ
 ɹɹਐԽ͸େࣄͩΑʂ ⼤事 
 ３回⾔
10. STEP0: ίϯϙʔωϯτԽ΁ͷํ޲Λཱ֬ ΞϝϒϩϑϩϯτਐԽͷํ޲: ίϯϙʔωϯτԽ ▸ ਐԽʹํ޲ੑ͕ͳ͍ͱಓʹ໎ͬͯ͠·͏ ▸ Ξϝϒϩ2016೥ SP࡮৽͔ͯ͠Βࠓ·Ͱͷํ޲: ▸ ίϯϙʔωϯτԽ΁
11. STEP0: ίϯϙʔωϯτԽ΁ͷํ޲Λཱ֬ ίϯϙʔωϯτԽͷϝϦοτ ▸ High cohesion, low coupling (ߴڽू, ௿݁߹) ։ൃଆ ‣ DIVIDE AND CONQUER (෼ׂ౷࣏) ‣ MAINTAINABILITY UP! ‣ मਖ਼͸ଞͷίϯϙʔωϯτ ʹӨڹ͠ͳ͍ ‣ ػೳͷ௥Ճɾ࡟আ͕؆୯ ‣ REUSABILITY (࠶ར༻ੑ) ‣ Α͘୯७ͳʹ࠶ར༻Ͱ͖Δί ϯϙʔωϯτͱͯ͠ઃܭ͕ͨ͠ɺ ঃʑʹΊͪΌͪ͘ΌʹͳΔ ‣ ίετ͕ߴ͍ɺແཧ͠ͳ͍ ΫϥΠΤϯτଆ ‣ ίʔυ෼ׂ͠΍͍͢ ‣ LOADING JUST WHAT IS NEEDED (ඞཁͳ΋ͷ ͚ͩΛಡΈࠐΉ) ‣ ػೳΛͲΜͲΜ௥Ճͯ͠΋OK!
12. ͡Ό͋ɺ৽ػೳΛ
 ͜͜ʹ͍Ε·͠ΐ͏͔?
13. ▸ զʑͷܦݧ͸ݶΒΕ͍ͯΔ ▸ ٕज़తͳน (ಛʹ࠷৽ٕज़Λಋೖͨ࣌͠ʣ ▸ ݱ࣮తͳน (BrowserͷαϙʔτͳͲ) ▸ ϏδωεଆͷޮՌ ▸ ٕज़ֵ৽: ࠷ऴܗଶ͸ͦ΋ͦ΋ଘࡏ͠ͳ͍ʂ ௚઀ʹίϯϙʔωϯτԽͷ࠷ऴܗଶʹͳΒͳ͍ཧ༝ ਐԽ͸େࣄͩΑʂ STEP0: ίϯϙʔωϯτԽ΁ͷํ޲Λཱ֬ Ͳ͏΍ͬͯ৯΂ Δͷʁ
14. ▸ STEP0: ίϯϙʔωϯτԽ΁ͷํ޲Λཱ֬ ▸ STEP1: ίϯϙʔωϯτԽͰ͖Δٕज़Λಋೖ ▸ STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ ▸ STEP3: RouterίϯϙʔωϯτԽ ▸ STEP4?: ڞ௨ίϯϙʔωϯτಋೖͰ͖Δ ▸ STEP5?: ίϯϙʔωϯτಈతʹγΣΞͰ͖Δ ▸ STEP6?: ಛఆͷίϯϙʔωϯτٕज़ʹറΒΕͳ͍ OUTLINE Full Componentization Current
15. STEP1. ίϯϙʔωϯτԽͰ͖Δٕज़Λಋೖ STEP1. ίϯϙʔωϯτԽͰ͖Δٕज़Λಋೖ ▸ ظؒ: ▸ SP: 2016.1 - 2016.8 ▸ PC: 2017.1 - ▸ ίϯϙʔωϯτԽͷٕज़ ▸ MV*೿: Angular, Vue ▸ Reactive೿: React, Reactive ▸ Enhance೿: Polymer ▸ ৽ළ૷چञɿ৽͍͠ළʹݹ͍͓ञΛ٧ΊΔ
 ػೳΛ΄΅มߋͤͣɺͱΓٕ͋͑ͣज़࡮৽
16. STEP1. ίϯϙʔωϯτԽͰ͖Δٕज़Λಋೖ ࠾༻͞Εٕͨज़ ▸ Server side rendering + Single page application (Isomorphic Web Application) ▸ React ▸ ίϯϙʔωϯτԽ ▸ Redux ▸ ίϯϙʔωϯτάϩʔόϧεςʔλεͷ؅ཧ ▸ react-router, react-router-hook ▸ ϧʔλʔɺϧʔλʔભҠ࣌ͷData Loading ▸ Atomic Design ▸ ίϯϙʔωϯτཻ౓ ▸ CSS Modules ▸ Webpack
17. STEP1. ίϯϙʔωϯτԽͰ͖Δٕज़Λಋೖ ATOMIC DESIGN: ίϯϙʔωϯτͷཻ౓ ▸ Atomic Design Atoms Molecules Organisms Templates Pages ▸ Page: ▸ Smartphone (SP) Page ▸ PC Page ▸ Template ▸ RouteͰ: ▸ هࣄৄࡉTempalte ▸ هࣄҰཡTemplate ▸ Organisms ▸ εςʔλεΛ࣋ͨͤΔ մ (Redux⭕ ) ▸ Molecules: ▸ εςʔλεΛ࣋ ͨͤͳ͍մ ʢRedux❌ ʣ ▸ Atomic: ▸ ΞΠίϯɺϘλϯɺ ը૾ɺΞχϝʔ γϣϯɺ޿ࠂ SDKͳͲ࠷খί ϯϙʔωϯτ
18. STEP1. ίϯϙʔωϯτԽͰ͖Δٕज़Λಋೖ ϑΥϧμߏ੒ͱϏϧυ ▸ ίϯϙʔωϯτ͝ͱʹCSS΍ը૾ΛjsͱҰॹʹ؅ཧ ▸ WebpackͰϏϧυ͢Δ ▸ .js → .js ▸ .css → ▸ css modules locals (.js) ▸ main.css
 (Webpack ExtractTextPlugin) ▸ .png, .jpg → URL͔ΠϯϥΠϯը૾ (.js) ▸ Client/ServerڍಈΛҰக͢ΔͨΊ, ྆ํWebpackϏϧυ Λߦ͏ ▸ ࠷ॳʹServerଆ Babel + require hookͰ΍Γ·ͨ͠ ͕ɺ΍͸ΓCSS Modules΍ը૾ͳͲ͍Ζ͍Ζ໘౗͍ 1ίϯϙʔωϯτ
19. STEP1.5: LAZY LOAD STEP1.5: LAZY LOAD ▸ ໰୊఺ ▸ ϖʔδ͕௕͍ ▸ ͢΂ͯͷϢʔβʔ͕Լ·ͰεΫϩʔϧ͢Δ͜ͱͰ͸ͳ͍ ▸ ͢΂ͯͷ಺༰ΛαʔόʔͰϨϯμϦϯά͢Δͷ͸ແཧ (Performance) ▸ ඞཁͳ΋ͷ͚ͩΛಡΈࠐΉ ▸ Lazy Load ▸ Lazyʹ͍ͯ͠ͳ͍ίϯϙʔωϯτͱಉ͡σʔλϩʔσΟϯά͕ඞཁͳͷ Ͱɺrrr-lazy Λ։ൃ
20. STEP1.5: LAZY LOAD LAZYLOAD
21. ▸ STEP0: ίϯϙʔωϯτԽ΁ͷํ޲Λཱ֬ ▸ STEP1: ίϯϙʔωϯτԽͰ͖Δٕज़Λಋೖ ▸ STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ ▸ STEP3: RouterίϯϙʔωϯτԽ ▸ STEP4?: ڞ௨ίϯϙʔωϯτಋೖͰ͖Δ ▸ STEP5?: ίϯϙʔωϯτಈతʹγΣΞͰ͖Δ ▸ STEP6?: ಛఆͷίϯϙʔωϯτٕज़ʹറΒΕͳ͍ OUTLINE Full Componentization Current
22. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ ▸ ϝϦοτ ▸ ඞཁ͸ͳ͍ίϯϙʔωϯτΛϩʔυ͠ͳ͍Α͏ʹ ▸ JSධՁ͕࣌ؒ୹͘ͳΔ ▸ main.js๲େԽΛ๷͙ ▸ ৽͍͠ػೳΛͲΜͲΜ௥Ճͯ͠OK ▸ σϝϦοτ ▸ ࣮૷͸೉͍͠
23. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ ROUTE-BASED VS COMPONENT-BASED CODE SPLITTING https://github.com/jamiebuilds/react-loadable Route-based code splitting Component-based code splitting
24. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ ROUTE-BASED VS COMPONENT-BASED CODE SPLITTING ▸ 1ػೳ/1ϧʔτ → Route-based ▸ 1ػೳ/1ίϯϙʔωϯτɺॏͳΔ෦෼͕ଟ͍ɺRouteͰ෼ׂ ͯ͠΋͋·Γҙຯ͸ͳ͍ → Component-based → Feature-based code splitting
25. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ Ξϝϒϩ ▸ Organisms୯ҐͰػೳΛ࣮૷͍ͯ͠Δ ▸ RouteͰͷ෼ׂͰ͸ͳ͘ɺOrganisms Ͱͷ෼ׂʹͨ͠ OrganismsͰίʔυ෼ׂ
26. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ Ξϝϒϩ ▸ ෼ׂํ๏: ▸ Webpack import() ▸ rrr-lazy Lazyίϯϙʔωϯτ෼ׂ ▸ ݁Ռ: JSධՁ͕࣌ؒ୹ॖ 
 https://speakerdeck.com/kouhin/ameburo- isomprhicapurikesiyonfalsepahuomansutiyuningu ҰൠతͳComponent෼ׂ Lazy Component෼ׂ
27. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ ͳΜ͔๨Εͨʁ ▸ ίϯϙʔωϯτ͝ͱʹCSS΍ը૾ΛҰॹʹ؅ཧ ▸ WebpackͰϏϧυ͢Δ ▸ .js → .js ▸ .css → ▸ css modules locals (.js) ▸ main.css
 (Webpack ExtractTextPlugin) ▸ .png, .jpg → URL͔ΠϯϥΠϯը૾ (.js) ▸ Client/ServerڍಈΛҰக͢ΔͨΊ, ྆ํ WebpackϏϧυΛߦ͏ CSS෼ׂʂ
28. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ CSS෼ׂʢ2018/1 - 2018/4ʣ ▸ ໨త ▸ Loading just what is needed (ඞཁͳ΋ͷ͚ͩΛಡΈࠐΉ) ▸ Critical pathͷվળ ▸ ϑΝʔετϏϡʔͷCSSΧόϨʔδΛ޲্
29. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ CSS෼ׂʢ2018/1 - 2018/4ʣ ▸ ໰୊఺1: ▸ ΍Γํ: ▸ ࠷ޙͷ࠷ޙඞͣ ελΠϧͷinlineԽɺͦ͏͠ͳ͍ͱίϯϙʔωϯτͷಠཱੑ Λ୲อͰ͖ͳ͍ ▸ Scoped CSS (Web Component) (ഇࢭ) ▸ CSS೿: CSS Modules ▸ JS೿: css-in-js (style-in-js) ▸ தؒ೿: styled-component
30. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ CSS෼ׂ: STYLE INLINEٕज़ CSS Modules css-in-js Styled-component ؆୯͞ ⭕ Lint tools ⭕ ❌ 
 ϓϥάΠϯ͕ඞཁ Build tools ⭕ ⭕
 ಛʹ͍Βͳ͍ 
 ϓϥάΠϯ͕ඞཁ Editor ⭕ ❌ 
 ϓϥάΠϯ͕ඞཁ Media query ͳͲ
 CSSωΠςΟϒػೳ ⭕ ❌ ⭕ Global CSS
 (Skinαϙʔτ) ⭕ ❌ ⭕ SSR 
 ࣮૷೉͍͠ ⭕ ⭕ Styleͷߋ৽ CSS classͷมߋ / ௥Ճ ͳͲ JSࣜ JSͬΆ͍
31. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ CSS෼ׂ ▸ ໰୊఺2: ▸ ֎෦css͕͋Δ(user-customize-skin.css) ▸ skinαϙʔτ: ֎෦cssΛ࢖͏ɺcss-in-js͸೉͍͠ ▸ CSSಡΈࠐΉॱ൪ʹݫ͍͠ ▸ ϝΠϯCSS → defaultSkin → customSkin
32. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ CSS෼ׂ ▸ ໰୊఺3: ▸ SSRରԠ͕ඞཁ ▸ SSR + SPA྆ํαϙʔτ: SSRͰ࢖ΘΕͨCSSͷऩू͕ඞ ཁ (style-loader͸ແཧ) ▸ ৚݅ʹΑΓrender() => nullͷίϯϙʔωϯτ͕ଟ਺ଘ ࡏ (isomorphic-style-loader͸ແཧ)
33. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ CSS෼ׂ - ཧ૝૾ ▸ CSSͷίϯςϯπͱΫϥε໊ͷlocalsΛJSʹΠϯϥΠϯԽ ▸ CSSͱComponentΛඥ෇͚Δ ▸ render() => Not Null? ▸ Server: ऩू ▸ Client: <head>ʹ௥Ճ/࡟আ
34. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ CSS෼ׂ: ੒Ռ෺ ▸ styledux: https://github.com/openameba/styledux ▸ Isomorphic (SSRαϙʔτ) ▸ render() !== null ▸ [Client] styleΛ<head>ʹ௥Ճɺunmount·ͨ͸nullͷ৔߹styleΛ֎͢ ▸ [Server] styleΛऩू ▸ Third-party cssαϙʔτ (e.g. PhotoSwipeͷdefault-skin.css) ▸ <head>ʹ௥Ճ͢ΔҐஔΛࢦఆͰ͖Δ ▸ Webpack Hot Module Replacement ▸ Thread-safe, renderToNodeStream()αϙʔτ: ϦΫΤετຖʹ৽͍͠ContextΛ࡞੒ ▸ ReduxΛ࢖ͬͯɺContextͱͯ͠ఏڙ͠ɺLogͳͲͷϛυϧ΢ΣΞ΋αϙʔτ
35. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ ޿ࠂͷ͓࣌ؒͰ͢ ▸ styledux: https://github.com/openameba/styledux ▸ ReduxΛ࢖ͬͯɺContextͱͯ͠ఏڙ͠ɺLogͳͲͷϛυϧ΢ΣΞ΋αϙʔτ ▸ react-side-effectͱreact-helmet͕renderToNodeStreamͱͷ૬ੑ͕ྑ͘ͳ͍ ͷͰɺstyleduxͱࣅ͍ͯΔํ๏Ͱ৽͍͠ϥΠϒϥϦΛ࡞੒ͨ͠ ▸ react-reffect ▸ https://github.com/openameba/react-reffect ▸ react-safety-helmet ▸ https://github.com/openameba/react-safety-helmet
36. STYLEDUX࣮૷ྫ ֎෦CSSͷಋೖ CSSͱComponentඥ෇͖ CSS Moduleಋೖ
37. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ STYLEDUX࣮૷ྫ: GLOBAL CSSͱॱ൪ Global CSS
38. CSS෼ׂ DEMO
39. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ ݁Ռ1 ▸ CSSΛ֤ίϯϙʔωϯτʹ෼ࢄ͠ɺ͜͜·Ͱʹ׬શʹίϯ ϙʔωϯτԽ͢Δ͜ͱ͕Մೳʹͳͬͨ
40. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ ݁Ռ2: CSS COVERAGE ͱ ϖʔδαΠζ ▸ CSS෼ׂલ(v2.8.2): main.css (Unused: 88.2%) ▸ CSS෼ׂޙ(v2.8.3): html (css + js, iconؚΊ) (Unused: 29.2%) ▸ HTML + main.cssͷαΠζ: 180KB → 61KB
41. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ ݁Ռ3: (෭࣍ޮՌ) ύϑΥʔϚϯεࢦඪ ▸ ςετ؀ڥ ▸ ࢦඪ: RUM-SpeedIndex, First PaintͱSpeedIndexΛه࿥ ▸ ϒϥ΢β: Chrome Canary ▸ Network: Disable Cache ▸ Performance ▸ Network: Fast 3G ▸ CPU: 4x slowdown ▸ 3 ճଌఆ, ͦͷฏۉ஋Λ݁Ռͱ͢Δ ▸ adInFeed, adPrefetchGlasgow, appStoreHeaderΛ֎ͯ͠ଌఆ
42. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ ݁Ռ3: (෭࣍ޮՌ) ύϑΥʔϚϯεࢦඪ ▸ First Paint΋SpeedIndex΋͓͓Αͦ200ɺ300ms վળ URL FirstPaint
 [B] FirstPaint
 [A] FirstPaint
 (Delta) SpeedIndex
 [B] SpeedIndex
 [A] SpeedIndex
 (Delta) https://ameblo.jp/ebizo- ichikawa 1464 1364 -100 3862 3758 -104 https://ameblo.jp/ebizo- ichikawa/ entry-12348442811.html 1679 1364 -315 3875 3631 -244 https://ameblo.jp/shibuya 1640 1375 -265 3479 3222 -257 https://ameblo.jp/shibuya/ entry-12320622750.html 1974 1399 -575 2033 1470 -563 https://ameblo.jp/andoyui 1678 1363 -315 5668 5442 -226 https://ameblo.jp/andoyui/ entry-12348203928.html 1791 1390 -401 5362 5130 -232 https://ameblo.jp/staff 1687 1325 -362 1756 1388 -368 https://ameblo.jp/staff/ entry-12348362206.html 1653 1324 -329 1715 1373 -342
43. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ TIPS: CSS MODULEͷܧঝ ▸ ܧঝ : CSSͱJS྆ํImport͕ඞཁ ▸ <head>ʹ௥Ճॱ൪͕લޙ͢Δ͜ͱ͕͋Δ
44. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ TIPS: CSS MODULEͷCASCADING ▸ Cascading: ▸ (:global local) 
 ී௨ʹ࢖͑Δ ▸ (local local) 
 ී௨ʹ࢖͑Δ ▸ (֎෦local local) 
 ೉͍͠
45. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ άϩʔόϧεςʔλεΛϞδϡʔϧԽ (TODO) ▸ SPϖʔδʹPC༻ͷεςʔλεཚೖͷ໰୊ͱ͔͸ɺ΋͏SSR ϖʔδͷ๲େԽʹͳΔݪҼͷҰͭʹͳͬͨ ▸ Loading just what is needed (ඞཁͳ΋ͷ͚ͩΛಡΈࠐΉ) ▸ ReduxͷReducerΛ෼ׂ͢Δඞཁ͕͋Δ
46. STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ άϩʔόϧεςʔλεΛϞδϡʔϧԽ (TODO) ▸ ࢼ͠ʹ redyna Λ࡞੒ͨ͠
47. ▸ STEP0: ίϯϙʔωϯτԽ΁ͷํ޲Λཱ֬ ▸ STEP1: ίϯϙʔωϯτԽͰ͖Δٕज़Λಋೖ ▸ STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ ▸ STEP3: RouterίϯϙʔωϯτԽ ▸ STEP4?: ڞ௨ίϯϙʔωϯτಋೖͰ͖Δ ▸ STEP5?: ίϯϙʔωϯτಈతʹγΣΞͰ͖Δ ▸ STEP6?: ಛఆͷίϯϙʔωϯτٕज़ʹറΒΕͳ͍ OUTLINE Full Componentization Current
48. STEP3: ROUTERίϯϙʔωϯτԽ (DOING) STEP3: ROUTERίϯϙʔωϯτԽ (DOING) ▸ ҙٛ: Web Site ͔Β Web Application΁ਐԽɺΑΓ๛෋ͳදݱ͕Ͱ͖ΔΑ͏ʹ ▸ ظؒ: ͜Ε͔Β͕Μ͹Γ·͢ʂ ▸ ݱঢ়: ▸ react-router <= 3 ίϯϙʔωϯτͰ͸ͳ͘ɺίϯϑΟά ▸ άϩʔόϧతʹ RouteΛࢦఆ͢Δ ▸ (ߏ੒ͷ໰୊) 1 Route 㱻 1 Template, RouteભҠ࣌શϖʔδߋ৽ ▸ Appۙ͘ͷ๛͔ͳදݱ͕΍Γʹ͍͘ ▸ react-router 4ͳͲΛಋೖ͠ɺRoute΋ίϯϙʔωϯτԽʹ͢Δɻ ▸ ίϯϙʔωϯτΛ૊Έ߹ΘͤͯɺΑΓ๛͔ͳදݱΛ࣮ݱ͢Δ ▸ ໰୊఺: ▸ Isomorphic, Code Splitting, Data Loading
49. ͔͜͜Β͸কདྷͷໝ૝Ͱ͢ʂ
50. STEP4?: ڞ௨ίϯϙʔωϯτಋೖͰ͖Δ (TODO) STEP4?: ڞ௨ίϯϙʔωϯτಋೖͰ͖Δ (TODO) ▸ ໨ඪ: ඪ४ϞδϡʔϧԽ ▸ ࣮૷λΠϛϯά: কདྷ? Or ΍Βͳ͍ ▸ ϥΠϒϥϦϨϕϧ
51. STEP4?: ڞ௨ίϯϙʔωϯτಋೖͰ͖Δ (TODO) STEP4?: ڞ௨ίϯϙʔωϯτಋೖͰ͖Δ (TODO) ▸ Πϝʔδ
52. STEP5?: ίϯϙʔωϯτಈతʹγΣΞͰ͖Δ (TODO) STEP5?: ίϯϙʔωϯτಈతʹγΣΞͰ͖Δ (TODO) ▸ ࣮૷λΠϛϯά: কདྷ?ɺϒϥ΢βαϙʔτґଘ (Web Component) ▸ Dynamic Module ▸ Micro ServiceΈ͍ͨͳίϯϙʔωϯτ ▸ Πϝʔδ:
53. STEP6?: ಛఆͷίϯϙʔωϯτٕज़ʹറΒΕͳ͍ (TODO) STEP6?: ಛఆͷίϯϙʔωϯτٕज़ʹറΒΕͳ͍ (TODO) ▸ ࣮૷λΠϛϯά: কདྷ?ɺϒϥ΢βαϙʔτґଘ (Web Component) ▸ ཧ૝૾ɿ ▸ ίϯϙʔωϯτ͕୯ಠͰ։ൃɾӡ༻Ͱ͖Δ ▸ άϩʔόϧσʔλετΞͱ࿈ಈ͠ɺදࣔΛΧελϚΠζͰ͖Δ ▸ Πϝʔδ:
54. ▸ STEP0: ίϯϙʔωϯτԽ΁ͷํ޲Λཱ֬ ▸ STEP1: ίϯϙʔωϯτԽͰ͖Δٕज़Λಋೖ ▸ STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ ▸ STEP3: RouterίϯϙʔωϯτԽ ▸ STEP4?: ڞ௨ίϯϙʔωϯτಋೖͰ͖Δ ▸ STEP5?: ίϯϙʔωϯτಈతʹγΣΞͰ͖Δ ▸ STEP6?: ಛఆͷίϯϙʔωϯτٕज़ʹറΒΕͳ͍ OUTLINE Full Componentization Current
55. STEP7?: ਐԽΛଓ͚Δ STEP7?: ਐԽΛଓ͚Δ
56. ·ͱΊ ▸ ਐԽ͕େࣄʂ ▸ ਐԽͷํ޲΋େࣄʂ ▸ ΞϝϒϩϑϩϯτͷਐԽํ޲ʢࠓ·Ͱʣ ▸ ίϯϙʔωϯτԽ ▸ ίϯϙʔωϯτͷ࣮ݱํ๏: ▸ ͻͱ·ͣίϯϙʔωϯτԽͷٕज़Λಋೖ ▸ ίϯϙʔωϯτཻ౓ܾΊɺϑΥϧμߏ੒ͱϏϧυ؀ڥ ▸ ඇಉظϩʔσΟϯά (Lazy) ▸ ػೳຖͷίʔυ෼ׂ (JSɺCSS) ▸ ϦονͳίϯϙʔωϯτΛ࣮૷ ▸ কདྷɿڞ௨Խɺඪ४ԽɺϑϧίϯϙʔωϯτԽͷ࣌୅ ϑϧίϯϙʔωϯτԽ΁ ʙ ਐԽΛଓ͚ΔΞϝϒϩͷಓ
57. ▸ STEP0: ίϯϙʔωϯτԽ΁ͷํ޲Λཱ֬ ▸ STEP1: ίϯϙʔωϯτԽͰ͖Δٕज़Λಋೖ ▸ STEP2: ίʔυΛίϯϙʔωϯτཻ౓Ͱ෼ׂ ▸ STEP3: RouterίϯϙʔωϯτԽ ▸ STEP4?: ڞ௨ίϯϙʔωϯτಋೖͰ͖Δ ▸ STEP5?: ίϯϙʔωϯτಈతʹγΣΞͰ͖Δ ▸ STEP6?: ಛఆͷίϯϙʔωϯτٕज़ʹറΒΕͳ͍ OUTLINE Full Componentization Current
58. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠