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

by Daichi Ishikawa

Slide 1

Slide 1 text

Daichi Ishikawa 2019.07.01 v-sendai #2 ٕज़બఆΛ࣠ʹ ϢʔβʔϑΝʔετΛߟ͑Δ

Slide 2

Slide 2 text

Daichi Ishikawa / @nicedchy 2018/11 - Piece of Cake, Inc. note ͷΤϯδχΞ ਪ͠ΫϦΤΠλʔ @toda_makoto Vue.js Japan User Group Staff ஻Δਓ

Slide 3

Slide 3 text

Vue Fes Japan 2019

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Mission ͩΕ΋͕૑࡞Λ͸͡Ίɺ ଓ͚ΒΕΔΑ͏ʹ͢Δɻ

Slide 6

Slide 6 text

ऴΘΓ͕ݟ͖͑ͯͨ Release note https://note.mu/noteeng/m/me7637ba82821

Slide 7

Slide 7 text

Nuxt ҠߦϓϩδΣΫτ ೥಺׬શऴྃ໨ඪʂ

Slide 8

Slide 8 text

࠙਌ձͰΑ͘ฉ͔ΕΔ࣭໰ʹ ౴͍͑ͨͱࢥ͍·͢

Slide 9

Slide 9 text

ͳͥ AngularJS ͔Β Nuxt.js ʹͨ͠ΜͰ͔͢ʁ ஫ऍ: AngularJS = ʙv1.x / Angular = v2ʙ

Slide 10

Slide 10 text

͜ͷ࿩ͷԆ௕Ͱ͢ note https://note.mu/r82/n/ne217ba36d233

Slide 11

Slide 11 text

͜ͷεϥΠυͰ఻͍͑ͨ͜ͱ

Slide 12

Slide 12 text

ɾٕज़͸खஈͰ͔͠ͳ͍ɺϢʔβʔϑΝʔετΛߟ͑Δ ɾFE૚Λ࠷దͳঢ়ଶͰอͭͱվળͷຊ࣭͕ଊ͑΍͍͢ ɾNuxt.js ͸ଞ FW ͱಉ༷ʹ࠷ྑͷબ୒ࢶͨΓಘΔ ఻͍͑ͨ͜ͱ

Slide 13

Slide 13 text

ɾͳͥ AngularJS ͔Β Nuxt.js ʹม͑ͨͷ͔ ɾAngularJS ͔Β Nuxt.js ʹม͑ͯͲ͏ͩͬͨͷ͔ ͓඼ॻ͖

Slide 14

Slide 14 text

ɾͳͥ AngularJS ͔Β Nuxt.js ʹม͑ͨͷ͔ ɾAngularJS ͔Β Nuxt.js ʹม͑ͯͲ͏ͩͬͨͷ͔ ͓඼ॻ͖

Slide 15

Slide 15 text

͜ͷ࿩ͷཁ໿Λ͠·͢ note https://note.mu/r82/n/ne217ba36d233

Slide 16

Slide 16 text

ɾAngularJS Λબ୒ͨ͠ཧ༝ ɾٕज़બఆཁ݅ ɾબ୒ࢶ ͳͥ AnuglarJS ͔Β Nuxt.js ʹม͑ͨͷ͔

Slide 17

Slide 17 text

ɾAngularJS Λબ୒ͨ͠ཧ༝ ɾٕज़બఆཁ݅ ɾબ୒ࢶ ͳͥ AnuglarJS ͔Β Nuxt.js ʹม͑ͨͷ͔

Slide 18

Slide 18 text

AngularJS Λબ୒ͨ͠ཧ༝ note ͷ։ൃ࣌ظ 2013/11 - 2014/04 ɾ౰࣌ backbone.js ͕೔ຊͰ͸ओྲྀ ɾnote ͸ UI ͕ͦΕͳΓʹෳࡶ ɹɾAngularJS ͷ two-way binding ͸ັྗత ɾαʔόʔαΠυ͸ API ʹઐ೦ ɹɾωΠςΟϒΞϓϦͷߟྀ ɾΤϯδχΞ࠾༻໨త

Slide 19

Slide 19 text

AngularJS Λબ୒ͨ͠ཧ༝ Frontend ɾAngularJS v1.1.x ɾCoffeeScript ɾHAML Backend ɾRuby on Rails v4.2 ɾCapistrano Infrastructure ɾAWS

Slide 20

Slide 20 text

AngularJS Λબ୒ͨ͠ཧ༝ Frontend ɾAngularJS v1.1.x ɾCoffeeScript ɾHAML Backend ɾRuby on Rails v4.2 ɾCapistrano Infrastructure ɾAWS Client Side Rendering only Single Page Application

Slide 21

Slide 21 text

AngularJS Λબ୒ͨ͠ཧ༝ ՝୊఺ ɾॳظදࣔ଎౓ͷ஗͞ ɾٕज़త੍໿ ɹɾAngularJS v1.x Ͱ͸ SSR Λαϙʔτ͍ͯ͠ͳ͍ ɾٕज़తෛ࠴ ɹɾίʔσΟϯάن໿ ɹɹɾடং͕ͳ͍ ɹɾίϯϙʔωϯτઃܭ

Slide 22

Slide 22 text

طଘελοΫͷԆ௕Ͱ͸ Ϗδωεཁٻͷղܾ͸ࠔ೉

Slide 23

Slide 23 text

ٕज़બఆཁ݅ ɾServer Side Rendering ( SSR ) ɹɾSEO ɹɾඳը଎౓ ( FMP ) ɾֶश / ӡ༻ίετ ɹɾσβΠφʔ΁ͷ഑ྀ ɹɾઐ໳ FE ͕͍ͳͯ͘΋ϝϯςφϒϧ ɾ։ൃ / ίϛϡχςΟͷ׆ൃ͞ ɹɾௐ΂ͨΒ৘ใ͕ग़ͯ͘Δɺฉ͘͜ͱ͕Ͱ͖Δ؀ڥ

Slide 24

Slide 24 text

બ୒ࢶ 2018/03 ࣌఺Ͱͷީิ ɾExpress / VanillaJS ɹɾ೔ܦ͞ΜͷࣄྫΛࢀߟ ɹɹɾϑϩϯτΤϯυͷॲཧ͕ଟ͍ ɹɹɾnote ͸ΠϯλϥΫςΟϒͳ UI ͕ଟ͍ ɹɹɾ։ൃޮ཰্͕͕Βͣஅ೦ ɾReact.js ɾAngular (v2Ҏ߱) ɾVue.js ɹɾपΓͷ؀ڥʹཔΕΔਓ͕ͨͪͨ͘͞Μ͍ͨ ɹɾ@kitak san ͋Γ͕ͱ͏͍͟͝·ͨ͠

Slide 25

Slide 25 text

note ͕ײͨ͡ Vue.js / Nuxt.js ͷϝϦοτ ɾSFC / Scoped CSS ɹɾաڈͷ CSS ͸ϦϑΝΫλͨࠟ͠ ɹɹͳͲ͋ΓΧΦε ɹɾDX ͷ޲্͕ݟࠐΊΔ

Slide 26

Slide 26 text

note ͕ײͨ͡ Vue.js / Nuxt.js ͷϝϦοτ ɾಈ͔͢·Ͱͷֶशίετͷ௿͞ͱ਌͠Έқ͞ ɹɾTemplate ͕ HTML Ͱهड़Ͱ͖Δ ɹɾ σβΠφʔʹ΋਌͠Έқ͍ ɹɾߏจ͕ AngularJS ʹ͍ۙ ɹɹɾVue.js ( exp: v-for, v-if ) ɹɹɾAngularJS ( exp: ng-repeat, ng-if )

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

ϢʔβʔʹՁ஋Λಧ͚ΔͨΊͷ ຊ࣭తͳ։ൃʹूதͰ͖Δ

Slide 29

Slide 29 text

ɾͳͥ AngularJS ͔Β Nuxt.js ʹม͑ͨͷ͔ ɾAngularJS ͔Β Nuxt.js ʹม͑ͯͲ͏ͩͬͨͷ͔ ͓඼ॻ͖

Slide 30

Slide 30 text

ύϑΥʔϚϯε

Slide 31

Slide 31 text

Nuxt.js (production demo)

Slide 32

Slide 32 text

վળ

Slide 33

Slide 33 text

note ։ൃݱ৔ͷ࿩

Slide 34

Slide 34 text

ɾDog fooding ɾStorybook ɾAtomic Design ɾInfrastructure ɾTypeScript Migration AngularJS ͔Β Nuxt.js ʹม͑ͯͲ͏ͩͬͨͷ͔

Slide 35

Slide 35 text

࡮৽ͷํ਑ ɾطଘͷ Rails αʔό͸ API ༻్ͱͯ͠௨ৗՔಇ ɾView ૚Λ Nuxt.js (ϨϯμϦϯάαʔό)΁Ҡ؅ ɹɾElastic Load Balancing Λ࢖༻ ɹɾϧʔςΟϯά୯ҐͰࣾ಺޲͚ςετϦϦʔε ɹɹɾࣾ಺ϢʔβʔʹόάΛϦϙʔτͯ͠΋Β͏ ɾ͜ͷ࣌ AngularJS ͰՔಇ͍ͯ͠Δϖʔδ΋͋Δ ɹˠೋॏϝϯς Dog fooding

Slide 36

Slide 36 text

GOOD ɾNuxt.js ࣮૷౰ॳͷ૸Γग़͠͸࠷ߴͩͬͨ ɾStorybook Λ Build & Hosting ͢Δ؀ڥΛ࡞Δͱ࠷ߴ BAD ɾΤϯδχΞ / σβΠφʔ͕׳Εͯ͘Δͱϝϯς͞Εͳ͍ ɹˠ࢓ํͳ͍ɺׂΓ੾Δ͔͠ͳ͍ ɾϫʔΫϑϩʔʹ૊Έࠐ·Εͳ͍ͱϝϯςφ͕ݱΕͳ͍ νʔϜͷχʔζʹ߹Θͤͯऔࣺબ୒ͨ͠ํ͕ྑ͍ Storybook

Slide 37

Slide 37 text

ҰఆͷடংΛอͭͷʹޮՌత ɾΰϦΰϦͷϧʔϧԽ͢Δͱ͠ΜͲ͍ ɾ࠷ॳ͔ΒؤுΓ͗͢ͳ͍ ɾ࣮૷ऀͰίϯςΫετ͕ҧ͏͕࣌͋ΔͷͰ஫ҙ͕ඞཁ ɾงғؾͰ͸͡ΊͯɺνʔϜͱϓϩμΫτͷίϯςΫε τΛ߹Θ͍ͤͯ͘ͷ͕ॏཁ ɾnote Ͱ͸ src/components/templates ͕Ͱ͖·ͨ͠ Atomic Design

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

ز౓͔ͷߏ੒੾Γସ͑Λͨ͠ วྺ: EC2 → Lambda → Elastic Beanstalk Elastic Beanstalk ฤ ɾ҆ॅͷ஍ɺɺɺ͔ͱࢥ͍͖΍ ɾӡ༻౰ॳ࠷దͳΠϯελϯε਺͕෼͔Βͣۤઓ ɹɾSRE ͕ Auto Scale ͷ࠷దԽ ɾB/G Deploy ΋ߦͳ͍ͬͯΔ ɹɾ͍ΘΏΔΠϯελϯεΨνϟճආ༻ ɹɾσϓϩΠͷ͕͔͔͍࣌ؒͬͯΔͷͰཁվળ Infrastructure

Slide 41

Slide 41 text

͕Μ͹ͬͯΔ ɾ։ൃ༏ઌ౓΋͋ΔͷͰઈࢍ WIP ɾগͣͭ͠Ҡߦத ɹɾstore, middleware, plugins ͕த৺ ɾVuex ɹɾܕΛ͚͍ͭͯ͘ͷ͸ύζϧΛղ͘Έ͍ͨͳײ͡ ɹɾSwagger ͱ͔ openapi-generator తͳͷ͕ͳ͍ͱ ɹɹAPI Ϩεϙϯεͷܕ͚ͭΔͷͭΒ͍ Vue 3.0 ଴ͬͯΔ͔Βͳ... TypeScript Migration

Slide 42

Slide 42 text

టष͘΍ͬͯ·͢

Slide 43

Slide 43 text

ҎલͷελοΫʹൺ΂  DX͸֨ஈʹ޲্͠࠷ߴ✨

Slide 44

Slide 44 text

·ͱΊ

Slide 45

Slide 45 text

ɾٕज़͸खஈͰ͔͠ͳ͍ɺϢʔβʔϑΝʔετΛߟ͑Δ ɾFE૚Λ࠷దͳঢ়ଶͰอͭͱվળͷຊ࣭͕ଊ͑΍͍͢ ɾNuxt.js ͸ଞ FW ͱಉ༷ʹ࠷ྑͷબ୒ࢶͨΓಘΔ ఻͍͑ͨ͜ͱ

Slide 46

Slide 46 text

఻͍͑ͨ͜ͱΛ೑෇͚͢Δͱ

Slide 47

Slide 47 text

ٕज़͸खஈͰ͔͠ͳ͍ɺϢʔβʔϑΝʔετΛߟ͑Δ ɾ·ͣग़ͯ͠Ϣʔβʔʹ࢖ͬͯ΋Β͏͜ͱ͕େࣄ ɹɾ࠷ߴͷମݧΛಧ͚͍ͨ ɹɾͦͷ଎౓ʹ଱͑Δج൫Λ࣋ͭ FW Λબ୒͢Δ FE૚Λ࠷దͳঢ়ଶͰอͭͱվળͷຊ࣭͕ଊ͑΍͍͢ ɾimage ഑৴ͷ࠷దԽ ɾεϩ΢ΫΤϦରࡦ Nuxt.js ͸ଞ FW ͱಉ༷ʹ࠷ྑͷબ୒ࢶͨΓಘΔ ɾϑϩϯτΤϯυ͸ബࣺͯ͘Δ͜ͱΛલఏʹ૊Ήͱ࠷ߴ ఻͍͑ͨ͜ͱ

Slide 48

Slide 48 text

We are hiring શํҐͰΤϯδχΞืूதͰ͢ʂ https://www.wantedly.com/projects/208206

Slide 49

Slide 49 text

Thanks!