Propsを使ったコンポーネントのカスタマイズ（第3回）

Propsの役割と基本概念

Propsは、コンポーネントに外部からデータを渡すための仕組みです。親コンポーネントから子コンポーネントにデータを送信することで、同じコンポーネントを異なる内容や振る舞いで再利用できます。PropsはJavaScriptのオブジェクトとして扱われ、コンポーネントの関数引数として受け取ります。たとえば、以下のようなコンポーネントを考えます。

function Greeting(props) {    
  return <h1>こんにちは、{props.name}さん！</h1>;    
}    

このGreetingコンポーネントは、props.nameを参照して動的な名前を表示します。Propsは読み取り専用であり、コンポーネント内で変更することはできません。この特性により、データの流れが一方向に保たれ、予期しない副作用を防ぎます。

ハンズオン：Propsを使用したコンポーネントの作成

Propsの基本を理解したところで、実際にPropsを使用したコンポーネントを作成します。第1回で作成したプロジェクト（my-react-app）を使用し、まず新しいコンポーネントを作成します。srcフォルダ内にGreeting.jsファイルを作成し、以下のコードを記述します。

import React from 'react';    
    
function Greeting(props) {    
  return (    
    <div>    
      <h2>こんにちは、{props.name}さん！</h2>    
      <p>{props.message}</p>    
    </div>    
  );    
}    
    
export default Greeting;    

このGreetingコンポーネントは、nameとmessageという2つのPropsを受け取り、それぞれ見出しとパラグラフに表示します。次に、src/App.jsを編集してGreetingコンポーネントを使用します。

import React from 'react';    
import './App.css';    
import Greeting from './Greeting';    
    
function App() {    
  return (    
    <div className="app-container">    
      <h1>Propsを活用したコンポーネント</h1>    
      <Greeting name="太郎" message="Reactの世界へようこそ！" />    
      <Greeting name="花子" message="ハンズオンを楽しみましょう！" />    
    </div>    
  );    
}    
    
export default App;    

このコードでは、Appコンポーネント内でGreetingコンポーネントを2回呼び出し、それぞれ異なるnameとmessageを渡しています。src/App.cssは第2回で追加したスタイルをそのまま使用します。開発サーバー（npm start）が起動している状態で保存すると、ブラウザに2つの異なる挨拶メッセージが表示されます。これにより、同じコンポーネントを異なるデータで再利用できることがわかります。

Propsにさまざまなデータを渡す

Propsには、文字列だけでなく、数値、オブジェクト、配列、関数など、JavaScriptのあらゆる値を渡せます。たとえば、ユーザーの情報をオブジェクトとして渡す例を試します。Greeting.jsを以下のように変更します。

import React from 'react';    
    
function Greeting(props) {    
  return (    
    <div>    
      <h2>こんにちは、{props.user.name}さん！</h2>    
      <p>年齢：{props.user.age}歳</p>    
      <p>{props.message}</p>    
    </div>    
  );    
}    
    
export default Greeting;    

次に、App.jsを以下のように編集します。

import React from 'react';    
import './App.css';    
import Greeting from './Greeting';    
    
function App() {    
  const user1 = { name: '太郎', age: 25 };    
  const user2 = { name: '花子', age: 30 };    
    
  return (    
    <div className="app-container">    
      <h1>Propsを活用したコンポーネント</h1>    
      <Greeting user={user1} message="Reactの世界へようこそ！" />    
      <Greeting user={user2} message="ハンズオンを楽しみましょう！" />    
    </div>    
  );    
}    
    
export default App;    

このコードでは、userオブジェクトをPropsとして渡し、コンポーネント内でprops.user.nameやprops.user.ageを参照しています。ブラウザで確認すると、名前と年齢が正しく表示されます。このように、Propsを活用することで複雑なデータも柔軟に扱えます。

ハンズオン：PropsをカスタマイズしてUIを拡張

Propsの柔軟性をさらに実感するため、読者自身でコンポーネントをカスタマイズします。Greeting.jsを編集し、Propsで受け取った色を適用してテキストのスタイルを変更する機能を追加します。以下は一例です。

import React from 'react';    
    
function Greeting(props) {    
  const style = { color: props.color || 'black' };    
  return (    
    <div>    
      <h2 style={style}>こんにちは、{props.user.name}さん！</h2>    
      <p>年齢：{props.user.age}歳</p>    
      <p>{props.message}</p>    
    </div>    
  );    
}    
    
export default Greeting;    

App.jsを以下のように変更します。

import React from 'react';    
import './App.css';    
import Greeting from './Greeting';    
    
function App() {    
  const user1 = { name: '太郎', age: 25 };    
  const user2 = { name: '花子', age: 30 };    
    
  return (    
    <div className="app-container">    
      <h1>Propsを活用したコンポーネント</h1>    
      <Greeting user={user1} message="Reactの世界へようこそ！" color="blue" />    
      <Greeting user={user2} message="ハンズオンを楽しみましょう！" color="red" />    
    </div>    
  );    
}    
    
export default App;    

このコードでは、color Propsを受け取り、見出しのテキスト色を変更しています。styleオブジェクトを使用してインラインCSSを適用し、props.colorが存在しない場合のデフォルト値として黒を指定しています。ブラウザで確認すると、太郎の挨拶は青、花子の挨拶は赤で表示されます。自分で異なる色や他のスタイル（例：フォントサイズ）を試し、Propsの可能性を探ってください。

次のステップに向けて

本記事では、Propsを使用してコンポーネントにデータを渡し、動的で再利用可能なUIを構築する方法を学びました。Propsは、コンポーネントの柔軟性とモジュール性を高める重要な仕組みです。第4回では、useStateフックを活用してコンポーネントの状態を管理し、ユーザー操作に応じたインタラクティブなUIを実装します。これにより、Reactアプリケーションの動的な振る舞いをさらに深く理解できます。