【初心者向け】React 関数コンポーネントの引数と波括弧：基礎から応用まで
React 関数型コンポーネントにおける引数と波括弧：詳細解説
関数型コンポーネントの定義
関数型コンポーネントは、JavaScript 関数として定義されます。この関数は、props と呼ばれる引数オブジェクトを受け取り、JSX 要素を返します。
function Greeting(props) {
return <h1>こんにちは、{props.name} さん！</h1>;
}
この例では、Greeting という名前の関数型コンポーネントが定義されています。このコンポーネントは props オブジェクトを引数として受け取り、name というプロパティにアクセスして、その値を挨拶文に含めます。
引数と波括弧の使用
コンポーネントを使用する際には、波括弧を使用して引数を渡します。
<Greeting name="田中" />
この例では、Greeting コンポーネントに name プロパティを "田中" という値で渡しています。コンポーネント内では、props.name としてこの値にアクセスできます。
波括弧の重要性
波括弧は、引数を文字列ではなく式として評価させるために重要です。これにより、動的な値や計算結果をコンポーネントに渡すことができます。
function Square(props) {
return <div>{props.number * props.number}</div>;
}
<Square number={10} /> // 100 がレンダリングされる
この例では、Square コンポーネントに number プロパティを 10 という値で渡しています。波括弧を使用することで、props.number * props.number という式が評価され、100 という結果がレンダリングされます。
- 関数型コンポーネントは、デフォルト値を設定することができます。
- 複数の引数を受け取ることができます。
- 非同期処理を含む複雑なロジックを記述することができます。
- React Hooks を使用して、状態管理や副作用処理を行うことができます。
氏名を挨拶するコンポーネント
このコンポーネントは、引数として渡された氏名を元に挨拶文を生成します。
function Greeting(props) {
return <h1>こんにちは、{props.name} さん！</h1>;
}
使用方法:
<Greeting name="山田" /> // こんにちは、山田さん！ がレンダリングされる
<Greeting name="佐藤" /> // こんにちは、佐藤さん！ がレンダリングされる
偶奇判定コンポーネント
このコンポーネントは、引数として渡された数が偶数かどうかを判定し、結果に応じて異なるメッセージを表示します。
function EvenOrOdd(props) {
const isEven = props.number % 2 === 0;
return (
<div>
{isEven ? "偶数です" : "奇数です"} ({props.number})
</div>
);
}
<EvenOrOdd number={10} /> // 偶数です (10) がレンダリングされる
<EvenOrOdd number={5} /> // 奇数です (5) がレンダリングされる
ボタンコンポーネント（クリック時にアラートを表示）
このコンポーネントは、ボタンを表示し、クリックされたときにアラートを表示します。
function ClickButton(props) {
const handleClick = () => {
alert("ボタンがクリックされました！");
};
return <button onClick={handleClick}>ボタン</button>;
}
<ClickButton /> // ボタンが表示され、クリック時にアラートが表示される
リストコンポーネント（配列をレンダリング）
このコンポーネントは、引数として渡された配列の要素をそれぞれリスト項目としてレンダリングします。
function ItemList(props) {
return (
<ul>
{props.items.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
);
}
const items = ["りんご", "バナナ", "オレンジ"];
<ItemList items={items} /> // リストが表示され、「りんご」、「バナナ」、「オレンジ」がそれぞれ項目として表示される
コンポーネントにデフォルト値を設定することで、引数を省略することができます。
function Greeting(props) {
const name = props.name || "ゲスト";
return <h1>こんにちは、{name} さん！</h1>;
}
この例では、Greeting コンポーネントに name プロパティのデフォルト値として "ゲスト" が設定されています。引数が渡されない場合、このデフォルト値が使用されます。
長所:
- コードが簡潔になる
- 必須引数を忘れる可能性が低くなる
短所:
- 常に同じデフォルト値が使用される
- 状況によって異なる値を渡すことができない
解体代入
オブジェクトプロパティを個別に抽出する際に、解体代入を使用することができます。
function Greeting({ name }) {
return <h1>こんにちは、{name} さん！</h1>;
}
この例では、Greeting コンポーネントの props オブジェクトから name プロパティを直接抽出しています。
- コードが読みやすくなる
- 個々のプロパティに簡単にアクセスできる
- 冗長な構文になる可能性がある
- オブジェクトプロパティの名前を変更する必要がある場合、コードを変更する必要がある
React Context
コンポーネント間で共有データをやり取りする場合、React Context を使用することができます。
const MyContext = React.createContext({
name: "ゲスト",
});
function Greeting() {
const { name } = useContext(MyContext);
return <h1>こんにちは、{name} さん！</h1>;
}
この例では、MyContext というコンテキストを作成し、name プロパティに "ゲスト" というデフォルト値を設定しています。Greeting コンポーネントは useContext フックを使用して、このコンテキストから name プロパティにアクセスしています。
- コンポーネント階層を越えてデータを共有できる
- コードをよりモジュール化できる
- 複雑なロジックになる可能性がある
- 初心者にとって理解するのが難しい
カスタムフック
再利用可能なロジックをカプセル化するために、カスタムフックを作成することができます。
function useName() {
const [name, setName] = useState("ゲスト");
return { name, setName };
}
function Greeting() {
const { name } = useName();
return <h1>こんにちは、{name} さん！</h1>;
}
この例では、useName というカスタムフックを作成し、name という状態とそれを更新するための関数を提供しています。Greeting コンポーネントは useName フックを使用して、この状態と関数にアクセスしています。
- 再利用可能なロジックをカプセル化できる
- コードをより簡潔にする
- テストが複雑になる可能性がある
適切な方法は、具体的な状況によって異なります。
- シンプルなコンポーネントの場合は、デフォルト値または解体代入が適切です。
- コンポーネント間でデータを共有する必要がある場合は、React Context が適切です。
- 再利用可能なロジックをカプセル化したい場合は、カスタムフックが適切です。
reactjs
