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

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

4. None

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!