Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt.jsで変わる開発フローとUniversal JavaScriptのイマ #jsfes
Search
potato4d(Takuma HANATANI)
November 18, 2017
Programming
17
6k
Nuxt.jsで変わる開発フローとUniversal JavaScriptのイマ #jsfes
2017.11.18 HANATANI Takuma(@potato4d) #jsfes
potato4d(Takuma HANATANI)
November 18, 2017
Tweet
Share
More Decks by potato4d(Takuma HANATANI)
See All by potato4d(Takuma HANATANI)
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
potato4d
3
410
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.3k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.9k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
7k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.3k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.7k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4.2k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
27k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.6k
Other Decks in Programming
See All in Programming
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
770
CSC509 Lecture 03
javiergs
PRO
0
330
CSC305 Lecture 04
javiergs
PRO
0
250
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
450
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
390
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
240
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
920
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
CSC509 Lecture 01
javiergs
PRO
1
430
開発生産性を上げるための生成AI活用術
starfish719
1
170
CSC509 Lecture 06
javiergs
PRO
0
240
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
270
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
Statistics for Hackers
jakevdp
799
220k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Code Review Best Practice
trishagee
72
19k
The World Runs on Bad Software
bkeepers
PRO
71
11k
How to Think Like a Performance Engineer
csswizardry
27
2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
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/