Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Nuxt.jsで変わる開発フローとUniversal JavaScriptのイマ #jsfes
Potato4d(Hanatani Takuma)
November 18, 2017
Programming
17
5.3k
Nuxt.jsで変わる開発フローとUniversal JavaScriptのイマ #jsfes
2017.11.18 HANATANI Takuma(@potato4d) #jsfes
Potato4d(Hanatani Takuma)
November 18, 2017
Tweet
Share
More Decks by Potato4d(Hanatani Takuma)
See All by Potato4d(Hanatani Takuma)
potato4d
9
3.5k
potato4d
21
4.4k
potato4d
0
410
potato4d
8
2.4k
potato4d
8
2k
potato4d
38
17k
potato4d
5
2.2k
potato4d
11
2.8k
potato4d
1
1.6k
Other Decks in Programming
See All in Programming
hr01
0
1.9k
ajstarks
2
760
dora1998
0
170
bkuhlmann
2
330
ganchan11
0
160
ickx
3
640
kilometer
2
250
progate
2
500
doyaaaaaken
1
330
yusuke57
0
120
daiki_0816
0
170
tooppoo
1
460
Featured
See All Featured
revolveconf
201
9.7k
chriscoyier
146
20k
cromwellryan
104
6.3k
shpigford
370
42k
edds
56
9.4k
mojombo
359
62k
cassininazir
347
20k
malarkey
119
16k
keavy
107
14k
ufuk
56
5.5k
deanohume
294
28k
malarkey
392
61k
Transcript
)"/"5"/*5BLVNB !QPUBUPE KTGFT /VYUKTͰมΘΔ։ൃϑϩʔͱ 6OJWFSTBM+BWB4DSJQUͷΠϚ
ࠓ͢͜ͱ • ࣗݾհ • UniversalͳΞϓϦέʔγϣϯͷΠϚͱNext/Nuxt • Nuxt.jsͰ৽ͨʹ࣮ݱՄೳͱͳͬͨ͜ͱ • ϫʔΫϑϩʔͷվֵπʔϧͱͯ͠ͷ Nuxt.js
ࣗݾհ
ࣗݾհ )"/"5"/*5BLVNB • a.k.a. @potato4d • 1998/04/13 • ϑϦʔϥϯε •
Programming • JavaScript(Vue, React), PHP(Plain, Laravel, Cake3) • Nuxt.js ࣄͰͬͯ·͢ʂ • jp.vuejs.org translator • FRONTEND CONFERENCE 2017 Organizer
13
Vue.jsϑϨʔϜϫʔΫNuxt.jsͰ͡ΊΔUniversalΞϓϦέʔγϣϯ։ൃ https://html5experts.jp/potato4d/24346/
ٕज़ॻయ3৽ץʮ͍ͬͯ͘߹ಉࢽʯ by pentapoid https://pentapod.booth.pm/items/667201
͍͔ͨͷ ࣮։ൃͷ ֓೦ͷ ࠓίί
6OJWFSTBMͳΞϓϦέʔγϣϯͷΠϚ
8IBU`T6OJWFSTBM
6OJWFSTBMੲͰݴ͏ͱ͜Ζͷ*TPNPSQIJD Ұੲલʹ44341"ͱͯ͠ʮ*TPNPSQIJDʯͱݺΕ͍ͯͨ֓೦͕ɺʮ6OJWFSTBMʯʹܗΛม͑ͨ
ΠϚυΩͷ6OJWFSTBMࣄ
ΠϚυΩͷ։ൃͰ443ࣗ࡞͠ͳ͍͜ͱ͕ଟ͍
ैདྷܕͷ443γεςϜ // Command $ npm start // Program … import
{ renderToString } from 'react-dom/server' … res.status(200).send(renderToString(ReactEl)); // Deps - Express - React - ReactDOM ReactDomϕʔεͰͷϨϯμϦϯά + ExpressͳͲͷFwͱͷ࿈ܞͰ࣮ݱ ΠϚυΩͷ։ൃͰSSRࣗ࡞͠ͳ͍͜ͱ͕ଟ͍
ैདྷܕͷ443γεςϜ // Command $ npm start // Program … const
renderer = require('vue-server- renderer').createRenderer() const { renderToString } = renderer … res.status(200).send(renderToString(VueEl)) // Deps - vue - vue-server-renderer - express vue-server-rendererͰͷϨϯμϦϯά + ExpressͳͲͷFwͱͷ࿈ܞͰ࣮ݱ ΠϚυΩͷ։ൃͰSSRࣗ࡞͠ͳ͍͜ͱ͕ଟ͍
ίΞͱͯ͠ఏڙ͞Ε͍͕ͯͨࡶ ׂΓͱDirtyͳ࡞ۀΛؤுͬͯߦ͍ͬͯͨ࣌
ΠϚυΩͷ443γεςϜ // Command $ npm start // Program /* ͳ͠(!)
*/ // Deps - next Next.jsʹશʹͤΔ ΠϚυΩͷ։ൃͰSSRࣗ࡞͠ͳ͍͜ͱ͕ଟ͍
ΠϚυΩͷ443γεςϜ // Command $ npm start // Program /* ͳ͠(!)
*/ // Deps - nuxt Nuxt.jsʹશʹͤΔ ΠϚυΩͷ։ൃͰSSRࣗ࡞͠ͳ͍͜ͱ͕ଟ͍
ϑϨʔϜϫʔΫຖʹઐ༻ͷ443ରԠϥΠϒϥϦΛ͏࣌ 3FBDU/FYUɺ7VFͳΒ/VYUͱɺ443ʮ࡞ΔϞϊʯ͔Βʮࣗવͱ͍ͭͯ͘ΔϞϊʯʹɻ
None
8IBU`T/VYU
/VYUKT443ͷͨΊͷϑϨʔϜϫʔΫʁ
ͦΕ͚ͩͰͳ͍
Nuxt.js ʹ͍ͭͯ 7VF։ൃΛࢧԉ͢ΔϑϩϯτΤϯυϑϨʔϜϫʔΫ w 7VF୯ମͰߏங͕ࡶͳػೳΛ·ͱΊͯఏڙ͢Δ w XFCQBDLϕʔεͷd&4จ๏ͷαϙʔτ w WVFϑΝΠϧϕʔεͷจ๏ͷαϙʔτ w
4FSWFS4JEF3FOEFSJOH 443 Τϯδϯͷఏڙ w 44341"Ͱ6OJWFSTBMͳϧʔςΟϯάͷఏڙ w 7VFYετΞɾϓϥάΠϯɾϛυϧΣΞʹରԠ͠ ͨϓϩδΣΫτߏͷఏڙ w FUDʜ
npmtrends͔Βݟ͑Δ৳ͼ http://www.npmtrends.com/nuxt
ެࣜͷϑϧηοτςϯϓϨʔτͷྫ https://github.com/nuxt-community/starter-template
جຊΛ่͞ͳ͍ͳ͕Βɺᙱ͍ͱ͜Ζʹख͕ಧ͘ 7VFͷͨΊͷ૯߹։ൃࢧԉπʔϧηοτ
Nuxt.js ʹ͍ͭͯ /VYUKTΛར༻͢Δͱʜʜ w ϑϩϯτΤϯυจԽͷڭͷ͛ͱͳΔຊ࣭తͰͳ ͍จԽΛదʹӅṭͰ͖Δ w ͍ͭͰΦϯɾΦϑՄೳͳ443ΤϯδϯΛࡌͯ͠ ͍Δ͜ͱʹΑͬͯকདྷతͳ֦ுʹରԠ͍ͯ͠Δ w
/VYUKT͚ͩͷಛͱͯ͠ɺ443લఏͷ41"Λ੩తα Πτͱͯ͠ॻ͖ग़͢͜ͱ͕Ͱ͖Δ
Nuxt.js ʹ͍ͭͯ ͜Ε·Ͱ׆༻Ͱ͖ͳ͔ͬͨྖҬͰ 41"ͷٕज़Λ੩తαΠτʹରͯ͠ར༻Ͱ͖ɺ 41"։ൃͷྖҬͰ443Τϯδϯͱͯ͠׆༻Ͱ͖Δ ͜Ε·Ͱͷ443ͱ41"ͷ͚ͩͷੈք͔Β֎Εͨ ৽͍͠6OJWFSTBMΞϓϦέʔγϣϯͷܗΛఏڙ͢Δ
/VYUKTͰ৽ͨʹ࣮ݱՄೳͱͳͬͨ͜ͱ
Nuxt͕։͢Δੈք w ࢥ͍ࢥ͍ͷύλʔϯͰ·Ε͍ͯͨ7VFϓϩδΣΫτͷجຊͷ౷ҰԽ w ͜Ε·Ͱ͍ΘΏΔʮ੩తαΠτδΣωϨʔλʯ͕ߦ͖ͬͯͨྖҬͷ࡞ۀ w 4&0߹ͳͲͰ͜Ε·ͰچདྷܕͷίʔσΟϯάΛ͍ͯͨ͠ྖҬͷ࡞ۀ
Nuxt͕։͢Δੈք w ࢥ͍ࢥ͍ͷύλʔϯͰ·Ε͍ͯͨ7VFϓϩδΣΫτͷجຊͷ౷ҰԽ w ͜Ε·Ͱ͍ΘΏΔʮ੩తαΠτδΣωϨʔλʯ͕ߦ͖ͬͯͨྖҬͷ࡞ۀ w 4&0߹ͳͲͰ͜Ε·ͰچདྷܕͷίʔσΟϯάΛ͍ͯͨ͠ྖҬͷ࡞ۀ
ैདྷͷίʔσΟϯάݱͷͭΒ͞ ଏʹݴ͏SPA͞Μͳੈք؍ ଏʹݴ͏Web੍࡞ͳੈք؍ - ೝূલఏͳੈքͳͷͰSEOෆཁ - ඞཁʹͳͬͯΑ͏͘SSRΛݕ౼Ͱྑ͍ - શମతͳϓϩάϥϛϯάεΩϧߴ͍ -
Ͱ͖Δ͔͗ΓίʔσΟϯάۀϝΠϯ ʹਾ͑ͨ͘ͳ͍ - จݴSEO/OGPඇৗʹॏཁ - ൺֱతJSπʔϧͷཧղ͕ઙ͍ਓΛ ରͱͨ͠ΤίγεςϜͷܗ - ϓϩάϥϛϯάతͳཁૉബ͍͕ଟ͍
ैདྷͷίʔσΟϯάݱͷͭΒ͞ ଏʹݴ͏SPA͞Μͳੈք؍ ଏʹݴ͏Web੍࡞ͳੈք؍ - ೝূલఏͳੈքͳͷͰSEOෆཁ - ඞཁʹͳͬͯΑ͏͘SSRΛݕ౼Ͱྑ͍ - શମతͳϓϩάϥϛϯάεΩϧߴ͍ -
Ͱ͖Δ͔͗ΓίʔσΟϯάۀϝΠϯ ʹਾ͑ͨ͘ͳ͍ - จݴSEO/OGPඇৗʹॏཁ - ൺֱతJSπʔϧͷཧղ͕ઙ͍ਓΛ ରͱͨ͠ΤίγεςϜͷܗ - ϓϩάϥϛϯάతͳཁૉബ͍͕ଟ͍ SPA͞Μ͕ίʔσΟϯάΛ͢Δඞཁੑͷൃੜ
ैདྷͷίʔσΟϯάݱͷͭΒ͞ ଏʹݴ͏SPA͞Μͳੈք؍ ଏʹݴ͏Web੍࡞ͳੈք؍ - ೝূલఏͳੈքͳͷͰSEOෆཁ - ඞཁʹͳͬͯΑ͏͘SSRΛݕ౼Ͱྑ͍ - શମతͳϓϩάϥϛϯάεΩϧߴ͍ -
Ͱ͖Δ͔͗ΓίʔσΟϯάۀϝΠϯ ʹਾ͑ͨ͘ͳ͍ - จݴSEO/OGPඇৗʹॏཁ - ൺֱతJSπʔϧͷཧղ͕ઙ͍ਓΛ ରͱͨ͠ΤίγεςϜͷܗ - ϓϩάϥϛϯάతͳཁૉബ͍͕ଟ͍ SPA͞Μ͕ίʔσΟϯάΛ͢Δඞཁੑͷൃੜ ɾίϯϙʔωϯτࢤͰΜͰ͓͖͍ͨ ɾGulp + pug + …Έ͍ͨͳߏΛߋ৽͍ͨ͠ ɾϩδοΫ͕ඞཁͳՕॴFwΛ͍͍ͨ
ैདྷͷίʔσΟϯάݱͷͭΒ͞ ଏʹݴ͏SPA͞Μͳੈք؍ ଏʹݴ͏Web੍࡞ͳੈք؍ - ೝূલఏͳੈքͳͷͰSEOෆཁ - ඞཁʹͳͬͯΑ͏͘SSRΛݕ౼Ͱྑ͍ - શମతͳϓϩάϥϛϯάεΩϧߴ͍ -
Ͱ͖Δ͔͗ΓίʔσΟϯάۀϝΠϯ ʹਾ͑ͨ͘ͳ͍ - จݴSEO/OGPඇৗʹॏཁ - ൺֱతJSπʔϧͷཧղ͕ઙ͍ਓΛ ରͱͨ͠ΤίγεςϜͷܗ - ϓϩάϥϛϯάతͳཁૉബ͍͕ଟ͍ SPA͞Μ͕ίʔσΟϯάΛ͢Δඞཁੑͷൃੜ ɾSEOతʹJS-Fw͑ͳ͍ ɾES2015ࣝͷนɾελοΫͷॏ͞ ɾલఏπʔϧ͕ଟ͗͢ΔͷͰΤΰʹͳΓ͕ͪ ɾSSR͢Δ΄Ͳίετ͔͚ΒΕͳ͍
NuxtͰগͣͭ͠վળ͍ͯ͘͠ݱ ଏʹݴ͏SPA͞Μͳੈք؍ ଏʹݴ͏Web੍࡞ͳੈք؍ - ೝূલఏͳੈքͳͷͰSEOෆཁ - ඞཁʹͳͬͯΑ͏͘SSRΛݕ౼Ͱྑ͍ - શମతͳϓϩάϥϛϯάεΩϧߴ͍ -
Ͱ͖Δ͔͗ΓίʔσΟϯάۀϝΠϯ ʹਾ͑ͨ͘ͳ͍ - จݴSEO/OGPඇৗʹॏཁ - ൺֱతJSπʔϧͷཧղ͕ઙ͍ਓΛ ରͱͨ͠ΤίγεςϜͷܗ - ϓϩάϥϛϯάతͳཁૉബ͍͕ଟ͍
NuxtͰগͣͭ͠վળ͍ͯ͘͠ݱ ଏʹݴ͏SPA͞Μͳੈք؍ ଏʹݴ͏Web੍࡞ͳੈք؍ - ೝূલఏͳੈքͳͷͰSEOෆཁ - ඞཁʹͳͬͯΑ͏͘SSRΛݕ౼Ͱྑ͍ - શମతͳϓϩάϥϛϯάεΩϧߴ͍ -
Ͱ͖Δ͔͗ΓίʔσΟϯάۀϝΠϯ ʹਾ͑ͨ͘ͳ͍ - จݴSEO/OGPඇৗʹॏཁ - ൺֱతJSπʔϧͷཧղ͕ઙ͍ਓΛ ରͱͨ͠ΤίγεςϜͷܗ - ϓϩάϥϛϯάతͳཁૉബ͍͕ଟ͍ SPA͞Μ͕ίʔσΟϯάΛ͢Δඞཁੑͷൃੜ
NuxtͰগͣͭ͠վળ͍ͯ͘͠ݱ ଏʹݴ͏SPA͞Μͳੈք؍ ଏʹݴ͏Web੍࡞ͳੈք؍ - ೝূલఏͳੈքͳͷͰSEOෆཁ - ඞཁʹͳͬͯΑ͏͘SSRΛݕ౼Ͱྑ͍ - શମతͳϓϩάϥϛϯάεΩϧߴ͍ -
Ͱ͖Δ͔͗ΓίʔσΟϯάۀϝΠϯ ʹਾ͑ͨ͘ͳ͍ - จݴSEO/OGPඇৗʹॏཁ - ൺֱతJSπʔϧͷཧղ͕ઙ͍ਓΛ ରͱͨ͠ΤίγεςϜͷܗ - ϓϩάϥϛϯάతͳཁૉബ͍͕ଟ͍ SPA͞Μ͕ίʔσΟϯάΛ͢Δඞཁੑͷൃੜ ɾ੩తॻ͖ग़͠ʹΑͬͯSEOղফ ɾES࣌ͷࣝ࠷ݴޠจ๏͚ͩͰOK ɾඞཁͳπʔϧҰͭͷΈͰ͍݁ͯ͠Δ ɾSSRͦͦෆཁ
/VYU੍࡞ͷݱ͢Β ม͑ͯΏ͘ϙςϯγϟϧΛ͍ͬͯΔ
ϫʔΫϑϩʔͷվֵπʔϧͱͯ͠ͷ/VYUKT
ʮ/VYUKT443ͷπʔϧͰͳ͘ɺ7VF͚ͷ૯߹։ൃπʔϧʯ ඞཁͳͷ͕ेʹἧ͓ͬͯΓɺ͔ͭաෆͳ্͕͍ͬͯ͘Δ
ʮ/VYU443αΠτ͔Β੩తαΠτ·Ͱ෯͍έʔεʹରԠʯ શͳ੩తαΠτɺہॴతʹ443ɺશͯ443લఏͱࡉ͔ͳέʔεΛΘͳ͍ɹ
/VYUKTʮڧྗͳϞμϯϑϩϯτΤϯυԽఏҊπʔϧʯͱͳΔ ΞϓϦέʔγϣϯ͚ͩͰͳ͘ɺ8FCϖʔδͱ͍͏8FCͷຊདྷͷׂͷੈք؍Ͱ׆͖͍ͯ͘
/VYUΛಋೖπʔϧͱͯ͠׆༻͍ͯ͘͠
͍͠ͱ͖ͦ͜׆༻͍ͯ͘͠ w ͱ͍͑େ৽͍ٕ͠ज़ͳͷͰ1SPEVDUJPOʹೖΕΔʹۤ࿑͕͋Δ w ͔͠͠ɺϑϩϯτΤϯυͷാͷਓؒͰ͋ΕϞμϯ+4ͷྲّྀʹͷΔͱੜ࢈ ੑ্͕͕Δͷ࣮֬ w ͍͠ͱ͖ͦ͜ɺಥ؏ࣄͷγʔϯͰരͰՌΛ͋͛ͯঃʑʹ৵৯ͯ͠ ͍͘Έ͍ͨͳΓํΛ͍ͬͯ͘ͱྑ͍
ϞμϯJSΛͨΓલʹ w CBCFM͕Θ͔Βͳ͍ɺXFCQBDL͕Θ͔Βͳ͍ͱ͍͏Α͏ͳ൱ఆҙݟΛدͤ ͚ͳ͍ w ίϯϙʔωϯτࢤɺดͨ͡$44ɺϞμϯͳঢ়ଶཧΛͲͷੈքͰσ ϑΝΫτʹ ϑϩϯτΤϯυͷਐԽʹ͍͍ͭͯ͘͜ͱΛ͛ΔཁૉશͯऔΓআ͍͍ͯ͘
/VYUʹΑͬͯʮࠓʯͱʮੲʯ ͲͪΒͷ՝ղܾ͢Δ
Ͳ͜Ͱ௨༻͢Δɺਅʹ6OJWFSTBMͳٕज़
13
ٻॻཧΫϥυʮSeQueueʯ(PHP + Vue.js) https://sequeue.jp/