React Props: コンポーネントへのデータ受け渡し

はじめに

Reactにおいて、props（「プロパティ」の略）はコンポーネント間でデータを渡すための基本的な概念です。これを使うことで、動的で再利用可能なコンポーネントを作成できます。propsは関数に渡す引数のようなものだと考えてください。親コンポーネントが子コンポーネントの設定を行うために使用します。propsは読み取り専用であり、子コンポーネントが受け取ったpropsを直接変更してはいけません。

この実験では、以下の内容を学びます。

親コンポーネントから子コンポーネントへpropsを定義し、渡す方法。
子コンポーネント内でpropsにアクセスし、使用する方法。
分割代入（destructuring）を使ってコードを簡潔にする方法。
propsにデフォルト値を設定する方法。

それでは始めましょう！

関数コンポーネントでのpropsパラメータの定義

このステップでは、新しい子コンポーネントを作成し、propsを受け取れるように準備します。Reactの関数コンポーネントは、渡されたすべてのpropsを含むオブジェクトを単一の引数として受け取ることができます。慣習として、このオブジェクトは props と名付けられます。

まず、プロジェクトディレクトリに移動します。セットアップスクリプトによって、すでに my-app というプロジェクトが作成されています。

cd ~/project/my-app

次に、プロジェクトの依存関係をインストールします。

npm install

それでは、新しいコンポーネントファイルを作成しましょう。左側のファイルエクスプローラーで src フォルダに移動し、その中に Greeting.jsx という名前で新しいファイルを作成します。

作成した src/Greeting.jsx ファイルに以下のコードを追加します。これは、props パラメータを受け取るシンプルな関数コンポーネントを定義するものです。

function Greeting(props) {
  return <h2>Hello, World!</h2>;
}

export default Greeting;

次に、この新しいコンポーネントをメインの App コンポーネントでインポートして使用する必要があります。src/App.jsx ファイルを開き、以下のように修正してください。

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting />
    </>
  );
}

export default App;

それでは、開発サーバーを起動してアプリケーションを確認しましょう。

npm run dev -- --host 0.0.0.0 --port 8080

コマンド実行後、インターフェース左上の Web 8080 タブに切り替えてください。「Welcome to My App」と「Hello, World!」が表示されたアプリケーションが動作しているはずです。

親からname="John"のようにprop値を渡す

このステップでは、親コンポーネント (App) から子コンポーネント (Greeting) へデータを渡す方法を学びます。これはJSXの属性のような構文を使用して行います。

Greeting コンポーネントに人の名前を渡し、パーソナライズされたメッセージを表示できるようにしましょう。

src/App.jsx ファイルを開きます。<Greeting /> の行を修正し、値が "John" である name propを含めます。

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting name="John" />
    </>
  );
}

export default App;

ここで、name="John" がpropです。name がpropのキーで、"John" がその値です。波括弧 {} で囲むことで、任意のJavaScript式をpropの値として渡すことができます。文字列の場合は、引用符だけで十分です。

ファイルを保存すると、開発サーバーが自動的にリロードされます。Web 8080 タブを確認しても、出力はまだ変わっていません。これはpropを渡しただけで、Greeting コンポーネントがまだそれを使用していないためです。次のステップでこれを修正します。

props.nameを使って子コンポーネントでpropにアクセスする

Greeting コンポーネントが name propを受け取れるようになったので、それを使ってみましょう。子コンポーネント内の props オブジェクトには、親から渡されたすべてのプロパティが含まれています。props.propertyName のようにドット記法を使ってアクセスできます。

src/Greeting.jsx ファイルを開きます。props.name にアクセスしてパーソナライズされた挨拶を表示するように修正します。波括弧 {} を使用して、JavaScript式をJSXに直接埋め込みます。

src/Greeting.jsx を以下のコードに更新してください。

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

export default Greeting;

ファイルを保存します。Web 8080 タブに切り替えると、メッセージが「Hello, John!」に更新されているはずです。

これで、Reactにおけるデータの基本的な流れ（propsを介した親から子への受け渡し）が確認できました。

関数パラメータでpropsを分割代入する

props.name や props.age などと書くのは、コンポーネントが多くのpropsを受け取る場合に冗長になりがちです。よりクリーンで一般的なアプローチは、ES6の分割代入（destructuring）を使用して、関数のパラメータリスト内で直接 props オブジェクトからプロパティを取り出す方法です。

Greeting コンポーネントを分割代入を使うようにリファクタリングしましょう。

src/Greeting.jsx を開き、関数シグネチャを修正します。props を受け取る代わりに、分割代入を行って name を直接取得します。

ファイルを以下のように更新してください。

function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}

export default Greeting;

(props) を ({ name }) に変更することで、関数に渡されたオブジェクトから name プロパティを抽出するようにJavaScriptに指示しています。これにより、props.name ではなく name を直接使用できるため、コンポーネントの本体がよりクリーンになります。

ファイルを保存して Web 8080 タブを確認してください。出力は全く同じ（「Hello, John!」）ですが、コードはより簡潔で読みやすくなりました。

デフォルトパラメータでデフォルトpropsを設定する

親コンポーネントが必要なpropを渡さなかった場合はどうなるでしょうか？その値は undefined になり、エラーや予期しないUIの原因となる可能性があります。これを防ぐために、propsにデフォルト値を指定できます。

関数コンポーネントの場合、関数シグネチャ内でデフォルトパラメータを使用できます。

Greeting コンポーネントにデフォルトの名前を設定しましょう。src/Greeting.jsx を開き、関数パラメータを修正してデフォルト値を含めます。デフォルト名を "Guest" に設定します。

function Greeting({ name = "Guest" }) {
  return <h2>Hello, {name}!</h2>;
}

export default Greeting;

それではテストしてみましょう。src/App.jsx を開き、別の <Greeting /> コンポーネントを追加しますが、今回は name propを渡さないようにします。

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting name="John" />
      <Greeting />
    </>
  );
}

export default App;

両方のファイルを保存します。Web 8080 タブに移動してください。2つの挨拶が表示されているはずです。

"Hello, John!" （propを受け取ったコンポーネント）
"Hello, Guest!" （デフォルトのpropを使用したコンポーネント）

これは、コンポーネントをより予測可能にし、エラーを防ぐための堅牢な方法です。

まとめ

実験の完了、おめでとうございます！Reactで再利用可能かつ動的なコンポーネントを作成するためのpropsの基礎を学びました。

この実験では、以下のことを実践しました。

propsを使用して親コンポーネントから子コンポーネントへデータを渡す。
props オブジェクトを使用して子コンポーネント内でpropsにアクセスする。
分割代入を使用して、よりクリーンで読みやすいコードを書く。
デフォルトパラメータを使用してpropsにデフォルト値を設定し、コンポーネントを堅牢にする。

propsはReact開発の要であり、これらを習得することは複雑なアプリケーションを構築するための重要なステップです。Reactの学習を続ける中で、これらの概念を練習し続けてください。