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
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
940
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.7k
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
250
Software Architecture
hschwentner
6
2.3k
明日から始めるリファクタリング
ryounasso
0
140
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
1
360
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
170
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
170
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
910
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
140
チームの境界をブチ抜いていけ
tokai235
0
180
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
880
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
GraphQLとの向き合い方2022年版
quramy
49
14k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
The Cost Of JavaScript in 2023
addyosmani
55
9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing for Performance
lara
610
69k
Building Adaptive Systems
keathley
44
2.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Making Projects Easy
brettharned
120
6.4k
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 ʮ܅ΑɺଵଦͨΕʯʢԾʣ ʢԾʣ
͋Γ͕ͱ͏͍͟͝·ͨ͠ ྑ͍͓Λ