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

Slide 1

Slide 1 text

)"/"5"/*5BLVNB !QPUBUPE KTGFT /VYUKTͰมΘΔ։ൃϑϩʔͱ 6OJWFSTBM+BWB4DSJQUͷΠϚ

Slide 2

Slide 2 text

ࠓ೔࿩͢͜ͱ • ࣗݾ঺հ • UniversalͳΞϓϦέʔγϣϯͷΠϚͱNext/Nuxt • Nuxt.jsͰ৽ͨʹ࣮ݱՄೳͱͳͬͨ͜ͱ • ϫʔΫϑϩʔͷվֵπʔϧͱͯ͠ͷ Nuxt.js

Slide 3

Slide 3 text

ࣗݾ঺հ

Slide 4

Slide 4 text

ࣗݾ঺հ )"/"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

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Vue.js੡ϑϨʔϜϫʔΫNuxt.jsͰ͸͡ΊΔUniversalΞϓϦέʔγϣϯ։ൃ https://html5experts.jp/potato4d/24346/

Slide 7

Slide 7 text

ٕज़ॻయ3৽ץʮ΍͍ͬͯ͘߹ಉࢽʯ by pentapoid https://pentapod.booth.pm/items/667201

Slide 8

Slide 8 text

࢖͍͔ͨͷ࿩ ࣮஍։ൃͷ࿩ ֓೦ͷ࿩ ࠓ೔͸ίί

Slide 9

Slide 9 text

6OJWFSTBMͳΞϓϦέʔγϣϯͷΠϚ

Slide 10

Slide 10 text

8IBU`T6OJWFSTBM

Slide 11

Slide 11 text

6OJWFSTBMੲͰݴ͏ͱ͜Ζͷ*TPNPSQIJD Ұੲલʹ44341"ͱͯ͠ʮ*TPNPSQIJDʯͱݺ͹Ε͍ͯͨ֓೦͕ɺʮ6OJWFSTBMʯʹܗΛม͑ͨ

Slide 12

Slide 12 text

ΠϚυΩͷ6OJWFSTBMࣄ৘

Slide 13

Slide 13 text

ΠϚυΩͷ։ൃͰ͸443͸ࣗ࡞͠ͳ͍͜ͱ͕ଟ͍

Slide 14

Slide 14 text

ैདྷܕͷ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͸ࣗ࡞͠ͳ͍͜ͱ͕ଟ͍

Slide 15

Slide 15 text

ैདྷܕͷ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͸ࣗ࡞͠ͳ͍͜ͱ͕ଟ͍

Slide 16

Slide 16 text

ίΞͱͯ͠ఏڙ͞Ε͍͕ͯͨ൥ࡶ ׂΓͱDirtyͳ࡞ۀΛؤுͬͯߦ͍ͬͯͨ࣌୅

Slide 17

Slide 17 text

ΠϚυΩͷ443γεςϜ // Command $ npm start // Program /* ͳ͠(!) */ // Deps - next Next.jsʹ׬શʹ೚ͤΔ ΠϚυΩͷ։ൃͰ͸SSR͸ࣗ࡞͠ͳ͍͜ͱ͕ଟ͍

Slide 18

Slide 18 text

ΠϚυΩͷ443γεςϜ // Command $ npm start // Program /* ͳ͠(!) */ // Deps - nuxt Nuxt.jsʹ׬શʹ೚ͤΔ ΠϚυΩͷ։ൃͰ͸SSR͸ࣗ࡞͠ͳ͍͜ͱ͕ଟ͍

Slide 19

Slide 19 text

ϑϨʔϜϫʔΫຖʹઐ༻ͷ443ରԠϥΠϒϥϦΛ࢖͏࣌୅ 3FBDU͸/FYUɺ7VFͳΒ/VYUͱɺ443͸ʮ࡞ΔϞϊʯ͔Βʮࣗવͱ͍ͭͯ͘ΔϞϊʯʹɻ

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

8IBU`T/VYU

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

ͦΕ͚ͩͰ͸ͳ͍

Slide 24

Slide 24 text

Nuxt.js ʹ͍ͭͯ 7VF։ൃΛࢧԉ͢ΔϑϩϯτΤϯυϑϨʔϜϫʔΫ w 7VF୯ମͰ͸ߏங͕൥ࡶͳػೳΛ·ͱΊͯఏڙ͢Δ w XFCQBDLϕʔεͷd&4จ๏ͷαϙʔτ w WVFϑΝΠϧϕʔεͷจ๏ͷαϙʔτ w 4FSWFS4JEF3FOEFSJOH 443 Τϯδϯͷఏڙ w 44341"Ͱ6OJWFSTBMͳϧʔςΟϯάͷఏڙ w 7VFYετΞɾϓϥάΠϯɾϛυϧ΢ΣΞʹରԠ͠ ͨϓϩδΣΫτߏ੒ͷఏڙ w FUDʜ

Slide 25

Slide 25 text

npmtrends͔Βݟ͑Δ৳ͼ http://www.npmtrends.com/nuxt

Slide 26

Slide 26 text

ެࣜͷϑϧηοτςϯϓϨʔτͷྫ https://github.com/nuxt-community/starter-template

Slide 27

Slide 27 text

جຊΛ่͞ͳ͍ͳ͕Β΋ɺᙱ͍ͱ͜Ζʹख͕ಧ͘ 7VFͷͨΊͷ૯߹։ൃࢧԉπʔϧηοτ

Slide 28

Slide 28 text

Nuxt.js ʹ͍ͭͯ /VYUKTΛར༻͢Δͱʜʜ w ϑϩϯτΤϯυจԽͷ෍ڭͷ๦͛ͱͳΔຊ࣭తͰͳ ͍จԽΛద౓ʹӅṭͰ͖Δ w ͍ͭͰ΋ΦϯɾΦϑՄೳͳ443ΤϯδϯΛ౥ࡌͯ͠ ͍Δ͜ͱʹΑͬͯকདྷతͳ֦ுʹ΋ରԠ͍ͯ͠Δ w /VYUKT͚ͩͷಛ௃ͱͯ͠ɺ443લఏͷ41"Λ੩తα Πτͱͯ͠ॻ͖ग़͢͜ͱ͕Ͱ͖Δ

Slide 29

Slide 29 text

Nuxt.js ʹ͍ͭͯ ͜Ε·Ͱ׆༻Ͱ͖ͳ͔ͬͨྖҬͰ΋ 41"ͷٕज़Λ੩తαΠτʹରͯ͠ར༻Ͱ͖ɺ 41"։ൃͷྖҬͰ͸443Τϯδϯͱͯ͠׆༻Ͱ͖Δ ͜Ε·Ͱͷ443ͱ41"ͷ͚ͩͷੈք͔Β͸֎Εͨ ৽͍͠6OJWFSTBMΞϓϦέʔγϣϯͷܗΛఏڙ͢Δ

Slide 30

Slide 30 text

/VYUKTͰ৽ͨʹ࣮ݱՄೳͱͳͬͨ͜ͱ

Slide 31

Slide 31 text

Nuxt͕։୓͢Δੈք w ࢥ͍ࢥ͍ͷύλʔϯͰ૊·Ε͍ͯͨ7VFϓϩδΣΫτͷجຊͷ౷ҰԽ w ͜Ε·Ͱ͍ΘΏΔʮ੩తαΠτδΣωϨʔλʯ͕ߦ͖ͬͯͨྖҬͷ࡞ۀ w 4&0౎߹ͳͲͰ͜Ε·ͰچདྷܕͷίʔσΟϯάΛ͍ͯͨ͠ྖҬͷ࡞ۀ

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

ैདྷͷίʔσΟϯάݱ৔ͷͭΒ͞ ଏʹݴ͏SPA԰͞Μͳੈք؍ ଏʹݴ͏Web੍࡞ͳੈք؍ - ೝূલఏͳੈքͳͷͰSEO͸ෆཁ - ඞཁʹͳͬͯΑ͏΍͘SSRΛݕ౼Ͱྑ͍ - શମతͳϓϩάϥϛϯάεΩϧ͸ߴ͍ - Ͱ͖Δ͔͗ΓίʔσΟϯάۀ຿͸ϝΠϯ ʹਾ͑ͨ͘ͳ͍ - จݴ΍SEO/OGP͸ඇৗʹॏཁ - ൺֱతJSπʔϧ΁ͷཧղ͕ઙ͍ਓΛ ର৅ͱͨ͠ΤίγεςϜͷܗ੒ - ϓϩάϥϛϯάతͳཁૉ͸ബ͍෺͕ଟ͍ SPA԰͞Μ͕ίʔσΟϯάΛ͢Δඞཁੑͷൃੜ

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

NuxtͰগͣͭ͠վળ͍ͯ͘͠ݱ৔ ଏʹݴ͏SPA԰͞Μͳੈք؍ ଏʹݴ͏Web੍࡞ͳੈք؍ - ೝূલఏͳੈքͳͷͰSEO͸ෆཁ - ඞཁʹͳͬͯΑ͏΍͘SSRΛݕ౼Ͱྑ͍ - શମతͳϓϩάϥϛϯάεΩϧ͸ߴ͍ - Ͱ͖Δ͔͗ΓίʔσΟϯάۀ຿͸ϝΠϯ ʹਾ͑ͨ͘ͳ͍ - จݴ΍SEO/OGP͸ඇৗʹॏཁ - ൺֱతJSπʔϧ΁ͷཧղ͕ઙ͍ਓΛ ର৅ͱͨ͠ΤίγεςϜͷܗ੒ - ϓϩάϥϛϯάతͳཁૉ͸ബ͍෺͕ଟ͍ SPA԰͞Μ͕ίʔσΟϯάΛ͢Δඞཁੑͷൃੜ

Slide 39

Slide 39 text

Slide 40

Slide 40 text

/VYU͸੍࡞ͷݱ৔͢Β΋ ม͑ͯΏ͘ϙςϯγϟϧΛ΋͍ͬͯΔ

Slide 41

Slide 41 text

ϫʔΫϑϩʔͷվֵπʔϧͱͯ͠ͷ/VYUKT

Slide 42

Slide 42 text

ʮ/VYUKT͸443ͷπʔϧͰ͸ͳ͘ɺ7VF޲͚ͷ૯߹։ൃπʔϧʯ ඞཁͳ΋ͷ͕े෼ʹἧ͓ͬͯΓɺ͔ͭաෆ଍ͳ͘࢓্͕͍ͬͯΔ

Slide 43

Slide 43 text

ʮ/VYU͸443αΠτ͔Β੩తαΠτ·Ͱ෯޿͍έʔεʹରԠʯ ׬શͳ੩తαΠτɺہॴతʹ443ɺશͯ443લఏͱࡉ͔ͳέʔεΛ໰Θͳ͍ɹ

Slide 44

Slide 44 text

/VYUKT͸ʮڧྗͳϞμϯϑϩϯτΤϯυԽఏҊπʔϧʯͱͳΔ ΞϓϦέʔγϣϯ԰͚ͩͰͳ͘ɺ8FCϖʔδͱ͍͏8FCͷຊདྷͷ໾ׂͷੈք؍Ͱ΋׆͖͍ͯ͘

Slide 45

Slide 45 text

/VYUΛಋೖπʔϧͱͯ͠׆༻͍ͯ͘͠

Slide 46

Slide 46 text

๩͍͠ͱ͖ͦ͜׆༻͍ͯ͘͠ w ͱ͸͍͑େ෼৽͍ٕ͠ज़ͳͷͰ1SPEVDUJPOʹೖΕΔʹ͸ۤ࿑͕͋Δ w ͔͠͠ɺϑϩϯτΤϯυͷാͷਓؒͰ͋Ε͹Ϟμϯ+4ͷྲّྀʹͷΔͱੜ࢈ ੑ্͕͕Δͷ͸࣮֬ w ๩͍͠ͱ͖ͦ͜ɺಥ؏޻ࣄͷγʔϯͰര଎Ͱ੒ՌΛ͋͛ͯঃʑʹ৵৯ͯ͠ ͍͘Έ͍ͨͳ΍ΓํΛ΍͍ͬͯ͘ͱྑ͍

Slide 47

Slide 47 text

ϞμϯJSΛ౰ͨΓલʹ w CBCFM͕Θ͔Βͳ͍ɺXFCQBDL͕Θ͔Βͳ͍ͱ͍͏Α͏ͳ൱ఆҙݟΛدͤ ෇͚ͳ͍׬੒౓ w ίϯϙʔωϯτࢤ޲ɺดͨ͡$44ɺϞμϯͳঢ়ଶ؅ཧΛͲͷੈքͰ΋σ ϑΝΫτʹ ϑϩϯτΤϯυͷਐԽʹ͍͍ͭͯ͘͜ͱΛ๦͛Δཁૉ͸શͯऔΓআ͍͍ͯ͘