ReactJS - 新しく作成したコンポーネントの使用法

はじめに

こんにちは、未来のReact開発者さんたち！エキサイティングなReactコンポーネントの世界への旅にあなたを案内できることを嬉しく思います。コンピュータサイエンスを長年教えてきた経験から言えることは、コンポーネントの理解はレゴブロックで建てるのと同じです。一度慣れると、素晴らしいものが作れます！

Reactコンポーネントとは？

コンポーネントの使用法に踏み込む前に、まずコンポーネントとは何かを理解しましょう。コンポーネントは、ユーザーインターフェースの再利用可能なビルディングブロックと考えます。レゴブロックを作品の異なる部分で使用できるように、同じReactコンポーネントをアプリケーションのさまざまな部分で使用できます。

コンポーネントの種類

Reactには主に2つの種類のコンポーネントがあります：

1. 関数コンポーネント
2. クラスコンポーネント

このチュートリアルでは、関数コンポーネントに焦点を当てます。なぜなら、それらはよりシンプルでモダンだからです。

最初のコンポーネントを作成する

簡単なコンポーネントを作成しましょう。挨拶メッセージを表示する「Greeting」コンポーネントを作成します。

function Greeting() {
return <h1>Hello, React learner!</h1>;
}

これはシンプルに見えるかもしれませんが、多くのことが happeningしています：

• Greetingという関数を定義します
• この関数はJSX（HTMLに似た構文）を返します
• JSXは画面に表示されるものを表します

新しく作成したコンポーネントを使用する

「Greeting」コンポーネントができたので、アプリで使用してみましょう！

function App() {
return (
<div>
<Greeting />
<p>Welcome to our React tutorial!</p>
</div>
);
}

ここで起こっていることは以下の通りです：

• 「App」コンポーネント（アプリのメインコンポーネント）があります
• 「App」の内部で「Greeting」コンポーネントを使用しています
• コンポーネントはHTMLタグのように使用されます

このコードを実行すると、「Hello, React learner!」に続けて「Welcome to our React tutorial!」が表示されます。

プロップを持つコンポーネント

コンポーネントをプロップを使用して動的にすると、非常に強力になります。プロップはコンポーネントのパラメータのようなものです。

「Greeting」コンポーネントを名前を受け取るように修正してみましょう：

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

これで以下のように使用できます：

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

これが表示されます：

Hello, Alice!
Hello, Bob!

素晴らしいですね！異なる人に挨拶する再利用可能なコンポーネントを作成しました！

複数のプロップを持つコンポーネント

一歩進めて、より複雑なコンポーネントを作成しましょう。ユーザーの情報を表示する「UserCard」コンポーネントを作成します。

function UserCard(props) {
return (
<div className="user-card">
<h2>{props.name}</h2>
<p>Age: {props.age}</p>
<p>Occupation: {props.occupation}</p>
</div>
);
}

これを以下のように使用します：

function App() {
return (
<div>
<UserCard name="Alice" age={28} occupation="Developer" />
<UserCard name="Bob" age={35} occupation="Designer" />
</div>
);
}

コンポーネントのネスト

Reactの最も強力な機能の1つは、コンポーネントをネストできることです。複数の「UserCard」コンポーネントを使用する「UserList」コンポーネントを作成してみましょう：

function UserList() {
return (
<div>
<h1>User List</h1>
<UserCard name="Alice" age={28} occupation="Developer" />
<UserCard name="Bob" age={35} occupation="Designer" />
<UserCard name="Charlie" age={42} occupation="Manager" />
</div>
);
}

「App」コンポーネントは「UserList」を使用します：

function App() {
return (
<div>
<Greeting name="React Learner" />
<UserList />
</div>
);
}

コンポーネントメソッド

コンポーネントには独自のメソッドを持たせることができます。私たちの「UserCard」コンポーネントに生年を計算するメソッドを追加してみましょう：

function UserCard(props) {
const calculateBirthYear = () => {
const currentYear = new Date().getFullYear();
return currentYear - props.age;
};

return (
<div className="user-card">
<h2>{props.name}</h2>
<p>Age: {props.age}</p>
<p>Birth Year: {calculateBirthYear()}</p>
<p>Occupation: {props.occupation}</p>
</div>
);
}

終章

おめでとうございます！Reactコンポーネントの世界への第一歩を踏み出されました。私たちは、シンプルなコンポーネントの作成、プロップの使用、コンポーネントのネスト、そしてコンポーネントメソッドの追加までをカバーしました。

練習は完璧を生みます。自分でコンポーネントを作成し、異なるプロップを試してみてください。そして、何を建てられるかを確認してください。すぐに複雑なUIを簡単に構築できるようになります！

以下は、私たちが作成したコンポーネントの簡単な参照表です：

コンポーネント名	プロップ	説明
Greeting	name	挨拶メッセージを表示
UserCard	name, age, occupation	ユーザー情報を表示
UserList	なし	複数のUserCardコンポーネントを表示

コードを続け、学び続け、そして最も重要なのは、Reactを楽しむことです！

Credits: Image by storyset