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

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

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

Transcript

2. Ҫଜ
   ܓհ KEISUKE IMURA ϑΝϯλϥΫςΟϒגࣜձࣾ
   $&0
   
   σβΠφʔ
   
   ΤϯδχΞ
   ෢ଂ໺ඒज़େֶ޻ܳ޻ۀσβΠϯֶՊଔۀɻ
 8FC੍࡞ձࣾۈ຿ɾϑϦʔϥϯεΛܦͯ೥ʹϑΝϯλϥΫςΟϒגࣜձࣾΛઃཱɻ
 
 ओʹ/VYUKTΛ࢖ͬͯ৽نαʔϏεͷ্ཱͪ͛΍αʔϏεͷάϩʔεɺσβΠϯγεςϜ ͷߏஙΛࢧԉ͍ͯ͠Δɻ೥·Ͱגࣜձࣾ-J#ͷνʔϑσβΠφʔ΋݉຿ɻ
 גࣜձࣾϝϯόʔζΩϟϦΞͷٕज़ސ໰΋຿Ί͍ͯ·͢ɻ
3. ࠓ೔ͷ͓୊ /VYUKT
   ʷ
   "UPNJD
   %FTJHO
4. /VYUKT
   
   7VFKTΛϥοϓͨ͠ΞϓϦέʔγϣϯ։ൃϑϨʔϜϫʔΫ WJB
   IUUQTKBOVYUKTPSH
   7VFKT
   
   7VF
   3PVUFS
   
   7VFY
   443
   18"΁ͷରԠ΋ൺֱత؆୯
5. "UPNJD
   %FTJHO
   
   ࠷খ୯Ґͷύʔπ͔Β࡞੒͢ΔσβΠϯख๏ WJB
   IUUQBUPNJDEFTJHOCSBEGSPTUDPNDIBQUFS σβΠϯख๏ࣗମͷ࿩ͱ͍͏ΑΓ͸ɺ
   "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
    
    .PMFDVMFT
    
    0SHBOJTNTͷ෼ׂྫ 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 ϏδωεϩδοΫΛ಺แ͍ͯ͠Δ TQFDJBM
    UIBOLT
    !NBTBBLJLVOTBO
21. ໋໊ • 7VFͷελΠϧΨΠυʢ
    IUUQTKQWVFKTPSHWTUZMFHVJEF
    ʣʹԊ͏
    ◦ ΩϟϝϧέʔεͰ໋໊
    ▪ ̋
    1SPKFDU$BSE
    ▪ ʷ
    QSPKFDUDBSE
    ▪ ʷ
    QSPKFDU@DBSE
    ◦ ୯ޠ͸ېࢭɺෳ਺୯ޠͰ໋໊
    ▪ 7VFͷ৔߹ɺ3FBDUͱҟͳΓ)5.-͕େจࣈখจࣈ൑ผ͠ͳ͍ͷͰিಥ͢Δ
    • Ϟσϧʹؔ͢Δ΋ͷ͸Ϟσϧ໊Λ಄ʹ͚ͭͯؔ܎ੑΛΘ͔Γ΍͘͢͢Δ
    ◦ 1SPKFDU$BSE
    1SPKFDU-JTU
    1SPKFDU4FBSDI'PSN
    • "UPNTͷίϯϙʔωϯτʹ͸઀಄ࣙʹ
    "UPN
    Λ͚ͭΔ
    ˡ
    ͜Ε͸ฐࣾͷΦϨΦϨϧʔϧ
    ◦ "UPNTͰ͋Δ͜ͱΛΘ͔Γ΍͘͢ʂ
    • ΞϓϦέʔγϣϯશମʹؔΘΔ΋ͷ͸઀಄ࣙʹ"QQΛ͚ͭΔ
    ◦ #BTF
    7
    ͳͲଞͷجఈίϯϙʔωϯτ઀಄ࣙ͸࢖Θͳ͍
    ◦ "QQ.PEBM
    "QQ5BC
    • αΠτશମͰ͔ͭ͠ଘࡏ͠ͳ͍ίϯϙʔωϯτ͸઀಄ࣙʹ5IFΛ͚ͭΔ
    ◦ 5IF)FBEFS
    5IF'PPUFS
22. WJB
    IUUQBUPNJDEFTJHOCSBEGSPTUDPNDIBQUFSPSHBOJTNT ϋϚΓͲ͜ΖᶃɿMJTU
    
    JUFN໰୊ʢ0SHBOJTN
    .PMFDVMF ʣ
23. WJB
    IUUQBUPNJDEFTJHOCSBEGSPTUDPNDIBQUFSPSHBOJTNT ϋϚΓͲ͜ΖᶃɿMJTU
    
    JUFN໰୊ʢ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 } } } ίϯϙʔωϯτ΁ͷσʔλͷೖྗΛͲ͏͢Δ͔ʁ
    QSPQT
    
    EBUB
    
    TUPSF
    
    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