Nuxt.jsで変わる開発フローとUniversal JavaScriptのイマ #jsfes

2017.11.18 HANATANI Takuma(@potato4d) #jsfes

Transcript

1. 
   )"/"5"/*
   5BLVNB !QPUBUPE
   KTGFT /VYUKTͰมΘΔ։ൃϑϩʔͱ
   6OJWFSTBM
   +BWB4DSJQUͷΠϚ
2. ࠓ೔࿩͢͜ͱ • ࣗݾ঺հ • UniversalͳΞϓϦέʔγϣϯͷΠϚͱNext/Nuxt • Nuxt.jsͰ৽ͨʹ࣮ݱՄೳͱͳͬͨ͜ͱ • ϫʔΫϑϩʔͷվֵπʔϧͱͯ͠ͷ Nuxt.js
3. ࣗݾ঺հ
4. ࣗݾ঺հ )"/"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
6. Vue.js੡ϑϨʔϜϫʔΫNuxt.jsͰ͸͡ΊΔUniversalΞϓϦέʔγϣϯ։ൃ https://html5experts.jp/potato4d/24346/
7. ٕज़ॻయ3৽ץʮ΍͍ͬͯ͘߹ಉࢽʯ by pentapoid https://pentapod.booth.pm/items/667201
8. ࢖͍͔ͨͷ࿩ ࣮஍։ൃͷ࿩ ֓೦ͷ࿩ ࠓ೔͸ίί
9. 6OJWFSTBM
   ͳΞϓϦέʔγϣϯͷΠϚ
10. 8IBU`T
    6OJWFSTBM
11. 6OJWFSTBM
    
    ੲͰݴ͏ͱ͜Ζͷ*TPNPSQIJD Ұੲલʹ44341"ͱͯ͠ʮ*TPNPSQIJDʯͱݺ͹Ε͍ͯͨ֓೦͕ɺʮ6OJWFSTBMʯʹܗΛม͑ͨ
12. ΠϚυΩͷ6OJWFSTBMࣄ৘
13. ΠϚυΩͷ։ൃͰ͸443͸ࣗ࡞͠ͳ͍͜ͱ͕ଟ͍
14. ैདྷܕͷ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͸ࣗ࡞͠ͳ͍͜ͱ͕ଟ͍
15. ैདྷܕͷ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͸ࣗ࡞͠ͳ͍͜ͱ͕ଟ͍
16. ίΞͱͯ͠ఏڙ͞Ε͍͕ͯͨ൥ࡶ ׂΓͱDirtyͳ࡞ۀΛؤுͬͯߦ͍ͬͯͨ࣌୅
17. ΠϚυΩͷ443γεςϜ // Command $ npm start // Program /* ͳ͠(!) */ // Deps - next Next.jsʹ׬શʹ೚ͤΔ ΠϚυΩͷ։ൃͰ͸SSR͸ࣗ࡞͠ͳ͍͜ͱ͕ଟ͍
18. ΠϚυΩͷ443γεςϜ // Command $ npm start // Program /* ͳ͠(!) */ // Deps - nuxt Nuxt.jsʹ׬શʹ೚ͤΔ ΠϚυΩͷ։ൃͰ͸SSR͸ࣗ࡞͠ͳ͍͜ͱ͕ଟ͍
19. ϑϨʔϜϫʔΫຖʹઐ༻ͷ443ରԠϥΠϒϥϦΛ࢖͏࣌୅ 3FBDU͸/FYUɺ7VFͳΒ/VYUͱɺ443͸ʮ࡞ΔϞϊʯ͔Βʮࣗવͱ͍ͭͯ͘ΔϞϊʯʹɻ
21. 8IBU`T
    /VYU
22. /VYUKT͸443ͷͨΊͷϑϨʔϜϫʔΫʁ
23. ͦΕ͚ͩͰ͸ͳ͍
24. Nuxt.js ʹ͍ͭͯ 7VF։ൃΛࢧԉ͢ΔϑϩϯτΤϯυϑϨʔϜϫʔΫ
    w 7VF୯ମͰ͸ߏங͕൥ࡶͳػೳΛ·ͱΊͯఏڙ͢Δ
    w XFCQBDLϕʔεͷd&4จ๏ͷαϙʔτ
    w WVFϑΝΠϧϕʔεͷจ๏ͷαϙʔτ
    w 4FSWFS
    4JEF
    3FOEFSJOH 443 Τϯδϯͷఏڙ
    w 44341"Ͱ6OJWFSTBMͳϧʔςΟϯάͷఏڙ
    w 7VFYετΞɾϓϥάΠϯɾϛυϧ΢ΣΞʹରԠ͠ ͨϓϩδΣΫτߏ੒ͷఏڙ
    w FUDʜ
25. npmtrends͔Βݟ͑Δ৳ͼ http://www.npmtrends.com/nuxt
26. ެࣜͷϑϧηοτςϯϓϨʔτͷྫ https://github.com/nuxt-community/starter-template
27. جຊΛ่͞ͳ͍ͳ͕Β΋ɺᙱ͍ͱ͜Ζʹख͕ಧ͘
    7VFͷͨΊͷ૯߹։ൃࢧԉπʔϧηοτ
28. Nuxt.js ʹ͍ͭͯ /VYUKTΛར༻͢Δͱʜʜ
    w ϑϩϯτΤϯυจԽͷ෍ڭͷ๦͛ͱͳΔຊ࣭తͰͳ ͍จԽΛద౓ʹӅṭͰ͖Δ
    w ͍ͭͰ΋ΦϯɾΦϑՄೳͳ443ΤϯδϯΛ౥ࡌͯ͠ ͍Δ͜ͱʹΑͬͯকདྷతͳ֦ுʹ΋ରԠ͍ͯ͠Δ
    w /VYUKT͚ͩͷಛ௃ͱͯ͠ɺ443લఏͷ41"Λ੩తα Πτͱͯ͠ॻ͖ग़͢͜ͱ͕Ͱ͖Δ
29. Nuxt.js ʹ͍ͭͯ ͜Ε·Ͱ׆༻Ͱ͖ͳ͔ͬͨྖҬͰ΋
    41"ͷٕज़Λ੩తαΠτʹରͯ͠ར༻Ͱ͖ɺ
    41"։ൃͷྖҬͰ͸443Τϯδϯͱͯ͠׆༻Ͱ͖Δ
    ͜Ε·Ͱͷ443ͱ41"ͷ͚ͩͷੈք͔Β͸֎Εͨ
    ৽͍͠6OJWFSTBMΞϓϦέʔγϣϯͷܗΛఏڙ͢Δ
30. /VYUKTͰ৽ͨʹ࣮ݱՄೳͱͳͬͨ͜ͱ
31. Nuxt͕։୓͢Δੈք w ࢥ͍ࢥ͍ͷύλʔϯͰ૊·Ε͍ͯͨ7VFϓϩδΣΫτͷجຊͷ౷ҰԽ
    w ͜Ε·Ͱ͍ΘΏΔʮ੩తαΠτδΣωϨʔλʯ͕ߦ͖ͬͯͨྖҬͷ࡞ۀ
    w 4&0౎߹ͳͲͰ͜Ε·ͰچདྷܕͷίʔσΟϯάΛ͍ͯͨ͠ྖҬͷ࡞ۀ
32. Nuxt͕։୓͢Δੈք w ࢥ͍ࢥ͍ͷύλʔϯͰ૊·Ε͍ͯͨ7VFϓϩδΣΫτͷجຊͷ౷ҰԽ
    w ͜Ε·Ͱ͍ΘΏΔʮ੩తαΠτδΣωϨʔλʯ͕ߦ͖ͬͯͨྖҬͷ࡞ۀ
    w 4&0౎߹ͳͲͰ͜Ε·ͰچདྷܕͷίʔσΟϯάΛ͍ͯͨ͠ྖҬͷ࡞ۀ
33. ैདྷͷίʔσΟϯάݱ৔ͷͭΒ͞ ଏʹݴ͏SPA԰͞Μͳੈք؍ ଏʹݴ͏Web੍࡞ͳੈք؍ - ೝূલఏͳੈքͳͷͰSEO͸ෆཁ - ඞཁʹͳͬͯΑ͏΍͘SSRΛݕ౼Ͱྑ͍ - શମతͳϓϩάϥϛϯάεΩϧ͸ߴ͍ - Ͱ͖Δ͔͗ΓίʔσΟϯάۀ຿͸ϝΠϯ ʹਾ͑ͨ͘ͳ͍ - จݴ΍SEO/OGP͸ඇৗʹॏཁ - ൺֱతJSπʔϧ΁ͷཧղ͕ઙ͍ਓΛ ର৅ͱͨ͠ΤίγεςϜͷܗ੒ - ϓϩάϥϛϯάతͳཁૉ͸ബ͍෺͕ଟ͍
34. ैདྷͷίʔσΟϯάݱ৔ͷͭΒ͞ ଏʹݴ͏SPA԰͞Μͳੈք؍ ଏʹݴ͏Web੍࡞ͳੈք؍ - ೝূલఏͳੈքͳͷͰSEO͸ෆཁ - ඞཁʹͳͬͯΑ͏΍͘SSRΛݕ౼Ͱྑ͍ - શମతͳϓϩάϥϛϯάεΩϧ͸ߴ͍ - Ͱ͖Δ͔͗ΓίʔσΟϯάۀ຿͸ϝΠϯ ʹਾ͑ͨ͘ͳ͍ - จݴ΍SEO/OGP͸ඇৗʹॏཁ - ൺֱతJSπʔϧ΁ͷཧղ͕ઙ͍ਓΛ ର৅ͱͨ͠ΤίγεςϜͷܗ੒ - ϓϩάϥϛϯάతͳཁૉ͸ബ͍෺͕ଟ͍ SPA԰͞Μ͕ίʔσΟϯάΛ͢Δඞཁੑͷൃੜ
35. ैདྷͷίʔσΟϯάݱ৔ͷͭΒ͞ ଏʹݴ͏SPA԰͞Μͳੈք؍ ଏʹݴ͏Web੍࡞ͳੈք؍ - ೝূલఏͳੈքͳͷͰSEO͸ෆཁ - ඞཁʹͳͬͯΑ͏΍͘SSRΛݕ౼Ͱྑ͍ - શମతͳϓϩάϥϛϯάεΩϧ͸ߴ͍ - Ͱ͖Δ͔͗ΓίʔσΟϯάۀ຿͸ϝΠϯ ʹਾ͑ͨ͘ͳ͍ - จݴ΍SEO/OGP͸ඇৗʹॏཁ - ൺֱతJSπʔϧ΁ͷཧղ͕ઙ͍ਓΛ ର৅ͱͨ͠ΤίγεςϜͷܗ੒ - ϓϩάϥϛϯάతͳཁૉ͸ബ͍෺͕ଟ͍ SPA԰͞Μ͕ίʔσΟϯάΛ͢Δඞཁੑͷൃੜ ɾίϯϙʔωϯτࢤ޲Ͱ૊ΜͰ͓͖͍ͨ ɾGulp + pug + …Έ͍ͨͳߏ੒Λߋ৽͍ͨ͠ ɾϩδοΫ͕ඞཁͳՕॴ͸FwΛ࢖͍͍ͨ
36. ैདྷͷίʔσΟϯάݱ৔ͷͭΒ͞ ଏʹݴ͏SPA԰͞Μͳੈք؍ ଏʹݴ͏Web੍࡞ͳੈք؍ - ೝূલఏͳੈքͳͷͰSEO͸ෆཁ - ඞཁʹͳͬͯΑ͏΍͘SSRΛݕ౼Ͱྑ͍ - શମతͳϓϩάϥϛϯάεΩϧ͸ߴ͍ - Ͱ͖Δ͔͗ΓίʔσΟϯάۀ຿͸ϝΠϯ ʹਾ͑ͨ͘ͳ͍ - จݴ΍SEO/OGP͸ඇৗʹॏཁ - ൺֱతJSπʔϧ΁ͷཧղ͕ઙ͍ਓΛ ର৅ͱͨ͠ΤίγεςϜͷܗ੒ - ϓϩάϥϛϯάతͳཁૉ͸ബ͍෺͕ଟ͍ SPA԰͞Μ͕ίʔσΟϯάΛ͢Δඞཁੑͷൃੜ ɾSEOతʹJS-Fw͸࢖͑ͳ͍ ɾES2015஌ࣝͷนɾελοΫͷॏ͞ ɾલఏπʔϧ͕ଟ͗͢ΔͷͰΤΰʹͳΓ͕ͪ ɾSSR͢Δ΄Ͳ͸ίετ͔͚ΒΕͳ͍
37. NuxtͰগͣͭ͠վળ͍ͯ͘͠ݱ৔ ଏʹݴ͏SPA԰͞Μͳੈք؍ ଏʹݴ͏Web੍࡞ͳੈք؍ - ೝূલఏͳੈքͳͷͰSEO͸ෆཁ - ඞཁʹͳͬͯΑ͏΍͘SSRΛݕ౼Ͱྑ͍ - શମతͳϓϩάϥϛϯάεΩϧ͸ߴ͍ - Ͱ͖Δ͔͗ΓίʔσΟϯάۀ຿͸ϝΠϯ ʹਾ͑ͨ͘ͳ͍ - จݴ΍SEO/OGP͸ඇৗʹॏཁ - ൺֱతJSπʔϧ΁ͷཧղ͕ઙ͍ਓΛ ର৅ͱͨ͠ΤίγεςϜͷܗ੒ - ϓϩάϥϛϯάతͳཁૉ͸ബ͍෺͕ଟ͍
38. NuxtͰগͣͭ͠վળ͍ͯ͘͠ݱ৔ ଏʹݴ͏SPA԰͞Μͳੈք؍ ଏʹݴ͏Web੍࡞ͳੈք؍ - ೝূલఏͳੈքͳͷͰSEO͸ෆཁ - ඞཁʹͳͬͯΑ͏΍͘SSRΛݕ౼Ͱྑ͍ - શମతͳϓϩάϥϛϯάεΩϧ͸ߴ͍ - Ͱ͖Δ͔͗ΓίʔσΟϯάۀ຿͸ϝΠϯ ʹਾ͑ͨ͘ͳ͍ - จݴ΍SEO/OGP͸ඇৗʹॏཁ - ൺֱతJSπʔϧ΁ͷཧղ͕ઙ͍ਓΛ ର৅ͱͨ͠ΤίγεςϜͷܗ੒ - ϓϩάϥϛϯάతͳཁૉ͸ബ͍෺͕ଟ͍ SPA԰͞Μ͕ίʔσΟϯάΛ͢Δඞཁੑͷൃੜ
39. NuxtͰগͣͭ͠վળ͍ͯ͘͠ݱ৔ ଏʹݴ͏SPA԰͞Μͳੈք؍ ଏʹݴ͏Web੍࡞ͳੈք؍ - ೝূલఏͳੈքͳͷͰSEO͸ෆཁ - ඞཁʹͳͬͯΑ͏΍͘SSRΛݕ౼Ͱྑ͍ - શମతͳϓϩάϥϛϯάεΩϧ͸ߴ͍ - Ͱ͖Δ͔͗ΓίʔσΟϯάۀ຿͸ϝΠϯ ʹਾ͑ͨ͘ͳ͍ - จݴ΍SEO/OGP͸ඇৗʹॏཁ - ൺֱతJSπʔϧ΁ͷཧղ͕ઙ͍ਓΛ ର৅ͱͨ͠ΤίγεςϜͷܗ੒ - ϓϩάϥϛϯάతͳཁૉ͸ബ͍෺͕ଟ͍ SPA԰͞Μ͕ίʔσΟϯάΛ͢Δඞཁੑͷൃੜ ɾ੩తॻ͖ग़͠ʹΑͬͯSEO໰୊͸ղফ ɾES࣌୅ͷ஌ࣝ͸࠷௿ݴޠจ๏͚ͩͰOK ɾඞཁͳπʔϧ͸ҰͭͷΈͰ׬͍݁ͯ͠Δ ɾSSR͸ͦ΋ͦ΋ෆཁ
40. /VYU͸੍࡞ͷݱ৔͢Β΋
    ม͑ͯΏ͘ϙςϯγϟϧΛ΋͍ͬͯΔ
41. ϫʔΫϑϩʔͷվֵπʔϧͱͯ͠ͷ
    /VYUKT
42. ʮ/VYUKT͸443ͷπʔϧͰ͸ͳ͘ɺ7VF޲͚ͷ૯߹։ൃπʔϧʯ ඞཁͳ΋ͷ͕े෼ʹἧ͓ͬͯΓɺ͔ͭաෆ଍ͳ͘࢓্͕͍ͬͯΔ
43. ʮ/VYU͸443αΠτ͔Β੩తαΠτ·Ͱ෯޿͍έʔεʹରԠʯ ׬શͳ੩తαΠτɺہॴతʹ443ɺશͯ443લఏͱࡉ͔ͳέʔεΛ໰Θͳ͍ɹ
44. /VYUKT͸ʮڧྗͳϞμϯϑϩϯτΤϯυԽఏҊπʔϧʯͱͳΔ ΞϓϦέʔγϣϯ԰͚ͩͰͳ͘ɺ8FCϖʔδͱ͍͏8FCͷຊདྷͷ໾ׂͷੈք؍Ͱ΋׆͖͍ͯ͘
45. /VYUΛಋೖπʔϧͱͯ͠׆༻͍ͯ͘͠
46. ๩͍͠ͱ͖ͦ͜׆༻͍ͯ͘͠ w ͱ͸͍͑େ෼৽͍ٕ͠ज़ͳͷͰ1SPEVDUJPOʹೖΕΔʹ͸ۤ࿑͕͋Δ
    w ͔͠͠ɺϑϩϯτΤϯυͷാͷਓؒͰ͋Ε͹Ϟμϯ+4ͷྲّྀʹͷΔͱੜ࢈ ੑ্͕͕Δͷ͸࣮֬
    w ๩͍͠ͱ͖ͦ͜ɺಥ؏޻ࣄͷγʔϯͰര଎Ͱ੒ՌΛ͋͛ͯঃʑʹ৵৯ͯ͠ ͍͘Έ͍ͨͳ΍ΓํΛ΍͍ͬͯ͘ͱྑ͍
47. ϞμϯJSΛ౰ͨΓલʹ w CBCFM͕Θ͔Βͳ͍ɺXFCQBDL͕Θ͔Βͳ͍ͱ͍͏Α͏ͳ൱ఆҙݟΛدͤ ෇͚ͳ͍׬੒౓
    w ίϯϙʔωϯτࢤ޲ɺดͨ͡$44ɺϞμϯͳঢ়ଶ؅ཧΛͲͷੈքͰ΋σ ϑΝΫτʹ
    ϑϩϯτΤϯυͷਐԽʹ͍͍ͭͯ͘͜ͱΛ๦͛Δཁૉ͸શͯऔΓআ͍͍ͯ͘
48. /VYUʹΑͬͯʮࠓʯͱʮੲʯ
    ͲͪΒͷ՝୊΋ղܾ͢Δ
49. Ͳ͜Ͱ΋௨༻͢Δɺਅʹ6OJWFSTBMͳٕज़΁
51. ੥ٻॻ؅ཧΫϥ΢υʮSeQueueʯ(PHP + Vue.js) https://sequeue.jp/