こんにちは。Reactの世界へようこそ！
日々、コードと格闘していると「なんでこんなに動かないの？」と壁にぶつかること、ありますよね。大丈夫、みんな最初はそうやって強くなるんです。
今日は、Reactを触り始めると必ずと言っていいほど「あれ、どうすればいいの？」と手が止まる`forwardRef`（フォワードレフ）という機能についてお話しします。
—
そもそも「ref」って何者？
まずは少しだけ整理しましょう。Reactは基本的に「データの流れ」で画面を動かします。でも、たまには「どうしても直接このボタンにフォーカスを当てたい！」とか「この動画プレイヤーの再生ボタンを直接叩きたい！」というように、DOM（画面上のHTML要素）を直接操作したい時がありますよね。
その時に使うのが`ref`という、「その要素への直接の連絡先（アドレス帳）」のようなものです。
なぜ「転送（forward）」が必要なの？
普通、`ref`は同じコンポーネント内なら自由に作れます。でも、「親コンポーネントで作った『連絡先』を、子コンポーネントの中にあるボタンに渡したい」という状況になったとき、Reactは少しだけ意地悪をします。
Reactの決まりとして、コンポーネントは「中身がどうなっているか」を隠すのが基本ルールです。だから、親から`ref`という名前のプロパティを渡しても、子コンポーネントは「え、この`ref`って何？ 受け取り方がわからないよ」と無視してしまうんです。
ここで登場するのが`forwardRef`です。
これは、「親からもらった『連絡先（ref）』を、子コンポーネントの中の特定の要素まで直接つないであげますよ」という、いわば「取次サービス」なんです。
—
具体的に見てみよう：入力フォームの例
例えば、親画面に「入力するボタン」があって、クリックすると子コンポーネント内の「テキストボックス」にカーソルがピコピコッと入る機能を考えてみましょう。
1. 子コンポーネント側（受け取る準備）
`forwardRef`を使って、親から送られてくる`ref`を受け取れるようにします。
import React, { forwardRef } from ‘react’;
// forwardRefで囲むことで、第二引数にrefを受け取れるようになります
const MyInput = forwardRef((props, ref) => {
return (
// 親から受け取ったrefを、このinputタグに直接紐付けます
);
});
export default MyInput;
2. 親コンポーネント側（渡す側）
`useRef`で作った「連絡先」を、子コンポーネントに渡します。
import React, { useRef } from ‘react’;
import MyInput from ‘./MyInput’;
const App = () => {
// 連絡先（ref）を作成
const inputRef = useRef(null);
const handleClick = () => {
// 連絡先を通じて、子コンポーネント内のinputを操作！
inputRef.current.focus();
};
return (
);
};
—
ここで注意！「設計」の視点から
この`forwardRef`、とっても便利ですが、使いすぎには注意が必要です。
現場の設計でよくある「うっかり」ポイントを3つだけお伝えしますね。
1. カプセル化を壊しすぎない：
Reactの良さは「中身を隠して、部品として使い回せること」です。むやみに`ref`で中身を操作できるようにしてしまうと、後から「中身のHTMLタグの種類を変えたい」と思った時に、親側のコードまで壊れてしまいます。「本当にこれ、親から触らせる必要がある？」と一度立ち止まって考えてみてください。
2. `ref`は最後の手段：
Reactの基本は「状態（state）を変えることで画面を変える」ことです。`ref`はあくまで「どうしても直接操作が必要なとき（フォーカス、スクロール位置の取得など）」の特効薬として使いましょう。
3. 過度な依存を避ける：
子コンポーネントの構造が複雑すぎると、どこに`ref`を紐づければいいか迷子になります。そんな時は、「このコンポーネントは役割が大きすぎるのかも？」と分割のサインかもしれません。
—
最後に：あまり難しく考えないで
「転送」とか「DOM操作」という言葉を聞くと、なんだか凄そうな魔法のように感じるかもしれません。でも、やっていることは単純に「親が持っている手紙（ref）を、子の中の特定の誰か（DOM要素）に手渡しているだけ」なんです。
最初から完璧に使いこなす必要はありません。まずは「あれ、親からrefが渡せないな？」と思った時に、「あ、そういえば`forwardRef`っていう魔法の道具があったな」と思い出してもらえれば大正解です。
皆さんのReactライフが、少しでも快適で楽しいものになりますように！応援しています。
コメント