Nuxt.jsで変わる開発フローとUniversal JavaScriptのイマ #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

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

20. None

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

50. 13

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