{"id":56821,"date":"2024-04-15T16:35:33","date_gmt":"2024-04-15T07:35:33","guid":{"rendered":"https:\/\/kinsta.com\/jp\/?p=56821&#038;preview=true&#038;preview_id=56821"},"modified":"2024-04-16T17:53:48","modified_gmt":"2024-04-16T08:53:48","slug":"react-object-detection-app","status":"publish","type":"post","link":"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/","title":{"rendered":"React\u3068Kinsta\u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u7269\u4f53\u691c\u77e5\u30a2\u30d7\u30ea\u3092\u69cb\u7bc9\u3059\u308b\u65b9\u6cd5"},"content":{"rendered":"<p>\u30ab\u30e1\u30e9\u306e\u6027\u80fd\u304c\u5411\u4e0a\u3057\u3066\u4ee5\u6765\u3001\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u7269\u4f53\u691c\u51fa\u6280\u8853\u306e\u9700\u8981\u306f\u307e\u3059\u307e\u3059\u9ad8\u307e\u308a\u3092\u898b\u305b\u3066\u3044\u307e\u3059\u3002\u3053\u306e\u6280\u8853\u306f\u73fe\u5728\u3001\u81ea\u52d5\u904b\u8ee2\u8eca\u3084\u30b9\u30de\u30fc\u30c8\u76e3\u8996\u30b7\u30b9\u30c6\u30e0\u304b\u3089\u3001\u62e1\u5f35\u73fe\u5b9f\uff08AR\uff09\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u81f3\u308b\u307e\u3067\u3001\u3055\u307e\u3056\u307e\u306a\u5206\u91ce\u3067\u5229\u7528\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u30d3\u30b8\u30e7\u30f3\u306f\u3001\u30ab\u30e1\u30e9\u3068\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u3092\u4f7f\u7528\u3057\u3066\u4e0a\u306e\u3088\u3046\u306a\u51e6\u7406\u3092\u5b9f\u73fe\u53ef\u80fd\u306b\u3059\u308b\u8907\u96d1\u3067\u5927\u898f\u6a21\u306a\u5206\u91ce\u3067\u3059\u3002\u3057\u304b\u3057\u3001\u610f\u5916\u3068\u7c21\u5358\u306b\u30d6\u30e9\u30a6\u30b6\u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306e\u7269\u4f53\u691c\u51fa\u3092\u5b9f\u73fe\u3067\u304d\u308b\u3053\u3068\u306f\u3001\u77e5\u3089\u306a\u3044\u4eba\u304c\u591a\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n<p>\u4eca\u56de\u306f\u3001<a href=\"https:\/\/kinsta.com\/jp\/blog\/what-is-react-js\/\">React<\/a>\u3092\u4f7f\u7528\u3057\u3066\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u7269\u4f53\u691c\u51fa\u30a2\u30d7\u30ea\u3092\u69cb\u7bc9\u3057\u3001Kinsta\u306b\u30c7\u30d7\u30ed\u30a4\u3059\u308b\u624b\u9806\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u7269\u4f53\u691c\u51fa\u30a2\u30d7\u30ea\u306b\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u306e\u30c7\u30d0\u30a4\u30b9\u306b\u642d\u8f09\u3055\u308c\u3066\u3044\u308b\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u3092\u5229\u7528\u3057\u307e\u3059\u3002<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>\u524d\u63d0\u6761\u4ef6<\/h2>\n<p>\u4eca\u56de\u3054\u7d39\u4ecb\u3059\u308b\u624b\u9806\u306b\u306f\u3001\u4ee5\u4e0b\u304c\u5fc5\u8981\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<ul>\n<li><strong>React<\/strong>\uff1a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\uff08UI\uff09\u3092\u69cb\u7bc9\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002React\u306f<a href=\"https:\/\/kinsta.com\/jp\/blog\/react-conditional-render\/\">\u52d5\u7684\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u306b\u512a\u308c\u3066\u3044\u308b<\/a>\u305f\u3081\u3001\u30d6\u30e9\u30a6\u30b6\u5185\u3067\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u306e\u30d5\u30a3\u30fc\u30c9\u3068\u691c\u51fa\u3055\u308c\u305f\u7269\u4f53\u3092\u8868\u793a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/li>\n<li><a href=\"https:\/\/www.tensorflow.org\/js\"><strong>TensorFlow.js<\/strong><\/a>\uff1a\u6a5f\u68b0\u5b66\u7fd2\u306e\u30d1\u30ef\u30fc\u3092\u30d6\u30e9\u30a6\u30b6\u306b\u3082\u305f\u3089\u3059JavaScript\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002\u7269\u4f53\u691c\u51fa\u306e\u305f\u3081\u306b\u4e8b\u524d\u306b\u30c8\u30ec\u30fc\u30cb\u30f3\u30b0\u3055\u308c\u305f\u30e2\u30c7\u30eb\u3092\u8aad\u307f\u8fbc\u307f\u3001\u30d6\u30e9\u30a6\u30b6\u5185\u3067\u76f4\u63a5\u5b9f\u884c\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u305f\u3081\u3001\u8907\u96d1\u306a\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u306e\u51e6\u7406\u304c\u4e0d\u8981\u306b\u306a\u308a\u307e\u3059\u3002<\/li>\n<li><a href=\"https:\/\/github.com\/tensorflow\/tfjs-models\/tree\/master\/coco-ssd\"><strong>Coco SSD<\/strong><\/a>\uff1a\u4e8b\u524d\u306b\u30c8\u30ec\u30fc\u30cb\u30f3\u30b0\u306e\u65bd\u3055\u308c\u305f\u7269\u4f53\u691c\u51fa\u30e2\u30c7\u30eb\u3067\u3059\u3002\u8efd\u91cf\u3067\u3042\u308a\u306a\u304c\u3089\u3001\u81a8\u5927\u306a\u6570\u306e\u65e5\u5e38\u7684\u306a\u7269\u4f53\u3092\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u691c\u51fa\u3067\u304d\u307e\u3059\u3002\u5f37\u529b\u306a\u30c4\u30fc\u30eb\u3067\u3042\u308a\u3001\u30c8\u30ec\u30fc\u30cb\u30f3\u30b0\u306b\u306f\u4e00\u822c\u7684\u306a\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\u304c\u4f7f\u308f\u308c\u3066\u3044\u307e\u3059\u3002<a href=\"https:\/\/blog.tensorflow.org\/2021\/01\/custom-object-detection-in-browser.html\">\u7279\u5b9a\u306e\u691c\u51fa\u8981\u4ef6\u304c\u3042\u308b\u5834\u5408\u306f\u3053\u3061\u3089<\/a>\u3092\u53c2\u8003\u306b\u3001TensorFlow.js\u3067\u30ab\u30b9\u30bf\u30e0\u30e2\u30c7\u30eb\u3092\u30c8\u30ec\u30fc\u30cb\u30f3\u30b0\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ul>\n<h2>React\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/h2>\n<ol>\n<li>\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u3063\u3066\u3001React\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3002\n<pre><code class=\"language-bash\">npm create vite@latest kinsta-object-detection --template react<\/code><\/pre>\n<p>\u3053\u308c\u306b\u3088\u308a\u3001<a href=\"https:\/\/vitejs.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">vite<\/a>\u3092\u4f7f\u7528\u3057\u3066\u30d9\u30fc\u30b9\u30e9\u30a4\u30f3\u306eReact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u304c\u30b9\u30ad\u30e3\u30d5\u30a9\u30fc\u30eb\u30c7\u30a3\u30f3\u30b0\u3055\u308c\u307e\u3059\u3002<\/li>\n<li>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u5185\u3067\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3001TensorFlow\u3068Coco SSD\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002\n<pre><code class=\"language-bash\">npm i @tensorflow-models\/coco-ssd @tensorflow\/tfjs<\/code><\/pre>\n<\/li>\n<\/ol>\n<p>\u4ee5\u4e0a\u3067\u30a2\u30d7\u30ea\u958b\u767a\u306e\u6e96\u5099\u304c\u6574\u3044\u307e\u3057\u305f\u3002<\/p>\n<h2>\u30a2\u30d7\u30ea\u306e\u8a2d\u5b9a<\/h2>\n<p>\u7269\u4f53\u691c\u51fa\u30ed\u30b8\u30c3\u30af\u306e\u30b3\u30fc\u30c9\u3092\u66f8\u304f\u524d\u306b\u3001\u30a2\u30d7\u30ea\u306e\u5b8c\u6210\u50cf\u3092\u62bc\u3055\u3048\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002\u30a2\u30d7\u30ea\u306eUI\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_176989\" aria-describedby=\"caption-attachment-176989\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-176989 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/object-detection-app-ui-1024x502.png\" alt=\"\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306eUI\u30c7\u30b6\u30a4\u30f3\" width=\"1024\" height=\"502\"><figcaption id=\"caption-attachment-176989\" class=\"wp-caption-text\">\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306eUI\u30c7\u30b6\u30a4\u30f3<\/figcaption><\/figure>\n<p>\u30e6\u30fc\u30b6\u30fc\u304c\u300c<strong>\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u3092\u958b\u59cb\uff08Start Webcam\uff09<\/strong>\u300d\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u306e\u30d5\u30a3\u30fc\u30c9\u3078\u306e\u30a2\u30af\u30bb\u30b9\u8a31\u53ef\u3092\u30a2\u30d7\u30ea\u306b\u4ed8\u4e0e\u3059\u308b\u3088\u3046\u306b\u4fc3\u3055\u308c\u307e\u3059\u3002\u30a2\u30af\u30bb\u30b9\u304c\u8a31\u53ef\u3055\u308c\u308b\u3068\u3001\u30a2\u30d7\u30ea\u304c\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u30d5\u30a3\u30fc\u30c9\u3092\u8868\u793a\u3057\u3001\u30d5\u30a3\u30fc\u30c9\u306b\u5b58\u5728\u3059\u308b\u7269\u4f53\u3092\u691c\u51fa\u3057\u307e\u3059\u3002\u307e\u305f\u3001\u691c\u51fa\u3055\u308c\u305f\u7269\u4f53\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306b\u3001\u30e9\u30a4\u30d6\u30d5\u30a3\u30fc\u30c9\u4e0a\u306b\u30dc\u30c3\u30af\u30b9\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u3001\u30e9\u30d9\u30eb\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<p>\u307e\u305a\u306f\u3001<strong>App.jsx<\/strong>\u30d5\u30a1\u30a4\u30eb\u306b\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u8cbc\u308a\u4ed8\u3051\u3066\u3001\u30a2\u30d7\u30ea\u306eUI\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-jsx\">import ObjectDetection from '.\/ObjectDetection';\nfunction App() {\n  return (\n    &lt;div className=\"app\"&gt;\n      &lt;h1&gt;\u753b\u50cf\u7269\u4f53\u691c\u51fa&lt;\/h1&gt;\n        &lt;ObjectDetection \/&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;<\/code><\/pre>\n<p>\u3053\u306e\u30b3\u30fc\u30c9\u306f\u3001\u30da\u30fc\u30b8\u306e\u30d8\u30c3\u30c0\u30fc\u3092\u6307\u5b9a\u3057\u3001<code>ObjectDetection<\/code>\u3068\u3044\u3046\u30ab\u30b9\u30bf\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002\u3053\u308c\u306b\u306f\u3001\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u306e\u30d5\u30a3\u30fc\u30c9\u3092\u30ad\u30e3\u30d7\u30c1\u30e3\u3057\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u7269\u4f53\u3092\u691c\u51fa\u3059\u308b\u305f\u3081\u306e\u30ed\u30b8\u30c3\u30af\u304c\u542b\u307e\u308c\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3059\u308b\u306b\u306f\u3001<strong>src<\/strong>\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u300c<strong>ObjectDetection.jsx<\/strong>\u300d\u3068\u3044\u3046\u540d\u524d\u3067\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3001\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u8cbc\u308a\u4ed8\u3051\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-jsx\">import { useEffect, useRef, useState } from 'react';\n\nconst ObjectDetection = () =&gt; {\n  const videoRef = useRef(null);\n  const [isWebcamStarted, setIsWebcamStarted] = useState(false)\n\n  const startWebcam = async () =&gt; {\n    \/\/ TODO\n  };\n\n  const stopWebcam = () =&gt; {\n     \/\/ TODO\n  };\n\n  return (\n    &lt;div className=\"object-detection\"&gt;\n      &lt;div className=\"buttons\"&gt;\n        &lt;button onClick={isWebcamStarted ? stopWebcam : startWebcam}&gt;\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u3092{isWebcamStarted ? \"\u505c\u6b62\" : \"\u958b\u59cb\"}&lt;\/button&gt;\n      &lt;\/div&gt;\n      &lt;div className=\"feed\"&gt;\n        {isWebcamStarted ? &lt;video ref={videoRef} autoPlay muted \/&gt; : &lt;div \/&gt;}\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n};\n\nexport default ObjectDetection;<\/code><\/pre>\n<p>\u4e0a\u306e\u30b3\u30fc\u30c9\u3067\u306f\u3001\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u306e\u30d5\u30a3\u30fc\u30c9\u3092\u958b\u59cb\u304a\u3088\u3073\u505c\u6b62\u3059\u308b\u305f\u3081\u306e\u30dc\u30bf\u30f3\u3001\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u306e\u30d5\u30a3\u30fc\u30c9\u304c\u6709\u52b9\u306b\u306a\u3063\u305f\u969b\u306b\u8868\u793a\u3059\u308b<code>&lt;video&gt;<\/code>\u8981\u7d20\u3092\u542b\u3080<a href=\"https:\/\/kinsta.com\/jp\/blog\/what-is-html\/\">HTML<\/a>\u69cb\u9020\u3092\u5b9a\u7fa9\u3057\u3066\u3044\u307e\u3059\u3002\u72b6\u614b\u30b3\u30f3\u30c6\u30ca<code>isWebcamStarted<\/code>\u306f\u3001\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u306e\u30d5\u30a3\u30fc\u30c9\u306e\u72b6\u614b\u3092\u4fdd\u5b58\u3057\u307e\u3059\u3002<code>startWebcam<\/code>\u3068<code>stopWebcam<\/code>\u306e 2\u3064\u306e\u95a2\u6570\u306f\u3001\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u30d5\u30a3\u30fc\u30c9\u306e\u958b\u59cb\u3068\u505c\u6b62\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/p>\n<p><code>startWebcam<\/code>\u95a2\u6570\u306e\u30b3\u30fc\u30c9\u306f\u4ee5\u4e0b\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-jsx\">const startWebcam = async () =&gt; {\n    try {\n      setIsWebcamStarted(true)\n      const stream = await navigator.mediaDevices.getUserMedia({ video: true });\n\n      if (videoRef.current) {\n        videoRef.current.srcObject = stream;\n      }\n    } catch (error) {\n      setIsWebcamStarted(false)\n      console.error('Error accessing webcam:', error);\n    }\n  };<\/code><\/pre>\n<p>\u3053\u306e\u95a2\u6570\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u306b\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u3078\u306e\u30a2\u30af\u30bb\u30b9\u3092\u8a31\u53ef\u3059\u308b\u3088\u3046\u8981\u6c42\u3057\u3001\u8a31\u53ef\u3055\u308c\u308b\u3068\u3001<code>&lt;video&gt;<\/code>\u306b\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u306e\u30e9\u30a4\u30d6\u30d5\u30a3\u30fc\u30c9\u3092\u8868\u793a\u3059\u308b\u3088\u3046\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<p>\uff08\u30c7\u30d0\u30a4\u30b9\u306b\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u304c\u642d\u8f09\u3055\u308c\u3066\u3044\u306a\u3044\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u62d2\u5426\u3057\u305f\u306a\u3069\u306e\u7406\u7531\u3067\uff09\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u30d5\u30a3\u30fc\u30c9\u3078\u306e\u30a2\u30af\u30bb\u30b9\u306b\u5931\u6557\u3059\u308b\u3068\u3001\u3053\u306e\u95a2\u6570\u3067\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u8868\u793a\u3057\u3001\u30a8\u30e9\u30fc\u30d6\u30ed\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u3001\u30a2\u30af\u30bb\u30b9\u306b\u5931\u6557\u3057\u305f\u7406\u7531\u3092\u8868\u793a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u6b21\u306b\u3001<code>stopWebcam<\/code>\u95a2\u6570\u3092\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u306b\u7f6e\u304d\u63db\u3048\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-jsx\">const stopWebcam = () =&gt; {\n    const video = videoRef.current;\n\n    if (video) {\n      const stream = video.srcObject;\n      const tracks = stream.getTracks();\n\n      tracks.forEach((track) =&gt; {\n        track.stop();\n      });\n\n      video.srcObject = null;\n      setPredictions([])\n      setIsWebcamStarted(false)\n    }\n  };<\/code><\/pre>\n<p>\u3053\u306e\u30b3\u30fc\u30c9\u3067\u306f\u3001<code>&lt;video&gt;<\/code>\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u3088\u3063\u3066\u30a2\u30af\u30bb\u30b9\u3055\u308c\u3066\u3044\u308b\u5b9f\u884c\u4e2d\u306e\u30d3\u30c7\u30aa\u30b9\u30c8\u30ea\u30fc\u30e0\u306e\u30c8\u30e9\u30c3\u30af\u3092\u78ba\u8a8d\u3057\u3001\u305d\u308c\u305e\u308c\u3092\u505c\u6b62\u3057\u307e\u3059\u3002\u305d\u306e\u5f8c\u3001<code>isWebcamStarted<\/code>\u306e\u72b6\u614b\u3092<code>false<\/code>\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u6642\u70b9\u3067\u3001\u30a2\u30d7\u30ea\u3092\u5b9f\u884c\u3057\u3001\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u306e\u30d5\u30a3\u30fc\u30c9\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u8868\u793a\u3067\u304d\u308b\u304b\u3069\u3046\u304b\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092<strong>index.css<\/strong>\u30d5\u30a1\u30a4\u30eb\u306b\u8cbc\u308a\u4ed8\u3051\u3066\u3001\u30a2\u30d7\u30ea\u304c\u5148\u306e\u30d7\u30ec\u30d3\u30e5\u30fc\u3068\u540c\u3058\u3088\u3046\u306b\u898b\u3048\u308b\u304b\u3069\u3046\u304b\u3092\u78ba\u304b\u3081\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-css\">#root {\n  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n  line-height: 1.5;\n  font-weight: 400;\n  color-scheme: light dark;\n  color: rgba(255, 255, 255, 0.87);\n  background-color: #242424;\n  min-width: 100vw;\n  min-height: 100vh;\n  font-synthesis: none;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\na {\n  font-weight: 500;\n  color: #646cff;\n  text-decoration: inherit;\n}\n\na:hover {\n  color: #535bf2;\n}\n\nbody {\n  margin: 0;\n  display: flex;\n  place-items: center;\n  min-width: 100vw;\n  min-height: 100vh;\n}\n\nh1 {\n  font-size: 3.2em;\n  line-height: 1.1;\n}\n\nbutton {\n  border-radius: 8px;\n  border: 1px solid transparent;\n  padding: 0.6em 1.2em;\n  font-size: 1em;\n  font-weight: 500;\n  font-family: inherit;\n  background-color: #1a1a1a;\n  cursor: pointer;\n  transition: border-color 0.25s;\n}\n\nbutton:hover {\n  border-color: #646cff;\n}\n\nbutton:focus,\n\nbutton:focus-visible {\n  outline: 4px auto -webkit-focus-ring-color;\n}\n\n@media (prefers-color-scheme: light) {\n  :root {\n    color: #213547;\n    background-color: #ffffff;\n  }\n\n  a:hover {\n    color: #747bff;\n  }\n\n  button {\n    background-color: #f9f9f9;\n  }\n}\n\n.app {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n}\n\n.object-detection {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  .buttons {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: row;\n\n    button {\n      margin: 2px;\n    }\n  }\n\n  div {\n    margin: 4px;\n  }\n}<\/code><\/pre>\n<p>\u307e\u305f\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u4fdd\u3064\u305f\u3081\u3001<strong>App.css<\/strong>\u30d5\u30a1\u30a4\u30eb\u306f\u524a\u9664\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u3053\u308c\u3067\u3001\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u7269\u4f53\u691c\u51fa\u6280\u8853\u3092\u30a2\u30d7\u30ea\u306b\u7d71\u5408\u3059\u308b\u305f\u3081\u306e\u30ed\u30b8\u30c3\u30af\u3092\u66f8\u304f\u6e96\u5099\u304c\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n<h2>\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u7269\u4f53\u691c\u51fa\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/h2>\n<ol>\n<li><strong>ObjectDetection.jsx<\/strong>\u306e\u5148\u982d\u3067Tensorflow\u3068Coco SSD\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002\n<pre><code class=\"language-jsx\">import * as cocoSsd from '@tensorflow-models\/coco-ssd';\n\nimport '@tensorflow\/tfjs';<\/code><\/pre>\n<\/li>\n<li><code>ObjectDetection<\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u72b6\u614b\u3092\u4f5c\u6210\u3057\u3001Coco SSD\u30e2\u30c7\u30eb\u306b\u3088\u3063\u3066\u751f\u6210\u3055\u308c\u305f\u4e88\u6e2c\u306e\u914d\u5217\u3092\u683c\u7d0d\u3057\u307e\u3059\u3002\n<pre><code class=\"language-js\">const [predictions, setPredictions] = useState([]);<\/code><\/pre>\n<\/li>\n<li>Coco SSD\u30e2\u30c7\u30eb\u3092\u8aad\u307f\u8fbc\u3093\u3067\u30d3\u30c7\u30aa\u30d5\u30a3\u30fc\u30c9\u3092\u53ce\u96c6\u3057\u3001\u4e88\u6e2c\u3092\u751f\u6210\u3059\u308b\u95a2\u6570\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002\n<pre><code class=\"language-jsx\">const predictObject = async () =&gt; {\n    const model = await cocoSsd.load();\n\n    model.detect(videoRef.current).then((predictions) =&gt; {\n      setPredictions(predictions);\n    })\n\n      .catch(err =&gt; {\n        console.error(err)\n      });\n  };<\/code><\/pre>\n<p>\u3053\u306e\u95a2\u6570\u306f\u3001\u30d3\u30c7\u30aa\u30d5\u30a3\u30fc\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001\u30d5\u30a3\u30fc\u30c9\u306b\u5b58\u5728\u3059\u308b\u7269\u4f53\u306e\u4e88\u6e2c\u3092\u751f\u6210\u3057\u307e\u3059\u3002\u4e88\u6e2c\u3055\u308c\u305f\u7269\u4f53\u306e\u914d\u5217\u304c\u63d0\u4f9b\u3055\u308c\u3001\u305d\u308c\u305e\u308c\u306b\u30e9\u30d9\u30eb\u3001\u4fe1\u983c\u5ea6\u3092\u793a\u3059\u30d1\u30fc\u30bb\u30f3\u30c6\u30fc\u30b8\u3001\u52d5\u753b\u30d5\u30ec\u30fc\u30e0\u5185\u306e\u7269\u4f53\u306e\u4f4d\u7f6e\u3092\u793a\u3059\u5ea7\u6a19\u304c\u542b\u307e\u308c\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u95a2\u6570\u3092\u7d99\u7d9a\u7684\u306b\u547c\u3073\u51fa\u3057\u3066\u30d3\u30c7\u30aa\u30d5\u30ec\u30fc\u30e0\u3092\u51e6\u7406\u3057\u3001<code>predictions<\/code>\u3068\u3044\u3046\u72b6\u614b\u30b3\u30f3\u30c6\u30ca\u306b\u683c\u7d0d\u3055\u308c\u305f\u4e88\u6e2c\u5024\u3092\u4f7f\u7528\u3057\u3066\u3001\u30e9\u30a4\u30d6\u30d3\u30c7\u30aa\u30d5\u30a3\u30fc\u30c9\u4e0a\u3067\u8b58\u5225\u3055\u308c\u305f\u5404\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30dc\u30c3\u30af\u30b9\u3068\u30e9\u30d9\u30eb\u3092\u8868\u793a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n<li><code>setInterval<\/code>\u95a2\u6570\u3067\u3001\u3053\u306e\u95a2\u6570\u3092\u7d99\u7d9a\u7684\u306b\u547c\u3073\u51fa\u3057\u307e\u3059\u3002\u540c\u6642\u306b\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u306e\u30d5\u30a3\u30fc\u30c9\u3092\u505c\u6b62\u3057\u305f\u5f8c\u306f\u3001\u3053\u306e\u95a2\u6570\u304c\u547c\u3073\u51fa\u3055\u308c\u306a\u3044\u3088\u3046\u306b\u3057\u306a\u3051\u308c\u3070\u306a\u308a\u307e\u305b\u3093\u3002\u3053\u308c\u306b\u306fJavaScript\u304b\u3089<code>clearInterval<\/code>\u95a2\u6570\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<code>ObjectDetection<\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u4ee5\u4e0b\u306e\u72b6\u614b\u30b3\u30f3\u30c6\u30ca\u3068<code>useEffect<\/code>\u30d5\u30c3\u30af\u3092\u8ffd\u52a0\u3057\u3066\u3001\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u306e\u6709\u52b9\u6642\u306b<code>predictObject<\/code>\u95a2\u6570\u304c\u7d99\u7d9a\u7684\u306b\u547c\u3073\u51fa\u3055\u308c\u3001\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u306e\u7121\u52b9\u6642\u306b\u306f\u524a\u9664\u3055\u308c\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002\n<pre><code class=\"language-jsx\">const [detectionInterval, setDetectionInterval] = useState()\n\n  useEffect(() =&gt; {\n    if (isWebcamStarted) {\n      setDetectionInterval(setInterval(predictObject, 500))\n    } else {\n      if (detectionInterval) {\n        clearInterval(detectionInterval)\n        setDetectionInterval(null)\n      }\n    }\n  }, [isWebcamStarted])<\/code><\/pre>\n<p>\u3053\u308c\u3067\u3001\u30a2\u30d7\u30ea\u304c500\u30df\u30ea\u79d2\u3054\u3068\u306b\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u306e\u524d\u306b\u5b58\u5728\u3059\u308b\u7269\u4f53\u3092\u691c\u51fa\u3059\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3055\u308c\u307e\u3059\u3002\u3053\u306e\u5024\u306f\u3001\u7269\u4f53\u691c\u51fa\u306e\u901f\u5ea6\u306b\u5fdc\u3058\u3066\u5909\u66f4\u53ef\u80fd\u3067\u3059\u304c\u3001\u983b\u7e41\u306b\u884c\u3044\u3059\u304e\u308b\u3068\u3001\u30a2\u30d7\u30ea\u304c\u30d6\u30e9\u30a6\u30b6\u306e\u30e1\u30e2\u30ea\u3092\u5927\u91cf\u306b\u6d88\u8cbb\u3059\u308b\u53ef\u80fd\u6027\u304c\u3042\u308b\u305f\u3081\u6ce8\u610f\u304c\u5fc5\u8981\u3067\u3059\u3002<\/li>\n<li>\u72b6\u614b\u30b3\u30f3\u30c6\u30ca<code>prediction<\/code>\u306b\u4e88\u6e2c\u30c7\u30fc\u30bf\u304c\u683c\u7d0d\u3055\u308c\u305f\u305f\u3081\u3001\u3053\u308c\u3092\u4f7f\u7528\u3057\u3066\u30e9\u30a4\u30d6\u30d3\u30c7\u30aa\u30d5\u30a3\u30fc\u30c9\u306b\u30e9\u30d9\u30eb\u3068\u7269\u4f53\u5468\u8fba\u306e\u30dc\u30c3\u30af\u30b9\u3092\u8868\u793a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3053\u308c\u306b\u306f\u3001<code>ObjectDetection<\/code>\u306e<code>return<\/code>\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u66f4\u65b0\u3057\u307e\u3059\u3002\n<pre><code class=\"language-jsx\">return (\n    &lt;div className=\"object-detection\"&gt;\n      &lt;div className=\"buttons\"&gt;\n        &lt;button onClick={isWebcamStarted ? stopWebcam : startWebcam}&gt;\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u3092{isWebcamStarted ? \"\u505c\u6b62\" : \"\u958b\u59cb\"}&lt;\/button&gt;\n      &lt;\/div&gt;\n      &lt;div className=\"feed\"&gt;\n        {isWebcamStarted ? &lt;video ref={videoRef} autoPlay muted \/&gt; : &lt;div \/&gt;}\n        {\/* \u4ee5\u4e0b\u306e\u30bf\u30b0\u3092\u8ffd\u52a0\u3057\u3066\u3001p\u8981\u7d20\u3067\u30e9\u30d9\u30eb\u3092div\u8981\u7d20\u3067\u30dc\u30c3\u30af\u30b9\u3092\u8868\u793a *\/}\n        {predictions.length &gt; 0 && (\n          predictions.map(prediction =&gt; {\n            return &lt;&gt;\n              &lt;p style={{\n                left: `${prediction.bbox[0]}px`, \n                top: `${prediction.bbox[1]}px`,\n                width: `${prediction.bbox[2] - 100}px`\n            }}&gt;{prediction.class  + ' - with ' \n            + Math.round(parseFloat(prediction.score) * 100) \n            + '% confidence.'}&lt;\/p&gt;\n            &lt;div className={\"marker\"} style={{\n              left: `${prediction.bbox[0]}px`,\n              top: `${prediction.bbox[1]}px`,\n              width: `${prediction.bbox[2]}px`,\n              height: `${prediction.bbox[3]}px`\n            }} \/&gt;\n            &lt;\/&gt;\n          })\n        )}\n      &lt;\/div&gt;\n      {\/* \u4ee5\u4e0b\u306e\u30bf\u30b0\u3092\u8ffd\u52a0\u3057\u3066\u3001\u30e6\u30fc\u30b6\u30fc\u306b\u4e88\u6e2c\u4e00\u89a7\u3092\u8868\u793a *\/}\n      {predictions.length &gt; 0 && (\n        &lt;div&gt;\n          &lt;h3&gt;\u4e88\u6e2c\u4e00\u89a7&lt;\/h3&gt;\n          &lt;ul&gt;\n            {predictions.map((prediction, index) =&gt; (\n              &lt;li key={index}&gt;\n                {`${prediction.class} (${(prediction.score * 100).toFixed(2)}%)`}\n              &lt;\/li&gt;\n            ))}\n          &lt;\/ul&gt;\n        &lt;\/div&gt;\n      )}\n\n    &lt;\/div&gt;\n  );<\/code><\/pre>\n<p>\u3053\u308c\u306b\u3088\u308a\u3001\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u306e\u30d5\u30a3\u30fc\u30c9\u306e\u3059\u3050\u4e0b\u306b\u4e88\u6e2c\u5024\u306e\u4e00\u89a7\u304c\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u307e\u3059\u3002Coco SSD\u304b\u3089\u306e\u5ea7\u6a19\u3092\u4f7f\u7528\u3057\u3066\u4e88\u6e2c\u3057\u305f\u7269\u4f53\u306e\u5468\u308a\u306b\u30dc\u30c3\u30af\u30b9\u304c\u63cf\u753b\u3055\u308c\u3001\u30dc\u30c3\u30af\u30b9\u306e\u4e0a\u90e8\u306b\u306f\u30e9\u30d9\u30eb\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/li>\n<li>\u30dc\u30c3\u30af\u30b9\u3068\u30e9\u30d9\u30eb\u306e\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u3068\u3057\u3066\u3001<strong>index.css<\/strong>\u30d5\u30a1\u30a4\u30eb\u306b\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u8cbc\u308a\u4ed8\u3051\u307e\u3059\u3002\n<pre><code class=\"language-css\">.feed {\n  position: relative;\n\n  p {\n    position: absolute;\n    padding: 5px;\n    background-color: rgba(255, 111, 0, 0.85);\n    color: #FFF;\n    border: 1px dashed rgba(255, 255, 255, 0.7);\n    z-index: 2;\n    font-size: 12px;\n    margin: 0;\n  }\n\n  .marker {\n    background: rgba(0, 255, 0, 0.25);\n    border: 1px dashed #fff;\n    z-index: 1;\n    position: absolute;\n  }\n\n}<\/code><\/pre>\n<p>\u4ee5\u4e0a\u3067\u30a2\u30d7\u30ea\u306e\u958b\u767a\u304c\u5b8c\u4e86\u3067\u3059\u3002\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3092\u518d\u8d77\u52d5\u3057\u3066\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30c6\u30b9\u30c8\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n<p><figure id=\"attachment_176988\" aria-describedby=\"caption-attachment-176988\" style=\"width: 2988px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-176988 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/object-detection-demo.gif\" alt=\"\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u3092\u5229\u7528\u3057\u305f\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u7269\u4f53\u691c\u51fa\u306e\u30c7\u30e2\" width=\"2988\" height=\"1466\"><figcaption id=\"caption-attachment-176988\" class=\"wp-caption-text\">\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u3092\u5229\u7528\u3057\u305f\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u7269\u4f53\u691c\u51fa\u306e\u30c7\u30e2<\/figcaption><\/figure><\/li>\n<\/ol>\n<p>\u30b3\u30fc\u30c9\u306e\u5168\u8c8c\u306f\u3001<a href=\"https:\/\/github.com\/krharsh17\/realtime-object-detection\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub\u30ea\u30dd\u30b8\u30c8\u30ea<\/a>\u3067\u3054\u89a7\u3044\u305f\u3060\u3051\u307e\u3059\u3002<\/p>\n<h2>\u69cb\u7bc9\u3057\u305f\u30a2\u30d7\u30ea\u3092Kinsta\u306b\u30c7\u30d7\u30ed\u30a4\u3059\u308b<\/h2>\n<p>\u6700\u5f8c\u306b\u3001\u69cb\u7bc9\u3057\u305f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092Kinsta\u306b\u30c7\u30d7\u30ed\u30a4\u3057\u3001\u5b9f\u969b\u306b\u30e6\u30fc\u30b6\u30fc\u304c\u5229\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002Kinsta\u3067\u306f\u4efb\u610f\u306eGit\u30b5\u30fc\u30d3\u30b9\uff08<a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\">Bitbucket<\/a>\u3001<a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">GitHub<\/a>\u3001<a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>\uff09\u304b\u3089\u3001<a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\">\u6700\u5927100\u307e\u3067\u9759\u7684\u30b5\u30a4\u30c8\u3092<strong>\u7121\u6599\u3067<\/strong>\u30db\u30b9\u30c6\u30a3\u30f3\u30b0<\/a>\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>Git\u30ea\u30dd\u30b8\u30c8\u30ea\u3092\u7528\u610f\u3057\u305f\u3089\u3001\u4ee5\u4e0b\u306e\u624b\u9806\u306b\u5f93\u3063\u3066\u7269\u4f53\u691c\u51fa\u30a2\u30d7\u30ea\u3092Kinsta\u306b\u30c7\u30d7\u30ed\u30a4\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<ol>\n<li>\u30ed\u30b0\u30a4\u30f3\u3059\u308b\u304b\u3001\u30a2\u30ab\u30a6\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u3066<a href=\"https:\/\/my.kinsta.com\/?lang=ja\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a>\u3092\u958b\u304f<\/li>\n<li>Git\u30b5\u30fc\u30d3\u30b9\u3067Kinsta\u3092\u8a8d\u8a3c\u3059\u308b<\/li>\n<li>\u5de6\u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u300c<strong>\u9759\u7684\u30b5\u30a4\u30c8<\/strong>\u300d\u3092\u9078\u629e\u3057\u300c<strong>\u30b5\u30a4\u30c8\u306e\u8ffd\u52a0<\/strong>\u300d\u3092\u30af\u30ea\u30c3\u30af<\/li>\n<li>\u30c7\u30d7\u30ed\u30a4\u3057\u305f\u3044\u30ea\u30dd\u30b8\u30c8\u30ea\u3068\u30d6\u30e9\u30f3\u30c1\u3092\u9078\u629e<\/li>\n<li>\u30b5\u30a4\u30c8\u306b\u4e00\u610f\u306e\u540d\u524d\u3092\u5272\u308a\u5f53\u3066\u308b<\/li>\n<li>\u6b21\u306e\u5f62\u5f0f\u3067\u30d3\u30eb\u30c9\u8a2d\u5b9a\u3092\u8ffd\u52a0\n<ul>\n<li><strong>\u30d3\u30eb\u30c9\u30b3\u30de\u30f3\u30c9<\/strong>\uff1a<code>yarn build<\/code>\u307e\u305f\u306f<code>npm run build<\/code><\/li>\n<li><strong>Node\u306e\u30d0\u30fc\u30b8\u30e7\u30f3<\/strong>\uff1a<code>20.2.0<\/code><\/li>\n<li><strong>\u516c\u958b\u30c7\u30a3\u30ec\u30af\u30c8\u30ea<\/strong>\uff1a<code>dist<\/code><\/li>\n<\/ul>\n<\/li>\n<li>\u300c<strong>\u30b5\u30a4\u30c8\u3092\u4f5c\u6210<\/strong>\u300d\u3092\u30af\u30ea\u30c3\u30af<\/li>\n<\/ol>\n<p>\u30a2\u30d7\u30ea\u304c\u30c7\u30d7\u30ed\u30a4\u3055\u308c\u305f\u3089\u3001\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u3067\u30a2\u30d7\u30ea\u3092\u9078\u629e\u3057\u3001\u53f3\u4e0a\u306e\u300c<strong>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u79fb\u52d5<\/strong>\u300d\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u30a2\u30d7\u30ea\u3092\u958b\u304f\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3055\u307e\u3056\u307e\u306a\u30ab\u30e1\u30e9\u4ed8\u304d\u30c7\u30d0\u30a4\u30b9\u3092\u5b9f\u884c\u3057\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u30c6\u30b9\u30c8\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u9759\u7684\u30b5\u30a4\u30c8\u30b5\u30fc\u30d0\u30fc\u3060\u3051\u3067\u306a\u304f\u3001Kinsta\u306e<a href=\"https:\/\/sevalla.com\/application-hosting\/\">\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30b5\u30fc\u30d0\u30fc<\/a>\u3067\u3082\u9759\u7684\u30b5\u30a4\u30c8\u3092\u30c7\u30d7\u30ed\u30a4\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u512a\u308c\u305f\u30b9\u30b1\u30fc\u30e9\u30d3\u30ea\u30c6\u30a3\u3001<a href=\"https:\/\/docs.sevalla.com\/applications\/build-options\/dockerfile\">Dockerfile<\/a>\u3092\u4f7f\u7528\u3057\u305f\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3001\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u304a\u3088\u3073\u904e\u53bb\u306e\u30c7\u30fc\u30bf\u3092\u7db2\u7f85\u3059\u308b<a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">\u5305\u62ec\u7684\u306a\u5206\u6790<\/a>\u306a\u3069\u3001\u3088\u308a\u9ad8\u5ea6\u306a\u6a5f\u80fd\u3092\u3054\u5229\u7528\u3044\u305f\u3060\u3051\u307e\u3059\u3002<\/p>\n<h2>\u307e\u3068\u3081<\/h2>\n<p>React\u3001TensorFlow.js\u3001Kinsta\u3092\u4f7f\u7528\u3057\u305f\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306e\u7269\u4f53\u691c\u51fa\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u69cb\u7bc9\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3057\u305f\u3002\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u30d3\u30b8\u30e7\u30f3\u306e\u4e16\u754c\u3092\u63a2\u6c42\u3057\u306a\u304c\u3089\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u4f53\u9a13\u3092\u63d0\u4f9b\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u4eca\u56de\u4f8b\u3068\u3057\u3066\u4f7f\u7528\u3057\u305fCoco SSD\u30e2\u30c7\u30eb\u306f\u3001\u3042\u304f\u307e\u3067\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u51fa\u767a\u70b9\u3067\u3059\u3002TensorFlow.js\u3092\u4f7f\u3063\u3066\u30ab\u30b9\u30bf\u30e0\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u691c\u51fa\u3092\u63a2\u6c42\u3059\u308b\u3053\u3068\u3067\u3001\u8981\u4ef6\u306b\u5fdc\u3058\u305f\u7279\u5b9a\u306e\u7269\u4f53\u3092\u691c\u51fa\u3059\u308b\u305f\u3081\u306e\u30a2\u30d7\u30ea\u3082\u69cb\u7bc9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u30a2\u30d7\u30ea\u306f\u3001\u62e1\u5f35\u73fe\u5b9f\u4f53\u9a13\u3084\u30b9\u30de\u30fc\u30c8\u76e3\u8996\u30b7\u30b9\u30c6\u30e0\u306e\u3088\u3046\u306a\u3001\u3088\u308a\u9ad8\u5ea6\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3059\u308b\u305f\u3081\u306e\u8db3\u639b\u304b\u308a\u3068\u306a\u308a\u307e\u3059\u3002Kinsta\u306e\u4fe1\u983c\u6027\u306b\u512a\u308c\u305f\u30b5\u30fc\u30d0\u30fc\u306b\u30a2\u30d7\u30ea\u3092\u30c7\u30d7\u30ed\u30a4\u3059\u308b\u3053\u3068\u3067\u3001\u69cb\u7bc9\u3057\u305f\u30a2\u30d7\u30ea\u3092\u4e16\u754c\u306b\u914d\u4fe1\u3057\u3001\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u30d3\u30b8\u30e7\u30f3\u306e\u529b\u3092\u5177\u73fe\u5316\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u7269\u4f53\u691c\u51fa\u304c\u5f79\u306b\u7acb\u3064\u3088\u3046\u306a\u8ab2\u984c\u306b\u906d\u9047\u3057\u305f\u3053\u3068\u306f\u3042\u308a\u307e\u3059\u304b\uff1f\u4ee5\u4e0b\u306e\u30b3\u30e1\u30f3\u30c8\u6b04\u3067\u305c\u3072\u304a\u805e\u304b\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u30ab\u30e1\u30e9\u306e\u6027\u80fd\u304c\u5411\u4e0a\u3057\u3066\u4ee5\u6765\u3001\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u7269\u4f53\u691c\u51fa\u6280\u8853 &#8230;<\/p>\n","protected":false},"author":238,"featured_media":56822,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[777,802,809],"class_list":["post-56821","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-javascript-frameworks","topic-react","topic-static-site-generators"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React\u3068Kinsta\u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u7269\u4f53\u691c\u77e5\u30a2\u30d7\u30ea\u3092\u69cb\u7bc9\u3059\u308b\u65b9\u6cd5\uff5c Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"React\u3092\u4f7f\u3063\u3066\u3001\u30e6\u30fc\u30b6\u30fc\u306e\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u3092\u7528\u3044\u305f\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306e\u7269\u4f53\u691c\u51fa\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3057\u3001Kinsta\u306e\u30af\u30e9\u30a6\u30c9\u30b5\u30fc\u30d0\u30fc\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306b\u30c7\u30d7\u30ed\u30a4\u3059\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\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:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React\u3068Kinsta\u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u7269\u4f53\u691c\u77e5\u30a2\u30d7\u30ea\u3092\u69cb\u7bc9\u3059\u308b\u65b9\u6cd5\" \/>\n<meta property=\"og:description\" content=\"React\u3092\u4f7f\u3063\u3066\u3001\u30e6\u30fc\u30b6\u30fc\u306e\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u3092\u7528\u3044\u305f\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306e\u7269\u4f53\u691c\u51fa\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3057\u3001Kinsta\u306e\u30af\u30e9\u30a6\u30c9\u30b5\u30fc\u30d0\u30fc\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306b\u30c7\u30d7\u30ed\u30a4\u3059\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Japan-334616080691171\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-15T07:35:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-16T08:53:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2024\/04\/object-detection-app.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kumar Harsh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"React\u3092\u4f7f\u3063\u3066\u3001\u30e6\u30fc\u30b6\u30fc\u306e\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u3092\u7528\u3044\u305f\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306e\u7269\u4f53\u691c\u51fa\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3057\u3001Kinsta\u306e\u30af\u30e9\u30a6\u30c9\u30b5\u30fc\u30d0\u30fc\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306b\u30c7\u30d7\u30ed\u30a4\u3059\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2024\/04\/object-detection-app-1024x512.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_JP\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_JP\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kumar Harsh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"3\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/\"},\"author\":{\"name\":\"Kumar Harsh\",\"@id\":\"https:\/\/kinsta.com\/jp\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9\"},\"headline\":\"React\u3068Kinsta\u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u7269\u4f53\u691c\u77e5\u30a2\u30d7\u30ea\u3092\u69cb\u7bc9\u3059\u308b\u65b9\u6cd5\",\"datePublished\":\"2024-04-15T07:35:33+00:00\",\"dateModified\":\"2024-04-16T08:53:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/\"},\"wordCount\":93,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/jp\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2024\/04\/object-detection-app.jpg\",\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/\",\"url\":\"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/\",\"name\":\"React\u3068Kinsta\u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u7269\u4f53\u691c\u77e5\u30a2\u30d7\u30ea\u3092\u69cb\u7bc9\u3059\u308b\u65b9\u6cd5\uff5c Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/jp\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2024\/04\/object-detection-app.jpg\",\"datePublished\":\"2024-04-15T07:35:33+00:00\",\"dateModified\":\"2024-04-16T08:53:48+00:00\",\"description\":\"React\u3092\u4f7f\u3063\u3066\u3001\u30e6\u30fc\u30b6\u30fc\u306e\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u3092\u7528\u3044\u305f\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306e\u7269\u4f53\u691c\u51fa\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3057\u3001Kinsta\u306e\u30af\u30e9\u30a6\u30c9\u30b5\u30fc\u30d0\u30fc\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306b\u30c7\u30d7\u30ed\u30a4\u3059\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2024\/04\/object-detection-app.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2024\/04\/object-detection-app.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/jp\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/jp\/topics\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"React\u3068Kinsta\u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u7269\u4f53\u691c\u77e5\u30a2\u30d7\u30ea\u3092\u69cb\u7bc9\u3059\u308b\u65b9\u6cd5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/jp\/#website\",\"url\":\"https:\/\/kinsta.com\/jp\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"\u9ad8\u901f\u304b\u3064\u5805\u7262\u306a\u30d7\u30ec\u30df\u30a2\u30e0\u30b5\u30fc\u30d0\u30fc\u30b5\u30fc\u30d3\u30b9\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/jp\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/jp\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/jp\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/jp\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/kinsta.com\/jp\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/jp\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Japan-334616080691171\/\",\"https:\/\/x.com\/Kinsta_JP\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/jp\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9\",\"name\":\"Kumar Harsh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/kinsta.com\/jp\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/de2d8d6273bdcc3dfa2f8270428f95b2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/de2d8d6273bdcc3dfa2f8270428f95b2?s=96&d=mm&r=g\",\"caption\":\"Kumar Harsh\"},\"description\":\"Kumar is a software developer and a technical author based in India. He specializes in JavaScript and DevOps. You can learn more about his work on his website.\",\"sameAs\":[\"https:\/\/kumarharsh.me\"],\"url\":\"https:\/\/kinsta.com\/jp\/blog\/author\/kumarharsh\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React\u3068Kinsta\u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u7269\u4f53\u691c\u77e5\u30a2\u30d7\u30ea\u3092\u69cb\u7bc9\u3059\u308b\u65b9\u6cd5\uff5c Kinsta\u00ae","description":"React\u3092\u4f7f\u3063\u3066\u3001\u30e6\u30fc\u30b6\u30fc\u306e\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u3092\u7528\u3044\u305f\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306e\u7269\u4f53\u691c\u51fa\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3057\u3001Kinsta\u306e\u30af\u30e9\u30a6\u30c9\u30b5\u30fc\u30d0\u30fc\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306b\u30c7\u30d7\u30ed\u30a4\u3059\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\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:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/","og_locale":"ja_JP","og_type":"article","og_title":"React\u3068Kinsta\u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u7269\u4f53\u691c\u77e5\u30a2\u30d7\u30ea\u3092\u69cb\u7bc9\u3059\u308b\u65b9\u6cd5","og_description":"React\u3092\u4f7f\u3063\u3066\u3001\u30e6\u30fc\u30b6\u30fc\u306e\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u3092\u7528\u3044\u305f\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306e\u7269\u4f53\u691c\u51fa\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3057\u3001Kinsta\u306e\u30af\u30e9\u30a6\u30c9\u30b5\u30fc\u30d0\u30fc\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306b\u30c7\u30d7\u30ed\u30a4\u3059\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002","og_url":"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Japan-334616080691171\/","article_published_time":"2024-04-15T07:35:33+00:00","article_modified_time":"2024-04-16T08:53:48+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2024\/04\/object-detection-app.jpg","type":"image\/jpeg"}],"author":"Kumar Harsh","twitter_card":"summary_large_image","twitter_description":"React\u3092\u4f7f\u3063\u3066\u3001\u30e6\u30fc\u30b6\u30fc\u306e\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u3092\u7528\u3044\u305f\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306e\u7269\u4f53\u691c\u51fa\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3057\u3001Kinsta\u306e\u30af\u30e9\u30a6\u30c9\u30b5\u30fc\u30d0\u30fc\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306b\u30c7\u30d7\u30ed\u30a4\u3059\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002","twitter_image":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2024\/04\/object-detection-app-1024x512.jpg","twitter_creator":"@Kinsta_JP","twitter_site":"@Kinsta_JP","twitter_misc":{"\u57f7\u7b46\u8005":"Kumar Harsh","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"3\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/"},"author":{"name":"Kumar Harsh","@id":"https:\/\/kinsta.com\/jp\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9"},"headline":"React\u3068Kinsta\u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u7269\u4f53\u691c\u77e5\u30a2\u30d7\u30ea\u3092\u69cb\u7bc9\u3059\u308b\u65b9\u6cd5","datePublished":"2024-04-15T07:35:33+00:00","dateModified":"2024-04-16T08:53:48+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/"},"wordCount":93,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/jp\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2024\/04\/object-detection-app.jpg","inLanguage":"ja","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/","url":"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/","name":"React\u3068Kinsta\u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u7269\u4f53\u691c\u77e5\u30a2\u30d7\u30ea\u3092\u69cb\u7bc9\u3059\u308b\u65b9\u6cd5\uff5c Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/jp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2024\/04\/object-detection-app.jpg","datePublished":"2024-04-15T07:35:33+00:00","dateModified":"2024-04-16T08:53:48+00:00","description":"React\u3092\u4f7f\u3063\u3066\u3001\u30e6\u30fc\u30b6\u30fc\u306e\u30a6\u30a7\u30d6\u30ab\u30e1\u30e9\u3092\u7528\u3044\u305f\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306e\u7269\u4f53\u691c\u51fa\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3057\u3001Kinsta\u306e\u30af\u30e9\u30a6\u30c9\u30b5\u30fc\u30d0\u30fc\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306b\u30c7\u30d7\u30ed\u30a4\u3059\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002","breadcrumb":{"@id":"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/"]}]},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/#primaryimage","url":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2024\/04\/object-detection-app.jpg","contentUrl":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2024\/04\/object-detection-app.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/jp\/blog\/react-object-detection-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/jp\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/jp\/topics\/react\/"},{"@type":"ListItem","position":3,"name":"React\u3068Kinsta\u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u7269\u4f53\u691c\u77e5\u30a2\u30d7\u30ea\u3092\u69cb\u7bc9\u3059\u308b\u65b9\u6cd5"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/jp\/#website","url":"https:\/\/kinsta.com\/jp\/","name":"Kinsta\u00ae","description":"\u9ad8\u901f\u304b\u3064\u5805\u7262\u306a\u30d7\u30ec\u30df\u30a2\u30e0\u30b5\u30fc\u30d0\u30fc\u30b5\u30fc\u30d3\u30b9","publisher":{"@id":"https:\/\/kinsta.com\/jp\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/jp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/jp\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/jp\/","logo":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/kinsta.com\/jp\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/jp\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Japan-334616080691171\/","https:\/\/x.com\/Kinsta_JP","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/jp\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9","name":"Kumar Harsh","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/kinsta.com\/jp\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/de2d8d6273bdcc3dfa2f8270428f95b2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/de2d8d6273bdcc3dfa2f8270428f95b2?s=96&d=mm&r=g","caption":"Kumar Harsh"},"description":"Kumar is a software developer and a technical author based in India. He specializes in JavaScript and DevOps. You can learn more about his work on his website.","sameAs":["https:\/\/kumarharsh.me"],"url":"https:\/\/kinsta.com\/jp\/blog\/author\/kumarharsh\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/posts\/56821","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/users\/238"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/comments?post=56821"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/posts\/56821\/revisions"}],"predecessor-version":[{"id":56842,"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/posts\/56821\/revisions\/56842"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/56821\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/56821\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/56821\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/56821\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/56821\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/56821\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/56821\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/56821\/translations\/es"},{"href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/56821\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/media\/56822"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/media?parent=56821"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/tags?post=56821"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/topic?post=56821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}