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 × Atomic Designでリプレイスしている話(We Are JavaScripters! @30th)
Search
comy
March 22, 2019
0
160
記事作成ツールのフロントエンドをNuxt.js × Atomic Designでリプレイスしている話(We Are JavaScripters! @30th)
We Are JavaScripters! @30th での資料
comy
March 22, 2019
Tweet
Share
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Making the Leap to Tech Lead
cromwellryan
123
8.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
Adopting Sorbet at Scale
ufuk
66
8.5k
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
Designing for Performance
lara
601
67k
Transcript
هࣄ࡞πʔϧͷϑϩϯτΤϯυΛ Nuxt.js × Atomic DesignͰ ϦϓϨΠε͍ͯ͠Δ
ࣗݾհ খٶࢁ وେʢcomyʣ 20187݄ʙ גࣜձࣾMERY ϑϩϯτΤϯυΤϯδχΞ
MERY
MERYͷهࣄ࡞πʔϧ
Ҿ༻IUUQTHJUIVCDPNOVYUOVYUKT ɹɹIUUQBUPNJDEFTJHOCSBEGSPTUDPNDIBQUFS
σΟϨΫτϦߏͱϧʔϧͷ
σΟϨΫτϦߏ
σΟϨΫτϦߏ /components/atoms/ /components/molecules/ /components/organisms/ /pages/
Atoms • ଞͷίϯϙʔωϯτΛؚ·ͳ͍ • ࠶ར༻͞ΕΔ • ঢ়ଶʢϩʔΧϧεςʔτʣΛ࣋ͨͳ͍ • VuexΞΫηεෆՄ ϧʔϧ
࠷খ୯Ґͷཁૉ
• Atoms ίϯϙʔωϯτͰߏ͞ΕΔ • ࠶ར༻͞ΕΔ • ঢ়ଶʢϩʔΧϧεςʔτʣΛ࣋ͬͯΑ͍ • VuexΞΫηεෆՄ Molecules
ϧʔϧ AtomsΛΈ߹Θͤͯ࡞Δཁૉ
Organisms ϧʔϧ • Atoms / Molecules / ଞͷOrganisms ίϯϙʔωϯτ Ͱߏ͞ΕΔ
• ࠶ར༻ߟ͑ͳ͍ • ঢ়ଶʢϩʔΧϧεςʔτʣΛ࣋ͬͯOK • VuexΞΫηεՄ ୯ମͰػೳ͢Δཁૉ
Atoms Molecules Organisms Pages Vuex props props props $emit $emit
$emit
• ίϯϙʔωϯτͷ͕໌֬ʹͳͬͨ • ίϯϙʔωϯτ͕ංେԽ͠ʹ͍͘ • ࠶ར༻ੑ͕ߴ·ͬͨ ྑ͍ͱײ͍ͯ͡Δ͜ͱ
• ίϯϙʔωϯτͷཧ͕ͭΒ͍ • StorybookೖΕͨ΄͏͕Α͔ͬͨ… • Molecules / Organisms Ͳͬͪ •
࠶ར༻ͷ༧ଌ ۤ࿑͍ͯ͠Δ͜ͱ
࠷ޙʹ…
࣮ࡍͷۀͰಘͨݟ͔Βɺ ։ൃதͷ৽γεςϜͷΞʔΩςΫνϟ·Ͱɺ ੯͠Έͳ͘ެ։͠·͢ʂ 1. GoݴޠͰͷInternalAPIͷߏஙʹ͍ͭͯ 2. ڐγεςϜΛDDDͰϦϑΝΫλϦϯά͢Δ 3. Nuxt.js ×
Atomic DesignͰهࣄ࡞πʔϧΛ࡞Γ͍ͯ͠Δ 4. ΩϟογϡཻมߋʹΑΔύϑΥʔϚϯεྼԽͱͦͷରࡦ 5. োରԠͳͲΛ௨ͯ͠ಘͨݟ 6. MERYͷQAʹ͍ͭͯ 7. MERY։ൃ෦ͷߏͱɺ։ൃϓϩηεʹ͍ͭͯ ٕज़ॻయ̒
Thanks!