Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
NuxtCompositionAPIとFirebaseの話
Search
TakeshiNishi
September 30, 2020
Programming
1
510
NuxtCompositionAPIとFirebaseの話
NuxtCompositionAPIとFirebaseを使って、共感で未来の仲間と繋がるマッチングプラットフォーム「FLAPTALK」を開発した話。
https://flaptalk.app
TakeshiNishi
September 30, 2020
Tweet
Share
More Decks by TakeshiNishi
See All by TakeshiNishi
LT駆動開発 - 話題のChatGPTで何か作る
takec24
0
170
成長ステージ別のスタートアップ集結!「事業の魅力とチームの本音」
takec24
0
130
Developing FLAPTALK by Firebase
takec24
1
410
コロナ禍でもリモート案件を途切れさせない! 案件の獲得方法とリモート案件の進め方。
takec24
0
370
フロントエンドエンジニアのためのFirebaseサーバーレス開発徹底解説
takec24
0
1.2k
スタートアップで働くというエンジニアキャリア
takec24
1
1.2k
人生を変えた炎上ブロジェクト
takec24
0
1.5k
好きなことを選び続けたら代表取締役CTOになりました。
takec24
2
1.3k
Firestoreのデータ設計について考える
takec24
6
2.1k
Other Decks in Programming
See All in Programming
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
730
rage against annotate_predecessor
junk0612
0
170
Deep Dive into Kotlin Flow
jmatsu
1
360
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
350
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
アセットのコンパイルについて
ojun9
0
130
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
Design Foundational Data Engineering Observability
sucitw
3
200
print("Hello, World")
eddie
2
530
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Being A Developer After 40
akosma
90
590k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
A Modern Web Designer's Workflow
chriscoyier
696
190k
RailsConf 2023
tenderlove
30
1.2k
KATA
mclloyd
32
14k
For a Future-Friendly Web
brad_frost
180
9.9k
Transcript
GFD@GVLVPLB !@UBLFTIJ@ /VYU$PNQPTJUJPO"1*ͱ 'JSFCBTFͷ
w ࣗݾհ w ձࣾհ w ࡞ͬͨαʔϏε w /VYU$PNQPTJUJPO"1* w 'JSFTUPSFͷઃܭʹ͍ͭͯ
w 'JSFCBTF࣮ઓಋೖͯ͠Α͔ͬͨࠔͬͨ w ·ͱΊ GFD@GVLVPLB !@UBLFTIJ@ ࣍
/VYUKT'JSFCBTF 7VFKT3VCZ($1ϒϩοΫνΣʔϯ ελʔτΞοϓԬͰىۀ মԹઘΩϟϯϓཱྀߦ ࢙ ʹ͚ͨ͠͠ !@UBLFTIJ@ GFD@GVLVPLB !@UBLFTIJ@ ࣗݾհ
גࣜձࣾ0OF4NBMM4UFQ දऔక$50 גࣜձࣾάϨʔτϏʔϯζࣾ֎$50
GFD@GVLVPLB !@UBLFTIJ@ ձࣾհ ձ໊ࣾ גࣜձࣾ0OF4NBMM4UFQ ϫϯεϞʔϧεςοϓ ઃཱ ݄ ࣄۀ༰ w
ڞײͰܨ͕ΔϚονϯάϓϥοτϑΥʔϜ'-"15"-,ͷ։ൃӡӦ w Ϩϯλϧ$50 w ΞϓϦ8FCαʔϏεͷडୗ։ൃ w άϥϑΟοΫσβΠϯ$(ϞσϦϯά ϝϯόʔ ໊ ΞϧόΠτؚΉ ˞݄࣌
GFD@GVLVPLB !@UBLFTIJ@ ࡞ͬͨαʔϏε ڞײͰະདྷͷؒͱܨ͕Δ ͚Ͳͳ͔ͳ͔ܨ͕Βͳ͍ ϚονϯάϓϥοτϑΥʔϜ '-"15"-, ϑϥοϓτʔΫ IUUQTqBQUBMLBQQ
GFD@GVLVPLB !@UBLFTIJ@ '-"15"-,ͱʁ ˞ݱࡏЋ൛ͷͨΊɺҰ෦ػೳະ࣮
GFD@GVLVPLB !@UBLFTIJ@ '-"15"-,ͱʁ ˞ݱࡏЋ൛ͷͨΊɺҰ෦ػೳະ࣮
$PNQPTJUJPO"1* GFD@GVLVPLB !@UBLFTIJ@
GFD@GVLVPLB !@UBLFTIJ@ $PNQPTJUJPO"1*ͱʁ w 7VFͰಋೖ͞Εͨඪ४ه๏ w 5ZQF4DSJQUͱͷ૬ੑ͕ྑ͍ w ؔ৺ࣄͰॲཧΛ·ͱΊΒΕΔ w
ॊೈͳϓϩάϥϜߏ
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>
'JSFTUPSF GFD@GVLVPLB !@UBLFTIJ@
GFD@GVLVPLB !@UBLFTIJ@ 'JSFTUPSFͱʁ w (PPHMF͕ఏڙ͢Δ#BB4'JSFCBTFͷ/P42-σʔλϕʔε w όοΫΤϯυෆཁͰɺϑϩϯτΤϯυ͔Β4%,Ͱૢ࡞ w ैྔ՝ۚ w
'JSFCBTFͷ/P42-'JSFTUPSFͱ3FBMUJNF%BUBCBTFͷͭ
GFD@GVLVPLB !@UBLFTIJ@ 'JSFTUPSFͱʁ w ϨΠςϯγ͕ඇৗʹ͍ w සൟͳঢ়ଶಉظʹ࠷ద w ΫΤϦ͕ශऑ w
ෳࡶͳσʔλʹෆ͖ w ଳҬ෯ͱετϨʔδʹͷΈ՝ۚ w 3FBMUJNF%BUBCBTFʹൺɺ ॊೈͳΫΤϦ w ෳࡶͳσʔλʹରԠ w ΦϖϨʔγϣϯ ಡΈऔΓॻ͖ࠐΈআ ɺ ଳҬ෯ɺετϨʔδʹ՝ۚ
GFD@GVLVPLB !@UBLFTIJ@ 'JSFTUPSFͷ σʔλઃܭ ඇਖ਼نԽ 4VC$PMMFDUJPO ΩʔࢀরϞσϧ
3FGFSFODFܕ σʔλઃܭͷϙΠϯτ
GFD@GVLVPLB !@UBLFTIJ@ ඇਖ਼نԽ VTFST 㸉<6TFS*%> 㸉OBNFlʹ͠z 㸉BHF 㸉QSFGFDUVSFlԬݝz *E OBNF
BHF QSFGFDUVSF@JE ʹ͠ *E OBNF Ԭݝ VTFSTςʔϒϧ QSFGFDUVSFTςʔϒϧ
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 ֊͕ਂ͍ͱΘ͔Γʹ͘͘ͳΔɻ
GFD@GVLVPLB !@UBLFTIJ@ 4VC$PMMFDUJPO const snapshot = await app.firestore() .collectionGroup("diaries") .where()
.get() wDPMMFDUJPO(SPVQͰ4VC$PMMFDUJPOΛԣஅతʹݕࡧՄೳɻ
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
୯७ͳࢠؔͩͬͨΒɺ4VC$PMMFDUJPO ݕࡧͷύλʔϯ͕ෳ͋Εɺ,FZࢀরϞσϧ ֊͕ਂ͘ͳΔͷɺ,FZࢀরϞσϧ 4VC$PMMFDUJPOͱ,FZࢀরϞσϧͲͪΒΛ͏͔ʁ அج४ʁʁ ࢲͷஅج४ GFD@GVLVPLB
!@UBLFTIJ@ Ͳ͏͍͚Δʁ
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ܕΛར༻ɻ
GFD@GVLVPLB !@UBLFTIJ@ / w ৬໊ͳͲ͕ݶఆతͳσʔλϧʔϓͷલʹऔಘͯ͠อ͓࣋ͯ͠ ͍ͯɺϧʔϓͰϚʔδɻ w ໊ࣾͳͲ΄ͱΜͲมߋ͞Εͳ͍σʔλඇਖ਼نԽ͓ͯ࣋ͬͯ͘͠ɻ มߋ͕͋ͬͨ߹ɺόονॲཧͰߋ৽ɻ
db.collection(“diaries”).get() .then(function(snapshot) { snapshot(function(diary) { diary.data().user.get() }) }) / ɻϧʔϓ͝ͱʹϦΫΤετɻ ˠύϑΥʔϚϯεԼɻ
GFD@GVLVPLB !@UBLFTIJ@ ηΩϡΞͳσʔλઃܭ ྫ Ϣʔβʔͷࢯ໊ɺॅॴɺ࿈བྷઌͳͲͷݸਓใͱɺχοΫωʔ ϜɺϓϩϑΟʔϧࣸਅͳͲͷެ։ใΛ࣋ͭσʔλ VTFST 㸉<6TFS*%> 㸉OJDLOBNFlʹ͠z 㸉QSPpMFlYYYYYYYKQHz
㸉OBNFl࢙z 㸉BEESFTTlԬࢢ౦۠ɾɾɾz 㸉FNBJMlUBLFTIJ!IPHFIPHFDPNz ϑΟʔϧυ୯ҐͰηΩϡϦςΟϧʔϧઃఆ Ͱ͖ͳ͍ͷͰɺެ։͞Εͯ͠·͏ʂʂ
GFD@GVLVPLB !@UBLFTIJ@ ηΩϡΞͳσʔλઃܭ VTFST 㸉<6TFS*%> 㸉OJDLOBNFlʹ͠z 㸉QSPpMFlYYYYYYYKQHz @VTFST 㸉<6TFS*%> 㸉OBNFl࢙z
㸉BEESFTTlԬࢢ౦۠ɾɾɾz 㸉FNBJMlUBLFTIJ!IPHFIPHFDPNz DPMMFDUJPOΛ͚Δɻ
GFD@GVLVPLB !@UBLFTIJ@ ઃܭํ๏ ESBXJPΛར༻ 4VC$PMMFDUJPOͳͷ͔ 3FGFSFODFͳͷ͔ શһͰڞ௨ೝࣝ ผίϨΫγϣϯͰ ಉҰͷใΛѻ͏߹ ಉҰͷ*%Ͱཧ
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ͷηΩϡϦςΟϧʔϧͰݖݶͳͲΛ੍ݶɻ
GFD@GVLVPLB !@UBLFTIJ@ ࣮ࡍͬͯΈͯͲ͏͔ʁ ϝϦοτ w গਓͰεϐʔυ։ൃ w ΞϓϦͷ։ൃʹूதͰ͖Δ w αʔόʔͷཧ͕ෆཁ
w ͍҆ʂ
GFD@GVLVPLB !@UBLFTIJ@ ྉۚʁ
GFD@GVLVPLB !@UBLFTIJ@ ྉۚʁ
GFD@GVLVPLB !@UBLFTIJ@ ࣮ࡍͬͯΈͯͲ͏͔ʁ σϝϦοτ w ϦϦʔεޙόʔδϣϯΞοϓͨ͠ࡍͷɺաڈσʔλͷϦΧόϦ ͕େม w %#ཧπʔϧ͕ඞཁ࠷ݶ w
ϨΠςϯγ w %#ઃܭ͕ΩϞʹͳΔ w /P42-ͷෆ׳Εʢ3%#ʣ
GFD@GVLVPLB !@UBLFTIJ@ ࣮ࡍͬͯΈͯͲ͏͔ʁ 'JSFCBTFམͪͪΌͬͨɾɾɾ
ࠓͷ͕͋ͳͨͷখ͞ͳҰาʹ ͭͳ͕Γ·͢Α͏ʹɻ
!@UBLFTIJ@ ڞײͰະདྷͷؒͱܨ͕Δ (͚Ͳͳ͔ͳ͔ܨ͕Βͳ͍)SNS FLAPTALKα൛ެ։த એ a࠙ձͰ͖ͳ͍͚Ͳɺ aࢀՃऀಉ࢜Ͱܨ͕Ζ͏ʂ
ΤϯδχΞืू '-"15"-,ͷ։ൃडୗ։ൃ ࣗࣾͷlదࣾϨίϝϯυzΞϓϦ։ൃ