react-js-next-js-component-prop

コンポーネント・Props って、どんな機能があるのかな？

今回は、React.js で UIを再利用可能な小さな部品に分けて作る仕組み の コンポーネント やProps を使ったデータの受け渡し について解説します。

React.js の環境構築がまだの場合は、下記より環境構築を行なってください。

コンポーネントとは？
1. コンポーネントの作成イメージ（階層図）
2. なぜコンポーネントを使うの？（メリット）
コンポーネントと Props の基本的な使い方（コード例）
1. コンポーネントの作成
2. Props とは？（コンポーネントに値を渡す）
まとめ
公式サイト

コンポーネントとは？

コンポーネント（Component）とは、UIを再利用可能な小さな部品に分けて作る仕組みのことです。
React.js では、Webページのヘッダーやボタン、リストなどのUIをそれぞれ 独立した部品（Component）として作成する ことができます。

コンポーネントの作成イメージ（階層図）

例えば、App コンポーネントの中に Header や Main などのコンポーネントを配置し、さらにその中に Card や Button などの 小さなコンポーネントを組み合わせて画面を作成 します。

App
 ├ Header
 ├ Sidebar
 ├ Main
 │   ├ Card
 │   │   ├ Button
 │   │   └ List
 │   └ Card
 │       ├ Button
 │       └ List
 └ Footer

なぜコンポーネントを使うの？（メリット）

コンポーネント を利用すると、次のような メリット があります。

1. 再利用できる（再利用性: Reusability）

ヘッダー や ボタン、カード など、一度作成したコンポーネントは何度も使うことができる ため、
同じコードを何度も書く必要がなくなり、コード量を減らす ことができます。

2. コードを整理できる（可読性: Readability）

UIを小さな部品（コンポーネント）に分割する ことで、コードを整理することができます。
その結果、コードの構造が分かりやすくなり、可読性も向上 します。

3. 保守がしやすい（保守性: Maintainability）

例えばボタンのデザインを変更したい場合、Buttonコンポーネントだけ修正すれば、
そのコンポーネントを使用しているすべてのページに変更が反映されます。
そのため、バグの修正やデザインの変更も簡単に行う ことができ、保守性が高まります。

コンポーネントと Props の基本的な使い方（コード例）

それでは、ここから実際に コンポーネント と Props の 基本的な使い方 について見ていきましょう

コンポーネントの作成

React.js では、作成したコンポーネントを <コンポーネント名 /> のようにタグ形式で呼び出すことで、画面に表示することができます。

// コンポーネント側
// Hello.jsx
export default function Hello() {
  return <h1>Hello React</h1>;
}

// 利用側
// App.jsx
import Hello from "./Hello";

function App() {
  return (
    <div>
      {/* <コンポーネント名 /> の形式で呼び出す */}
      <Hello />
    </div>
  );
}

Props とは？（コンポーネントに値を渡す）

React.js では、Props を使って コンポーネントにデータを渡す ことができます。
Props を利用することで、同じコンポーネントでも渡す値によって表示内容を変えることができます。

Props の基本的な使い方

// コンポーネント側
// Hello.jsx
export default function Hello(props) {
  return <h1>Hello {props.name}</h1>;
}

// 利用側
// App.jsx
import Hello from "./Hello";

function App() {
  return (
    <>
      {/* name がコンポーネントに渡され、「Hello Taro」と表示される */}
      <Hello name="Taro" />
      {/* name がコンポーネントに渡され、「Hello Jiro」と表示される */}
      <Hello name="Jiro" />
    </>
  );
}

Props の分割代入

Props でコンポーネントに渡された値は、JavaScript の 分割代入 を使って受け取ることもできます。分割代入 を使うと、props.name のように書く必要がなくなり、コードがよりシンプルになります。

// Hello.jsx
// Props を { name } と受け取り、{name} と表示することができようになる
export default function Hello({ name }) {
  return <h1>Hello {name}</h1>;
}

// App.jsx
import Hello from "./Hello";

function App() {
  return (
    <>
      <Hello name="Taro" />
      <Hello name="Jiro" />
    </>
  );
}

複数の Props の分割代入

複数の Props を渡す場合 も、同じように 分割代入 を使って受け取ることができます。

// Hello.jsx
// Props を { name, age } と受け取り、{name} と {age} を表示できるようになる
export default function Hello({ name, age }) {
  return <h1>Hello {name}({age}歳)</h1>;
}

// App.jsx
import Hello from "./Hello";

function App() {
  return (
    <>
      <Hello name="Taro" age={30} />
      <Hello name="Jiro" age={25} />
    </>
  );
}

子要素（children）

Props を使って、子要素（children）を渡して受け取ることができます。
渡された 子要素（children）は、コンポーネント内で自由に表示することが可能です。

// Hello.jsx
// Props を { name, age, children } と受け取り、name・age・children を表示する
export default function Hello({ name, age, children }) {
  return (
    <div>
      <h1>Hello {name} ({age}歳)</h1>
      {/* 子要素(children) に渡された内容をそのまま表示 */}
      <div>{children}</div>
    </div>
  );
}

// App.jsx
import Hello from "./Hello";

function App() {
  return (
    <>
      {/* Helloにname, ageを渡し、さらに子要素(children)を渡す */}
      <Hello name="Taro" age={30}>
        <p>続柄: 兄</p>
        <p>コメント: 5歳上の長男です</p>
      </Hello>
      <Hello name="Jiro" age={25}>
        <p>続柄: 弟</p>
        <p>コメント: 5歳下の次男です</p>
      </Hello>
    </>
  );
}

まとめ

今回は、コンポーネント と Props について解説してきましたが、いかがでしたでしょうか？

React.js の コンポーネント は、UIを再利用可能な小さな部品に分けて作る仕組み で、コンポーネント を分割して作ることで、コードが整理 しやすくなり、可読性や保守性も向上 します。
また Props を使うことで、コンポーネントにデータを渡す ことができ、さらに JavaScript の 分割代入 を使うことで、コードをよりシンプルに書くことができます。