ReactJS - コンポーネントのプロパティを使用して作成する

こんにちは、将来のReact開発者たち！今日は、Reactのコンポーネントとプロパティの世界に興味深い旅に出かけます。あなたの近所の親切なコンピュータ教師として、私はこの冒険をステップバイステップで案内します。お気に入りの飲み物を手に取り、リラックスして、一緒に潜りましょう！

Reactコンポーネントとプロパティとは？

コンポーネントを作成する前に、まずそれらとは何かを理解しましょう。Imagine you're building a house with Lego blocks. Each Lego piece is like a React component - a reusable building block for your web application. Now, what if you want to customize these Lego pieces? That's where properties (or props) come in. They're like special instructions you give to each Lego piece to make it unique.

プロパティを使用してコンポーネントを作成する方法

簡単な例から始めましょう。異なる人々にこんにちはを言う「Greeting」コンポーネントを作成します。

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

function App() {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
<Greeting name="Charlie" />
</div>
);
}

これを分解してみましょう：

1. Greeting関数を定義し、propsを引数として受け取ります。
2. 関数内部で、JSX（ReactがHTMLのようなコードをJavaScriptで書く方法）を返します。
3. {props.name}を使用して、nameプロパティの値を挿入します。
4. Appコンポーネント内で、異なるnameプロパティを持つ<Greeting />を3回使用します。

このコードを実行すると、異なる名前の3つの挨拶が表示されます。まるで友好的なロボットが紹介された人に挨拶するようなものです！

より多くのプロパティを追加する

さあ、挨拶をより興味深くするために、いくつかのプロパティを追加してみましょう：

function Greeting(props) {
return (
<div>
<h1>Hello, {props.name}!</h1>
<p>You are {props.age} years old and you love {props.hobby}.</p>
</div>
);
}

function App() {
return (
<div>
<Greeting name="Alice" age={25} hobby="painting" />
<Greeting name="Bob" age={30} hobby="playing guitar" />
</div>
);
}

ここでは、ageとhobbyプロパティを追加しました。ageプロパティにクルリーブラケット {} を使用していることに注意してください。これは、数字を渡しているためです。文字列の場合はクォーテーションを使用しますが、数字やJavaScriptの式の場合はクルリーブラケットを使用します。

オブジェクトをプロパティとして使用する

関連するデータをオブジェクトにまとめることが便利な場合があります。Greetingコンポーネントをオブジェクトプロパティを使用するようにリファクタリングしましょう：

function Greeting(props) {
return (
<div>
<h1>Hello, {props.person.name}!</h1>
<p>You are {props.person.age} years old and you love {props.person.hobby}.</p>
</div>
);
}

function App() {
const alice = { name: "Alice", age: 25, hobby: "painting" };
const bob = { name: "Bob", age: 30, hobby: "playing guitar" };

return (
<div>
<Greeting person={alice} />
<Greeting person={bob} />
</div>
);
}

このバージョンでは、各人に関する情報を含む単一のpersonオブジェクトをプロパティとして渡しています。これにより、多くの関連プロパティを持つ場合のコードがクリーンになります。

プロパティのデストラクチャリング

コンポーネントが成長すると、props.を頻繁にタイプすることが多くなります。コードをクリーンにするための便利なトリック「デストラクチャリング」を使用しましょう：

function Greeting({ person }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old and you love {hobby}.</p>
</div>
);
}

これは前の例と同じことを行っていますが、より簡潔です。私たちは「person」プロパティを受け取り、name、age、hobbyを抽出しています。

デフォルトプロパティ

誰かがコンポーネントにプロパティを渡すのを忘れた場合どうなるでしょう？デフォルト値を設定してエラーを回避することができます：

function Greeting({ person = { name: "Guest", age: "unknown", hobby: "mysteries" } }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old and you love {hobby}.</p>
</div>
);
}

今では、<Greeting />を使用してプロパティを渡さない場合、デフォルト値を使用します。

プロパティの型

アプリが成長するに伴い、正しい型のプロパティを受け取っているか確認するのは良い考えです。Reactには、このための機能「PropTypes」があります：

import PropTypes from 'prop-types';

function Greeting({ person }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old and you love {hobby}.</p>
</div>
);
}

Greeting.propTypes = {
person: PropTypes.shape({
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
hobby: PropTypes.string.isRequired
}).isRequired
};

これにより、間違ったデータ型を渡した場合に警告が表示されます。まるで友好的なアシスタントがあなたの作業を二重チェックするようなものです！

結論

おめでとうございます！Reactコンポーネントの基本を学びました。プロパティは、コンポーネントを動的で再利用可能にするための指示です。これを理解することで、Reactの道のりでさらに進むことができます。

以下は、私たちがカバーした方法の簡単な参照表です：

メソッド	説明
基本的なプロパティ	単なる値をコンポーネントに渡す
オブジェクトプロパティ	単一のオブジェクトに複数の値を渡す
デストラクチャリング	プロパティから値を抽出してコードをクリーンにする
デフォルトプロパティ	渡されないプロパティに対してフォールバック値を設定する
プロパティの型	渡されるプロパティの型を検証する

練習を続け、実験をし、作成を続けてください！Reactは強力なツールであり、あなたはReactマスターへの道を進んでいます。ハッピーコーディング！

Credits: Image by storyset