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
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
iOS開発スターターキットの作り方
akidon0000
0
230
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
650
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
11
2.8k
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
160
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
0
180
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
270
リッチエディターを安全に開発・運用するために
unachang113
1
350
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
7
1.7k
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.4k
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
3
1.9k
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
170
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
220
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
BBQ
matthewcrist
89
9.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Music & Morning Musume
bryan
46
6.7k
Git: the NoSQL Database
bkeepers
PRO
431
65k
The Invisible Side of Design
smashingmag
301
51k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
For a Future-Friendly Web
brad_frost
179
9.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Six Lessons from altMBA
skipperchong
28
3.9k
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/