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によるAdobe MAX Japan 2018公式Webサイト制作の舞台裏
Search
KIMURA Tetsuro
November 30, 2018
Programming
11
3.7k
Nuxt.jsによるAdobe MAX Japan 2018公式Webサイト制作の舞台裏
2018/11/30 DIST.24 「Re: Adobe MAX Japan 2018」
KIMURA Tetsuro
November 30, 2018
Tweet
Share
More Decks by KIMURA Tetsuro
See All by KIMURA Tetsuro
SVG makes your components to testable
haribote
3
2.1k
Other Decks in Programming
See All in Programming
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
720
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
JetBrainsのAI機能の紹介 #jjug
yusuke
0
160
Understanding Kotlin Multiplatform
l2hyunwoo
0
240
What's new in Adaptive Android development
fornewid
0
130
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
570
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
680
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
210
What's new in AppKit on macOS 26
1024jp
0
180
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
170
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
3
240
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
130
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Fireside Chat
paigeccino
37
3.6k
RailsConf 2023
tenderlove
30
1.2k
Six Lessons from altMBA
skipperchong
28
3.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Side Projects
sachag
455
43k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Transcript
None
ଜ࿕ ϑϩϯτΤϯυΤϯδχΞ ͖ͳ"EPCF ٶా༏ر σβΠφʔ ͖ͳ"EPCF
શʹҰக 1IPUPTIPQ4LFUDI ฐࣾϩΰ
͛͢ʔී௨ͷΛ͠·͢ɻ
͓͓·͔ͳશମ૾
None
IUUQTNBYKBQBOBEPCFDPN
ཁ݅ w ηογϣϯΛҰཡ͢Δ w ొஃऀΛҰཡ͢Δ w ηογϣϯɾొஃऀ͝ͱʹ ݸผͷϖʔδΛઃ͚Δ w ใཧͷ؆ུԽ
w ී௨ͷϨϯλϧαʔόʔʹϗεςΟϯά
5IFී௨
ηογϣϯใ w࣌ؒͱॴ wδϟϯϧͱ༻ΞϓϦ wλΠτϧ wొஃऀ ʢৄࡉϖʔδϦϯΫʣ
w֓ཁɾରऀɾϨϕϧ wਃ͠ࠐΈϖʔδͷϦϯΫʢϘπʣ ηογϣϯɿ݅ τοϓϖʔδͷҰཡʹܝࡌ
ొஃऀใ wϓϩϑΟʔϧࣸਅ w໊લͱݞॻ͖ wհจ w୲ηογϣϯʢৄࡉϖʔδϦϯΫʣ ొஃऀɿ໊ τοϓϖʔδͷҰཡʹܝࡌ
؆қαΠτϚοϓ
ಉ͡ใΛ܁Γฦ͠༻͍Δ
ใཧͷ؆ུԽͱσʔλιʔεͷ౷߹
ใཧͷ؆ུԽͱσʔλιʔεͷ౷߹ w ใΛ+40/Խ͢Δ͜ͱͰ࠶ར༻͍ͨ͠ w εϓϨουγʔτͳΒʜ w ୭Ͱɾ͍ͭͰɾͲ͜Ͱ ใΛ؆୯ʹฤूͰ͖Δ w "QQT4DSJQUΛ༻͍ͯσʔλΛ+40/ԽͰ͖Δ
ओͨΔγʔτͭ TFTTJPOTશηογϣϯͷใ TQFBLFSTશొஃऀͷใ TMPUT։࠵ͷϚελʔ BQQT༻ΞϓϦέʔγϣϯͷϚελʔ
{ "id": 41, "name": "Adobe Fonts" } "QQT4DSJQUͰ+40/ʹՃ { "id":
2298, "title": "WebϑΥϯτΛ120%ʙ", "slot": 4, "place": "Magenta (Annex)", "type": "Session", "category": "web", "summary": "ଟ࠼ͳॻମΛWeb্Ͱʙ", "levels": [ false, true, false ], "price": 0, "isFullBooked": false, "speakers": [ 31 ], "targets": "WebσβΠφʔɺUI/UXσβΠφʔ", "apps": [ 11, 41 ] } TFTTJPOT<> { "id": 31, "name": "দా थ ࢯ", "kana": "·ͭͩ", "image": "ʙ.jpg", "company": "גࣜձࣾ·΅Ζ͠", "class": "CCOɾσβΠφʔ", "summary": "<p>ήʔϜۀքʹͯʙ</p>" } TQFBLFST<> { "id": 4, "day": 1, "name": "Breakout sessions + Workshop", "from": "16:25", "to": "17:15" } TMPUT<> BQQT<>
σʔλ༻ҙͰ͖ͨ ͋ͱͲ͏ͬͯྲྀ͠ࠐΉ͔
ํ๏৭ʑ 1VH <%= EJS %> ςϯϓϨʔτΤϯδϯ ελςΟοΫαΠτδΣωϨʔλʔ /VYU 41"ϑϨʔϜϫʔΫʁ
ελςΟοΫαΠτδΣωϨʔλʔ 1VH <%= EJS %> ςϯϓϨʔτΤϯδϯ )5.-ઐͷํʑ ελςΟοΫαΠτδΣωϨʔλʔ /VYU 41"ϑϨʔϜϫʔΫʁ
ελςΟοΫαΠτδΣωϨʔλʔ ͖ͳਓ͖ͳʙͭ 1VH <%= EJS %> ςϯϓϨʔτΤϯδϯ ελςΟοΫαΠτδΣωϨʔλʔ /VYU 41"ϑϨʔϜϫʔΫʁ
/VYU ͑ɺ41"ϑϨʔϜϫʔΫʁ 1VH <%= EJS %> ςϯϓϨʔτΤϯδϯ ελςΟοΫαΠτδΣωϨʔλʔ
վΊ·ͯ͠/VYUͱ ɾ 7VFKTΛ֦ுͨ͠ϑϨʔϜϫʔΫ ɾ XFCQBDL #BCFM ɾ 41"࡞ͬͨΓɺ 443ͤͨ͞Γ
ɾ࣮ ੩తαΠτ࡞ΕΔ IUUQTOVYUKTPSH
ςϯϓϨʔτ୭Ͱॻ͚Δ <template> <div class="l-child"> <Modal...> <template slot="heading"...> <div class="p-session-detail"> <div
class="__meta"...> <div class="__heading"> <h3 :id="`session-${id}-title`" v-html="formattedTitle" /> <p v-if="price > 0" class="__price"> <strong>༗ྉ {{ price | commaSeparatedNumbers }}ԁ</strong> </p> </div> <div class="__description"> <p class="__summary" v-html="formattedSummary" /> <ul class="__speakers"> <li v-for="(speaker, i) in speakers" :key="speaker.id"> <nuxt-link :to="`/speakers/${speaker.id}`"...> </li> </ul> </div> <div class="__scope"...> <div class="__commands"...> </div> </Modal> </div> </template>
ίϯϙʔωϯτͷ࠶ར༻͕Մೳ <SessionItem v-for="session in slot.sessions" :key="session.id" v-bind="session" /> <VividButton tag="a"
:href="LINK_TO_LOG_IN" target="_blank" pill outline white ><strong>ࢀՃऀϩάΠϯ</strong></VividButton> <VividButton tag="a" :href="LINK_REGIST_WITH_ADOBE_ID" target="_blank" pill white ><strong>ࢹௌొ</strong></VividButton>
ڥߏஙʹ·ͳ͍ ɾXFCQBDLͰ ݁(VMQ ෆཁ ɾ+4 &4 Ͱॻ͚Δ ɾελΠϧ MFTT4BTT4UZMVTͰॻ͚Δ ɾ
ϛχϑΝΠɾ ίʔυׂͬͪΓ ɾը૾Λ #BTFͰΤϯίʔυͯ͘͠ΕΔ ɾ ϧʔςΟϯάϑΝΠϧΛஔ͚ͩ͘
੩తαΠτੜίϚϯυ nuxt generate
ϧʔτ͝ͱʹ)5.-Λग़ྗ \^ +40/ ϧʔςΟϯά ▪ /pages ├┬ /index ││
│├┬ /sessions ││└─ _id.vue ││ │└┬ /speakers │ └─ _id.vue │ └ index.vue )5.-ग़ྗ ▪ /dist ├┬ /sessions │├┬ /2272 ││└─ index.html │├┬ /2273 ││└─ index.html │└┬ /2274 │ └─ index.html ├┬ /speakers │├┬ /0 ││└─ index.html │├┬ /1 ││└─ index.html │└┬ /2 │ └─ index.html └ index.html ಈతϧʔτͷҾ͖ͯ // nuxt.config.js module.exports = { generate: { routes() { return fetchMasterData() .then(({ sessions, speakers }) => { const map = (dir, id) => `${dir}/${id}` return sessions .map(({ id }) => map('/sessions', id)) .concat( speakers .map(({ id }) => map('/speakers', id)) ) }) } } }
αʔόʔΛબͳ͍ ɾશϖʔδͷ )5.- ϑΝΠϧ͕ ࣮ࡏ͢Δ ɾ41"443ʹඞཁͳ όοΫΤϯυ࣮͕ ෆཁ ɾͲΜͳΣϒαʔόʔʹஔ͚Δ
·ͱΊ ɾใ εϓϨουγʔτͰҰݩཧ ɾεϓϨουγʔτͷσʔλ "QQT4DSJQUͰ +40/Խ ɾίʔυ &4 ͱ 4$44Ͱॻ͘
ɾͰ ։ൃڥߏங αϘΔ ɾશϖʔδΛ ੩తʹஔ͢Δ
ී௨ͷ͜ͱΛී௨ʹ͢ΔͨΊͷ/VYU ɾ +40/͔Β ϖʔδΛ ੜͰ͖Δ ɾςϯϓϨʔτ ୭Ͱॻ͚Δ ɾίϯϙʔωϯτͷ ࠶ར༻͕ Մೳ
ɾͨΓલͷ ։ൃڥ͕ఏڙ͞ΕΔ ɾnuxt generate ίϚϯυͰ ੩తʹϑΝΠϧ͕ग़ྗ͞ΕΔ
/VYU ී௨
ٻਓͷ͓Βͤ ɾΤϯδχΞ ɾσΟϨΫλʔ ɾϚʔέλʔ ී௨ΛΞοϓσʔτͰ͖Δํɺ Ұॹʹಇ͖·ͤΜ͔ʁ IUUQTXXXXBOUFEMZDPNDPNQBOJFTNBCPSPTIJ
+4ษڧձɺͬͯ·͢ ʮͪΌΜͱॻ͘+4ʯ IUUQTNBCPSPTIJDPOOQBTTDPNFWFOU ʮ܅ΑɺଵଦͨΕʯʢԾʣ ʢԾʣ
͋Γ͕ͱ͏͍͟͝·ͨ͠ ྑ͍͓Λ