NuxtCompositionAPIとFirebaseの話

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

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
   
   7VFKT
   3VCZ
   ($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*%>
    
    
    
    
    
    
    
    
    
    
    
    
    㸉
    OBNF
    lʹ͠z
    
    
    
    
    
    
    
    
    
    
    㸉
    BHF
    
    
    
    
    
    
    
    
    
    
    
    
    㸉
    QSFGFDUVSF
    l෱Ԭݝz
    
    
    
    
    
    
    *E OBNF BHF QSFGFDUVSF@JE  ʹ͠   *E OBNF  ෱Ԭݝ VTFSTςʔϒϧ QSFGFDUVSFTςʔϒϧ
16. GFD@GVLVPLB !@UBLFTIJ@ 4VC$PMMFDUJPO VTFST
    
    
    
    㸉
    <6TFS*%>
    
    
    
    
    
    
    
    
    
    
    
    
    㸉
    OBNF
    lʹ͠z
    
    
    
    
    
    
    
    
    
    
    㸉
    BHF
    
    
    
    
    
    
    
    
    
    
    
    
    㸉
    EJBSJFT
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    㸉
    <%JBSZ*%>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    c
    
    
    
    
    
    㸉
    UJUMF
    lλΠτϧz
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    c
    
    
    
    
    
    㸉
    DPOUFOU
    lຊจɻຊจɻz
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    㸉
    <%JBSZ*%>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    c
    
    
    
    
    
    㸉
    UJUMF
    lλΠτϧz
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    c
    
    
    
    
    
    㸉
    DPOUFOU
    lຊจɻຊจɻ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*%>
    
    
    
    
    
    
    
    
    
    
    
    
    㸉
    OBNF
    lʹ͠z
    
    
    
    
    
    
    
    
    
    
    㸉
    BHF
    
    
    EJBSJFT
    
    
    
    
    㸉
    <%JBSZ*%>
    
    
    
    c
    
    
    
    
    
    㸉
    VTFS*E
    
    
    
    
    c
    
    
    
    
    
    㸉
    UJUMF
    lλΠτϧz
    
    
    
    c
    
    
    
    
    
    㸉
    DPOUFOU
    lຊจɻຊจɻz
    
    
    
    
    
    
    㸉
    <%JBSZ*%>
    
    
    
    
    
    
    c
    
    
    
    
    
    㸉
    VTFS*E
    
    
    
    
    c
    
    
    
    
    
    㸉
    UJUMF
    lλΠτϧz
    
    
    
    c
    
    
    
    
    
    㸉
    DPOUFOU
    lຊจɻຊจɻz
    
    
    
    
    
    
    
    
    
    
    
    
19.  ୯७ͳ਌ࢠؔ܎ͩͬͨΒɺ4VC$PMMFDUJPO
     ݕࡧͷύλʔϯ͕ෳ਺͋Ε͹ɺ,FZࢀরϞσϧ
     ֊૚͕ਂ͘ͳΔ΋ͷ͸ɺ,FZࢀরϞσϧ 4VC$PMMFDUJPOͱ,FZࢀরϞσϧͲͪΒΛ࢖͏͔ʁ
    ൑அج४͸ʁʁ ࢲͷ൑அج४ GFD@GVLVPLB !@UBLFTIJ@ Ͳ͏࢖͍෼͚Δʁ
20. GFD@GVLVPLB !@UBLFTIJ@ 3FGFSFODFܕ EJBSJFT
    
    
    
    
    㸉
    <%JBSZ*%>
    
    
    
    
    
    
    c
    
    
    
    
    
    㸉
    UJUMF
    lλΠτϧz
    
    
    
    c
    
    
    
    
    
    㸉
    DPOUFOU
    lຊจɻຊจɻz
    
    
    
    c
    
    
    
    
    
    㸉
    VTFS
    VTFST<VTFS*%>
    
    
    
    
    㸉
    <%JBSZ*%>
    
    
    
    
    
    
    c
    
    
    
    
    
    㸉
    UJUMF
    lλΠτϧz
    
    
    
    c
    
    
    
    
    
    㸉
    DPOUFOU
    lຊจɻຊจɻz
    
    
    
    c
    
    
    
    
    
    㸉
    VTFS
    VTFST<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*%>
    
    
    
    
    
    
    
    
    
    
    
    
    㸉
    OJDLOBNF
    lʹ͠z
    
    
    
    
    
    
    
    
    
    
    㸉
    QSPpMF
    lYYYYYYYKQHz
    
    
    
    
    
    
    
    
    
    
    
    
    㸉
    OBNF
    l੢෢࢙z
    
    
    
    
    
    
    
    
    
    
    㸉
    BEESFTT
    l෱Ԭࢢ౦۠ɾɾɾz
    
    
    
    
    
    
    
    
    
    
    㸉
    FNBJM
    lUBLFTIJ!IPHFIPHFDPNz
    
    
    
    
    
    
    ϑΟʔϧυ୯ҐͰηΩϡϦςΟϧʔϧઃఆ Ͱ͖ͳ͍ͷͰɺެ։͞Εͯ͠·͏ʂʂ
23. GFD@GVLVPLB !@UBLFTIJ@ ηΩϡΞͳσʔλઃܭ VTFST
    
    
    
    㸉
    <6TFS*%>
    
    
    
    
    
    
    
    
    
    
    
    
    㸉
    OJDLOBNF
    lʹ͠z
    
    
    
    
    
    
    
    
    
    
    㸉
    QSPpMF
    lYYYYYYYKQHz
    
    
    @VTFST
    
    
    
    㸉
    <6TFS*%>
    
    
    
    
    
    
    
    
    
    
    㸉
    OBNF
    l੢෢࢙z
    
    
    
    
    
    
    
    
    
    
    㸉
    BEESFTT
    l෱Ԭࢢ౦۠ɾɾɾz
    
    
    
    
    
    
    
    
    
    
    㸉
    FNBJM
    lUBLFTIJ!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ΞϓϦ։ൃ