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

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

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

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

054deedcc25cbeacb6cd34c43b7df26a?s=128

Daichi Ishikawa

July 01, 2019
Tweet

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!