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
120
Developing FLAPTALK by Firebase
takec24
1
400
コロナ禍でもリモート案件を途切れさせない! 案件の獲得方法とリモート案件の進め方。
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
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
110
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.2k
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
Deep Dive into ~/.claude/projects
hiragram
14
2.5k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Balancing Empowerment & Direction
lara
1
430
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Designing for Performance
lara
610
69k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Scaling GitHub
holman
460
140k
How to train your dragon (web standard)
notwaldorf
95
6.1k
GraphQLとの向き合い方2022年版
quramy
49
14k
Building Applications with DynamoDB
mza
95
6.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
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ΞϓϦ։ൃ