noteをNuxt.jsで再構築した話

by Retu Fukui

Slide 1

Slide 1 text

noteΛNuxt.jsͰ࠶ߏஙͨ͠࿩ VueFesJapan2018 ෱Ҫ ྽(@fukuiretu)

Slide 2

Slide 2 text

෱Ҫ ྽ (@fukuiretu) • piece of cake, inc. • since 2015.3~ • Engineer ◦ Rails occasionally AWS ◦ Vue.js history 7 months ◦ Nuxt.js history 7 months • Live in Aomori ◦ RemoteWorker

Slide 3

Slide 3 text

͍͔ͭ੨৿ͰVue.jsͷ Πϕϯτ΍Γ͍ͨ

Slide 4

Slide 4 text

ΫϦΤΠλʔɺϝσΟΞͷͨΊͷ$$ϓϥοτϑΥʔϜ

Slide 5

Slide 5 text

ΫϦΤΠλʔɺϝσΟΞͷͨΊͷ$$ϓϥοτϑΥʔϜ • จষɺࣸਅɺΠϥετͳͲͷ࡞඼Λ౤ߘ͢ Δ͜ͱ͕Ͱ͖Δ • ౤ߘͨ͠࡞඼Λ؆୯ʹൢച͢Δ͜ͱ͕  Ͱ͖Δ ͩΕ΋͕૑࡞Λ͸͡Ίɺ  ଓ͚ΒΕΔΑ͏ʹ͢Δɻ

Slide 6

Slide 6 text

ࠓ೔͓࿩͢Δ͜ͱ 1. Nuxt.jsҠߦͷϞνϕʔγϣϯ  2. Nuxt.js΁ͷҠߦܭը  3. ઃܭɾ࣮૷ͷτϐοΫ  4. ·ͱΊ

Slide 7

Slide 7 text

ࠓ೔͓࿩͢Δ͜ͱ 1. Nuxt.jsҠߦͷϞνϕʔγϣϯ  2. Nuxt.js΁ͷҠߦܭը  3. ઃܭɾ࣮૷ͷτϐοΫ  4. ·ͱΊ

Slide 8

Slide 8 text

։ൃ౰࣌ͷϑϩϯτΤϯυ৘੎ 2013. 7 2013. 10 2013. 12 React.js v0.3 Angular.js v1.2.3rc Vue.js v0.6 2014. 4 note։ൃ ~ ϦϦʔε note͸Angular.jsΛબ୒ (౰࣌೔ຊͰ͸Backbone.js͕ओྲྀ)

Slide 9

Slide 9 text

Angular.jsΛબ୒ͨ͠ཧ༝ • UI͕ͦΕͳΓʹෳࡶ • 2-way binding͸ັྗత • αʔόαΠυ͸APIʹઐ೦ • ωΠςΟϒΞϓϦͷߟྀ • ΤϯδχΞ࠾༻໨త • ౰࣌ίϯγϡʔϚ޲͚Ͱ͸௝͔ͬͨ͠

Slide 10

Slide 10 text

ݱࡏͷٕज़ελοΫ • Frontend • Angular.js 1ܥ • CoffeeScript • HAML • Backend • Ruby on Rails • Infrastructure • AWS

Slide 11

Slide 11 text

ݱࡏͷٕज़ελοΫ • Frontend • Angular.js 1.4ܥ • CoffeeScript • HAML • Backend • Ruby on Rails 4.2ܥ • Capistrano • Infrastructure • AWS Client Side Rendering only  Single Page Application

Slide 12

Slide 12 text

Կ͕՝୊͔

Slide 13

Slide 13 text

՝୊఺ • ॳظදࣔ଎౓ͷ஗͞ • εϖοΫͷ௿͍୺຤Ͱݦஶʹ • ٕज़త੍໿ • Angular.js1ܥ͸SSRΛαϙʔτ͍ͯ͠ͳ͍ • Railsͷ্ʹ৐ͬͨϑϩϯτΤϯυ • ٕज़తෛ࠴ • ίʔσΟϯάن໿ • ίϯϙʔωϯτઃܭ

Slide 14

Slide 14 text

ෛ࠴ͱͳ͍ͬͯΔίʔυͷҰྫ

Slide 15

Slide 15 text

طଘͷٕज़ͷԆ௕Ͱ͸ղܾ͕ ࠔ೉ͳঢ়گ

Slide 16

Slide 16 text

දࣔ଎౓͸ਖ਼ٛ

Slide 17

Slide 17 text

දࣔ଎౓͸ਖ਼ٛ

Slide 18

Slide 18 text

ܦӦࢹ఺ͰͷϑϧϦχϡʔΞϧ ελʔτΞοϓͷن໛Ͱ͸ ͳ͔ͳ͔౿Έ੾Εͳ͍ͷ͕Ұൠత

Slide 19

Slide 19 text

ܦӦࢹ఺ͰͷϑϧϦχϡʔΞϧ ֶੜ࣌୅ʹLinuxΧʔωϧ͍ͬͯ͡ ༡ΜͩΓɺࠓ͸ػցֶशͰPython ॻ͍ͨΓͱ͍͏CEO දࣔ଎౓͸ਖ਼ٛΛᨳͬͯΔ͝ຊਓ ͕2017/10ʹCXOʹब೚

Slide 20

Slide 20 text

ܦӦࢹ఺ͰͷϑϧϦχϡʔΞϧ ֶੜ࣌୅ʹLinuxΧʔωϧ͍ͬͯ͡ ༡ΜͩΓɺࠓ͸ػցֶशͰPython ॻ͍ͨΓͱ͍͏CEO දࣔ଎౓͸ਖ਼ٛΛᨳͬͯΔ͝ຊਓ ͕2017/10ʹCXOʹब೚ ҙ֎ͱ͋ͬ͞ΓͱGoαΠϯ

Slide 21

Slide 21 text

͜͏ͯ͠ ϑϩϯτΤϯυΛશ໘తʹ ࡮৽͢Δํ޲Ͱݕ౼ (2018/03)

Slide 22

Slide 22 text

ٕज़બఆཁ݅ͷચ͍ग़͠ • Server Side Rendering (Ҏ߱SSR) • ֶश/ӡ༻ίετ • σβΠφʔ΁ͷ഑ྀ • ΨνͳϑϩϯτΤϯυΤϯδχΞͰͳͯ͘΋ϝϯςφ ϒϧʹ • ։ൃ/ίϛϡχςΟͷ׆ൃ͞

Slide 23

Slide 23 text

ީิͱ͕ͯ͋ͬͨ͠બ୒ࢶ 1.Express + VanillaJS  2.React.js  3.Angular  4.Vue.js

Slide 24

Slide 24 text

ީิͱ͕ͯ͋ͬͨ͠બ୒ࢶ 1. Express + VanillaJS  2. React.js  3. Angular  4. Vue.js ೔ܦ͞ΜͷࣄྫΛࢀߟʹ

Slide 25

Slide 25 text

͕͔ͩ͠͠… • ϑϩϯτΤϯυͷॲཧ͕ଟ͍ • ΠϯλϥΫςΟϒͳUI΋ͦͦ͋͜͜Δ • ։ൃޮ཰্͕͕Βͣʹஅ೦

Slide 26

Slide 26 text

ީิͱ͕ͯ͋ͬͨ͠બ୒ࢶ 1.Express + VanillaJS  2.React.js  3.Angular  4.Vue.js CTOͷ஌ਓʹVue.jsʹਫ਼௨͍ͯ͠Δํ͕ଟ ͘ɺનΊΒΕͨͷ͕͖͔͚ͬ

Slide 27

Slide 27 text

࠾༻

Slide 28

Slide 28 text

Vue.jsΛ࠾༻ͨ͠ཧ༝ᶃ • Vue Server RendererʹΑΔSSRͷαϙʔτ • Virtual DOMʹΑΔޮ཰తͳࠩ෼ߋ৽ • ίϯϙʔωϯτࢦ޲ • Single File Components • Scoped CSS ࣮ߦ଎౓ͱ։ൃޮ཰ͷཱ྆

Slide 29

Slide 29 text

Vue.jsΛ࠾༻ͨ͠ཧ༝ᶄ • template͕HTMLͰॻ͚Δ • σβΠφʔʹ΋༏͍͠ • HAML < HTMLͩͱฉ͍͍ͯͨ • ߏจ(v-xxx)͕Angular.js(ng-xxx)ͱ͍ۙ͠ ֶशίετͷ௿͞ͱ਌͠Έ΍͢͞

Slide 30

Slide 30 text

Vue.jsΛ࠾༻ͨ͠ཧ༝ᶅ • ࠔͬͨΒެࣜͷυΩϡϝϯτΛݟΕ͹  େ֓ղܾ͢Δ • ೔ຊޠϩʔΧϥΠζ൛͕༻ҙ͞Ε͍ͯΔ υΩϡϝϯτͷॆ࣮౓

Slide 31

Slide 31 text

Vue.jsΛ࠾༻ͨ͠ཧ༝ᶆ • ษڧձ΍Πϕϯτͷଟ͞ = ৘ใྔ͕ଟ͍ • ௐ΂Ε͹৘ใ͕ग़ͯ͘Δɺฉ͘͜ͱ͕Ͱ͖Δ ҆৺ײ ࠃ಺ίϛϡχςΟͷ׆ൃ౓

Slide 32

Slide 32 text

Vue.jsΛ࠾༻ͨ͠ཧ༝ᶇ • ͱ͋Δ@kitak͞Μͱ͍͏ํ • ࣮૷ͷQ & A • ઃܭͷαϙʔτ • ϋϯζΦϯ։࠵ʹΑΔجૅ஌ࣝ޲্ Vue.jsͷΤΩεύʔτ͕ίϯαϧʹ

Slide 33

Slide 33 text

Nuxt.js͸??

Slide 34

Slide 34 text

Nuxt.jsΛ৮Δ͖͔͚ͬ • Vue.jsͰSSR͢Δ৔߹Ͳ͏͢Ε͹ʁ • Nuxt.jsΛ࢖͏ͱ؆୯ʹͰ͖ΔΒ͍͠... • ݕূͯ͠ΈͨΒͬ͘͞ͱSSR͕Ͱ͖ͨ… • kitak͞Μ΋SSR͢ΔͳΒNuxt.js͍͍ͧͱݴͬ ͍ͯͨ͠...

Slide 35

Slide 35 text

࠾༻

Slide 36

Slide 36 text

Nuxt.jsΛ࠾༻ͨ͠ཧ༝ᶃ • SSR͕؆୯ʹ • pages഑ԼʹίϯϙʔωϯτΛஔ͘ • asyncData() / fetch() ͰඞཁͳσʔλΛఆٛɾऔಘ͢Δ • DIRߏ੒, ϧʔςΟϯάͷࣗಈੜ੒, ϓϥάΠϯ ػߏ etc.. ن໿͕खʹೖΔ

Slide 37

Slide 37 text

Nuxt.jsΛ࠾༻ͨ͠ཧ༝ᶄ • Vue.jsͷΤίγεςϜΛϏϧτΠϯ • Vue Router, Vuex, Vue Server Renderer, vue-meta • Ϗϧυ(webpack)͸Α͠ͳʹ • minify, jsϑΝΠϧ෼ׂ, cssͷΠϯϥΠϯԽ,   τϥϯεύΠϧ, preload etc… Ϟμϯͳ؀ڥ͕खʹೖΔ

Slide 38

Slide 38 text

΍͍͖ͬͯએݴ Nuxt.jsҠߦϓϩδΣΫτ͕ελʔτ  (2018/4)

Slide 39

Slide 39 text

ࠓ೔͓࿩͢Δ͜ͱ 1. Nuxt.jsҠߦͷϞνϕʔγϣϯ  2. Nuxt.js΁ͷҠߦܭը  3. ઃܭɾ࣮૷ͷτϐοΫ  4. ·ͱΊ

Slide 40

Slide 40 text

࡮৽ͷํ਑ • طଘͷRailsαʔό͸API༻్Ͱ͜Ε·Ͱ௨Γར༻ • View૚ΛNuxt.js(ϨϯμϦϯάαʔό)΁Ҡߦ

Slide 41

Slide 41 text

Ҡߦखॱ • طଘUIΛ࣮֬ʹҠߦͤ͞Δ • େ෯ͳUI/UXͷվम͸ؚΊͳ͍ • ϖʔδຖʹύε(URL)ϕʔεͰLBͰৼΓ෼͚Δ • ࣾ಺޲͚ϦϦʔε ⇢ Dog Fooding ⇢ Ұൠެ։

Slide 42

Slide 42 text

։ൃମ੍ • ΤϯδχΞ: 3໊ • σβΠφʔ: 2໊(ଞϓϩδΣΫτͱ݉຿) • ि1ͰMTG • ৘ใڞ༗͸Crowi(ࣾ಺Wiki)Ͱ

Slide 43

Slide 43 text

ۤ࿑ϙΠϯτ • ฒߦͯ͠ݱߦ൛(Angular.js)ͷվम͸ผνʔϜ Ͱ೔ʑଓ͍͍ͯΔ • Ҡߦ͕׬શʹ׬ྃ͢Δ·Ͱೋॏϝϯς

Slide 44

Slide 44 text

2018೥11݄3೔ஈ֊Ͱͷਐḿ ͓͢͢ΊҰཡ ݕࡧ https://note.mu/recommend_nuxt https://note.mu/search_nuxt ຊ൪Քಇத (υοάϑʔσΟϯά༻ͷΤΠϦΞε)

Slide 45

Slide 45 text

2018೥11݄3೔ஈ֊Ͱͷਐḿ هࣄৄࡉ https://note.mu/notedemo/n/n81f8264b9b9e ຊ൪Քಇத (σϞ༻ΞΧ΢ϯτͷΈ)

Slide 46

Slide 46 text

2018೥11݄3೔ஈ֊Ͱͷਐḿ • શମͷن໛ײ • ίϯϙʔωϯτ਺: 216 • LOC: 43672 • *.vue: 36153 • *.js: 6823 • *.scss: 696 more... (2018/4 ~)

Slide 47

Slide 47 text

ݱ࣌఺Ͱͷ ύϑΥʔϚϯεൺֱ

Slide 48

Slide 48 text

Lighthouseͷൺֱ Angular.js൛ Nuxt.js൛

Slide 49

Slide 49 text

WebPageTestͷൺֱ Angular.js൛ Nuxt.js൛ ৚݅ From: Tokyo, Japan - EC2 - Chrome - Emulated iPhone X - 3GFast - Mobile Start Render = ϨϯμϦϯά͕։࢝͞ΕΔ·Ͱʹ͔͔Δ࣌ؒ Speed Index = ίϯςϯπ͕໨ʹݟ͑Δঢ়ଶʹͳΔ·Ͱͷ࣌ؒ

Slide 50

Slide 50 text

·ͩ·ͩຬ଍Ͱ͖Δ ϨϕϧͰ͸ͳ͍͕ ࣮֬ʹΧΠθϯ͍ͯ͠Δ

Slide 51

Slide 51 text

ࠓ೔͓࿩͢Δ͜ͱ 1. Nuxt.jsҠߦͷϞνϕʔγϣϯ  2. Nuxt.js΁ͷҠߦܭը  3. ઃܭɾ࣮૷ͷτϐοΫ  4. ·ͱΊ

Slide 52

Slide 52 text

͓඼ॻ͖ • ։ൃ؀ڥ • ίϯϙʔωϯτઃܭ • ϢχόʔαϧJavaScript • ϑΝΠϧαΠζͷѹॖ • Polyﬁll • Infrastructure

Slide 53

Slide 53 text

։ൃ؀ڥ

Slide 54

Slide 54 text

։ൃ؀ڥ • Nuxt.js v2.2.0 • Jest • ESLint (vue/recommended) • Prettier • CircleCI • Sentry 

Slide 55

Slide 55 text

ίϯϙʔωϯτઃܭ

Slide 56

Slide 56 text

Angular.js൛ͷίϯϙʔωϯτ • directiveΛར༻͠ɺίϯϙʔωϯτϕʔεͰ ։ൃ • ཻ౓ʹϧʔϧ͕ͳ͍ • ཻ౓͸࣮૷ऀͷԘക • ނʹॏෳίʔυ͕ࢄࡒ • props(scope)ͷόέπϦϨʔ͕ਏ͍ Կ͔͠Βͷ࢓૊Έͱϧʔϧ͕ཉ͍͠

Slide 57

Slide 57 text

Vuex & AtomicDesign

Slide 58

Slide 58 text

Vuexͷओͳϧʔϧ • ϞδϡʔϧϞʔυΛ࠾༻ • mutaions/actions/getttersͷλΠϓʹ͸ఆ਺Λ࢖༻ • grepability • ΤσΟλͷิ׬ • ετΞʹঢ়ଶΛ࣋ͨͤΔ͔Ͳ͏͔ͷ൑அج४ A. ίϯϙʔωϯτΛ௒͑ͯڞ༗͍ͨ͠΋ͷ͕͋Δ  (͍ΘΏΔόέπϦϨʔରࡦ) B. Serviceత(ॲཧΛ·ͱΊΔ)ͳ࢖͍ํ C. APIݺͼग़͠

Slide 59

Slide 59 text

ঢ়ଶ؅ཧʹடং͕

Slide 60

Slide 60 text

VuexϞδϡʔϧͷංେԽ໰୊ 845ߦ....

Slide 61

Slide 61 text

Nuxt.js v2.0.0

Slide 62

Slide 62 text

VuexϞδϡʔϧͷϦϑΝΫλ • ͓खܰʹݟ௨͠ྑ͘͢Δ͜ͱ͕Ͱ͖Δ • ංେԽ͢Δͷ͸ॲཧ͕ूத͢Δactions • ߃ٱతʹ͸ػೳ୯ҐͰϞδϡʔϧ෼ׂ  Ͱ͖ͳ͍͔ݕ౼ 461ߦ

Slide 63

Slide 63 text

Atomic Designͱ͸ ίϯϙʔωϯτΛ̑ͭͷϨΠϠʔʹ෼ྨ͠ ίϯϙʔωϯτͷ૊Έ߹ΘͤͰ ϖʔδΛߏ੒͍ͯ͘͠ઃܭख๏ • Atomic Design http://atomicdesign.bradfrost.com/

Slide 64

Slide 64 text

σΟϨΫτϦߏ੒

Slide 65

Slide 65 text

࠷ॳ͸ͱʹ͔͘ख୳Γ શһͰίϯϙʔωϯτ෼͚ͯ͠ೝࣝΛͦΖ͑Δ

Slide 66

Slide 66 text

Atomsͷϧʔϧ • ಺෦ʹଞͷίϯϙʔωϯτΛؚ·ͳ͍ • ࠶ར༻ੑΛՃຯ • Stateless • VuexϞδϡʔϧ΁ͷࢀরېࢭ • σʔλͷ఻೻͸emit

Slide 67

Slide 67 text

Moleculesͷϧʔϧ • ಺෦ʹAtomsҎ֎ͷίϯϙʔωϯτΛؚ·ͳ͍ • ࠶ར༻ੑΛՃຯ • Statelessਪ঑ ▪ ঢ়گʹΑͬͯlocal state(data)͸Մ • VuexϞδϡʔϧ΁ͷࢀরېࢭ • σʔλͷ఻೻͸emit

Slide 68

Slide 68 text

Organismsͷϧʔϧ • ಺෦ʹOrganismsҎ্ͷίϯϙʔωϯτΛؚ· ͳ͍ʢਪ঑ʣ • ࠶ར༻ੑ͸Ճຯ͠ͳͯ͘΋ྑ͍ • StatefulͰ΋Α͍ • VuexϞδϡʔϧΛࢀরͰ͖Δ

Slide 69

Slide 69 text

෼ྨͨ͠ίϯϙʔωϯτͷҰྫ Atoms Molecules Organisms

Slide 70

Slide 70 text

ΠϯεύΠΞ Atomic Design ʙݎ࿚Ͱ࢖͍΍͍͢UIΛޮ཰ྑ͘ઃܭ͢Δ https://www.amazon.co.jp/dp/B07CJ5TLK2/ Vue.js ͔ΒΈͨ AtomicDesign https://medium.com/@t_sugawara/vue-js- %E3%81%8B%E3%82%89%E3%81%BF%E3%81%9F-atomicdesign- e90517842801

Slide 71

Slide 71 text

Atomic DesignͷಋೖޮՌ • ֤ϨΠϠʔͷ੹຿͕͋Δఔ౓໌֬ʹ • ֤ϨΠϠʔʹ໊শ͕͋Δ͜ͱͰίϛϡχέʔγϣ ϯ͕ԁ׈ʹ ͜Εͬͯ.PMFDVMFTͰ ͋Δ΂͖͡Όͳ͍ʁ ͏ʔΜɺOrganisms Ͱ΋Αͦ͞͏͚ͩͲ

Slide 72

Slide 72 text

ίϯϙʔωϯτͷࢹೝੑ໰୊ ୭΋೺ѲͰ͖͓ͯΒͣ

Slide 73

Slide 73 text

Storybook https://storybook.js.org/

Slide 74

Slide 74 text

ίϯϙʔωϯτͷՄࢹԽ • Ұ౓࠳ંͨ͠աڈ • Nuxt.jsͱͷઃఆपΓͷޓ׵ੑ • ֤ίϯϙʔωϯτͷमਖ਼ʹ߹Θͤͯετʔ ϦʔΛϝϯςφϯε͢Δͷ͕େม • VuexϞδϡʔϧ΍௨৴पΓͷελϒԽ

Slide 75

Slide 75 text

ίϯϙʔωϯτͷՄࢹԽ • Ұ౓࠳ંͨ͠աڈ • Nuxt.jsͱͷઃఆपΓͷޓ׵ੑ • ֤ίϯϙʔωϯτͷमਖ਼ʹ߹Θͤͯετʔ ϦʔΛϝϯςφϯε͢Δͷ͕໘౗ • VuexϞδϡʔϧ΍௨৴पΓͷελϒԽ Nuxt.jsͱͷઃఆपΓͷޓ׵ੑ Storybook v4.0.0͸ Nuxt.js v2Ͱ͍͚Δ • ετʔϦʔΛϝϯςφϯε͢Δͷ͕େม • VuexϞδϡʔϧ΍௨৴पΓͷελϒԽ ର৅ΛAtomsͱMoleculesʹߜΔ

Slide 76

Slide 76 text

ग़དྷ্͕ͬͨStorybook ڧ͍ؾ࣋ͪΛ΋ͬͯ΍͍ͬͯͧ͘

Slide 77

Slide 77 text

ϢχόʔαϧJavaScript

Slide 78

Slide 78 text

ϢχόʔαϧJavaScriptͱ͸ • ΫϥΠΞϯτʢϒϥ΢βʣͱαʔό ʢNode.jsʣͷͲͪΒͰ΋࣮ߦͰ͖Δίʔυ • SSRʹ͓͍ͯ͸ରԠඞਢ

Slide 79

Slide 79 text

SSR࣌ʹwindow, document͕ undeﬁned • DBʹอଘ͞ΕͨهࣄͷHTML ΛΫϥΠΞϯτͰDOMૢ࡞ ▪ document.xxx࢖ͬͯΔ • ↑Λv-htmlͰల։ ⾠هࣄϖʔδͰ࣮ࡍʹى͖ͨ໰୊ ίί

Slide 80

Slide 80 text

SSR࣌ʹwindow, document͕ undeﬁned DOMͷAPIͱޓ׵ੑͷ͋ΔHTMLύʔα jsdom/jsdom https://github.com/jsdom/jsodom

Slide 81

Slide 81 text

SSR࣌ʹwindow, document͕ undeﬁned

Slide 82

Slide 82 text

ແࣄSSR͕Ͱ͖ͨ

Slide 83

Slide 83 text

SSRͷϥΠϑαΠΫϧ ੺࿮͸αʔόɺϒϥ΢βͲͪΒ΋௨ա͢Δ  (ϢχόʔαϧରԠ͕ඞཁͳ)෦෼

Slide 84

Slide 84 text

ϑΝΠϧαΠζͷѹॖ

Slide 85

Slide 85 text

bundleϑΝΠϧͷ෼ੳ OVYUCVJMEBOBMZ[F

Slide 86

Slide 86 text

෼ੳ݁ՌΛड͚ͯ • highlight.js • codeͷγϯλοΫεϋΠϥΠτʹར༻ • શ෦ೖΓͩͱ700KBͱ͔ͳΓͷॏྔڃ • ରԠݴޠΛߜͬͯ57KBʹ • moment.js • λΠϜκʔϯͷߟྀ͸ෆཁͩͬͨͷͰܰྔͳdate-fns΁ • dayjs͸͞ΒʹܰྔͳͷͰͦͪΒͰ΋ྑ͍͔΋? • lodash.js • PolyﬁllͰे෼ΧόʔͰ͖ͦ͏ͳͷͰআ֎༧ఆ 

Slide 87

Slide 87 text

Polyﬁll

Slide 88

Slide 88 text

Polyﬁll.io  https://polyﬁll.io

Slide 89

Slide 89 text

Polyfill.ioͱ͸ • UserAgentຖʹඞཁͳPolyﬁll͚ͩΛ·ͱΊͯฦ ͯ͘͠ΕΔ • ඞཁͳPolyﬁll͸ΦϓγϣϯͰࡉ͔͘ௐ੔Մೳ • Fastly(CDN)͔Β഑৴͞ΕΔͷͰඇৗʹߴ଎

Slide 90

Slide 90 text

Polyfill.ioͱ͸

Slide 91

Slide 91 text

࠾༻ͷϞνϕʔγϣϯ • ΋ͱ΋ͱ͸babel-preset-envͰઃఆ͍ͯͨ͠ • ϒϥ΢βຖͷAPIରԠঢ়گΛ஫ࢹͯ͠؅ཧ͢Δ ͷ͸खؒ

Slide 92

Slide 92 text

e.g. ChromeͱSafariͷPolyﬁll Chrome/69.0.3497.1 Safari/605.1.15

Slide 93

Slide 93 text

Infrastructure

Slide 94

Slide 94 text

Nuxt on Lambda

Slide 95

Slide 95 text

AWS Lambda • αʔόͷϓϩϏδϣχϯάͳ͠ͰίʔυΛ࣮ߦ • Function as a Service • ରԠݴޠ: Node.js, Python, Go, Java, C# • ಛఆͷΠϕϯτΛτϦΨʔͱ࣮ͯ͠ߦՄೳ • ϦΫΤετ਺ʹԠͯ͡ΦʔτεέʔϦϯά • ैྔ՝ۚ

Slide 96

Slide 96 text

Serverless Framework • ߏ੒؅ཧ΍σϓϩΠΛ୲͏ • ΤίγεςϜ(plugin)͕๛෋ • AWSͷଞɺAzure Functions, Google Cloud Functionʹ΋ରԠ͍ͯ͠Δ

Slide 97

Slide 97 text

࠾༻ͷϞνϕʔγϣϯ • ౰ॳ͸EC2 + Node.js + pm2Ͱӡ༻͍ͯͨ͠ ◦ Node.jsͷӡ༻ϊ΢ϋ΢0 ◦ Կ౓͔ಥવpm2͕མͪͨΓͱෆ҆Λ๊͍͑ͯͨ ◦ AWS LambdaͷػӡͰ͸ʁͱ͍͏ࡶஊ͔Βελʔτ

Slide 98

Slide 98 text

ͬ͘͟ΓLambda্ͷಈ࡞ͷ࢓૊Έ • awslabs/aws-serverless-express Λར༻͠  expressΛಈ͔͢ • Nuxt.jsΛexpressͷmiddlewareͱͯ͠ಈ͔͢ • ref: API: nuxt.render(req, res)

Slide 99

Slide 99 text

ৄ͘͠͸mya-ake͞ΜͷϒϩάͰ Nuxt.js on AWS Lambda with Serverless Framework  https://mya-ake.com/posts/nuxtjs-on-aws-lambda

Slide 100

Slide 100 text

αʔόߏ੒ https://note.mu/recommend https://note.mu/recommend_nuxt

Slide 101

Slide 101 text

ӡ༻͸ָʹͳΔ …͕͍͔ͭ͘τϨʔυΦϑ΋

Slide 102

Slide 102 text

τϨʔυΦϑ • Node.jsͷversion͕Lambdaʹґଘͯ͠͠·͏ • ݱঢ়͸v8.10.0 • Nuxt.jsͷ࠷৽versionʹ௥ैͰ͖ͳ͘ͳΔՄೳੑ • LambdaʹσϓϩΠग़དྷΔύοέʔδ༰ྔͷ  ࠷େ͕50MB • ݱ࣌఺Ͱ32MB • cold start໰୊ʹΑΔϨΠςϯγͷѱԽ

Slide 103

Slide 103 text

ࠓ೔͓࿩͢Δ͜ͱ 1. Nuxt.jsҠߦͷϞνϕʔγϣϯ  2. Nuxt.js΁ͷҠߦܭը  3. ઃܭɾ࣮૷ͷτϐοΫ  4. ·ͱΊ

Slide 104

Slide 104 text

·ͱΊ • ϝϦοτ • طଘͷݴޠ΍ϑϨʔϜϫʔΫͷ੍໿ʹറ ΒΕͳ͍ • υοάϑʔσΟϯά͕༰қʹͰ͖Δ • ϩʔϧόοΫ͕༰қʹͰ͖Δ • σϝϦοτ • ׬શҠߦ͢Δ·Ͱ͸2ॏϝϯςʹͳΓ͏Δ ύε(URL)ϕʔεͰখ͘͞Ҡߦ͢Δͷ͸༗ޮ

Slide 105

Slide 105 text

·ͱΊ • SSR͕ඞཁͳΒಋೖ͠ͳ͍ख͸ͳ͍ • ಋೖ͸؆୯ֶ͕ͩश/ӡ༻ίετ͸͕͋Δ • ϢχόʔαϧରԠ • Node.jsͷӡ༻ • τϨʔυΦϑ͕ڐ༰Ͱ͖ΔͳΒAWS Lambda͸༗༻ • SSR͕ຊ౰ʹඞཁ͔Ͳ͏͔͸ཁݕ౼ • SPAϞʔυ (mode: ‘spa’) • ੩తαΠτ (nuxt generate) SSRͷಋೖ͸ຊ౰ʹ؆୯

Slide 106

Slide 106 text

·ͱΊ • ίετΛ͔͚ͣʹϞμϯͳ։ൃ؀ڥ͕खʹೖΔ  ⇢ ͙͢ʹ૸Γग़ͤΔ • ᙱ͍ͱ͜Ζʹख͕ಧ͘ͷͰؾ࣋ͪΑ͘ίʔυΛ ॻ͚Δ ⇢ ຊ࣭తͳ։ൃʹूதͰ͖Δ • Vuexͷऔѻ΍ίϯϙʔωϯτͷཻ౓ͳͲ Nuxt.js͕ؔ༩͠ͳ͍෦෼ͷϧʔϧࡦఆ͸ผ్ ඞཁ ؀ڥج൫ͷαϙʔτɺن໿͕ඇৗʹڧྗ

Slide 107

Slide 107 text

՝୊఺ • ॳظදࣔ଎౓ͷ஗͞ • εϖοΫͷ௿͍୺຤Ͱݦஶʹ • ٕज़త੍໿ • Angular.js1ܥ͸SSRΛαϙʔτ͍ͯ͠ͳ͍ • Railsͷ্ʹ৐ͬͨϑϩϯτΤϯυ • ٕज़తෛ࠴ • ίʔσΟϯάن໿ • ίϯϙʔωϯτઃܭ ॳظදࣔ଎౓ͷ஗͞ ٕज़త੍໿ ٕज़తෛ࠴ Nuxt.jsʹཔΕΔ෦෼ͱ͍͏ ҙຯͰ͸˓ɻΩϟογϡͱ͔ը ૾ͷ࠷దԽͱ͔… ViewΛRails͔Β੾Γ཭͠ɺ Nuxt.js(Vue.js)ʹΑΓϞμϯͳ ؀ڥΛ࣮ݱɻ Nuxt.jsʹΑΓن໿Λɻ VuexͱAtomic DesignʹΑΓઃܭ ϧʔϧΛɻ ݱ࣌఺ͰͷධՁ

Slide 108

Slide 108 text

·ͱΊ ࠾༻ͯ͠Α͔ͬͨ ʙ note Nuxt.jsҠߦνʔϜҰಉ ʙ

Slide 109

Slide 109 text

ϦϦʔεϊʔτެ։த URL: https://note.mu/noteeng/m/me7637ba82821 RSS: https://note.mu/noteeng/m/me7637ba82821/rss

Slide 110

Slide 110 text

͋Γ͕ͱ͏͍͟͝·ͨ͠ ΤϯδχΞืूͯ͠·͢ ٸ੒௕தͷʮnoteʯͷϑϩϯτΤϯυΛ࡮৽͢ΔΤϯδχΞΛืूʂ https://www.wantedly.com/projects/208206