技術選定を軸にユーザーファーストを考える

v-sendai meetup #2 の登壇資料です。
https://v-sendai.connpass.com/event/132973/

Transcript

1. Daichi Ishikawa 2019.07.01 v-sendai #2 ٕज़બఆΛ࣠ʹ
   ϢʔβʔϑΝʔετΛߟ͑Δ
2. Daichi Ishikawa / @nicedchy 2018/11 - Piece of Cake, Inc. note ͷΤϯδχΞ ਪ͠ΫϦΤΠλʔ @toda_makoto Vue.js Japan User Group Staff ஻Δਓ
3. Vue Fes Japan 2019
5. Mission ͩΕ΋͕૑࡞Λ͸͡Ίɺ ଓ͚ΒΕΔΑ͏ʹ͢Δɻ
6. ऴΘΓ͕ݟ͖͑ͯͨ Release note https://note.mu/noteeng/m/me7637ba82821
7. Nuxt ҠߦϓϩδΣΫτ ೥಺׬શऴྃ໨ඪʂ
8. ࠙਌ձͰΑ͘ฉ͔ΕΔ࣭໰ʹ ౴͍͑ͨͱࢥ͍·͢
9. ͳͥ AngularJS ͔Β Nuxt.js ʹͨ͠ΜͰ͔͢ʁ ஫ऍ: AngularJS = ʙv1.x / Angular = v2ʙ
10. ͜ͷ࿩ͷԆ௕Ͱ͢ note https://note.mu/r82/n/ne217ba36d233
11. ͜ͷεϥΠυͰ఻͍͑ͨ͜ͱ
12. ɾٕज़͸खஈͰ͔͠ͳ͍ɺϢʔβʔϑΝʔετΛߟ͑Δ ɾFE૚Λ࠷దͳঢ়ଶͰอͭͱվળͷຊ࣭͕ଊ͑΍͍͢ ɾNuxt.js ͸ଞ FW ͱಉ༷ʹ࠷ྑͷબ୒ࢶͨΓಘΔ ఻͍͑ͨ͜ͱ
13. ɾͳͥ AngularJS ͔Β Nuxt.js ʹม͑ͨͷ͔ ɾAngularJS ͔Β Nuxt.js ʹม͑ͯͲ͏ͩͬͨͷ͔ ͓඼ॻ͖
14. ɾͳͥ AngularJS ͔Β Nuxt.js ʹม͑ͨͷ͔ ɾAngularJS ͔Β Nuxt.js ʹม͑ͯͲ͏ͩͬͨͷ͔ ͓඼ॻ͖
15. ͜ͷ࿩ͷཁ໿Λ͠·͢ note https://note.mu/r82/n/ne217ba36d233
16. ɾAngularJS Λબ୒ͨ͠ཧ༝ ɾٕज़બఆཁ݅ ɾબ୒ࢶ ͳͥ AnuglarJS ͔Β Nuxt.js ʹม͑ͨͷ͔
17. ɾAngularJS Λબ୒ͨ͠ཧ༝ ɾٕज़બఆཁ݅ ɾબ୒ࢶ ͳͥ AnuglarJS ͔Β Nuxt.js ʹม͑ͨͷ͔
18. AngularJS Λબ୒ͨ͠ཧ༝ note ͷ։ൃ࣌ظ 2013/11 - 2014/04 ɾ౰࣌ backbone.js ͕೔ຊͰ͸ओྲྀ ɾnote ͸ UI ͕ͦΕͳΓʹෳࡶ ɹɾAngularJS ͷ two-way binding ͸ັྗత ɾαʔόʔαΠυ͸ API ʹઐ೦ ɹɾωΠςΟϒΞϓϦͷߟྀ ɾΤϯδχΞ࠾༻໨త
19. AngularJS Λબ୒ͨ͠ཧ༝ Frontend ɾAngularJS v1.1.x ɾCoffeeScript ɾHAML Backend ɾRuby on Rails v4.2 ɾCapistrano Infrastructure ɾAWS
20. AngularJS Λબ୒ͨ͠ཧ༝ Frontend ɾAngularJS v1.1.x ɾCoffeeScript ɾHAML Backend ɾRuby on Rails v4.2 ɾCapistrano Infrastructure ɾAWS Client Side Rendering only Single Page Application
21. AngularJS Λબ୒ͨ͠ཧ༝ ՝୊఺ ɾॳظදࣔ଎౓ͷ஗͞ ɾٕज़త੍໿ ɹɾAngularJS v1.x Ͱ͸ SSR Λαϙʔτ͍ͯ͠ͳ͍ ɾٕज़తෛ࠴ ɹɾίʔσΟϯάن໿ ɹɹɾடং͕ͳ͍ ɹɾίϯϙʔωϯτઃܭ
22. طଘελοΫͷԆ௕Ͱ͸ Ϗδωεཁٻͷղܾ͸ࠔ೉
23. ٕज़બఆཁ݅ ɾServer Side Rendering ( SSR ) ɹɾSEO ɹɾඳը଎౓ ( FMP ) ɾֶश / ӡ༻ίετ ɹɾσβΠφʔ΁ͷ഑ྀ ɹɾઐ໳ FE ͕͍ͳͯ͘΋ϝϯςφϒϧ ɾ։ൃ / ίϛϡχςΟͷ׆ൃ͞ ɹɾௐ΂ͨΒ৘ใ͕ग़ͯ͘Δɺฉ͘͜ͱ͕Ͱ͖Δ؀ڥ
24. બ୒ࢶ 2018/03 ࣌఺Ͱͷީิ ɾExpress / VanillaJS ɹɾ೔ܦ͞ΜͷࣄྫΛࢀߟ ɹɹɾϑϩϯτΤϯυͷॲཧ͕ଟ͍ ɹɹɾnote ͸ΠϯλϥΫςΟϒͳ UI ͕ଟ͍ ɹɹɾ։ൃޮ཰্͕͕Βͣஅ೦ ɾReact.js ɾAngular (v2Ҏ߱) ɾVue.js ɹɾपΓͷ؀ڥʹཔΕΔਓ͕ͨͪͨ͘͞Μ͍ͨ ɹɾ@kitak san ͋Γ͕ͱ͏͍͟͝·ͨ͠
25. note ͕ײͨ͡ Vue.js / Nuxt.js ͷϝϦοτ ɾSFC / Scoped CSS ɹɾաڈͷ CSS ͸ϦϑΝΫλͨࠟ͠ ɹɹͳͲ͋ΓΧΦε ɹɾDX ͷ޲্͕ݟࠐΊΔ
26. note ͕ײͨ͡ Vue.js / Nuxt.js ͷϝϦοτ ɾಈ͔͢·Ͱͷֶशίετͷ௿͞ͱ਌͠Έқ͞ ɹɾTemplate ͕ HTML Ͱهड़Ͱ͖Δ ɹɾ σβΠφʔʹ΋਌͠Έқ͍ ɹɾߏจ͕ AngularJS ʹ͍ۙ ɹɹɾVue.js ( exp: v-for, v-if ) ɹɹɾAngularJS ( exp: ng-repeat, ng-if )
27. note ͕ײͨ͡ Vue.js / Nuxt.js ͷϝϦοτ ɾϞμϯͳϑϩϯτΤϯυ؀ڥ ɹɾVue.js ΤίγεςϜͷϏϧτΠϯ ɹɹɾVue Router, Vuex, Vue Server Render etc. ɹɾWebPack ؀ڥΛΑ͠ͳʹ΍ͬͯ͘ΕΔ ɹɹɾNuxt ͷ Version ্͕͕Δͨͼʹ DX ͕޲্ ɹɾDynamic Imports ɹɾCode Spiliting ɹɾmeta tag optimization ɹɾSmart Prefetch
28. ϢʔβʔʹՁ஋Λಧ͚ΔͨΊͷ ຊ࣭తͳ։ൃʹूதͰ͖Δ
29. ɾͳͥ AngularJS ͔Β Nuxt.js ʹม͑ͨͷ͔ ɾAngularJS ͔Β Nuxt.js ʹม͑ͯͲ͏ͩͬͨͷ͔ ͓඼ॻ͖
30. ύϑΥʔϚϯε
31. Nuxt.js (production demo)
32. վળ
33. note ։ൃݱ৔ͷ࿩
34. ɾDog fooding ɾStorybook ɾAtomic Design ɾInfrastructure ɾTypeScript Migration AngularJS ͔Β Nuxt.js ʹม͑ͯͲ͏ͩͬͨͷ͔
35. ࡮৽ͷํ਑ ɾطଘͷ Rails αʔό͸ API ༻్ͱͯ͠௨ৗՔಇ ɾView ૚Λ Nuxt.js (ϨϯμϦϯάαʔό)΁Ҡ؅ ɹɾElastic Load Balancing Λ࢖༻ ɹɾϧʔςΟϯά୯ҐͰࣾ಺޲͚ςετϦϦʔε ɹɹɾࣾ಺ϢʔβʔʹόάΛϦϙʔτͯ͠΋Β͏ ɾ͜ͷ࣌ AngularJS ͰՔಇ͍ͯ͠Δϖʔδ΋͋Δ ɹˠೋॏϝϯς Dog fooding
36. GOOD ɾNuxt.js ࣮૷౰ॳͷ૸Γग़͠͸࠷ߴͩͬͨ ɾStorybook Λ Build & Hosting ͢Δ؀ڥΛ࡞Δͱ࠷ߴ BAD ɾΤϯδχΞ / σβΠφʔ͕׳Εͯ͘Δͱϝϯς͞Εͳ͍ ɹˠ࢓ํͳ͍ɺׂΓ੾Δ͔͠ͳ͍ ɾϫʔΫϑϩʔʹ૊Έࠐ·Εͳ͍ͱϝϯςφ͕ݱΕͳ͍ νʔϜͷχʔζʹ߹Θͤͯऔࣺબ୒ͨ͠ํ͕ྑ͍ Storybook
37. ҰఆͷடংΛอͭͷʹޮՌత ɾΰϦΰϦͷϧʔϧԽ͢Δͱ͠ΜͲ͍ ɾ࠷ॳ͔ΒؤுΓ͗͢ͳ͍ ɾ࣮૷ऀͰίϯςΫετ͕ҧ͏͕࣌͋ΔͷͰ஫ҙ͕ඞཁ ɾงғؾͰ͸͡ΊͯɺνʔϜͱϓϩμΫτͷίϯςΫε τΛ߹Θ͍ͤͯ͘ͷ͕ॏཁ ɾnote Ͱ͸ src/components/templates ͕Ͱ͖·ͨ͠ Atomic Design
38. ز౓͔ͷߏ੒੾Γସ͑Λͨ͠ วྺ: EC2 → Lambda → Elastic Beanstalk EC2 ฤ ౰ॳ͸ EC2 node.js pm2 Ͱӡ༻͍ͯͨ͠ɻ ɾnode.js ӡ༻ܦݧ0 ɾԿ౓͔ಥવ pm2 ͕མͪͨΓෆ҆Λ๊͍͑ͯͨ AWS Lambda ͷؾӡͰ͸ɾɾɾʁ Infrastructure
39. ز౓͔ͷߏ੒੾Γସ͑Λͨ͠ วྺ: EC2 → Lambda → Elastic Beanstalk Lambda ฤ ɾຊ൪ Lambda ؀ڥ͕ࢭ·ͬͨ೔͕͋ͬͨ ɹɾaws-serverless-express ͷґଘϞδϡʔϧ͕ݪҼʁ ɹɾະͩϦϙʔτ͞Εͣ ɾຊ൪ެ։લͩͬͨͷͰɺϐϘοτ੒ޭ ɹɾBFF ͲΜͳΠϯϑϥߏ੒ʹ΋ରԠͰ͖࠷ߴ ɹɾLambda Functions ॻ͍ͯͳͯ͘۝ࢮʹҰੜ Infrastructure
40. ز౓͔ͷߏ੒੾Γସ͑Λͨ͠ วྺ: EC2 → Lambda → Elastic Beanstalk Elastic Beanstalk ฤ ɾ҆ॅͷ஍ɺɺɺ͔ͱࢥ͍͖΍ ɾӡ༻౰ॳ࠷దͳΠϯελϯε਺͕෼͔Βͣۤઓ ɹɾSRE ͕ Auto Scale ͷ࠷దԽ ɾB/G Deploy ΋ߦͳ͍ͬͯΔ ɹɾ͍ΘΏΔΠϯελϯεΨνϟճආ༻ ɹɾσϓϩΠͷ͕͔͔͍࣌ؒͬͯΔͷͰཁվળ Infrastructure
41. ͕Μ͹ͬͯΔ ɾ։ൃ༏ઌ౓΋͋ΔͷͰઈࢍ WIP ɾগͣͭ͠Ҡߦத ɹɾstore, middleware, plugins ͕த৺ ɾVuex ɹɾܕΛ͚͍ͭͯ͘ͷ͸ύζϧΛղ͘Έ͍ͨͳײ͡ ɹɾSwagger ͱ͔ openapi-generator తͳͷ͕ͳ͍ͱ ɹɹAPI Ϩεϙϯεͷܕ͚ͭΔͷͭΒ͍ Vue 3.0 ଴ͬͯΔ͔Βͳ... TypeScript Migration
42. టष͘΍ͬͯ·͢
43. ҎલͷελοΫʹൺ΂
 DX͸֨ஈʹ޲্͠࠷ߴ✨
44. ·ͱΊ
45. ɾٕज़͸खஈͰ͔͠ͳ͍ɺϢʔβʔϑΝʔετΛߟ͑Δ ɾFE૚Λ࠷దͳঢ়ଶͰอͭͱվળͷຊ࣭͕ଊ͑΍͍͢ ɾNuxt.js ͸ଞ FW ͱಉ༷ʹ࠷ྑͷબ୒ࢶͨΓಘΔ ఻͍͑ͨ͜ͱ
46. ఻͍͑ͨ͜ͱΛ೑෇͚͢Δͱ
47. ٕज़͸खஈͰ͔͠ͳ͍ɺϢʔβʔϑΝʔετΛߟ͑Δ ɾ·ͣग़ͯ͠Ϣʔβʔʹ࢖ͬͯ΋Β͏͜ͱ͕େࣄ ɹɾ࠷ߴͷମݧΛಧ͚͍ͨ ɹɾͦͷ଎౓ʹ଱͑Δج൫Λ࣋ͭ FW Λબ୒͢Δ FE૚Λ࠷దͳঢ়ଶͰอͭͱվળͷຊ࣭͕ଊ͑΍͍͢ ɾimage ഑৴ͷ࠷దԽ ɾεϩ΢ΫΤϦରࡦ Nuxt.js ͸ଞ FW ͱಉ༷ʹ࠷ྑͷબ୒ࢶͨΓಘΔ ɾϑϩϯτΤϯυ͸ബࣺͯ͘Δ͜ͱΛલఏʹ૊Ήͱ࠷ߴ ఻͍͑ͨ͜ͱ
48. We are hiring શํҐͰΤϯδχΞืूதͰ͢ʂ https://www.wantedly.com/projects/208206
49. Thanks!