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

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

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

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

Daichi Ishikawa

July 01, 2019
Tweet

More Decks by Daichi Ishikawa

Other Decks in Technology

Transcript

  1. Daichi Ishikawa / @nicedchy 2018/11 - Piece of Cake, Inc.

    note ͷΤϯδχΞ ਪ͠ΫϦΤΠλʔ @toda_makoto Vue.js Japan User Group Staff ஻Δਓ
  2. AngularJS Λબ୒ͨ͠ཧ༝ note ͷ։ൃ࣌ظ 2013/11 - 2014/04 ɾ౰࣌ backbone.js ͕೔ຊͰ͸ओྲྀ

    ɾnote ͸ UI ͕ͦΕͳΓʹෳࡶ ɹɾAngularJS ͷ two-way binding ͸ັྗత ɾαʔόʔαΠυ͸ API ʹઐ೦ ɹɾωΠςΟϒΞϓϦͷߟྀ ɾΤϯδχΞ࠾༻໨త
  3. AngularJS Λબ୒ͨ͠ཧ༝ Frontend ɾAngularJS v1.1.x ɾCoffeeScript ɾHAML Backend ɾRuby on

    Rails v4.2 ɾCapistrano Infrastructure ɾAWS Client Side Rendering only Single Page Application
  4. ٕज़બఆཁ݅ ɾServer Side Rendering ( SSR ) ɹɾSEO ɹɾඳը଎౓ (

    FMP ) ɾֶश / ӡ༻ίετ ɹɾσβΠφʔ΁ͷ഑ྀ ɹɾઐ໳ FE ͕͍ͳͯ͘΋ϝϯςφϒϧ ɾ։ൃ / ίϛϡχςΟͷ׆ൃ͞ ɹɾௐ΂ͨΒ৘ใ͕ग़ͯ͘Δɺฉ͘͜ͱ͕Ͱ͖Δ؀ڥ
  5. બ୒ࢶ 2018/03 ࣌఺Ͱͷީิ ɾExpress / VanillaJS ɹɾ೔ܦ͞ΜͷࣄྫΛࢀߟ ɹɹɾϑϩϯτΤϯυͷॲཧ͕ଟ͍ ɹɹɾnote ͸ΠϯλϥΫςΟϒͳ

    UI ͕ଟ͍ ɹɹɾ։ൃޮ཰্͕͕Βͣஅ೦ ɾReact.js ɾAngular (v2Ҏ߱) ɾVue.js ɹɾपΓͷ؀ڥʹཔΕΔਓ͕ͨͪͨ͘͞Μ͍ͨ ɹɾ@kitak san ͋Γ͕ͱ͏͍͟͝·ͨ͠
  6. note ͕ײͨ͡ Vue.js / Nuxt.js ͷϝϦοτ ɾSFC / Scoped CSS

    ɹɾաڈͷ CSS ͸ϦϑΝΫλͨࠟ͠ ɹɹͳͲ͋ΓΧΦε ɹɾDX ͷ޲্͕ݟࠐΊΔ
  7. note ͕ײͨ͡ Vue.js / Nuxt.js ͷϝϦοτ ɾಈ͔͢·Ͱͷֶशίετͷ௿͞ͱ਌͠Έқ͞ ɹɾTemplate ͕ HTML

    Ͱهड़Ͱ͖Δ ɹɾ σβΠφʔʹ΋਌͠Έқ͍ ɹɾߏจ͕ AngularJS ʹ͍ۙ ɹɹɾVue.js ( exp: v-for, v-if ) ɹɹɾAngularJS ( exp: ng-repeat, ng-if )
  8. 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
  9. ࡮৽ͷํ਑ ɾطଘͷ Rails αʔό͸ API ༻్ͱͯ͠௨ৗՔಇ ɾView ૚Λ Nuxt.js (ϨϯμϦϯάαʔό)΁Ҡ؅

    ɹɾElastic Load Balancing Λ࢖༻ ɹɾϧʔςΟϯά୯ҐͰࣾ಺޲͚ςετϦϦʔε ɹɹɾࣾ಺ϢʔβʔʹόάΛϦϙʔτͯ͠΋Β͏ ɾ͜ͷ࣌ AngularJS ͰՔಇ͍ͯ͠Δϖʔδ΋͋Δ ɹˠೋॏϝϯς Dog fooding
  10. GOOD ɾNuxt.js ࣮૷౰ॳͷ૸Γग़͠͸࠷ߴͩͬͨ ɾStorybook Λ Build & Hosting ͢Δ؀ڥΛ࡞Δͱ࠷ߴ BAD

    ɾΤϯδχΞ / σβΠφʔ͕׳Εͯ͘Δͱϝϯς͞Εͳ͍ ɹˠ࢓ํͳ͍ɺׂΓ੾Δ͔͠ͳ͍ ɾϫʔΫϑϩʔʹ૊Έࠐ·Εͳ͍ͱϝϯςφ͕ݱΕͳ͍ νʔϜͷχʔζʹ߹Θͤͯऔࣺબ୒ͨ͠ํ͕ྑ͍ Storybook
  11. ز౓͔ͷߏ੒੾Γସ͑Λͨ͠ วྺ: EC2 → Lambda → Elastic Beanstalk EC2 ฤ

    ౰ॳ͸ EC2 node.js pm2 Ͱӡ༻͍ͯͨ͠ɻ ɾnode.js ӡ༻ܦݧ0 ɾԿ౓͔ಥવ pm2 ͕མͪͨΓෆ҆Λ๊͍͑ͯͨ AWS Lambda ͷؾӡͰ͸ɾɾɾʁ Infrastructure
  12. ز౓͔ͷߏ੒੾Γସ͑Λͨ͠ วྺ: EC2 → Lambda → Elastic Beanstalk Lambda ฤ

    ɾຊ൪ Lambda ؀ڥ͕ࢭ·ͬͨ೔͕͋ͬͨ ɹɾaws-serverless-express ͷґଘϞδϡʔϧ͕ݪҼʁ ɹɾະͩϦϙʔτ͞Εͣ ɾຊ൪ެ։લͩͬͨͷͰɺϐϘοτ੒ޭ ɹɾBFF ͲΜͳΠϯϑϥߏ੒ʹ΋ରԠͰ͖࠷ߴ ɹɾLambda Functions ॻ͍ͯͳͯ͘۝ࢮʹҰੜ Infrastructure
  13. ز౓͔ͷߏ੒੾Γସ͑Λͨ͠ วྺ: EC2 → Lambda → Elastic Beanstalk Elastic Beanstalk

    ฤ ɾ҆ॅͷ஍ɺɺɺ͔ͱࢥ͍͖΍ ɾӡ༻౰ॳ࠷దͳΠϯελϯε਺͕෼͔Βͣۤઓ ɹɾSRE ͕ Auto Scale ͷ࠷దԽ ɾB/G Deploy ΋ߦͳ͍ͬͯΔ ɹɾ͍ΘΏΔΠϯελϯεΨνϟճආ༻ ɹɾσϓϩΠͷ͕͔͔͍࣌ؒͬͯΔͷͰཁվળ Infrastructure
  14. ͕Μ͹ͬͯΔ ɾ։ൃ༏ઌ౓΋͋ΔͷͰઈࢍ WIP ɾগͣͭ͠Ҡߦத ɹɾstore, middleware, plugins ͕த৺ ɾVuex ɹɾܕΛ͚͍ͭͯ͘ͷ͸ύζϧΛղ͘Έ͍ͨͳײ͡

    ɹɾSwagger ͱ͔ openapi-generator తͳͷ͕ͳ͍ͱ ɹɹAPI Ϩεϙϯεͷܕ͚ͭΔͷͭΒ͍ Vue 3.0 ଴ͬͯΔ͔Βͳ... TypeScript Migration