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
110
Developing FLAPTALK by Firebase
takec24
1
390
コロナ禍でもリモート案件を途切れさせない! 案件の獲得方法とリモート案件の進め方。
takec24
0
360
フロントエンドエンジニアのためのFirebaseサーバーレス開発徹底解説
takec24
0
1.2k
スタートアップで働くというエンジニアキャリア
takec24
1
1.1k
人生を変えた炎上ブロジェクト
takec24
0
1.5k
好きなことを選び続けたら代表取締役CTOになりました。
takec24
2
1.3k
Firestoreのデータ設計について考える
takec24
6
2k
Other Decks in Programming
See All in Programming
RubyKaigiで得られる10の価値 〜Ruby話を聞くことだけが RubyKaigiじゃない〜
tomohiko9090
0
130
技術懸念に立ち向かい 法改正を穏便に乗り切った話
pop_cashew
0
1.1k
2度もゼロから書き直して、やっとブラウザでぬるぬる動くAIに辿り着いた話
tomoino
0
130
CSC307 Lecture 17
javiergs
PRO
0
110
実はすごいスピードで進化しているCSS
hayato_yokoyama
0
100
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
1.7k
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
0
210
Javaに鉄道指向プログラミング (Railway Oriented Pro gramming) のエッセンスを取り入れる/Bringing the Essence of Railway-Oriented Programming to Java
cocet33000
1
470
💎 My RubyKaigi Effect in 2025: Top Ruby Companies 🌐
yasulab
PRO
1
130
Using AI Tools Around Software Development
inouehi
0
720
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
lnit
1
150
JSAI2025 RecSysChallenge2024 優勝報告
unonao
1
420
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Scaling GitHub
holman
459
140k
Side Projects
sachag
454
42k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Agile that works and the tools we love
rasmusluckow
329
21k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
106
19k
Building Applications with DynamoDB
mza
95
6.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
A better future with KSS
kneath
239
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
15
900
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ΞϓϦ։ൃ