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.5k
Other Decks in Programming
See All in Programming
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
kkakeru
0
200
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
720
AWS Serverless Application Model入門_20250708
smatsuzaki
0
120
学習を成果に繋げるための個人開発の考え方 〜 「学習のための個人開発」のすすめ / personal project for leaning
panda_program
1
110
Langfuseと歩む生成AI活用推進
licux
3
290
Constant integer division faster than compiler-generated code
herumi
2
690
A Gopher's Guide to Vibe Coding
danicat
0
170
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
5
570
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
200
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
1
210
兎に角、コードレビュー
mitohato14
0
150
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
220
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
6.8k
Practical Orchestrator
shlominoach
190
11k
Rails Girls Zürich Keynote
gr2m
95
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
How GitHub (no longer) Works
holman
315
140k
Speed Design
sergeychernyshev
32
1.1k
Making Projects Easy
brettharned
117
6.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
A better future with KSS
kneath
239
17k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Become a Pro
speakerdeck
PRO
29
5.5k
Git: the NoSQL Database
bkeepers
PRO
431
65k
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/