Hello, World.

今日はReactの哲学、２回目です。部品思考はReactの特徴の1つであり、アプリケーションを小さな独立した部品（コンポーネント）に分割して構築する考え方です。このアプローチにより、開発が効率的になり、再利用性や保守性が向上します。部品思考はJavascriptのモダンフレームワークには欠かせないものとなっていて、ReactのほかにもVue、Svelteなどに採用されています。

1function Button({ onClick, label }) {
2  return <button onClick={onClick}>{label}</button>;
3}

これはボタンコンポーネントです。

1function Card({ title, description, actionLabel, onAction }) {
2  return (
3    <div className="card">
4      <h3>{title}</h3>
5      <p>{description}</p>
6      <Button onClick={onAction} label={actionLabel} />
7    </div>
8  );
9}

これがボタンコンポーネントを再利用して、カードコンポーネントを作っています。

部品思考の特徴として、

独立性
- 部品は他の部分から独立しており、それぞれが独自のロジックやUIを持つ。
- 変更が他の部分に影響を与えにくい。
再利用性
- 同じ部品を異なる場所で再利用できる。
- 例えば、ボタンや入力フォームなどを1つのコンポーネントとして作成すると、プロジェクト全体で使い回せる。
カプセル化
- 各部品は、必要なデータ（propsやstate）だけを受け取り、内部で処理を完結させる。
- 外部に影響を与えないため、他の部分に依存しない。
トップダウン構造
- 親部品から子部品へデータ（props）を渡す構造を採用。
- データフローが明確になる。

があります。部品を細かく切り分けることによって、再利用性や保守性が向上するということです。ただ、部品にできるものは部品になりますが、部品にならないものは部品にならないということに注意が必要です。つまり再利用性がなく、その場限りの用途のものや、細かく分割しすぎて逆に管理が難しくなるものは部品化すべきでないということです。いい部品として、ボタンコンポーネントがあります。

1function Button({ onClick, label, type }) {
2  return (
3    <button className={`btn btn-${type}`} onClick={onClick}>
4      {label}
5    </button>
6  );
7}

悪い部品として、コンポーネント化しすぎというものがあげられます

1function HeaderTitle() {
2  return <h1>サイトのタイトル</h1>;
3}
4
5function FooterCopyright() {
6  return <p>© 2024 Example</p>;
7}

再利用しないものは部品にするべきではないのです。

それでは、また。

Reactの哲学2 部品志向