https://azukipan.com/_next/static/chunks/275.a7250ea2589b302f.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[275],{275:function(n,s,a){a.r(s);var e=a(85893),c=a(11151);function t(n){let s=Object.assign({p:"p",pre:"pre",code:"code",span:"span",img:"img"},(0,c.ah)(),n.components),{InternalLink:a}=s;return a||function(n,s){throw Error("Expected "+(s?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}("InternalLink",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(s.p,{children:"前回は、Firestore Databese の単一データを所得し、フロントエンドに表示しました。"}),"\n",(0,e.jsx)(a,{slug:"firebase-firestore-database-get",image:"/images/243-image1.png",contents:"【Firebase】Firestore Databeseの単一データを取得し、フロントエンドに表示する"}),"\n",(0,e.jsx)(s.p,{children:"今回は、Firestore Databese のデータベースをリアルタイムで取得します。"}),"\n",(0,e.jsx)(s.p,{children:"まずは、どのコンポーネントでも値が受け取れるようにしたいので、フックを作成します。"}),"\n",(0,e.jsx)(s.p,{children:"hooks フォルダを作成し、useFirebase.js を作成しましょう。"}),"\n",(0,e.jsx)(s.pre,{className:"language-jsx",children:(0,e.jsxs)(s.code,{className:"language-jsx",children:[(0,e.jsx)(s.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(s.span,{className:"token function-variable function",children:"useFirebase"})," ",(0,e.jsx)(s.span,{className:"token operator",children:"="})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token parameter",children:"data"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n\n",(0,e.jsx)(s.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(s.span,{className:"token keyword module",children:"default"})," useFirebase",(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n"]})}),"\n",(0,e.jsxs)(s.p,{children:[(0,e.jsx)(s.code,{children:"useState"}),"で状態管理しましょう。"]}),"\n",(0,e.jsx)(s.pre,{className:"language-jsx",children:(0,e.jsxs)(s.code,{className:"language-jsx",children:[(0,e.jsx)(s.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"["}),"documents",(0,e.jsx)(s.span,{className:"token punctuation",children:","})," setDocuments",(0,e.jsx)(s.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(s.span,{className:"token operator",children:"="})," ",(0,e.jsx)(s.span,{className:"token function",children:"useState"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token keyword null nil",children:"null"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n"]})}),"\n",(0,e.jsx)(s.p,{children:"※useState の中身を null にしてしまうと、エラーが発生します。\n以下のコードに修正してください。"}),"\n",(0,e.jsx)(s.pre,{className:"language-jsx",children:(0,e.jsxs)(s.code,{className:"language-jsx",children:[(0,e.jsx)(s.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"["}),"documents",(0,e.jsx)(s.span,{className:"token punctuation",children:","})," setDocuments",(0,e.jsx)(s.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(s.span,{className:"token operator",children:"="})," ",(0,e.jsx)(s.span,{className:"token function",children:"useState"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token keyword null nil",children:"null"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n"]})}),"\n",(0,e.jsx)(s.p,{children:"詳しくは、こちらでご確認ください。"}),"\n",(0,e.jsx)(a,{slug:"react-useeffect-null",image:"/images/246-image1.png",contents:"【React】エラー『Uncaught TypeError: Cannot read properties of null (reading '0')』を解消する"}),"\n",(0,e.jsxs)(s.p,{children:["firebase/firestore から",(0,e.jsx)(s.code,{children:"collection"}),"と",(0,e.jsx)(s.code,{children:"onSnapshot"}),"をインポートします。"]}),"\n",(0,e.jsx)(s.pre,{className:"language-jsx",children:(0,e.jsxs)(s.code,{className:"language-jsx",children:[(0,e.jsx)(s.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(s.span,{className:"token imports",children:[(0,e.jsx)(s.span,{className:"token punctuation",children:"{"})," collection",(0,e.jsx)(s.span,{className:"token punctuation",children:","})," onSnapshot ",(0,e.jsx)(s.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(s.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(s.span,{className:"token string",children:'"firebase/firestore"'}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n"]})}),"\n",(0,e.jsxs)(s.p,{children:[(0,e.jsx)(s.code,{children:"useEffect"}),"を設定し、フックに",(0,e.jsx)(s.code,{children:"data"}),"を設定ます。"]}),"\n",(0,e.jsxs)(s.p,{children:[(0,e.jsx)(s.code,{children:"firebaseApp"}),"をインポートし、",(0,e.jsx)(s.code,{children:"firestore"}),"を使用します。"]}),"\n",(0,e.jsx)(s.pre,{className:"language-jsx",children:(0,e.jsxs)(s.code,{className:"language-jsx",children:[(0,e.jsx)(s.span,{className:"token function",children:"useEffect"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n  ",(0,e.jsx)(s.span,{className:"token keyword",children:"const"})," firestore ",(0,e.jsx)(s.span,{className:"token operator",children:"="})," firebaseApp",(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token property-access",children:"firestore"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n",(0,e.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"["}),"data",(0,e.jsx)(s.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n"]})}),"\n",(0,e.jsxs)(s.p,{children:[(0,e.jsx)(s.code,{children:"collection"}),"に",(0,e.jsx)(s.code,{children:"firestore"}),"と",(0,e.jsx)(s.code,{children:"data"}),"を指定します。"]}),"\n",(0,e.jsx)(s.pre,{className:"language-jsx",children:(0,e.jsxs)(s.code,{className:"language-jsx",children:[(0,e.jsx)(s.span,{className:"token function",children:"useEffect"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n  ",(0,e.jsx)(s.span,{className:"token keyword",children:"const"})," firestore ",(0,e.jsx)(s.span,{className:"token operator",children:"="})," firebaseApp",(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token property-access",children:"firestore"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n\n  ",(0,e.jsx)(s.span,{className:"token keyword",children:"const"})," docRef ",(0,e.jsx)(s.span,{className:"token operator",children:"="})," ",(0,e.jsx)(s.span,{className:"token function",children:"collection"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),"firestore",(0,e.jsx)(s.span,{className:"token punctuation",children:","})," data",(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n",(0,e.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"["}),"data",(0,e.jsx)(s.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n"]})}),"\n",(0,e.jsx)(s.p,{children:"onSnapshot を使って、データを取得します。"}),"\n",(0,e.jsx)(s.p,{children:"また、results という空の配列を準備しましょう。"}),"\n",(0,e.jsx)(s.p,{children:"データを results に入れるようにします。"}),"\n",(0,e.jsx)(s.pre,{className:"language-jsx",children:(0,e.jsxs)(s.code,{className:"language-jsx",children:[(0,e.jsx)(s.span,{className:"token function",children:"onSnapshot"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),"docRef",(0,e.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token parameter",children:"snapshot"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n  ",(0,e.jsx)(s.span,{className:"token keyword",children:"let"})," results ",(0,e.jsx)(s.span,{className:"token operator",children:"="})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"["}),(0,e.jsx)(s.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n  snapshot",(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token property-access",children:"docs"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token method function property-access",children:"forEac

1h"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token parameter",children:"doc"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n    results",(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token method function property-access",children:"push"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(s.span,{className:"token spread operator",children:"..."}),"doc",(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token method function property-access",children:"data"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(s.span,{className:"token literal-property property",children:"id"}),(0,e.jsx)(s.span,{className:"token operator",children:":"})," doc",(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token property-access",children:"id"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n  ",(0,e.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n  ",(0,e.jsx)(s.span,{className:"token function",children:"setDocuments"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),"results",(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n",(0,e.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n"]})}),"\n",(0,e.jsx)(s.p,{children:"onSnapshot を関数としてリターンします。"}),"\n",(0,e.jsx)(s.pre,{className:"language-jsx",children:(0,e.jsxs)(s.code,{className:"language-jsx",children:[(0,e.jsx)(s.span,{className:"token function",children:"useEffect"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n  ",(0,e.jsx)(s.span,{className:"token keyword",children:"const"})," firestore ",(0,e.jsx)(s.span,{className:"token operator",children:"="})," firebaseApp",(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token property-access",children:"firestore"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n  ",(0,e.jsx)(s.span,{className:"token keyword",children:"const"})," docRef ",(0,e.jsx)(s.span,{className:"token operator",children:"="})," ",(0,e.jsx)(s.span,{className:"token function",children:"collection"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),"firestore",(0,e.jsx)(s.span,{className:"token punctuation",children:","})," data",(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n\n  ",(0,e.jsx)(s.span,{className:"token keyword",children:"const"})," unsub ",(0,e.jsx)(s.span,{className:"token operator",children:"="})," ",(0,e.jsx)(s.span,{className:"token function",children:"onSnapshot"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),"docRef",(0,e.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token parameter",children:"snapshot"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n    ",(0,e.jsx)(s.span,{className:"token keyword",children:"let"})," results ",(0,e.jsx)(s.span,{className:"token operator",children:"="})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"["}),(0,e.jsx)(s.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n    snapshot",(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token property-access",children:"docs"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token method function property-access",children:"forEac

1h"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token parameter",children:"doc"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n      results",(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token method function property-access",children:"push"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(s.span,{className:"token spread operator",children:"..."}),"doc",(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token method function property-access",children:"data"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(s.span,{className:"token literal-property property",children:"id"}),(0,e.jsx)(s.span,{className:"token operator",children:":"})," doc",(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token property-access",children:"id"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n    ",(0,e.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n    ",(0,e.jsx)(s.span,{className:"token function",children:"setDocuments"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),"results",(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n  ",(0,e.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n\n  ",(0,e.jsx)(s.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(s.span,{className:"token function",children:"unsub"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n",(0,e.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"["}),"data",(0,e.jsx)(s.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n"]})}),"\n",(0,e.jsxs)(s.p,{children:["状態管理している",(0,e.jsx)(s.code,{children:"documents"}),"をリターンします。"]}),"\n",(0,e.jsx)(s.pre,{className:"language-jsx",children:(0,e.jsxs)(s.code,{className:"language-jsx",children:[(0,e.jsx)(s.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(s.span,{className:"token imports",children:[(0,e.jsx)(s.span,{className:"token punctuation",children:"{"})," firebaseApp ",(0,e.jsx)(s.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(s.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(s.span,{className:"token string",children:'"../firebase/firebaseConfig"'}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n\n",(0,e.jsx)(s.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(s.span,{className:"token function-variable function",children:"useFirebase"})," ",(0,e.jsx)(s.span,{className:"token operator",children:"="})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token parameter",children:"data"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n  ",(0,e.jsx)(s.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"["}),"documents",(0,e.jsx)(s.span,{className:"token punctuation",children:","})," setDocuments",(0,e.jsx)(s.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(s.span,{className:"token operator",children:"="})," ",(0,e.jsx)(s.span,{className:"token function",children:"useState"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token keyword null nil",children:"null"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n  ",(0,e.jsx)(s.span,{className:"token console class-name",children:"console"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token method function property-access",children:"log"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),"documents",(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n\n  ",(0,e.jsx)(s.span,{className:"token function",children:"useEffect"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n    ",(0,e.jsx)(s.span,{className:"token keyword",children:"const"})," firestore ",(0,e.jsx)(s.span,{className:"token operator",children:"="})," firebaseApp",(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token property-access",children:"firestore"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n    ",(0,e.jsx)(s.span,{className:"token keyword",children:"const"})," docRef ",(0,e.jsx)(s.span,{className:"token operator",children:"="})," ",(0,e.jsx)(s.span,{className:"token function",children:"collection"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),"firestore",(0,e.jsx)(s.span,{className:"token punctuation",children:","})," data",(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n\n    ",(0,e.jsx)(s.span,{className:"token keyword",children:"const"})," unsub ",(0,e.jsx)(s.span,{className:"token operator",children:"="})," ",(0,e.jsx)(s.span,{className:"token function",children:"onSnapshot"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),"docRef",(0,e.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token parameter",children:"snapshot"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n      ",(0,e.jsx)(s.span,{className:"token keyword",children:"let"})," results ",(0,e.jsx)(s.span,{className:"token operator",children:"="})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"["}),(0,e.jsx)(s.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n      snapshot",(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token property-access",children:"docs"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token method function property-access",children:"forEac

1h"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token parameter",children:"doc"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n        results",(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token method function property-access",children:"push"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(s.span,{className:"token spread operator",children:"..."}),"doc",(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token method function property-access",children:"data"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(s.span,{className:"token literal-property property",children:"id"}),(0,e.jsx)(s.span,{className:"token operator",children:":"})," doc",(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token property-access",children:"id"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n      ",(0,e.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n      ",(0,e.jsx)(s.span,{className:"token function",children:"setDocuments"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),"results",(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n    ",(0,e.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n\n    ",(0,e.jsx)(s.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(s.span,{className:"token function",children:"unsub"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n  ",(0,e.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"["}),"data",(0,e.jsx)(s.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n\n  ",(0,e.jsx)(s.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"{"})," documents ",(0,e.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n",(0,e.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n\n",(0,e.jsx)(s.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(s.span,{className:"token keyword module",children:"default"})," useFirebase",(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n"]})}),"\n",(0,e.jsx)(s.p,{children:"こちらのフックを BooksGet.js にインポートし、使用します。"}),"\n",(0,e.jsx)(s.p,{children:"引数には、collection である”Books”を指定します。"}),"\n",(0,e.jsx)(s.pre,{className:"language-jsx",children:(0,e.jsxs)(s.code,{className:"language-jsx",children:[(0,e.jsx)(s.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(s.span,{className:"token function-variable function",children:(0,e.jsx)(s.span,{className:"token maybe-class-name",children:"BooksGet"})})," ",(0,e.jsx)(s.span,{className:"token operator",children:"="})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n  ",(0,e.jsx)(s.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(s.span,{className:"token literal-property property",children:"documents"}),(0,e.jsx)(s.span,{className:"token operator",children:":"})," books ",(0,e.jsx)(s.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(s.span,{className:"token operator",children:"="})," ",(0,e.jsx)(s.span,{className:"token function",children:"useFirebase"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token string",children:'"Books"'}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n\n  ",(0,e.jsx)(s.span,{className:"token console class-name",children:"console"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token method function property-access",children:"log"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),"books",(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n  ",(0,e.jsx)(s.span,{className:"token keyword control-flow",children:"return"})," books",(0,e.jsx)(s.span,{className:"token punctuation",children:"["}),(0,e.jsx)(s.span,{className:"token number",children:"0"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(s.span,{className:"token operator",children:"?"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),"\n    books",(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token method function property-access",children:"map"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),(0,e.jsx)(s.span,{className:"token parameter",children:"book"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),"\n      ",(0,e.jsxs)(s.span,{className:"token tag",children:[(0,e.jsxs)(s.span,{className:"token tag",children:[(0,e.jsx)(s.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,e.jsx)(s.span,{className:"token attr-name",children:"key"}),(0,e.jsxs)(s.span,{className:"token script language-javascript",children:[(0,e.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(s.span,{className:"token punctuation",children:"{"}),"book",(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token property-access",children:"id"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(s.span,{className:"token plain-text",children:"\n        "}),(0,e.jsxs)(s.span,{className:"token tag",children:[(0,e.jsxs)(s.span,{className:"token tag",children:[(0,e.jsx)(s.span,{className:"token punctuation",children:"<"}),"p"]}),(0,e.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(s.span,{className:"token punctuation",children:"{"}),"book",(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token property-access",children:"title"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,e.jsxs)(s.span,{className:"token tag",children:[(0,e.jsxs)(s.span,{className:"token tag",children:[(0,e.jsx)(s.span,{className:"token punctuation",children:"</"}),"p"]}),(0,e.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(s.span,{className:"token plain-text",children:"\n        "}),(0,e.jsxs)(s.span,{className:"token tag",children:[(0,e.jsxs)(s.span,{className:"token tag",children:[(0,e.jsx)(s.span,{className:"token punctuation",children:"<"}),"p"]}),(0,e.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(s.span,{className:"token punctuation",children:"{"}),"book",(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token property-access",children:"author"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,e.jsxs)(s.span,{className:"token tag",children:[(0,e.jsxs)(s.span,{className:"token tag",children:[(0,e.jsx)(s.span,{className:"token punctuation",children:"</"}),"p"]}),(0,e.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(s.span,{className:"token plain-text",children:"\n        "}),(0,e.jsxs)(s.span,{className:"token tag",children:[(0,e.jsxs)(s.span,{className:"token tag",children:[(0,e.jsx)(s.span,{className:"token punctuation",children:"<"}),"p"]}),(0,e.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(s.span,{className:"token punctuation",children:"{"}),"book",(0,e.jsx)(s.span,{className:"token punctuation",children:"."}),(0,e.jsx)(s.span,{className:"token property-access",children:"category"}),(0,e.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,e.jsxs)(s.span,{className:"token tag",children:[(0,e.jsxs)(s.span,{className:"token tag",children:[(0,e.jsx)(s.span,{className:"token punctuation",children:"</"}),"p"]}),(0,e.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(s.span,{className:"token plain-text",children:"\n      "}),(0,e.jsxs)(s.span,{className:"token tag",children:[(0,e.jsxs)(s.span,{className:"token tag",children:[(0,e.jsx)(s.span,{className:"token punctuation",children:"</"}),"div"]}),(0,e.jsx)(s.span,{className:"token punctuation",children:">"})]}),"\n    ",(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),"\n  ",(0,e.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(s.span,{className:"token operator",children:":"})," ",(0,e.jsx)(s.span,{className:"token punctuation",children:"("}),"\n    ",(0,e.jsxs)(s.span,{className:"token tag",children:[(0,e.jsxs)(s.span,{className:"token tag",children:[(0,e.jsx)(s.span,{className:"token punctuation",children:"<"}),"p"]}),(0,e.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(s.span,{className:"token plain-text",children:"データがありません"}),(0,e.jsxs)(s.span,{className:"token tag",children:[(0,e.jsxs)(s.span,{className:"token tag",children:[(0,e.jsx)(s.span,{className:"token punctuation",children:"</"}),"p"]}),(0,e.jsx)(s.span,{className:"token punctuation",children:">"})]}),"\n  ",(0,e.jsx)(s.span,{className:"token punctuation",children:")"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n",(0,e.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n\n",(0,e.jsx)(s.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(s.span,{className:"token keyword module",children:"default"})," ",(0,e.jsx)(s.span,{className:"token maybe-class-name",children:"BooksGet"}),(0,e.jsx)(s.span,{className:"token punctuation",children:";"}),"\n"]})}),"\n",(0,e.jsx)(s.p,{children:"ブラウザで確認すると、"}),"\n",(0,e.jsx)(s.p,{children:(0,e.jsx)(s.img,{src:"/images/244-image2.png",alt:"image2"})}),"\n",(0,e.jsx)(s.p,{children:"Firebase Database のデータが表示されました。"}),"\n",(0,e.jsx)(s.p,{children:"試しに、Firebase Database でデータを入力すると、"}),"\n",(0,e.jsx)(s.p,{children:(0,e.jsx)(s.img,{src:"/images/244-image3.png",alt:"image3"})}),"\n",(0,e.jsx)(s.p,{children:(0,e.jsx)(s.img,{src:"/images/244-image4.png",alt:"image4"})}),"\n",(0,e.jsx)(s.p,{children:"即座にブラウザが更新されました。"}),"\n",(0,e.jsx)(s.p,{children:"次回は、ブラウザで送信したデータを、Firestore Databese に保存します。"}),"\n",(0,e.jsx)(a,{slug:"firebase-firestore-database-post",image:"/images/245-image1.png",contents:"【Firebase】ブラウザで送信したデータを、Firestore Databeseに保存する"})]})}s.default=function(){let n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}=Object.assign({},(0,c.ah)(),n.components);return s?(0,e.jsx)(s,Object.assign({},n,{children:(0,e.jsx)(t,n)})):t(n)}}}]);