NuxtCompositionAPIとFirebaseの話

508d2cf1990876daf4797795a2d81bd2?s=47 TakeshiNishi
September 30, 2020

 NuxtCompositionAPIとFirebaseの話

NuxtCompositionAPIとFirebaseを使って、共感で未来の仲間と繋がるマッチングプラットフォーム「FLAPTALK」を開発した話。
https://flaptalk.app

508d2cf1990876daf4797795a2d81bd2?s=128

TakeshiNishi

September 30, 2020
Tweet

Transcript

  1. GFD@GVLVPLB !@UBLFTIJ@ /VYU$PNQPTJUJPO"1*ͱ 'JSFCBTFͷ࿩

  2. w ࣗݾ঺հ w ձࣾ঺հ w ࡞ͬͨαʔϏε w /VYU$PNQPTJUJPO"1* w 'JSFTUPSFͷઃܭʹ͍ͭͯ

    w 'JSFCBTF࣮ઓಋೖͯ͠Α͔ͬͨ఺ࠔͬͨ఺ w ·ͱΊ GFD@GVLVPLB !@UBLFTIJ@ ໨࣍
  3. /VYUKT'JSFCBTF 7VFKT3VCZ($1ϒϩοΫνΣʔϯ ελʔτΞοϓ෱ԬͰىۀ ম೑ԹઘΩϟϯϓཱྀߦ ੢෢࢙ ʹ͚ͨ͠͠ !@UBLFTIJ@ GFD@GVLVPLB !@UBLFTIJ@ ࣗݾ঺հ

    גࣜձࣾ0OF4NBMM4UFQ ୅දऔక໾$50 גࣜձࣾάϨʔτϏʔϯζࣾ֎$50
  4. GFD@GVLVPLB !@UBLFTIJ@ ձࣾ঺հ ձ໊ࣾ גࣜձࣾ0OF4NBMM4UFQ ϫϯεϞʔϧεςοϓ ઃཱ ೥݄೔ ࣄۀ಺༰ w

    ڞײͰܨ͕ΔϚονϯάϓϥοτϑΥʔϜ'-"15"-,ͷ։ൃӡӦ w Ϩϯλϧ$50 w ΞϓϦ8FCαʔϏεͷडୗ։ൃ w άϥϑΟοΫσβΠϯ$(ϞσϦϯά ϝϯόʔ ໊ ΞϧόΠτؚΉ ˞೥݄೔࣌఺
  5. GFD@GVLVPLB !@UBLFTIJ@ ࡞ͬͨαʔϏε ڞײͰະདྷͷ஥ؒͱܨ͕Δ ͚Ͳͳ͔ͳ͔ܨ͕Βͳ͍  ϚονϯάϓϥοτϑΥʔϜ '-"15"-, ϑϥοϓτʔΫ IUUQTqBQUBMLBQQ

  6. GFD@GVLVPLB !@UBLFTIJ@ '-"15"-,ͱ͸ʁ ˞ݱࡏЋ൛ͷͨΊɺҰ෦ػೳ͸ະ࣮૷

  7. GFD@GVLVPLB !@UBLFTIJ@ '-"15"-,ͱ͸ʁ ˞ݱࡏЋ൛ͷͨΊɺҰ෦ػೳ͸ະ࣮૷

  8. $PNQPTJUJPO"1* GFD@GVLVPLB !@UBLFTIJ@

  9. GFD@GVLVPLB !@UBLFTIJ@ $PNQPTJUJPO"1*ͱ͸ʁ w 7VFͰಋೖ͞Εͨඪ४ه๏ w 5ZQF4DSJQUͱͷ૬ੑ͕ྑ͍ w ؔ৺ࣄͰॲཧΛ·ͱΊΒΕΔ w

    ॊೈͳϓϩάϥϜߏ੒
  10. GFD@GVLVPLB !@UBLFTIJ@ $PNQPTJUJPO"1* <template> <div class=“sample”> <a @click=”sampleEmit”>Click</a> </div> </template>

    <script lang="ts"> import Vue, { PropOptions } from 'vue' export default Vue.extend({ name: 'Sample', props: { prop: { type: String, required: true } as PropOptions<String> }, data: () => ({ sample: 'sample' }), computed: { computed() { return {} } }, mounted() {}, methods: { sampleEmit() { this.$emit('sampleEmit', this.sample) } } }) </script> <style lang="scss" scoped></style> <template> <div class=“sample”> <a @click=”sampleEmit”>Click</a> </div> </template> <script lang="ts"> import { defineComponent, reactive, SetupContext } from '@vue/composition-api' type Props = { sample: string } type State = { sample: string } export default defineComponent({ name: 'Sample', props: { Prop: { type: String, required: true } }, setup(props: Props, context: SetupContext) { const state = reactive<State>({ sample: 'sample' }) const sampleEmit = () => { context.emit('sampleEmit', props.sample) } return { state, props, sampleEmit } } }) </script> <style lang="scss" scoped></style>
  11. 'JSFTUPSF GFD@GVLVPLB !@UBLFTIJ@

  12. GFD@GVLVPLB !@UBLFTIJ@ 'JSFTUPSFͱ͸ʁ w (PPHMF͕ఏڙ͢Δ#BB4'JSFCBTFͷ/P42-σʔλϕʔε w όοΫΤϯυෆཁͰɺϑϩϯτΤϯυ͔Β4%,Ͱ௚઀ૢ࡞ w ैྔ՝ۚ w

    'JSFCBTFͷ/P42-͸'JSFTUPSFͱ3FBMUJNF%BUBCBTFͷͭ
  13. GFD@GVLVPLB !@UBLFTIJ@ 'JSFTUPSFͱ͸ʁ w ϨΠςϯγ͕ඇৗʹ௿͍ w සൟͳঢ়ଶಉظʹ࠷ద w ΫΤϦ͕ශऑ w

    ෳࡶͳσʔλʹ͸ෆ޲͖ w ଳҬ෯ͱετϨʔδʹͷΈ՝ۚ w 3FBMUJNF%BUBCBTFʹൺ΂ɺ ॊೈͳΫΤϦ w ෳࡶͳσʔλʹରԠ w ΦϖϨʔγϣϯ ಡΈऔΓॻ͖ࠐΈ࡟আ ɺ ଳҬ෯ɺετϨʔδʹ՝ۚ
  14. GFD@GVLVPLB !@UBLFTIJ@ 'JSFTUPSFͷ σʔλઃܭ  ඇਖ਼نԽ  4VC$PMMFDUJPO  ΩʔࢀরϞσϧ

     3FGFSFODFܕ σʔλઃܭͷϙΠϯτ
  15. GFD@GVLVPLB !@UBLFTIJ@ ඇਖ਼نԽ VTFST 㸉<6TFS*%> 㸉OBNFlʹ͠z 㸉BHF 㸉QSFGFDUVSFl෱Ԭݝz *E OBNF

    BHF QSFGFDUVSF@JE  ʹ͠   *E OBNF  ෱Ԭݝ VTFSTςʔϒϧ QSFGFDUVSFTςʔϒϧ
  16. GFD@GVLVPLB !@UBLFTIJ@ 4VC$PMMFDUJPO VTFST 㸉<6TFS*%> 㸉OBNFlʹ͠z 㸉BHF 㸉EJBSJFT 㸉<%JBSZ*%> c㸉UJUMFlλΠτϧz

    c㸉DPOUFOUlຊจɻຊจɻz 㸉<%JBSZ*%> c㸉UJUMFlλΠτϧz c㸉DPOUFOUlຊจɻຊจɻz wσʔλͷؔ܎͕Θ͔Γ΍͍͢ɻ w ֊૚͕ਂ͍ͱΘ͔Γʹ͘͘ͳΔɻ
  17. GFD@GVLVPLB !@UBLFTIJ@ 4VC$PMMFDUJPO const snapshot = await app.firestore() .collectionGroup("diaries") .where()

    .get() wDPMMFDUJPO(SPVQͰ4VC$PMMFDUJPOΛԣஅతʹݕࡧՄೳɻ
  18. GFD@GVLVPLB !@UBLFTIJ@ ΩʔࢀরϞσϧ VTFST 㸉<6TFS*%> 㸉OBNFlʹ͠z 㸉BHF EJBSJFT 㸉<%JBSZ*%> c㸉VTFS*E

    c㸉UJUMFlλΠτϧz c㸉DPOUFOUlຊจɻຊจɻz 㸉<%JBSZ*%> c㸉VTFS*E c㸉UJUMFlλΠτϧz c㸉DPOUFOUlຊจɻຊจɻz
  19.  ୯७ͳ਌ࢠؔ܎ͩͬͨΒɺ4VC$PMMFDUJPO  ݕࡧͷύλʔϯ͕ෳ਺͋Ε͹ɺ,FZࢀরϞσϧ  ֊૚͕ਂ͘ͳΔ΋ͷ͸ɺ,FZࢀরϞσϧ 4VC$PMMFDUJPOͱ,FZࢀরϞσϧͲͪΒΛ࢖͏͔ʁ ൑அج४͸ʁʁ ࢲͷ൑அج४ GFD@GVLVPLB

    !@UBLFTIJ@ Ͳ͏࢖͍෼͚Δʁ
  20. GFD@GVLVPLB !@UBLFTIJ@ 3FGFSFODFܕ EJBSJFT 㸉<%JBSZ*%> c㸉UJUMFlλΠτϧz c㸉DPOUFOUlຊจɻຊจɻz c㸉VTFSVTFST<VTFS*%> 㸉<%JBSZ*%> c㸉UJUMFlλΠτϧz

    c㸉DPOUFOUlຊจɻຊจɻz c㸉VTFSVTFST<VTFS*%> w/ͷ਌ࢠؔ܎ͷσʔλͰ͸3FGFSFODFܕΛར༻ɻ
  21. GFD@GVLVPLB !@UBLFTIJ@ / ໰୊ w ໾৬໊ͳͲ਺͕ݶఆతͳσʔλ͸ϧʔϓͷલʹऔಘͯ͠อ͓࣋ͯ͠ ͍ͯɺϧʔϓ಺ͰϚʔδɻ w ໊ࣾͳͲ΄ͱΜͲมߋ͞Εͳ͍σʔλ͸ඇਖ਼نԽ͓ͯ࣋ͬͯ͘͠ɻ มߋ͕͋ͬͨ৔߹͸ɺόονॲཧͰߋ৽ɻ

    db.collection(“diaries”).get() .then(function(snapshot) { snapshot(function(diary) { diary.data().user.get() }) }) / ໰୊ɻϧʔϓ͝ͱʹϦΫΤετɻ ˠύϑΥʔϚϯε௿Լɻ
  22. GFD@GVLVPLB !@UBLFTIJ@ ηΩϡΞͳσʔλઃܭ ྫ Ϣʔβʔͷࢯ໊ɺॅॴɺ࿈བྷઌͳͲͷݸਓ৘ใͱɺχοΫωʔ ϜɺϓϩϑΟʔϧࣸਅͳͲͷެ։৘ใΛ࣋ͭσʔλ VTFST 㸉<6TFS*%> 㸉OJDLOBNFlʹ͠z 㸉QSPpMFlYYYYYYYKQHz

    㸉OBNFl੢෢࢙z 㸉BEESFTTl෱Ԭࢢ౦۠ɾɾɾz 㸉FNBJMlUBLFTIJ!IPHFIPHFDPNz  ϑΟʔϧυ୯ҐͰηΩϡϦςΟϧʔϧઃఆ Ͱ͖ͳ͍ͷͰɺެ։͞Εͯ͠·͏ʂʂ
  23. GFD@GVLVPLB !@UBLFTIJ@ ηΩϡΞͳσʔλઃܭ VTFST 㸉<6TFS*%> 㸉OJDLOBNFlʹ͠z 㸉QSPpMFlYYYYYYYKQHz @VTFST 㸉<6TFS*%> 㸉OBNFl੢෢࢙z

    㸉BEESFTTl෱Ԭࢢ౦۠ɾɾɾz 㸉FNBJMlUBLFTIJ!IPHFIPHFDPNz  DPMMFDUJPOΛ෼͚Δɻ
  24. GFD@GVLVPLB !@UBLFTIJ@ ઃܭํ๏ ESBXJPΛར༻ 4VC$PMMFDUJPOͳͷ͔ 3FGFSFODFͳͷ͔ શһͰڞ௨ೝࣝ ผίϨΫγϣϯͰ΋ ಉҰͷ৘ใΛѻ͏৔߹ ಉҰͷ*%Ͱ؅ཧ

  25. GFD@GVLVPLB !@UBLFTIJ@ ηΩϡϦςΟϧʔϧͷઃఆ service cloud.firestore { match /databases/{database}/documents { match

    /users/{userId} { allow read; allow create: if request.auth.uid != null; allow update, delete: if request.auth.uid == userId; } ɹ} } جຊతʹϑϩϯτΤϯυ͔Β௚઀ૢ࡞Ͱ͖ΔͷͰɺϑϩϯτΤ ϯυଆͰ6TFS*%Λِ૷Մೳɻ 'JSFTUPSFͷηΩϡϦςΟϧʔϧͰݖݶͳͲΛ੍ݶɻ
  26. GFD@GVLVPLB !@UBLFTIJ@ ࣮ࡍ࢖ͬͯΈͯͲ͏͔ʁ ϝϦοτ w গਓ਺Ͱεϐʔυ։ൃ w ΞϓϦͷ։ൃʹूதͰ͖Δ w αʔόʔͷ؅ཧ͕ෆཁ

    w ͍҆ʂ
  27. GFD@GVLVPLB !@UBLFTIJ@ ྉۚ͸ʁ

  28. GFD@GVLVPLB !@UBLFTIJ@ ྉۚ͸ʁ

  29. GFD@GVLVPLB !@UBLFTIJ@ ࣮ࡍ࢖ͬͯΈͯͲ͏͔ʁ σϝϦοτ w ϦϦʔεޙόʔδϣϯΞοϓͨ͠ࡍͷɺաڈσʔλͷϦΧόϦ ͕େม w %#؅ཧπʔϧ͕ඞཁ࠷௿ݶ w

    ϨΠςϯγ w %#ઃܭ͕ΩϞʹͳΔ w /P42-΁ͷෆ׳Εʢ3%#೴ʣ
  30. GFD@GVLVPLB !@UBLFTIJ@ ࣮ࡍ࢖ͬͯΈͯͲ͏͔ʁ 'JSFCBTFམͪͪΌͬͨɾɾɾ

  31. ࠓ೔ͷ࿩͕͋ͳͨͷখ͞ͳҰาʹ ͭͳ͕Γ·͢Α͏ʹɻ

  32. !@UBLFTIJ@ ڞײͰະདྷͷ஥ؒͱܨ͕Δ
 (͚Ͳͳ͔ͳ͔ܨ͕Βͳ͍)SNS FLAPTALKα൛ެ։த એ఻ a࠙਌ձ͸Ͱ͖ͳ͍͚Ͳɺ aࢀՃऀಉ࢜Ͱܨ͕Ζ͏ʂ

  33. ΤϯδχΞืू '-"15"-,ͷ։ൃडୗ։ൃ ࣗࣾͷlదࣾϨίϝϯυzΞϓϦ։ൃ