Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

Keisuke Imura

June 01, 2019
Tweet

More Decks by Keisuke Imura

Other Decks in Programming

Transcript

  1. "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
  2. ໋໊ • 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
  3. ϋϚΓͲ͜Ζᶄɿ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)" />
  4. ϋϚΓͲ͜Ζᶅɿ4UPSFͷ࢖͍ॴ 1BHFT 0SHBOJTNT .PMFDVMFT "UPNT 4UPSF QSPQT QSPQT "1* QSPQT

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

    true, validator: value => { return value >= 0 } } } ίϯϙʔωϯτ΁ͷσʔλͷೖྗΛͲ͏͢Δ͔ʁQSPQTEBUBTUPSF QSPQTͷΦϓγϣϯΛ͖ͪΜͱࢦఆ͓ͯ͜͠͏
  6. 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 }