記事作成ツールのフロントエンドをNuxt.js × Atomic Designでリプレイスしている話（We Are JavaScripters! @30th）

We Are JavaScripters! @30th での資料

Transcript

1. هࣄ࡞੒πʔϧͷϑϩϯτΤϯυΛ Nuxt.js × Atomic DesignͰ ϦϓϨΠε͍ͯ͠Δ࿩
2. ࣗݾ঺հ খٶࢁ وେʢcomyʣ 2018೥7݄ʙ גࣜձࣾMERY ϑϩϯτΤϯυΤϯδχΞ
3. MERY
4. MERYͷهࣄ࡞੒πʔϧ
5. Ҿ༻
   
   IUUQTHJUIVCDPNOVYUOVYUKT
   ɹɹ
   
   
   IUUQBUPNJDEFTJHOCSBEGSPTUDPNDIBQUFS
6. σΟϨΫτϦߏ੒ͱϧʔϧͷ࿩
7. σΟϨΫτϦߏ੒
8. σΟϨΫτϦߏ੒ /components/atoms/ /components/molecules/ /components/organisms/ /pages/
9. Atoms • ଞͷίϯϙʔωϯτΛؚ·ͳ͍ • ࠶ར༻͞ΕΔ • ঢ়ଶʢϩʔΧϧεςʔτʣΛ࣋ͨͳ͍ • VuexΞΫηεෆՄ ϧʔϧ ࠷খ୯Ґͷཁૉ
10. • Atoms ίϯϙʔωϯτͰߏ੒͞ΕΔ • ࠶ར༻͞ΕΔ • ঢ়ଶʢϩʔΧϧεςʔτʣΛ࣋ͬͯ΋Α͍ • VuexΞΫηεෆՄ Molecules ϧʔϧ AtomsΛ૊Έ߹Θͤͯ࡞Δཁૉ
11. Organisms ϧʔϧ • Atoms / Molecules / ଞͷOrganisms ίϯϙʔωϯτ Ͱߏ੒͞ΕΔ • ࠶ར༻͸ߟ͑ͳ͍ • ঢ়ଶʢϩʔΧϧεςʔτʣΛ࣋ͬͯOK • VuexΞΫηεՄ ୯ମͰ΋ػೳ͢Δཁૉ
12. Atoms Molecules Organisms Pages Vuex props props props $emit $emit $emit
13. • ίϯϙʔωϯτͷ੹຿͕໌֬ʹͳͬͨ • ίϯϙʔωϯτ͕ංେԽ͠ʹ͍͘ • ࠶ར༻ੑ͕ߴ·ͬͨ ྑ͍ͱײ͍ͯ͡Δ͜ͱ
14. • ίϯϙʔωϯτͷ؅ཧ͕ͭΒ͍ • StorybookೖΕͨ΄͏͕Α͔ͬͨ… • Molecules / Organisms Ͳͬͪ໰୊ • ࠶ར༻ͷ༧ଌ ۤ࿑͍ͯ͠Δ͜ͱ
15. ࠷ޙʹ…
16. ࣮ࡍͷۀ຿Ͱಘͨ஌ݟ͔Βɺ ։ൃதͷ৽γεςϜͷΞʔΩςΫνϟ·Ͱɺ ੯͠Έͳ͘ެ։͠·͢ʂ 1. GoݴޠͰͷInternalAPIͷߏஙʹ͍ͭͯ 2. ڐ୚γεςϜΛDDDͰϦϑΝΫλϦϯά͢Δ 3. Nuxt.js × Atomic DesignͰهࣄ࡞੒πʔϧΛ࡞Γ௚͍ͯ͠Δ࿩ 4. Ωϟογϡཻ౓มߋʹΑΔύϑΥʔϚϯεྼԽͱͦͷରࡦ 5. ো֐ରԠͳͲΛ௨ͯ͠ಘͨ஌ݟ 6. MERYͷQAʹ͍ͭͯ 7. MERY։ൃ෦ͷߏ੒ͱɺ։ൃϓϩηεʹ͍ͭͯ ٕज़ॻయ̒
17. Thanks!