{"id":7536,"date":"2022-12-05T18:12:50","date_gmt":"2022-12-05T09:12:50","guid":{"rendered":"https:\/\/kininariantenna.com\/?p=7536"},"modified":"2023-01-06T15:27:45","modified_gmt":"2023-01-06T06:27:45","slug":"react%e3%81%a7firebase-firestore%e3%81%8b%e3%82%89%e3%83%87%e3%83%bc%e3%82%bf%e5%8f%96%e5%be%97%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95%ef%bc%81","status":"publish","type":"post","link":"https:\/\/kininariantenna.com\/?p=7536","title":{"rendered":"React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\uff01"},"content":{"rendered":"<p>React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u53d6\u5f97\u3057\u305f\u3044\u3068\u304d\u306f\u306a\u3044\u3067\u3057\u3087\u3046\u304b\u3002<\/p>\n<p>\u3051\u3069\u3001\u305d\u3093\u306a\u4e2d\u3067\u60a9\u3080\u3053\u3068\u306f\u3001<\/p>\n<div class=\"kininarukoto1\">\u30fbReact\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\u304c\u308f\u304b\u3089\u306a\u3044<\/div>\n<p>\u3067\u3059\u3088\u306d\u3002<\/p>\n<p>\u4eca\u56de\u306f\u305d\u3093\u306a\u304a\u60a9\u307f\u3092\u89e3\u6c7a\u3059\u308b<\/p>\n<div class=\"rdinfo\">\u30fbReact\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u65b9\u6cd5<\/div>\n<p>\u306b\u3064\u3044\u3066\u307e\u3068\u3081\u307e\u3059\uff01<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_46 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">\u3082\u304f\u3058<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/kininariantenna.com\/?p=7536\/#FirebaseFirestore%E3%82%92%E6%A7%8B%E7%AF%89%E3%81%99%E3%82%8B\" title=\"Firebase\/Firestore\u3092\u69cb\u7bc9\u3059\u308b\">Firebase\/Firestore\u3092\u69cb\u7bc9\u3059\u308b<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/kininariantenna.com\/?p=7536\/#Firestore%E3%81%AE%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B\" title=\"Firestore\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u8ffd\u52a0\u3059\u308b\">Firestore\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u8ffd\u52a0\u3059\u308b<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/kininariantenna.com\/?p=7536\/#React%E3%81%A7FirebaseFirestore%E3%81%8B%E3%82%89%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95\" title=\"React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\">React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u65b9\u6cd5<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kininariantenna.com\/?p=7536\/#firebasefirestore%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B\" title=\"firebase\/firestore\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u5b9f\u88c5\u3059\u308b\">firebase\/firestore\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u5b9f\u88c5\u3059\u308b<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/kininariantenna.com\/?p=7536\/#React%E3%81%A7FirebaseFirestore%E3%81%8B%E3%82%89%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E3%82%B3%E3%83%BC%E3%83%89\" title=\"React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u30b3\u30fc\u30c9\">React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u30b3\u30fc\u30c9<\/a><ul class='ez-toc-list-level-4'><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/kininariantenna.com\/?p=7536\/#%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E8%AA%AC%E6%98%8E\" title=\"\u30b3\u30fc\u30c9\u306e\u8aac\u660e\">\u30b3\u30fc\u30c9\u306e\u8aac\u660e<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/kininariantenna.com\/?p=7536\/#%E3%81%95%E3%81%84%E3%81%94%E3%81%AB\" title=\"\u3055\u3044\u3054\u306b\">\u3055\u3044\u3054\u306b<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"FirebaseFirestore%E3%82%92%E6%A7%8B%E7%AF%89%E3%81%99%E3%82%8B\"><\/span>Firebase\/Firestore\u3092\u69cb\u7bc9\u3059\u308b<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Firebase\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u5f8c\u3001Firestore\u3092\u4f7f\u3063\u305f\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u3092\u7528\u610f\u3057\u307e\u3059\u3002<br \/>\n<img loading=\"lazy\" class=\"alignnone size-full wp-image-7539\" src=\"http:\/\/kininariantenna.com\/wp-content\/uploads\/2022\/12\/120522_0907_1.png\" alt=\"\" width=\"587\" height=\"293\" \/><\/p>\n<p>Cloud Firestore\u3078\u79fb\u52d5\u3057\u300c\u30b3\u30ec\u30af\u30b7\u30e7\u30f3\u3092\u958b\u59cb\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<br \/>\n<img loading=\"lazy\" class=\"alignnone size-full wp-image-7540\" src=\"http:\/\/kininariantenna.com\/wp-content\/uploads\/2022\/12\/120522_0907_2.png\" alt=\"\" width=\"574\" height=\"420\" \/><\/p>\n<p>\u30b3\u30ec\u30af\u30b7\u30e7\u30f3ID\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<img loading=\"lazy\" class=\"alignnone size-full wp-image-7541\" src=\"http:\/\/kininariantenna.com\/wp-content\/uploads\/2022\/12\/120522_0907_3.png\" alt=\"\" width=\"741\" height=\"536\" srcset=\"https:\/\/kininariantenna.com\/wp-content\/uploads\/2022\/12\/120522_0907_3.png 741w, https:\/\/kininariantenna.com\/wp-content\/uploads\/2022\/12\/120522_0907_3-700x506.png 700w\" sizes=\"(max-width: 741px) 100vw, 741px\" \/>\n<h2><span class=\"ez-toc-section\" id=\"Firestore%E3%81%AE%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B\"><\/span>Firestore\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u8ffd\u52a0\u3059\u308b<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306e\u30ec\u30b3\u30fc\u30c9\u306b\u8a72\u5f53\u3059\u308b\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u8ffd\u52a0\u3057\u307e\u3057\u3087\u3046\u3002<br \/>\n<img loading=\"lazy\" class=\"alignnone size-full wp-image-7543\" src=\"http:\/\/kininariantenna.com\/wp-content\/uploads\/2022\/12\/120522_0907_5.png\" alt=\"\" width=\"723\" height=\"293\" srcset=\"https:\/\/kininariantenna.com\/wp-content\/uploads\/2022\/12\/120522_0907_5.png 723w, https:\/\/kininariantenna.com\/wp-content\/uploads\/2022\/12\/120522_0907_5-700x284.png 700w\" sizes=\"(max-width: 723px) 100vw, 723px\" \/><\/p>\n<p>\u540c\u3058\u8981\u9818\u3067\u4f55\u4ef6\u304b\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<h2><span class=\"ez-toc-section\" id=\"React%E3%81%A7FirebaseFirestore%E3%81%8B%E3%82%89%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95\"><\/span>React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u65b9\u6cd5<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3092\u3057\u307e\u3059\u3002<\/p>\n<h3><span class=\"ez-toc-section\" id=\"firebasefirestore%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B\"><\/span>firebase\/firestore\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u5b9f\u88c5\u3059\u308b<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>npm\u30b3\u30de\u30f3\u30c9\u3067Firebase\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<div class=\"info\"><code>npm install firebase<\/code><\/div>\n<p>\u300cfirebase.js\u300d\u30d5\u30a1\u30a4\u30eb\u3092\u7528\u610f\u3057\u3001SDK\u306e\u8a2d\u5b9a\u3068\u69cb\u6210\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8a18\u8f09\u3057\u307e\u3059\u3002\u5185\u5bb9\u306f\u74b0\u5883\u306b\u5408\u308f\u305b\u3066\u5909\u66f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre style=\"padding: 0;\"><code class=\"language-javascript line-numbers\">import { initializeApp } from \"firebase\/app\";\r\nimport { getFirestore } from \"firebase\/firestore\";\r\nimport { getAuth } from \"firebase\/auth\";\r\n\r\n\/\/ Your web app's Firebase configuration\r\nconst firebaseConfig = {\r\n  apiKey: \"AIzaSyA1NGCjbZt*****\",\r\n  authDomain: \"react-todo-*****\",\r\n  databaseURL: \"https:\/\/react-todo*****\",\r\n  projectId: \"react-todo****\",\r\n  storageBucket: \"react-todo*****\",\r\n  messagingSenderId: \"4666****\",\r\n  appId: \"1:46660757180:******\"\r\n};\r\n\r\n\/\/ Initialize Firebase\r\nconst app = initializeApp(firebaseConfig);\r\nconst db = getFirestore(app);\r\n\r\nexport default db;\r\nexport const auth = getAuth(app);<\/code><\/pre>\n<p>React\u30e1\u30a4\u30f3\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3078\u3001SDK\u8a2d\u5b9a\u306e\u300cfirebase.js\u300d\u30d5\u30a1\u30a4\u30eb\u3092import\u3057\u307e\u3059\u3002<\/p>\n<div class=\"info\"><code>import fireStoreDB from \".\/firebase\";<\/code><\/div>\n<p>\u540c\u3058\u304fReact\u30e1\u30a4\u30f3\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3078\u3001firebase\/firestore\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092 { collection, getDocs, addDoc }\u3092import\u3057\u307e\u3059\u3002<\/p>\n<div class=\"info\"><code>import { collection, getDocs } from \"firebase\/firestore\";<\/code><\/div>\n<h3><span class=\"ez-toc-section\" id=\"React%E3%81%A7FirebaseFirestore%E3%81%8B%E3%82%89%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E3%82%B3%E3%83%BC%E3%83%89\"><\/span>React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u30b3\u30fc\u30c9<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u30b3\u30fc\u30c9\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n<pre style=\"padding: 0;\"><code class=\"language-javascript line-numbers\">import { useEffect, useState }  from \"react\"\r\nimport { collection, getDocs } from \"firebase\/firestore\";\r\nimport fireStoreDB from \".\/firebase\";\r\n\r\nfunction App() {\r\n\r\n  \/\/useState\u3000\u521d\u671f\u8a2d\u5b9a\r\n  const [todos, setTodos] = useState([]);\r\n\r\n  \/\/\u30c7\u30fc\u30bf\u53d6\u5f97\u7528\u914d\u5217\r\n  const arrList = [];\r\n\r\n  \/\/useEffect\u306e\u51e6\u7406-\u3053\u3053\u304b\u3089\r\n  useEffect(() =&gt; {\r\n    const fireStorePostData = collection(fireStoreDB, \"todoposts\");\r\n    getDocs(fireStorePostData).then((snapShot) =&gt; {\r\n      snapShot.forEach((docs) =&gt; {\r\n        const doc = docs.data();\r\n        arrList.push({  id: docs.id ,title: doc.title ,status: doc.status, shousai: doc.shousai})\r\n      })\r\n      setTodos(arrList);\r\n    });\r\n  },[]);\r\n  \/\/useEffect\u306e\u51e6\u7406-\u3053\u3053\u307e\u3067\r\n\r\n  return (\r\n    &lt;div&gt;\r\n      &lt;ul&gt;\r\n        {todos.map((todo) =&gt; (\r\n          &lt;li key={todo.id}&gt;\r\n            &lt;div&gt;\u30bf\u30a4\u30c8\u30eb\uff1a{todo.title}&lt;\/div&gt;\r\n            &lt;div&gt;\u30b9\u30c6\u30fc\u30bf\u30b9\uff1a{todo.status}&lt;\/div&gt;\r\n            &lt;div&gt;\u8a73\u7d30\uff1a{todo.shousai}&lt;\/div&gt;\r\n          &lt;\/li&gt;\r\n        ))}\r\n      &lt;\/ul&gt;\r\n    &lt;\/div&gt;\r\n  );\r\n}\r\n\r\nexport default App;<\/code><\/pre>\n<p>\u30b3\u30fc\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u4e00\u89a7\u304c\u53d6\u5f97\u3055\u308c\u3001\u753b\u9762\u3078\u8868\u793a\u3055\u308c\u307e\u3059\u3002<br \/>\n<img loading=\"lazy\" class=\"alignnone size-full wp-image-7546\" src=\"http:\/\/kininariantenna.com\/wp-content\/uploads\/2022\/12\/120522_0912_1.png\" alt=\"\" width=\"440\" height=\"520\" \/><\/p>\n<p><!--\u5439\u304d\u51fa\u3057\u306f\u3058\u307e\u308a--><\/p>\n<div class=\"fukidashi1\">\n<div class=\"icon\">\n<div class=\"wphg\"><img loading=\"lazy\" src=\"\/wp-content\/uploads\/2021\/07\/taka_kao3.gif\" alt=\"\u30bf\u30ab\u30d2\u30ed\" width=\"110\" height=\"110\" \/><\/div>\n<div class=\"iconfont\">\u30bf\u30ab\u30d2\u30ed<\/div>\n<\/div>\n<div class=\"bubble\">FireStore\u3078\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3068\u3057\u3066\u767b\u9332\u3057\u305f\u30ec\u30b3\u30fc\u30c9\u5206\u8868\u793a\u3055\u308c\u3066\u3044\u307e\u3059\u306d\u3002<\/div>\n<\/div>\n<p><!--\u5439\u304d\u51fa\u3057\u7d42\u308f\u308a--><\/p>\n<h4><span class=\"ez-toc-section\" id=\"%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E8%AA%AC%E6%98%8E\"><\/span>\u30b3\u30fc\u30c9\u306e\u8aac\u660e<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>useEffect\u306e\u7b2c\u4e8c\u5f15\u6570\u306e\u95a2\u6570\u306b\u5909\u6570\u300c[]\u300d\u3092\u6307\u5b9a\u3057\u3001\u521d\u56de\u30d6\u30e9\u30a6\u30b6\u8868\u793a\u304c\u3055\u308c\u308b\u30bf\u30a4\u30df\u30f3\u30b0\u306e\u307f\u95a2\u6570\u306e\u51e6\u7406\u304c\u5b9f\u884c\u3059\u308b\u3088\u3046\u8a2d\u5b9a\u3092\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<pre style=\"padding: 0;\"><code class=\"language-javascript line-numbers\">  useEffect(() =&gt; {\r\n   \u2026\r\n    });\r\n  },[]);<\/code><\/pre>\n<p>collection\u95a2\u6570\u3067FireStore\u306e\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u60c5\u5831\u3068\u30c6\u30fc\u30d6\u30eb\u306b\u8a72\u5f53\u3059\u308b\u30b3\u30ec\u30af\u30b7\u30e7\u30f3\u60c5\u5831\u3092\u53d6\u5f97\u3057\u3001\u5909\u6570\u3078\u683c\u7d0d\u3057\u307e\u3059\u3002<\/p>\n<pre style=\"padding: 0;\"><code class=\"language-javascript line-numbers\">const fireStorePostData = collection(fireStoreDB, \"todoposts\");<\/code><\/pre>\n<p>getDocs\u95a2\u6570\u3067\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306e\u60c5\u5831\u3092\u53d6\u5f97\u3057\u3001\u4e00\u65e6\u7528\u610f\u3057\u305f\u914d\u5217\u3078\u53d6\u5f97\u3057\u305f\u30c7\u30fc\u30bf\u3092\u683c\u7d0d\u3057\u307e\u3059\u3002<\/p>\n<p>\u914d\u5217\u306e\u5185\u5bb9\u306f\u9023\u60f3\u914d\u5217\u3068\u3057\u3001\u4ee5\u4e0b\u306e\u69cb\u6210\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<div class=\"info\">{ id: docs.id ,title: doc.title ,status: doc.status, shousai: doc.shousai}<\/div>\n<pre style=\"padding: 0;\"><code class=\"language-javascript line-numbers\">    getDocs(fireStorePostData).then((snapShot) =&gt; {\r\n      snapShot.forEach((docs) =&gt; {\r\n        const doc = docs.data();\r\n        arrList.push({ id: docs.id ,title: doc.title ,status: doc.status, shousai: doc.shousai})\r\n      })\r\n<\/code><\/pre>\n<p>\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u304b\u3089\u53d6\u5f97\u3057\u305f\u30c7\u30fc\u30bf\u304c\u5165\u3063\u3066\u3044\u308b\u914d\u5217\u3092\u30b9\u30c6\u30fc\u30c8\u306b\u6e21\u3057\u3066\u3001\u5916\u90e8\u53c2\u7167\u304c\u53ef\u80fd\u306a\u72b6\u614b\u306b\u3057\u307e\u3059\u3002<\/p>\n<pre style=\"padding: 0;\"><code class=\"language-javascript line-numbers\">      setTodos(arrList);<\/code><\/pre>\n<p>setTodos\u95a2\u6570\u306b\u3088\u3063\u3066\u6e21\u3055\u308c\u305f\u30c7\u30fc\u30bf\u306f\u5909\u6570todos\u306b\u683c\u7d0d\u3055\u308c\u307e\u3059\u3002<\/p>\n<pre style=\"padding: 0;\"><code class=\"language-javascript line-numbers\">const [todos, setTodos] = useState([]);<\/code><\/pre>\n<p>\u5909\u6570todos\u306f\u914d\u5217\u3068\u3057\u3066\u69cb\u6210\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3001map\u30e1\u30bd\u30c3\u30c9\u3067\u4e00\u89a7\u53d6\u5f97\u3057\u3001HTML\u30bf\u30b0\u4ed8\u304d\u3067\u51fa\u529b\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<pre style=\"padding: 0;\"><code class=\"language-javascript line-numbers\">{todos.map((todo) =&gt; (\r\n          &lt;li key={todo.id}&gt;\r\n            &lt;div&gt;\u30bf\u30a4\u30c8\u30eb\uff1a{todo.title}&lt;\/div&gt;\r\n            &lt;div&gt;\u30b9\u30c6\u30fc\u30bf\u30b9\uff1a{todo.status}&lt;\/div&gt;\r\n            &lt;div&gt;\u8a73\u7d30\uff1a{todo.shousai}&lt;\/div&gt;\r\n          &lt;\/li&gt;\r\n        ))}<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"%E3%81%95%E3%81%84%E3%81%94%E3%81%AB\"><\/span>\u3055\u3044\u3054\u306b<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u3044\u304b\u304c\u3067\u3057\u3087\u3046\u304b\u3002<\/p>\n<p>\u4eca\u56de\u306f\u3001<\/p>\n<div class=\"endinfo\">\u30fbReact\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u65b9\u6cd5<\/div>\n<p>\u306b\u3064\u3044\u3066\u307e\u3068\u3081\u307e\u3057\u305f\u3002<\/p>\n<p>\u307e\u305f\u3001\u4ed6\u306b\u3082\u4fbf\u5229\u306a\u65b9\u6cd5\u304c\u3042\u308a\u307e\u3059\u306e\u3067\u3001\u3088\u308d\u3057\u3051\u308c\u3070\u3054\u53c2\u7167\u9802\u3051\u308c\u3070\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u53d6\u5f97\u3057\u305f\u3044\u3068\u304d\u306f\u306a\u3044\u3067\u3057\u3087\u3046\u304b\u3002 \u3051\u3069\u3001\u305d\u3093\u306a\u4e2d\u3067\u60a9\u3080\u3053\u3068\u306f\u3001 \u30fbReact\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\u304c\u308f\u304b\u3089\u306a\u3044 \u3067\u3059\u3088\u306d\u3002&#8230;<\/p>\n","protected":false},"author":1,"featured_media":7390,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[169],"tags":[180],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.4.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\uff01 - \u30ad\u30cb\u30ca\u30ea\u30a2\u30f3\u30c6\u30ca<\/title>\n<meta name=\"description\" content=\"React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u307e\u3068\u3081\u307e\u3059\u3002\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kininariantenna.com\/?p=7536\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\uff01 - \u30ad\u30cb\u30ca\u30ea\u30a2\u30f3\u30c6\u30ca\" \/>\n<meta property=\"og:description\" content=\"React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u307e\u3068\u3081\u307e\u3059\u3002\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kininariantenna.com\/?p=7536\" \/>\n<meta property=\"og:site_name\" content=\"\u30ad\u30cb\u30ca\u30ea\u30a2\u30f3\u30c6\u30ca\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-05T09:12:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-06T06:27:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kininariantenna.com\/wp-content\/uploads\/2022\/11\/kini-react.png\" \/>\n\t<meta property=\"og:image:width\" content=\"857\" \/>\n\t<meta property=\"og:image:height\" content=\"607\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"kininariantenna\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"10\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"http:\/\/kininariantenna.com\/#website\",\"url\":\"http:\/\/kininariantenna.com\/\",\"name\":\"\u30ad\u30cb\u30ca\u30ea\u30a2\u30f3\u30c6\u30ca\",\"description\":\"WordPress\u958b\u767a\u304b\u3089\u30c8\u30ec\u30f3\u30c9\u307e\u3067\u6c17\u306b\u306a\u308b\u3053\u3068\u3092\u914d\u4fe1\uff01\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/kininariantenna.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"ja\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/kininariantenna.com\/?p=7536#primaryimage\",\"inLanguage\":\"ja\",\"url\":\"https:\/\/kininariantenna.com\/wp-content\/uploads\/2022\/11\/kini-react.png\",\"contentUrl\":\"https:\/\/kininariantenna.com\/wp-content\/uploads\/2022\/11\/kini-react.png\",\"width\":857,\"height\":607},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kininariantenna.com\/?p=7536#webpage\",\"url\":\"https:\/\/kininariantenna.com\/?p=7536\",\"name\":\"React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\uff01 - \u30ad\u30cb\u30ca\u30ea\u30a2\u30f3\u30c6\u30ca\",\"isPartOf\":{\"@id\":\"http:\/\/kininariantenna.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kininariantenna.com\/?p=7536#primaryimage\"},\"datePublished\":\"2022-12-05T09:12:50+00:00\",\"dateModified\":\"2023-01-06T06:27:45+00:00\",\"author\":{\"@id\":\"http:\/\/kininariantenna.com\/#\/schema\/person\/79a4860130f5ccef65193ab07b022a7c\"},\"description\":\"React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u307e\u3068\u3081\u307e\u3059\u3002\",\"breadcrumb\":{\"@id\":\"https:\/\/kininariantenna.com\/?p=7536#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kininariantenna.com\/?p=7536\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kininariantenna.com\/?p=7536#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u30db\u30fc\u30e0\",\"item\":\"http:\/\/kininariantenna.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\uff01\"}]},{\"@type\":\"Person\",\"@id\":\"http:\/\/kininariantenna.com\/#\/schema\/person\/79a4860130f5ccef65193ab07b022a7c\",\"name\":\"kininariantenna\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/kininariantenna.com\/#personlogo\",\"inLanguage\":\"ja\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2127fe280190de73b2a2daa819ac6e8c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2127fe280190de73b2a2daa819ac6e8c?s=96&d=mm&r=g\",\"caption\":\"kininariantenna\"},\"url\":\"https:\/\/kininariantenna.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\uff01 - \u30ad\u30cb\u30ca\u30ea\u30a2\u30f3\u30c6\u30ca","description":"React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u307e\u3068\u3081\u307e\u3059\u3002","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kininariantenna.com\/?p=7536","og_locale":"ja_JP","og_type":"article","og_title":"React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\uff01 - \u30ad\u30cb\u30ca\u30ea\u30a2\u30f3\u30c6\u30ca","og_description":"React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u307e\u3068\u3081\u307e\u3059\u3002","og_url":"https:\/\/kininariantenna.com\/?p=7536","og_site_name":"\u30ad\u30cb\u30ca\u30ea\u30a2\u30f3\u30c6\u30ca","article_published_time":"2022-12-05T09:12:50+00:00","article_modified_time":"2023-01-06T06:27:45+00:00","og_image":[{"width":857,"height":607,"url":"https:\/\/kininariantenna.com\/wp-content\/uploads\/2022\/11\/kini-react.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"\u57f7\u7b46\u8005":"kininariantenna","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"10\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"http:\/\/kininariantenna.com\/#website","url":"http:\/\/kininariantenna.com\/","name":"\u30ad\u30cb\u30ca\u30ea\u30a2\u30f3\u30c6\u30ca","description":"WordPress\u958b\u767a\u304b\u3089\u30c8\u30ec\u30f3\u30c9\u307e\u3067\u6c17\u306b\u306a\u308b\u3053\u3068\u3092\u914d\u4fe1\uff01","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/kininariantenna.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"ja"},{"@type":"ImageObject","@id":"https:\/\/kininariantenna.com\/?p=7536#primaryimage","inLanguage":"ja","url":"https:\/\/kininariantenna.com\/wp-content\/uploads\/2022\/11\/kini-react.png","contentUrl":"https:\/\/kininariantenna.com\/wp-content\/uploads\/2022\/11\/kini-react.png","width":857,"height":607},{"@type":"WebPage","@id":"https:\/\/kininariantenna.com\/?p=7536#webpage","url":"https:\/\/kininariantenna.com\/?p=7536","name":"React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\uff01 - \u30ad\u30cb\u30ca\u30ea\u30a2\u30f3\u30c6\u30ca","isPartOf":{"@id":"http:\/\/kininariantenna.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kininariantenna.com\/?p=7536#primaryimage"},"datePublished":"2022-12-05T09:12:50+00:00","dateModified":"2023-01-06T06:27:45+00:00","author":{"@id":"http:\/\/kininariantenna.com\/#\/schema\/person\/79a4860130f5ccef65193ab07b022a7c"},"description":"React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u307e\u3068\u3081\u307e\u3059\u3002","breadcrumb":{"@id":"https:\/\/kininariantenna.com\/?p=7536#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kininariantenna.com\/?p=7536"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kininariantenna.com\/?p=7536#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u30db\u30fc\u30e0","item":"http:\/\/kininariantenna.com\/"},{"@type":"ListItem","position":2,"name":"React\u3067Firebase\/Firestore\u304b\u3089\u30c7\u30fc\u30bf\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\uff01"}]},{"@type":"Person","@id":"http:\/\/kininariantenna.com\/#\/schema\/person\/79a4860130f5ccef65193ab07b022a7c","name":"kininariantenna","image":{"@type":"ImageObject","@id":"http:\/\/kininariantenna.com\/#personlogo","inLanguage":"ja","url":"https:\/\/secure.gravatar.com\/avatar\/2127fe280190de73b2a2daa819ac6e8c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2127fe280190de73b2a2daa819ac6e8c?s=96&d=mm&r=g","caption":"kininariantenna"},"url":"https:\/\/kininariantenna.com\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/kininariantenna.com\/index.php?rest_route=\/wp\/v2\/posts\/7536"}],"collection":[{"href":"https:\/\/kininariantenna.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kininariantenna.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kininariantenna.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kininariantenna.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7536"}],"version-history":[{"count":9,"href":"https:\/\/kininariantenna.com\/index.php?rest_route=\/wp\/v2\/posts\/7536\/revisions"}],"predecessor-version":[{"id":7630,"href":"https:\/\/kininariantenna.com\/index.php?rest_route=\/wp\/v2\/posts\/7536\/revisions\/7630"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kininariantenna.com\/index.php?rest_route=\/wp\/v2\/media\/7390"}],"wp:attachment":[{"href":"https:\/\/kininariantenna.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7536"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kininariantenna.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7536"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kininariantenna.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}