Wiki: ページの作成:「== 概要 == Propsは、Reactにおけるコンポーネント間のデータ通信メカニズムである。
親コンポーネントから子コンポーネントへ一方向にデータを渡すことができ、これを単方向データフローと呼ぶ。

Propsには、オブジェクト、配列、関数、文字列や数値等のプリミティブ値といった任意のTypeScript値を渡すことができる。
渡されたProp…」

2026-02-24T23:45:15Z

ページの作成:「== 概要 == Propsは、Reactにおけるコンポーネント間のデータ通信メカニズムである。 親コンポーネントから子コンポーネントへ一方向にデータを渡すことができ、これを 単方向データフロー と呼ぶ。 Propsには、オブジェクト、配列、関数、文字列や数値等のプリミティブ値といった任意のTypeScript値を渡すことができる。 渡されたProp…」

新規ページ

== 概要 ==
Propsは、Reactにおけるコンポーネント間のデータ通信メカニズムである。 
親コンポーネントから子コンポーネントへ一方向にデータを渡すことができ、これを 単方向データフロー と呼ぶ。 
 
Propsには、オブジェクト、配列、関数、文字列や数値等のプリミティブ値といった任意のTypeScript値を渡すことができる。 
渡されたPropsは読み取り専用 (イミュータブル) であり、子コンポーネントから直接変更することはできない。 
 
主な特徴は以下の通りである。 
* 親コンポーネントから子コンポーネントへ一方向にデータが流れる
* 任意のTypeScript / JavaScript値 (オブジェクト、配列、関数、プリミティブ) を渡せる
* Propsは読み取り専用であり、受け取ったコンポーネントが変更することはできない
* 分割代入やデフォルト値の指定により、簡潔に記述できる
* TypeScriptと組み合わせることで、型安全なコンポーネント設計が可能になる
 

== Propsの基本 ==
==== Propsの受け渡し ====
親コンポーネントは、JSXの属性としてPropsを子コンポーネントへ渡す。 
データは常に親から子へ一方向に流れる。(単方向データフロー) 
 
以下の例では、Profile コンポーネントが Avatar コンポーネントへ person と size を渡している。 
 
<syntaxhighlight lang="typescript">
export default function Profile() {
return (
<Avatar
person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
size={100}
/>
);
}
</syntaxhighlight>
 
オブジェクトは二重中括弧 <code>{{}}</code> で、数値は単一の中括弧 <code>{}</code> で渡す琴に注意する。 
 
==== Propsの受け取り ====
子コンポーネントは、関数の引数として <code>props</code> オブジェクトを受け取る。 
 
<syntaxhighlight lang="typescript">
interface AvatarProps {
person: { name: string; imageId: string };
size: number;
}
　
function Avatar(props: AvatarProps) {
let person = props.person;
let size = props.size;
// person と size を使用する処理
}
</syntaxhighlight>
 
この方法では、props.<プロパティ名> の形式でアクセスする必要がある。 
より簡潔に記述するためには、[[#分割代入によるPropsの受け取り次のセクションで説明する分割代入]]を使用する。 
 

== 分割代入によるPropsの受け取り ==
==== 分割代入の基本 ====
関数の引数で分割代入を使用すると、Propsを直接変数として受け取ることができる。 
 
<syntaxhighlight lang="typescript">
// AvatarProps型は上記で定義済み
function Avatar({ person, size }: AvatarProps) {
// personとsizeが直接利用可能
}
</syntaxhighlight>
 
props.person と記述する代わりに person と直接参照でき、ソースコードが簡潔になる。 
 
==== 残余プロパティ ====
スプレッド構文 <code>...rest</code> を使用すると、指定したProps以外の残りのPropsをまとめて受け取ることができる。 
 
<syntaxhighlight lang="typescript">
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant: string;
}

function Button({ variant, ...rest }: ButtonProps) {
return <button className={variant} {...rest} />;
}
</syntaxhighlight>
 
* variant
*: 取り出して使用するProp
*: 
* ...rest
*: variant以外の全てのPropsをオブジェクトとしてまとめたもの
*: {...rest} で子要素にそのまま展開して渡すことができる
 

== デフォルト値 ==
==== 分割代入によるデフォルト値 ====
分割代入の際に <code>=</code> を使用して、Propが渡されなかった場合のデフォルト値を指定できる。 
 
<syntaxhighlight lang="typescript">
interface AvatarProps {
person: { name: string; imageId: string };
size?: number;
}

function Avatar({ person, size = 100 }: AvatarProps) {
// sizeが指定されない場合、または undefined の場合、100がデフォルト値として使用される
}
</syntaxhighlight>
 
デフォルト値が適用される条件と適用されない条件を以下に示す。 
 
<center>
{| class="wikitable"
|+ デフォルト値の適用条件
! 渡される値 !! デフォルト値の適用
|-
| 指定なし (Propが存在しない) || 適用される
|-
| <code>undefined</code> || 適用される
|-
| <code>null</code> || 適用されない (nullのまま)
|-
| <code>0</code> || 適用されない (0のまま)
|-
| <code>false</code> || 適用されない (falseのまま)
|}
</center>
 

== children ==
==== childrenの基本 ====
JSXタグ内にネストされたコンテンツは、自動的に <code>children</code> Propとして子コンポーネントへ渡される。 
 
<syntaxhighlight lang="typescript">
interface CardProps {
children: React.ReactNode;
}

function Card({ children }: CardProps) {
return (
<div className="card">
{children}
</div>
);
}

export default function Profile() {
return (
<Card>
<Avatar />
</Card>
);
}
</syntaxhighlight>
 
Card コンポーネントは、タグ内にどのような要素が渡されるかを知らなくてもよい。 
{children} の位置にネストされたコンテンツが展開される。 
 
==== childrenの活用パターン ====
<code>children</code> を活用することにより、汎用的なラッパーコンポーネントを作成できる。 
 
* Cardコンポーネントの例
*: <syntaxhighlight lang="typescript">
interface CardProps {
children: React.ReactNode;
className?: string;
}

function Card({ children, className }: CardProps) {
return (
<div className={`card ${className}`}>
{children}
</div>
);
}
</syntaxhighlight>
*: 
* 複数のセクションを持つLayoutコンポーネントの例
*: この場合、sidebar と content のように、Propとして複数のJSX要素を渡す方法も有効である。
*: <syntaxhighlight lang="typescript">
interface LayoutProps {
sidebar: React.ReactNode;
content: React.ReactNode;
}

function Layout({ sidebar, content }: LayoutProps) {
return (
<div className="layout">
<aside>{sidebar}</aside>
<main>{content}</main>
</div>
);
}

<Layout
sidebar={<Navigation />}
content={<MainContent />}
/>
</syntaxhighlight>
*: 
* Modalコンポーネントの例
*: <code>isOpen</code> がfalseの場合は、何もレンダリングしない設計にすることで、表示制御を親コンポーネント側で行える。
*: <syntaxhighlight lang="typescript">
interface ModalProps {
isOpen: boolean;
title: string;
children: React.ReactNode;
onClose: () => void;
}

function Modal({ isOpen, title, children, onClose }: ModalProps) {
if (!isOpen) return null;
return (
<div className="modal-overlay">
<div className="modal">
<h2>{title}</h2>
{children}
<button onClick={onClose}>Close</button>
</div>
</div>
);
}
</syntaxhighlight>
 

== スプレッド構文によるPropsの展開 ==
スプレッド構文を使用すると、Propsをまとめて子コンポーネントへ渡すことができる。 
 
以下の2つの記述は同じ動作をする。 
 
<syntaxhighlight lang="typescript">
interface ProfileProps {
person: { name: string; imageId: string };
size: number;
isSepia: boolean;
thickBorder: boolean;
}

// 冗長な書き方
function Profile({ person, size, isSepia, thickBorder }: ProfileProps) {
return (
<Avatar
person={person}
size={size}
isSepia={isSepia}
thickBorder={thickBorder}
/>
);
}

// スプレッド構文 (簡潔な記述)
function Profile(props: ProfileProps) {
return <Avatar {...props} />;
}
</syntaxhighlight>
 
スプレッド構文は簡潔である一方、どのPropsが渡されるかが不明確になる場合がある。 
そのため、使用は最小限にとどめ、Propsを個別に列挙する方が可読性は高い。 
 
全てのコンポーネントでスプレッド構文を使用することは避けること。 
 

== Props型定義 (TypeScript) ==
==== interfaceによるProps型の定義 ====
TypeScriptでは、<code>interface</code> を使用してPropsの型を定義することができる。 
型定義により、コンパイル時に型の不一致を検出でき、IDEの補完機能も有効になる。 
 
<syntaxhighlight lang="typescript">
interface MyButtonProps {
title: string;
disabled: boolean;
}

function MyButton({ title, disabled }: MyButtonProps) {
return <button disabled={disabled}>{title}</button>;
}
</syntaxhighlight>
 
==== オプショナルPropsと必須Props ====
<code>?</code> を付加することでオプショナル (省略可能) なPropsを定義できる。 
<code>?</code> のないPropsは必須となり、渡されない場合はコンパイルエラーになる。 
 
<syntaxhighlight lang="typescript">
interface CardProps {
title: string; // 必須
description?: string; // オプショナル
onClick?: () => void; // オプショナルなコールバック
}
</syntaxhighlight>
 
==== childrenの型定義 ====
<code>children</code> Propの型には <code>React.ReactNode</code> を使用することが推奨される。 
 
<syntaxhighlight lang="typescript">
interface ModalRendererProps {
title: string;
children: React.ReactNode;
}
</syntaxhighlight>
 
<code>children</code> の型の選択肢を以下に示す。 
 
<center>
{| class="wikitable"
|+ childrenの型定義
|-
! 型 !! 説明
|-
| React.ReactNode(推奨) || 文字列、数値、JSX 要素、null、undefined、配列等全ての値に対応する。 最も汎用的であり、通常はこちらを使用する。
|-
| React.ReactElement || JSX要素のみを受け付ける、より限定的な型 文字列や数値を受け付けないため、必要な場合にのみ使用する。
|}
</center>
 
==== イベントハンドラの型 ====
Reactは各DOMイベントに対応する型を提供している。 
 
<syntaxhighlight lang="typescript">
interface InputFieldProps {
value: string;
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}
</syntaxhighlight>
 
代表的なイベントハンドラの型を以下に示す。 
 
<center>
{| class="wikitable"
|+ 代表的なイベントハンドラの型
! 型 !! 対応するイベント
|-
| <code>React.ChangeEvent<HTMLInputElement></code> || 入力フィールドの値変更
|-
| <code>React.MouseEvent<HTMLButtonElement></code> || ボタンのクリック
|-
| <code>React.FormEvent<HTMLFormElement></code> || フォームの送信
|-
| <code>React.KeyboardEvent<HTMLInputElement></code> || キーボード入力
|-
| <code>React.FocusEvent<HTMLInputElement></code> || フォーカスの変更
|}
</center>
 

== Propsの設計原則 ==
==== 単方向データフロー ====
Reactでは、データは親コンポーネントから子コンポーネントへ一方向に流れる。 
子コンポーネントが親の状態を直接変更することはできない。 
 
子から親へデータを伝える場合は、コールバック関数をPropsとして渡す方法を使用する。 
以下の例では、setFilterText 関数を onFilterTextChange Propとして渡すことで、子コンポーネントが親の状態を更新できる。 
 
<syntaxhighlight lang="typescript">
interface SearchBarProps {
filterText: string;
onFilterTextChange: (text: string) => void;
}

function Parent() {
const [filterText, setFilterText] = useState<string>('');
return (
<SearchBar
filterText={filterText}
onFilterTextChange={setFilterText}
/>
);
}

function SearchBar({ filterText, onFilterTextChange }: SearchBarProps) {
return (
<input
value={filterText}
onChange={(e) => onFilterTextChange(e.target.value)}
/>
);
}
</syntaxhighlight>
 
この設計パターンにより、状態の変更箇所が明確になり、データの流れを追いやすくなる。 
 
Propsの設計における主な原則を以下に示す。 
 
<center>
{| class="wikitable"
|+ Props 設計のベストプラクティス
|-
! 項目 !! 説明
|-
| データは親から子へ一方向に渡す || 子コンポーネントは受け取ったPropsを直接変更しない。
|-
| 子から親への通信はコールバック関数で行う || <code>onChange</code>、<code>onClose</code>、<code>onSubmit</code> 等の命名規則を使用する。
|-
| Propsは最小限にする || 不要なPropsを渡さないことで、コンポーネントの責務を明確にする。
|-
| TypeScriptで型を定義する || 型定義により、意図しない使用を防ぎ、ソースコードの可読性を高める。
|}
</center>
 

== 関連情報 ==
* [[Reactの基礎 - TSXの基本構文]]
* [[Reactの基礎 - JSXの基本構文]]
* [[Reactの基礎 - 条件レンダリング]]
* [[Reactの基礎 - リストレンダリング]]
* [[Reactの基礎 - コンポーネント]]
 

{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,電気回路,電子回路,基板,プリント基板,React,JavaScript,TypeScript,TSX,JSX,Props,children,ReactNode,コンポーネント,単方向データフロー,分割代入,フロントエンド
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:Rust]][[カテゴリ:Web]]

Reactの基礎 - PropsとChildren - 版の履歴