Nuxt.js × Atomic Designのサービスデザインフロー

Nuxt.js × Atomic Designのサービスデザインフロー

2019/6/1 初夏のJavaScript祭りで使用したスライドです。

Atomic Designの考え方をNuxt.jsのコンポーネント分割に取り入れてサービス開発してみました。フロントエンドエンジニア、デザイナー両面からの視点でやってみて良かったことやハマりどころをご紹介します。

3ab24cdc62dc7c33c2b53afbaa7f9d1a?s=128

Keisuke Imura

June 01, 2019
Tweet

Transcript

  1. None
  2. Ҫଜܓհ KEISUKE IMURA ϑΝϯλϥΫςΟϒגࣜձࣾ$&0σβΠφʔΤϯδχΞ ෢ଂ໺ඒज़େֶ޻ܳ޻ۀσβΠϯֶՊଔۀɻ
 8FC੍࡞ձࣾۈ຿ɾϑϦʔϥϯεΛܦͯ೥ʹϑΝϯλϥΫςΟϒגࣜձࣾΛઃཱɻ
 
 ओʹ/VYUKTΛ࢖ͬͯ৽نαʔϏεͷ্ཱͪ͛΍αʔϏεͷάϩʔεɺσβΠϯγεςϜ ͷߏஙΛࢧԉ͍ͯ͠Δɻ೥·Ͱגࣜձࣾ-J#ͷνʔϑσβΠφʔ΋݉຿ɻ
 גࣜձࣾϝϯόʔζΩϟϦΞͷٕज़ސ໰΋຿Ί͍ͯ·͢ɻ

  3. ࠓ೔ͷ͓୊ /VYUKTʷ"UPNJD%FTJHO

  4. /VYUKT7VFKTΛϥοϓͨ͠ΞϓϦέʔγϣϯ։ൃϑϨʔϜϫʔΫ WJBIUUQTKBOVYUKTPSH 7VFKT 7VF3PVUFS 7VFY 443 18"΁ͷରԠ΋ൺֱత؆୯

  5. "UPNJD%FTJHO࠷খ୯Ґͷύʔπ͔Β࡞੒͢ΔσβΠϯख๏ WJBIUUQBUPNJDEFTJHOCSBEGSPTUDPNDIBQUFS σβΠϯख๏ࣗମͷ࿩ͱ͍͏ΑΓ͸ɺ "UPNJD%FTJHOͷߟ͑ํΛίϯϙʔωϯτ෼ׂʹԠ༻͢Δ࿩Λ͠·͢ɻ

  6. 7VF 3FBDU໰Θͣ"UPNJD%FTJHOΛ࠾༻͍ͯ͠ΔαʔϏε΋૿͍͑ͯΔ

  7. ԿͷͨΊʹ΍Δ͔

  8. ཧ૝ܗ ʮࢪࡦͷ࣮ࢪ͕ڻҟతʹૣ͘ͳΔʯ ʮ౷Ұੑͷ͋Δ6*69Λఏڙ͢Δʯ

  9. ී௨ͷϑϩϯτ։ൃϑϩʔ اըˠσβΠϯˠϑϩϯτ։ൃˠϦϦʔε

  10. /VYU "UPNJD%FTJHOͷϑϩϯτ։ൃϑϩʔ اըˠσβΠϯˠϑϩϯτ։ൃˠϦϦʔε ίϯϙʔωϯτͷ૊Έ্͛

  11. 5IF)FBEFS "SUJDMF%FUBJM "SUJDMF-JTU "SUJDMF-JTU ਓؾهࣄ ͓͢͢Ίهࣄ ࠷େهࣄ "1*Λ৽ن࡞੒ ͜Μͳײ͡ͷਤ͑͋͞Ε͹ ։ൃ͕࢝ΊΒΕΔ

  12. ࢪࡦଧͭͧʂ ΍Δ͜ͱͳ͍ʂ σβΠφʔ ΤϯδχΞ ίϯϙʔωϯτೖΕΔ͚ͩʂ

  13. Ͱ͸ϑϩϯτΤϯυΤϯδχΞ΍σβΠφʔ͸ԿΛ͢Δͷ͔ʁ ϑϩϯτΤϯυΤϯδχΞͱσβΠφʔ͕ڠۀͯ͠σβΠϯγεςϜΛϝϯςφϯε ΈΜͳ͕࢖͏ʮγεςϜʯʮϥΠϒϥϦʯΛઃܭɾ࣮૷ɾϝϯςφϯε͢Δ ίϯϙʔωϯτϥΠϒϥϦ σβΠϯγεςϜ ࢪࡦ" ࢪࡦ# ࢪࡦ$ ར༻ ར༻

    ར༻ ͜͜Λϝϯςʂ
  14. ἧ͑ͳ͍ͱ͍͚ͳ͍΋ͷ w ୯ҰϑΝΠϧίϯϙʔωϯτʢ/VYUKTʣ w ίϯϙʔωϯτͷ෼ׂنଇʢ"UPNJD%FTJHOʣ w ίϯϙʔωϯτϥΠϒϥϦʢ4UPSZCPPLʣ Ұఆ஌໊౓͕͋ͬͯνʔϜͷڞ௨ݴޠͱͯ͠࢖͍΍͍ٕ͢ज़Λ࠾༻ ʮ͜ΕͰ΍Δ͔ΒʯͰνʔϜϝϯόʔ͕ཧղ͕ग़དྷΔ͜ͱ͕ॏཁ

  15. 4UPSZCPPLͱ͸ ίϯϙʔωϯτϥΠϒϥϦΛ࡞੒Ͱ͖Δ044ͷπʔϧ 7VF 3FBDU "OHVMBSʹରԠ͍ͯ͠ΔଞɺΞυΦϯͷ։ൃ΋׆ൃ

  16. ͏·͘΍ΔͨΊͷίπ

  17. ͏·͘੒ཱͤ͞ΔͨΊͷͭͷίπ w ίϯϙʔωϯτͷ෼ׂ w ΠϯλʔϑΣʔεͷઃܭ w ϑϩʔͷڞ༗

  18. ͦͷੲ͜Μͳ͜ͱΛݴ͍·ͨ͠ʜ ͭͷίπΛίϯτϩʔϧͰ͖Δਓ͕ཉ͍͠ʂ ϑϩϯτΤϯυΤϯδχΞʴσβΠφʔͰؤுΔ

  19. σΟϨΫτϦߏ੒

  20. "UPNT.PMFDVMFT0SHBOJTNTͷ෼ׂྫ w "UPNT w ଞͷίϯϙʔωϯτʹґଘ͍ͯ͠ͳ͍BOE w 4UPSFʹґଘ͍ͯ͠ͳ͍ w .PMFDVMFT w

    "UPNTΛͭҎ্࢖͍ͬͯΔBOE w 4UPSFʹґଘ͍ͯ͠ͳ͍BOE w ϏδωεϩδοΫΛ಺แ͍ͯ͠ͳ͍ w 0SHBOJTNT w "UPNT͔.PMFDVMFTΛͭҎ্࢖͍ͬͯΔPS w 4UPSFʹґଘ͍ͯ͠ΔPS w ϏδωεϩδοΫΛ಺แ͍ͯ͠Δ TQFDJBMUIBOLT !NBTBBLJLVOTBO
  21. ໋໊ • 7VFͷελΠϧΨΠυʢIUUQTKQWVFKTPSHWTUZMFHVJEFʣʹԊ͏ ◦ ΩϟϝϧέʔεͰ໋໊ ▪ ̋1SPKFDU$BSE ▪ ʷQSPKFDUDBSE ▪

    ʷQSPKFDU@DBSE ◦ ୯ޠ͸ېࢭɺෳ਺୯ޠͰ໋໊ ▪ 7VFͷ৔߹ɺ3FBDUͱҟͳΓ)5.-͕େจࣈখจࣈ൑ผ͠ͳ͍ͷͰিಥ͢Δ • Ϟσϧʹؔ͢Δ΋ͷ͸Ϟσϧ໊Λ಄ʹ͚ͭͯؔ܎ੑΛΘ͔Γ΍͘͢͢Δ ◦ 1SPKFDU$BSE 1SPKFDU-JTU 1SPKFDU4FBSDI'PSN • "UPNTͷίϯϙʔωϯτʹ͸઀಄ࣙʹ"UPNΛ͚ͭΔˡ͜Ε͸ฐࣾͷΦϨΦϨϧʔϧ ◦ "UPNTͰ͋Δ͜ͱΛΘ͔Γ΍͘͢ʂ • ΞϓϦέʔγϣϯશମʹؔΘΔ΋ͷ͸઀಄ࣙʹ"QQΛ͚ͭΔ ◦ #BTF7ͳͲଞͷجఈίϯϙʔωϯτ઀಄ࣙ͸࢖Θͳ͍ ◦ "QQ.PEBM "QQ5BC • αΠτશମͰ͔ͭ͠ଘࡏ͠ͳ͍ίϯϙʔωϯτ͸઀಄ࣙʹ5IFΛ͚ͭΔ ◦ 5IF)FBEFS 5IF'PPUFS
  22. WJBIUUQBUPNJDEFTJHOCSBEGSPTUDPNDIBQUFSPSHBOJTNT ϋϚΓͲ͜ΖᶃɿMJTUJUFN໰୊ʢ0SHBOJTN .PMFDVMF ʣ

  23. WJBIUUQBUPNJDEFTJHOCSBEGSPTUDPNDIBQUFSPSHBOJTNT ϋϚΓͲ͜ΖᶃɿMJTUJUFN໰୊ʢ0SHBOJTN .PMFDVMF ʣ 0SHBOJTN .PMFDVMF

  24. ϋϚΓͲ͜ΖᶄɿGPSNίϯϙʔωϯτͷଟ֊૚Խ 0SHBOJTN .PMFDVMF "QQ'PSN 'PSN3PX "UPN "UPN*OQVU WNPEFM FNJU WBMVF

    FNJU <input :type="type" :value="value" @input="$emit('input', $event.target.value)" /> <AtomInput :type="type" :value=value @input="$emit('input', $event)" />
  25. ϋϚΓͲ͜Ζᶅɿ4UPSFͷ࢖͍ॴ 1BHFT 0SHBOJTNT .PMFDVMFT "UPNT 4UPSF QSPQT QSPQT "1* QSPQT

    SFRVFTU SFTQPOTF HFUUFS DPNNJU HFUUFS DPNNJU ίϯϙʔωϯτಉ࢜ͷσʔλ͸جຊతʹҰํ௨ߦ 4UPSF΍"1*ͳͲ֎෦σʔλͱͷ΍ΓͱΓ͸1BHFT΍0SHBOJTNTʹू໿͢Δ SFRVFTU
  26. ίϯϙʔωϯτͷΠϯλʔϑΣʔε props: { age: { type: Number, default: 0, required:

    true, validator: value => { return value >= 0 } } } ίϯϙʔωϯτ΁ͷσʔλͷೖྗΛͲ͏͢Δ͔ʁQSPQTEBUBTUPSF QSPQTͷΦϓγϣϯΛ͖ͪΜͱࢦఆ͓ͯ͜͠͏
  27. 5ZQF4DSJQU΋࢖͑ΔΑ import { Component, Prop, Vue } from ‘nuxt-property-decorator’ @Component

    export class MyComponent extends Vue { @Prop({ default: 0, required: true, validator(value: string): boolean { return value >= 0 } }) age!: number }
  28. ্ཱͪ͛ϑΣʔζͷϫʔΫϑϩʔ˞͋͘·ͰҰྫͰ͢ ϫΠϠʔϑϨʔϜ ίϯϙʔωϯτσβΠϯ ίϯϙʔωϯτ࣮૷ ϖʔδ࣮૷ "1*ૄ௨ϩδοΫ࣮૷ ͍͖ͳΓϖʔδσβΠϯʹ ೖΒͳ͍ ߦ͖དྷͯ͠σβΠϯΛ ϒϥογϡΞοϓ

  29. ӡ༻ɾάϩʔεϑΣʔζͷϫʔΫϑϩʔ 6*࢓༷ॻ ίϯϙʔωϯτσβΠϯ࣮૷ ϖʔδ࣮૷ "1*ૄ௨ϩδοΫ࣮૷ ίϯϙʔωϯτͷ৽ن࡞੒ ฤू͕ൃੜ͢Δ৔߹ͷΈ

  30. 4UPSZCPPLΛνʔϜશһ͕ݟΒΕΔΑ͏ʹ͢Δ )5.- CVJMETUPSZCPPL 4 TUPSZCPPLDMJͰ)5.-ΛϏϧυͰ͖ΔͷͰɺ4ͳͲʹϗεςΟϯά͢Δͷ͕ ָ͔ͱࢥ͍·͢

  31. ·ͱΊɿ޲͍͍ͯΔϓϩδΣΫτ ʮࢪࡦͷ࣮ࢪ͕ڻҟతʹૣ͘ͳΔʯ ʮ౷Ұੑͷ͋Δ6*69Λఏڙ͢Δʯ ୹ظத௕ظ ϖʔδ਺গʻϖʔδ਺ଟ σβΠϯ༏ઌʻڞ௨Խ༏ઌ

  32. We are hiring !! IUUQTXXXXBOUFEMZDPNDPNQBOJFTGVOUFSBDUJWF 41"ͱଟ༷ͳಇ͖ํʹͩ͜ΘΓ͋ΔϝϯόʔืूதͰ͢ w ϑϧϦϞʔτ0, w ϑϨοΫε

    w ෭ۀ0, w ࣌୹िʙਖ਼ࣾһ0, w ۀ຿ҕୗܖ໿0, w ࢒ۀ࣌ؒ࣌ؒҎ಺ …etc