ReactJS - ネストされたコンポーネント：ビギナー向けガイド

こんにちは、未来のReact魔法使いさんたち！今日は、ReactJSのネストされたコンポーネントの世界に楽しく飛び込んでみましょう。プログラミングが初めてでも心配しないでください。私はあなたの親切なガイドとして、すべてをステップバイステップで説明します。このチュートリアルの終わりまでに、プロのようにコンポーネントをネストするスキルを身につけるでしょう！

ネストされたコンポーネントとは？

まず、ネストされたコンポーネントとは何かを理解しましょう。例えば、あなたが家（Reactアプリ）を建てているとします。壁、屋根、基盤はあなたの主要なコンポーネントです。しかし、家の中には部屋（ネストされたコンポーネント）があり、その中には家具（さらにネストされたコンポーネント）があります。この構造により、複雑なUIを管理しやすく作成できます。

ネストされたコンポーネントを使う理由

1. 再利用性：一度作成したコンポーネントを複数回利用できます。
2. メンテナンス性：小さくて焦点の当たったコンポーネントを更新し、管理しやすくなります。
3. 読みやすさ：コードがより整理され、理解しやすくなります。

では、実際のコードに手を付けてみましょう！

最初のネストされたコンポーネントを作成する

まずは簡単な例から始めましょう。例えば、ショッピングアプリを構築しています。Productコンポーネントを作成し、その中にPriceコンポーネントを含めます。

// Product.js
import React from 'react';
import Price from './Price';

function Product({ name, price }) {
return (
<div className="product">
<h2>{name}</h2>
<Price amount={price} />
</div>
);
}

export default Product;

// Price.js
import React from 'react';

function Price({ amount }) {
return <p className="price">${amount.toFixed(2)}</p>;
}

export default Price;

この例では、Productは親コンポーネントで、Priceはその中にネストされています。以下のように分解します：

1. ProductにPriceコンポーネントをインポートします。
2. Productコンポーネントはnameとpriceを受け取ります。
3. Productの中でPriceコンポーネントを使用し、priceプロパティをamountとして渡します。

次に、Productコンポーネントを使用するとき：

<Product name="Super Cool Gadget" price={19.99} />

以下のようにレンダリングされます：

<div class="product">
<h2>Super Cool Gadget</h2>
<p class="price">$19.99</p>
</div>

素晴らしいですね！再利用可能な価格表示を作成しました！

FormattedMoney コンポーネント

次に、通貨をフォーマットするためのより高度なネストされたコンポーネントを作成しましょう。これは異なる通貨で価格を表示するのに便利です。

// FormattedMoney.js
import React from 'react';

function FormattedMoney({ amount, currency = 'USD' }) {
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: currency,
});

return <span className="formatted-money">{formatter.format(amount)}</span>;
}

export default FormattedMoney;

// Product.js (更新版)
import React from 'react';
import FormattedMoney from './FormattedMoney';

function Product({ name, price, currency }) {
return (
<div className="product">
<h2>{name}</h2>
<FormattedMoney amount={price} currency={currency} />
</div>
);
}

export default Product;

FormattedMoneyコンポーネントでは以下のことが行われています：

1. Intl.NumberFormat APIを使用して数値を通貨としてフォーマットします。
2. デフォルトの通貨を'USD'に設定します。
3. フォーマットされた金額をspanタグで返します。

次に、Productコンポーネントを以下のように使用します：

<Product name="Amazing Widget" price={29.99} currency="EUR" />

以下のようにレンダリングされます：

<div class="product">
<h2>Amazing Widget</h2>
<span class="formatted-money">€29.99</span>
</div>

素晴らしいですね！異なる通貨で価格を表示する柔軟なコンポーネントを作成しました！

FormattedDate コンポーネント

次に、フォーマットされた日付を表示するためのネストされたコンポーネントを作成しましょう。これは製品のリリース日やセールの終了日を表示するのに便利です。

// FormattedDate.js
import React from 'react';

function FormattedDate({ date, format = 'long' }) {
const options = {
short: { month: 'short', day: 'numeric', year: 'numeric' },
long: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' },
};

const formatter = new Intl.DateTimeFormat('en-US', options[format]);

return <span className="formatted-date">{formatter.format(new Date(date))}</span>;
}

export default FormattedDate;

// Product.js (再び更新)
import React from 'react';
import FormattedMoney from './FormattedMoney';
import FormattedDate from './FormattedDate';

function Product({ name, price, currency, releaseDate }) {
return (
<div className="product">
<h2>{name}</h2>
<FormattedMoney amount={price} currency={currency} />
<p>Release Date: <FormattedDate date={releaseDate} /></p>
</div>
);
}

export default Product;

FormattedDateコンポーネントでは以下のことが行われています：

1. 'short'と'long'の2つのフォーマットオプションを作成します。
2. Intl.DateTimeFormatを使用して、選択したフォーマットに基づいて日付をフォーマットします。
3. インプットの日付文字列をDateオブジェクトに変換します。

次に、更新されたProductコンポーネントを以下のように使用します：

<Product
name="Futuristic Gizmo"
price={99.99}
currency="USD"
releaseDate="2023-12-25"
/>

以下のようにレンダリングされます：

<div class="product">
<h2>Futuristic Gizmo</h2>
<span class="formatted-money">$99.99</span>
<p>Release Date: <span class="formatted-date">Monday, December 25, 2023</span></p>
</div>

素晴らしいですね！異なる通貨で価格を表示する柔軟なコンポーネントを作成しました！

全てを纏める

次に、全てのネストされたコンポーネントを使用するProductListコンポーネントを作成しましょう：

// ProductList.js
import React from 'react';
import Product from './Product';

function ProductList({ products }) {
return (
<div className="product-list">
{products.map(product => (
<Product
key={product.id}
name={product.name}
price={product.price}
currency={product.currency}
releaseDate={product.releaseDate}
/>
))}
</div>
);
}

export default ProductList;

次に、ProductListを以下のように使用します：

const products = [
{ id: 1, name: "Super Gadget", price: 49.99, currency: "USD", releaseDate: "2023-06-15" },
{ id: 2, name: "Mega Widget", price: 39.99, currency: "EUR", releaseDate: "2023-07-01" },
{ id: 3, name: "Awesome Gizmo", price: 59.99, currency: "GBP", releaseDate: "2023-08-30" },
];

<ProductList products={products} />

これにより、価格と日付がフォーマットされた製品リストがレンダリングされます！

結論

おめでとうございます！Reactのネストされたコンポーネントについて学びました。通貨と日付をフォーマットする再利用可能なコンポーネントを作成し、製品コンポーネントにネストしました。これはただの始まりです。ネストされたコンポーネントの可能性は無限です！

練習は完璧を生みます。自分でネストされたコンポーネントを作成し、Reactアプリをよりモジュール化し、メンテナンスしやすくしてみてください。

未来のReactマスターたち、楽しくコーディングを続けましょう！?

コンポーネント	目的	プロパティ
FormattedMoney	フォーマットされた通貨を表示	amount, currency
FormattedDate	フォーマットされた日付を表示	date, format
Product	製品情報を表示	name, price, currency, releaseDate
ProductList	製品リストを表示	products (配列)

Credits: Image by storyset