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
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
14k
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
110
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
700
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
20
8.1k
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
GPUを計算資源として使おう!
primenumber
1
170
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
190
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
440
VS Code Update for GitHub Copilot
74th
2
660
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
1
130
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Navigating Team Friction
lara
187
15k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
It's Worth the Effort
3n
185
28k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Thoughts on Productivity
jonyablonski
69
4.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Building an army of robots
kneath
306
45k
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ΞϓϦ։ൃ