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
400
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
6.9k
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.1k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
27k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.5k
Other Decks in Programming
See All in Programming
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
880
Deep Dive into ~/.claude/projects
hiragram
14
14k
Porting a visionOS App to Android XR
akkeylab
0
680
ニーリーにおけるプロダクトエンジニア
nealle
0
950
PicoRuby on Rails
makicamel
2
140
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
470
テスト駆動Kaggle
isax1015
1
620
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
15k
CDK引数設計道場100本ノック
badmintoncryer
2
480
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
1.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Code Reviewing Like a Champion
maltzj
524
40k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Embracing the Ebb and Flow
colly
86
4.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Site-Speed That Sticks
csswizardry
10
700
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
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/