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

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

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

2017.11.18 HANATANI Takuma(@potato4d) #jsfes

A54b31d4ebbce222dff88a5c42bac033?s=128

Potato4d(Hanatani Takuma)

November 18, 2017
Tweet

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
  5. 13

  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`T6OJWFSTBM

  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͸ʮ࡞ΔϞϊʯ͔Βʮࣗવͱ͍ͭͯ͘ΔϞϊʯʹɻ

  20. None
  21. 8IBU`T/VYU

  22. /VYUKT͸443ͷͨΊͷϑϨʔϜϫʔΫʁ

  23. ͦΕ͚ͩͰ͸ͳ͍

  24. Nuxt.js ʹ͍ͭͯ 7VF։ൃΛࢧԉ͢ΔϑϩϯτΤϯυϑϨʔϜϫʔΫ w 7VF୯ମͰ͸ߏங͕൥ࡶͳػೳΛ·ͱΊͯఏڙ͢Δ w XFCQBDLϕʔεͷd&4จ๏ͷαϙʔτ w WVFϑΝΠϧϕʔεͷจ๏ͷαϙʔτ w

    4FSWFS4JEF3FOEFSJOH 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ͳٕज़΁

  50. 13

  51. ੥ٻॻ؅ཧΫϥ΢υʮSeQueueʯ(PHP + Vue.js) https://sequeue.jp/