{"id":4907,"date":"2023-03-06T13:56:14","date_gmt":"2023-03-06T04:56:14","guid":{"rendered":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/?p=4907"},"modified":"2023-03-06T13:56:14","modified_gmt":"2023-03-06T04:56:14","slug":"post-4907","status":"publish","type":"post","link":"https:\/\/cms-mordpress.test.mmmcorp.co.jp\/2023\/03\/06\/post-4907\/","title":{"rendered":"forwardRef\u3092\u3056\u3063\u304f\u308a\u7406\u89e3"},"content":{"rendered":"<p>forwardRef\u3092\u4f7f\u3046\u6a5f\u4f1a\u304c\u3042\u3063\u305f\u306e\u3067\u307e\u3068\u3081\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<div id=\"rtoc-mokuji-wrapper\" class=\"rtoc-mokuji-content frame4 preset5 animation-slide rtoc_open noto-sans\" data-id=\"4907\" data-theme=\"DWS BLOG 2023\">\n\t\t\t<div id=\"rtoc-mokuji-title\" class=\" rtoc_left\">\n\t\t\t<button class=\"rtoc_open_close rtoc_open\"><\/button>\n\t\t\t<span>\u76ee\u6b21<\/span>\n\t\t\t<\/div><ol class=\"rtoc-mokuji decimal_ol level-1\"><li class=\"rtoc-item\"><a href=\"#rtoc-1\">\u306f\u3058\u3081\u306b<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-2\">forwardRef\u3092\u4f7f\u3063\u3066\u307f\u308b<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-3\">\u307e\u3068\u3081<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-4\">\u53c2\u8003<\/a><\/li><\/ol><\/div><h2 id=\"rtoc-1\" >\u306f\u3058\u3081\u306b<\/h2>\n<p>\u307e\u305a\u306ffowardRef\u306b\u3064\u3044\u3066\u6982\u8981\u3092\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002\u516c\u5f0f\u30da\u30fc\u30b8\u306b\u4ee5\u4e0b\u306e\u8a18\u8ff0\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<blockquote><p>\nforwardRef lets your component expose a DOM node to parent component with a ref.\n<\/p><\/blockquote>\n<p>\u8a33\u3059\u3068\u3001\u300cforwardRef \u306f\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b DOM \u30ce\u30fc\u30c9\u3092\u53c2\u7167\u3068\u3057\u3066\u516c\u958b\u3059\u308b\u3053\u3068\u3092\u53ef\u80fd\u306b\u3057\u307e\u3059\u3002\u300d<br \/>\n\u3068\u306a\u308a\u307e\u3059\u3002\u3068\u8a00\u308f\u308c\u3066\u3082\u30a4\u30de\u30a4\u30c1\u308f\u304b\u3089\u306a\u3044\u3068\u601d\u3046\u306e\u3067\u3001\u4f8b\u3092\u4ea4\u3048\u3064\u3064fowardRef\u306e\u7d39\u4ecb\u3092\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<h2 id=\"rtoc-2\" >forwardRef\u3092\u4f7f\u3063\u3066\u307f\u308b<\/h2>\n<p>\u65e9\u901fforwardRef\u3092\u4f7f\u3063\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u52d5\u4f5c\u78ba\u8a8d\u3068\u884c\u304d\u305f\u3044\u3068\u3053\u308d\u3067\u3059\u304c\u3001\u9806\u3092\u8ffd\u3063\u3066\u7406\u89e3\u3059\u308b\u305f\u3081\u306b\u3001\u307e\u305a\u306fuseRef\u306e\u307f\u3092\u4f7f\u3063\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u52d5\u4f5c\u78ba\u8a8d\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-MyInput.jsx\">import React, { useRef } from &quot;react&quot;;\n\nexport const MyInput = () =&gt; {\n  const ref = useRef();\n  const handleClick = () =&gt; {\n    ref.current.focus();\n  };\n  return (\n    &lt;&gt;\n      &lt;input ref={ref} \/&gt;\n      &lt;button onClick={handleClick}&gt;focus&lt;\/button&gt;\n    &lt;\/&gt;\n  );\n};<\/code><\/pre>\n<pre><code class=\"language-App.jsx\">import { MyInput } from &quot;.\/MyInput&quot;;\nimport &quot;.\/styles.css&quot;;\n\nexport default function App() {\n  return (\n    &lt;div className=&quot;App&quot;&gt;\n      &lt;MyInput \/&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n<p>MyInput.js\u5185\u3067\u3001\u7d44\u307f\u8fbc\u307f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8input\u306eref\u5c5e\u6027\u306b\u3001useRef\u3067\u751f\u6210\u3057\u305fref\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u6e21\u3057\u3066\u3044\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001ref\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306ecurrent\u304b\u3089DOM\u30ce\u30fc\u30c9\u306eAPI\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u3001\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u6642\u306bfocus\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p><video controls width=\"480\" alt=\"\u753b\u9762\u53ce\u9332 2023-02-27 15.33.26.mov (148.6 kB)\" src=\"https:\/\/esa-storage-tokyo.s3-ap-northeast-1.amazonaws.com\/uploads\/production\/attachments\/1854\/2023\/02\/27\/123778\/a7bc5ff0-35e9-4984-9d26-c4e91469fcbc.mov\"><\/video><\/p>\n<p>\u4e0a\u8a18\u306e\u4f8b\u3067\u306f\u3001ref\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u751f\u6210\u3068input\u3078\u306eref\u306e\u53d7\u3051\u6e21\u3057\u3092MyInput\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u884c\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u3067\u306f\u3001ref\u306e\u751f\u6210\u3092App\u3067\u884c\u3044\u3001prop\u3068\u3057\u3066MyInput\u306b\u6e21\u3059\u3068\u3069\u3046\u306a\u308b\u306e\u3067\u3057\u3087\u3046\u304b\u3002\u30d7\u30ed\u30b0\u30e9\u30e0\u3092\u4e0b\u8a18\u306e\u901a\u308a\u66f8\u304d\u63db\u3048\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-MyInput.jsx\">import React from &quot;react&quot;;\n\nexport const MyInput = ({ ref }) =&gt; {\n  const handleClick = () =&gt; {\n    ref.current.focus();\n  };\n  return (\n    &lt;&gt;\n      &lt;input ref={ref} \/&gt;\n      &lt;button onClick={handleClick}&gt;focus&lt;\/button&gt;\n    &lt;\/&gt;\n  );\n};<\/code><\/pre>\n<pre><code class=\"language-App.jsx\">import { useRef } from &quot;react&quot;;\nimport { MyInput } from &quot;.\/MyInput&quot;;\nimport &quot;.\/styles.css&quot;;\n\nexport default function App() {\n  const ref = useRef();\n  return (\n    &lt;div className=&quot;App&quot;&gt;\n      &lt;MyInput ref={ref} \/&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n<p>\u4e00\u898b\u52d5\u304d\u305d\u3046\u3067\u3059\u304c\u3001\u30b3\u30f3\u30bd\u30fc\u30eb\u3092\u898b\u308b\u3068\u4e0b\u8a18\u306e\u8b66\u544a\u304c\u51fa\u3066\u3044\u307e\u3059\u3002\u5b9f\u969b\u306bfocus\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3066\u3082\u30a8\u30e9\u30fc\u306b\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3059\u3002\uff08\u81ea\u5206\u3082\u6700\u521d\u3053\u306e\u3088\u3046\u306b\u66f8\u3044\u3066\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u6012\u3089\u308c\u307e\u3057\u305f\uff09<\/p>\n<blockquote><p>\nWarning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?\n<\/p><\/blockquote>\n<p>\u8b66\u544a\u3092\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002\u8a33\u3059\u3068\u3001\u300c\u95a2\u6570\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306bref\u3092\u4e0e\u3048\u308b\u3053\u3068\u306f\u3067\u304d\u307e\u305b\u3093\u3002\u3053\u306e\u53c2\u7167\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3088\u3046\u3068\u3059\u308b\u3068\u3001\u5931\u6557\u3057\u307e\u3059\u3002React.forwardRef()\u3092\u4f7f\u304a\u3046\u3068\u3057\u305f\u306e\u3067\u3057\u3087\u3046\u304b\uff1f\u300d\u3068\u306a\u308a\u307e\u3059\u3002\u307e\u305f\u3001<a href=\"https:\/\/beta.reactjs.org\/reference\/react\/useRef\">useRef\u306e\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c8<\/a>\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002\u305d\u306e\u4e2d\u306b\u4e0b\u8a18\u306e\u3088\u3046\u306a\u8a18\u8ff0\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<blockquote><p>\nBy default, your own components don\u2019t expose refs to the DOM nodes inside them.<\/p>\n<p>\u4ee5\u4e0a\u3092\u307e\u3068\u3081\u308b\u3068\u3001\u81ea\u4f5c\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u306eDOM\u30ce\u30fc\u30c9\uff08\u4eca\u56de\u306e\u5834\u5408\u306finput\uff09\u306eref\u3092\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u516c\u958b\u3059\u308b\u3053\u3068\u306f\u3067\u304d\u306a\u3044\u3088\u3046\u3067\u3059\u3002\u3067\u306f\u3001\u3069\u3046\u3059\u308c\u3070\u3044\u3044\u306e\u304b\u3068\u3044\u3046\u3068\u3001\u8b66\u544a\u6587\u306b\u3082\u3042\u308a\u307e\u3059\u304cfowardRef\u3092\u4f7f\u3044\u307e\u3059\u3002\n<\/p><\/blockquote>\n<p>forwardRef\u3092\u4f7f\u7528\u3057\u3066\u30d7\u30ed\u30b0\u30e9\u30e0\u3092\u66f8\u304d\u63db\u3048\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-MyInput.jsx\">import React, { forwardRef } from &quot;react&quot;;\n\nexport const MyInput = forwardRef(({ ref }) =&gt; {\n  const handleClick = () =&gt; {\n    ref.current.focus();\n  };\n  return (\n    &lt;&gt;\n      &lt;input ref={ref} \/&gt;\n      &lt;button onClick={handleClick}&gt;focus&lt;\/button&gt;\n    &lt;\/&gt;\n  );\n});<\/code><\/pre>\n<p>\u203bApp.jsx\u306f\u5909\u66f4\u306a\u3057<\/p>\n<p>\u4e0a\u8a18\u306e\u3088\u3046\u306bfowardRef\u306e\u5f15\u6570\u306b\u81ea\u4f5c\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u6e21\u3059\u3053\u3068\u3067\u3001\u81ea\u4f5c\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u306eref\u3092\u516c\u958b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3057\u305f\u3002\u5b9f\u969b\u306b\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u6700\u521d\u306e\u4f8b\u3068\u540c\u69d8\u306binput\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u304c\u5f53\u305f\u30ea\u307e\u3059\u3002\u3053\u3053\u3067\u6539\u3081\u3066\u3001\u5192\u982d\u306eforwardRef\u306e\u6982\u8981\u3092\u78ba\u8a8d\u3057\u3066\u3044\u305f\u3060\u304f\u3068\u3001\u8aac\u660e\u306b\u7d0d\u5f97\u611f\u304c\u3042\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<h2 id=\"rtoc-3\" >\u307e\u3068\u3081<\/h2>\n<p>\u4eca\u56de\u306f\u7c21\u5358\u306b\u3067\u3059\u304c\u3001fowardRef\u306e\u7d39\u4ecb\u3092\u3055\u305b\u3066\u3044\u305f\u3060\u304d\u307e\u3057\u305f\u3002\u3053\u306e\u8a18\u4e8b\u3092\u901a\u3057\u3066\u3001\u5c11\u3057\u3067\u3082\u7406\u89e3\u306e\u52a9\u3051\u306b\u306a\u308c\u3070\u5e78\u3044\u3067\u3059\u3002<br \/>\n\u307e\u305f\u3001\u3088\u308a\u8a73\u3057\u3044\u89e3\u8aac\u30fb\u4f7f\u7528\u4f8b\u306f\u53c2\u8003\u306b\u3042\u308b\u672c\u5bb6\u306e\u30b5\u30a4\u30c8\u3067\u78ba\u8a8d\u3044\u305f\u3060\u3051\u308c\u3070\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<h2 id=\"rtoc-4\" >\u53c2\u8003<\/h2>\n<p><a href=\"https:\/\/beta.reactjs.org\/reference\/react\/forwardRef\"><a href=\"https:\/\/beta.reactjs.org\/reference\/react\/forwardRef\">https:\/\/beta.reactjs.org\/reference\/react\/forwardRef<\/a><\/a><br \/>\n<a href=\"https:\/\/beta.reactjs.org\/reference\/react\/useRef\"><a href=\"https:\/\/beta.reactjs.org\/reference\/react\/useRef\">https:\/\/beta.reactjs.org\/reference\/react\/useRef<\/a><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>forwardRef\u3092\u4f7f\u3046\u6a5f\u4f1a\u304c\u3042\u3063\u305f\u306e\u3067\u307e\u3068\u3081\u3066\u307f\u307e\u3057\u305f\u3002 \u76ee\u6b21 \u306f\u3058\u3081\u306bforwardRef\u3092\u4f7f\u3063\u3066\u307f\u308b\u307e\u3068\u3081\u53c2\u8003\u306f\u3058\u3081\u306b \u307e\u305a\u306ffowardRef\u306b\u3064\u3044\u3066\u6982\u8981\u3092\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002\u516c\u5f0f\u30da\u30fc\u30b8\u306b\u4ee5\u4e0b\u306e\u8a18\u8ff0\u304c\u3042\u308a\u307e\u3059\u3002 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4912,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jinr_url_youtube":"","_jinr_pip_youtube":false,"_jinr_time_youtube":"","_jinr_thumb_youtube":"","_jinr_media_youtube":"","_jinr_category_edit":false,"_jinr_category":"","_jinr_title_display":false,"_jinr_snsbutton_display":false,"_jinr_ads_display":false,"_jinr_thumbnail_display":false,"_jinr_profile_display":false,"_jinr_relatedpost_display":false,"_jinr_sidebar1col_display":false,"_jinr_sidebar2col_display":false,"_jinr_seotitle_display":"","_jinr_description_display":"","_jinr_keyword_display":"","_jinr_hastag_display":"","_jinr_canonical_display":"","_jinr_noindex_display":false,"_jinr_paidpost":false,"_jinr_paidpost_product_id":"","_jinr_headtag_article":""},"categories":[8,72],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/cms-mordpress.test.mmmcorp.co.jp\/wp-json\/wp\/v2\/posts\/4907"}],"collection":[{"href":"https:\/\/cms-mordpress.test.mmmcorp.co.jp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cms-mordpress.test.mmmcorp.co.jp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cms-mordpress.test.mmmcorp.co.jp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cms-mordpress.test.mmmcorp.co.jp\/wp-json\/wp\/v2\/comments?post=4907"}],"version-history":[{"count":0,"href":"https:\/\/cms-mordpress.test.mmmcorp.co.jp\/wp-json\/wp\/v2\/posts\/4907\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cms-mordpress.test.mmmcorp.co.jp\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/cms-mordpress.test.mmmcorp.co.jp\/wp-json\/wp\/v2\/media?parent=4907"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cms-mordpress.test.mmmcorp.co.jp\/wp-json\/wp\/v2\/categories?post=4907"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cms-mordpress.test.mmmcorp.co.jp\/wp-json\/wp\/v2\/tags?post=4907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}