世界イチわかりやすいReactのPropsバケツリレーを説明してみた

どうもアットエンジニア事業部の大目です。
第一回の先陣は僕がきらしていただきます！

さて、初心者エンジニアでReactを最近使い始めたよって言う人、ReactのPropsバケツリレーって聞いたことありません？
はい！それReact使い始めて1時間経った僕でも知ってました！
でも親コンポーネントから子コンポーネントにPropsを渡すんやとか言われてもさっぱりわかんない・・。
そう！かくいう僕もSES営業上がりの文系卒のエンジニア歴1年の雑魚スライムでした。
しかし、今なら自信を持って言えます。
                                        ＼Propsバケツリレーを理解できていると／
ということで、今回は初心者スライムのみなさんのために、世界イチわかりやすいPropsバケツリレーを解説してみました。

React がユーザ定義のコンポーネントを見つけた場合、JSX に書かれている属性と子要素を単一のオブジェクトとしてこのコンポーネントに渡します。 このオブジェクトのことを “props” と呼びます。
https://ja.reactjs.org/docs/components-and-props.html#:~:text=React%20%E3%81%8C%E3%83%A6%E3%83%BC%E3%82%B6%E5%AE%9A%E7%BE%A9%E3%81%AE,%E2%80%9Cprops%E2%80%9D%20%E3%81%A8%E5%91%BC%E3%81%B3%E3%81%BE%E3%81%99%E3%80%82

↑こんなん言われたってさっぱりわからないよね┓(´Д｀)┏
はい、過去の自分です。

今日はイメージ掴んで帰っていってくださいね^^

Propsとはなんぞや！

わかりやすくいうとパラメーターです！
例えば人間を識別するために、田中さんという名前があります。
それをプログラミングで表すと

name: "田中"

となります。
このようにパラメーターをReactの世界ではPropsと呼びます。
(少なくともへっぽこはそう思ってます)

じゃReactのPropsバケツリレーって何？？

本題のPropsバケツリレーに入るわけですが、その前にReactの仕組みについて説明した方が理解がスムージーです。
Reactは超簡単に言うとコンポーネントっていう部品をたくさん組み合わせてアプリケーションを作ります。
イメージ的には、家を作るために木材やノコギリ、釘などの『コンポーネント』を組み合わせるって感じですね。
しかし、Reactの世界では木材やノコギリ、釘などの『コンポーネント』は親子関係があります。
例えば、ノコギリという親がいて、その素材である鉄がその子供って感じのイメージです。
つまり、Reactではノコギリという親のコンポーネントがあり、鉄をその子供と表すということにより、鉄がどのような役割を果たすか感覚的につかめるという特徴があるということですね。うんわかりやすい！！
これが親子関係があるコンポーネント(部品)を組み合わせてアプリケーションを作るということです。
ここまで来ればPropsバケツリレーというものがわかってくると思います。
つまりPropsバケツリレーは
                                                   パラメーターを親から子へ渡す
ということです。
では実際のコードを見てみましょう。

コードで実践！Propsバケツリレー

オブジェクト編

コメントアウト{/* */}の中で説明みてくださいね。

親コンポーネント(パス：/)

import React from "react";
import { Man } from "./Man"
function Human() {
  const tanaka = "田中"
  return (
    <Man { name: tanaka } /> 
    {/* ↑tanakaというオブジェクトをManという子コンポーネントに渡す。nameはあくまでキーなので、名前はなんでも良い。つまり、Human(人間)の親コンポーネントがMan(男性)というコンポーネントに田中という名前を渡しているということ。 */}
  )
}

子コンポーネント(パス：/)

import React from "react";
export function Man(props) {
  {/* ↑親コンポーネント(Human)ですでに　子コンポーネント(Man)がインポート(import)されて、使用されてるので、自動的にHumanが親、Manが子供と判別される。つまり、子コンポーネントのManの引数(括弧の部分)にpropsを入れることにより、親コンポーネントで渡された『name: tanaka』を受け取ることができる。 */}
  const name_man = props.name
  {/* ↑「props」というワードで明示的に親からきたものですよと表す。そこにprops.nameとすることで親からきたnameというキーを使いますよと指定をする。そうすることでprops.nameは"田中"となる。 */}
  return (
    <>
      {name_man}
    </> 
  )
}

出力

田中

※これはUseStateでも同じです。
const [name, setName] = React.useState("");のname部分をpropsとして渡せます

関数編

ちょっとここからレベルアップします。
React初心者の人はむずいかも。
propsちょっとできたらまた来てね。
でも関数渡すことは避けて通れないから覚えないといけないかも。

親コンポーネント(パス：/)

import React from "react";
import { Man } from "./Man"
function Human() {
  const [name, setName] = React.useState("");
  function changeName(name) {
    setName(name)
  }
  return (
    <Man { changeName: changeName } /> 
  )
}

setStateはそのままpropsで渡せない。
だから、関数にしてsetStateを渡す必要がある。
逆に言うと関数ならpropsとして子コンポーネントに渡し放題となる。

子コンポーネント(パス：/)

import React from "react";
export function Man(props) {
  props.changeName("田中")
}

props.changeNameとすることで親コンポーネントのfunction changeNameが走り、引数に田中を加えてるので、props.changeName("田中")の結果は田中となる。

おわり！

どうでしたか？
少しでもPropsバケツリレーのイメージが湧いたなら嬉しいです。
もう一回思い出してください！propsバケツリレーは親コンポーネントから子コンポーネントに渡すことです。
もっといえば、親コンポーネントから子コンポーネント、その子コンポーネントへ渡す・・これをリレーっていうんですね！うんわかりやすい！！！
ふぅ、あと10回記事書きます！！！
ではまた会う日まで。