Reactで「部品」にデータを渡すには？

2022年6月16日

React で「部品」にデータを渡すには？

React の「部品」に呼び出し元（親）からデータを渡すやり方は、Vue と殆ど同じです。プロパティ（property）と呼ばれるアトリビュートを呼び出すモジュールの HTML に相当する部分（JSX）で指定して渡します。

プロパティを使って渡す

React でも Vue でも呼び出し元（親）からデータを渡す場合、プロパティ（property）と呼ばれるアトリビュートで指定します。記述方法も似ています。

今回は、呼び出される部品（子）では、相当するプロパティ(property)が指定され中たあ場合には、「No props passed yet」を表示して、プロパティ(property)が指定されている場合には、指定されたプロパティの値を表示するようにします。

まずは、呼び出される部品（子）の記述です。

import React from "react";
interface IProps {
  msg: string | undefined;
}
export default function Step12Child(props: IProps): JSX.Element {
  return (
    <React.Fragment>
      <div>
        <h2>{props.msg ? props.msg : "No props passed yet"}</h2>
      </div>
    </React.Fragment>
  );
}

今回は、Typescript を利用しているので、渡されるプロパティの型をきちんと宣言する必要があります。

export default function Step12Child(props: any): JSX.Element {
    .....
}

のように、「any」を使った場合には、カスタムの型「IProp」のような宣言は必要ありません。しかし、この書き方だと、コンパイル時に、呼び出し元（親）と呼び出される部品（子）の間で型が一致しているかのチェックをする事ができません。そうすると、Typescript の利点を十分に活用していない事になるので、きちんとカスタムの型を「interface」を使って宣言しておきます。

呼び出し元（親）の記述

次に呼び出し元（親）の記述のやり方です。

import React from "react";
import Step12Child from "./step12Child";
import "./styles/step12.css";
export default function Step12(): JSX.Element {
  const greeting: string = "Hello from parent";
  return (
    <React.Fragment>
      <div>
        <Step12Child msg={greeting} />
      </div>
    </React.Fragment>
  );
}

今回は、「greeting」という定数に「Hello from parent」という文字列を入れて、呼び出している部品に渡しています。ここで、「msg」を指定しない場合には、渡される値は「undefined」になります。

Typescript を使う利点

この連載では、Javascript ではなく、Typescript を利用する例を紹介しています。今回の例の様に、「部品」を呼び出す場合には、Typescript を利用すると、コンパイル時に受け渡しするデータの型をチェックする事が可能です。

この例では、「msg」だけを渡す形になっていますが、別のラベルをつけて複数の値を渡す事ができます。受け取り側では、プロパティの型を以下のように宣言しています。

interface IProps {
  msg: string | undefined;
}

この値は、「string(文字列)」か「undefined(渡すデータがない状態)」の二つの場合が想定されています。つまり、呼び出し元で「文字列」を指定するか、特に値を渡さない場合がある事がわかります。

その上で、値が渡されない場合の表示も考慮して部品の設計がされています。

表示の部分でプロパティの値をチェックして表示を決めるようになっています。

props.msg ? props.msg : "No props passed yet";

値がない場合があるの？と思われるかもしれませんが、値を必ず渡す場合は問題ありませんが、値がない場合に予期しない動作をしない様にするには、このように定義しておく方がデバッグが簡単になります。

何故型の定義が重要か？

型をきちんと定義しておくと、デバッグが簡単になると書きましたがもう少し詳しくみてみましょう！
今回の例のようにシンプルな場合は余り問題はありませんが、もう少し複雑な部品を呼び出すことを考えてみてください。呼び出し元（親）から呼び出す部品（子）に渡すデータの数も多くなる場合を考えます。
この様な場合、呼び出し元（親）のプログラムを書く人と、呼び出される部品（子）のプログラムを書く人が別の人になる場合も沢山あります。そうした場合、両方のプログラムの担当者同士がキチンとやり取りするデータの型を合わせておく必要があります。
ところが、開発中の始めの段階では問題がなくても、途中で担当が変わったり、プログラムの手直しをした際にこのやり取りの取り決め（インターフェース）に不一致が起こる場合が結構あります。
この様な場合でも、Typescript で型をキチンと定義しておくと、コンパイル時にそうしたエラーを簡単に見つけることが可能になります。
Typescript が大きなプロジェクトで有利とされる大きな理由の一つが、複数の人が参加するプロジェクトでは、こうしたインターフェースの不一致を未然に防ぐ事が可能になる事が挙げられます。

まとめ

今回は、React の部品にデータを渡すやり方を紹介しました。データを渡すこと自体は、プロパティを使えば簡単に行えます。やり方も Vue とほぼ同じ様な方法でデータを渡す事が可能です。
この記事では、このデータのやり取りに関して、Typescript を利用して、やり取りするデータの型のチェックを行う利点についても紹介しています。特に複数の人が参加して開発を行う場合、インターフェースの型がキチンと一致していることはとても重要です。そうした事を考慮すると、Typescript を利用すると、コンパイル時にそうしたエラーを未然に発見できるので、開発の効率も向上します。
Javascript でのプログラム開発にある程度慣れてきたら、Typescript への移行を考えると、個人で開発する場合にも有利な点が沢山あります。少しづづでも、Typescript に慣れておくと、就職や案件の獲得の際にも有利になる場合が多くなります！

このブログを検索

シリコンバレースーパーウエア