先生と生徒の会話形式で理解しよう

生徒

「Reactのコンポーネントって、必ずStateを持っているんですか？」

先生

「いいえ。Stateを持たずに画面を表示するだけのコンポーネントもあります。それをPresentational Component（プレゼンテーショナルコンポーネント）と呼びます。」

生徒

「プレゼンテーショナルって…プレゼンみたいな言葉ですね。どういう意味なんですか？」

先生

「その通りで、表示に特化したコンポーネントという意味です。実際にコードを見ながら理解していきましょう！」

1. Presentational Componentとは？

Presentational Componentとは、名前の通り「見た目の表示」に特化したコンポーネントのことです。ボタンのデザインや文字の配置など、主にユーザーに見える部分を担当し、内部でState（状態）を持たないのが大きな特徴です。例えるなら、舞台で台本通りに演じる“役者”のような存在で、自分でストーリーを変えることはありません。

Reactでは、Presentational Componentは親コンポーネントから受け取るPropsを元に画面を描きます。データの管理は親側に任せ、子は「渡されたものをそのまま表現するだけ」というシンプルな役割です。この仕組みによって、コンポーネント同士の責務が明確になり、初心者でも理解しやすい構造になります。

以下は、より直感的に理解できる簡単なサンプルです。


import React from "react";

function Greeting(props) {
  return <h2>{props.message}</h2>;
}

function App() {
  return (
    <div>
      <Greeting message="こんにちは！Presentational Componentです。" />
    </div>
  );
}

export default App;

（画面に「こんにちは！Presentational Componentです。」と表示されます）

このように、Presentational Componentは「受け取った情報をどう見せるか」に集中します。データの処理や管理を行わないため、コードがすっきりし、テストや再利用も容易になります。初心者にとっても理解しやすく、Reactの基本構造を学ぶうえで非常に役立つ考え方です。

2. 実際のコード例

Presentational Componentを理解する近道は、実際のコードを見ることです。ここでは、親コンポーネントから渡されたメッセージをそのまま表示するだけのとてもシンプルな例を紹介します。自分でStateを持たないため、どのように「見た目だけを担当しているのか」が直感的に理解できます。

下の例では、Messageコンポーネントが表示専用の役割を持つPresentational Componentです。親コンポーネントはメッセージの内容だけを渡し、Messageはそれを画面に表示するだけ。とても単純ですが、この構造を理解することでReactのコンポーネント設計がぐっと楽になります。


import React from "react";

function Message(props) {
  return <h1>{props.text}</h1>;
}

function App() {
  return (
    <div>
      <Message text="こんにちは！これはPresentational Componentです。" />
      <Message text="同じコンポーネントを別のメッセージで再利用できます。" />
    </div>
  );
}

export default App;

（画面に2つのメッセージが表示され、「同じ部品を何度も使い回せる」ことが確認できます）

このようにPresentational Componentは、受け取った内容をどのように見せるかだけを担当します。データの管理や内部処理を持たないため、いつでも同じように表示される安心感があります。初心者でも理解しやすく、コンポーネントの役割分担を学ぶ最初のステップとして最適です。

3. Presentational Componentの特徴

Presentational Componentの特徴を知っておくと、Reactで画面を作るときに「ここは見た目だけ」「ここはデータ担当」と役割を切り分けやすくなります。とくに初心者のうちは、どのコンポーネントにStateを持たせるべきか迷いやすいので、まずはこのタイプのコンポーネントの性格をしっかり押さえておくと安心です。

Stateを持たない： Presentational Componentは自分の中でStateを管理しません。親コンポーネントから渡されたPropsだけを使って表示を行うため、「データがどこで変わっているのか」が分かりやすく、構造もシンプルになります。
見た目に特化： 役割はあくまで画面の見た目を作ることです。ボタン・見出し・カードなど、UIのレイアウトやデザインに集中するため、コンポーネント名や中身を見ただけで「ここは表示専用だ」と判断しやすくなります。
再利用しやすい： 入力フォームのラベルやボタン、カードのタイトルなど、どの画面でも同じような見た目で使いたいものはPresentational Componentにしておくと便利です。 Propsだけを変えて呼び出せるので、Reactアプリ全体で部品の使い回しがしやすくなります。
テストが簡単： 「特定のPropsを渡したら、この文章が表示される」といった確認だけでよいため、複雑な準備をしなくても動作をチェックできます。データ取得やイベント処理の影響を受けないので、UIの確認に集中できるのも利点です。

たとえば、見出しだけを表示するPresentational Componentは次のように書けます。どの画面から呼び出しても、渡したテキストがそのままタイトルとして表示されます。


function Title(props) {
  return <h1>{props.text}</h1>;
}

function App() {
  return (
    <div>
      <Title text="お知らせ" />
      <Title text="プロフィール" />
    </div>
  );
}

（同じTitleコンポーネントを使いながら、渡すテキストだけを変えて別々の見出しを表示できます）

このように、Presentational Componentは「見た目をどう表現するか」に特化したReactコンポーネントです。 Stateを持たずPropsだけで動くように設計しておくと、UIの再利用性が高まり、コードの見通しもぐっと良くなります。小さな表示専用コンポーネントを積み重ねていくイメージで、少しずつ取り入れてみてください。

4. Container Componentとの違い

ReactにはContainer Component（コンテナコンポーネント）という役割もあります。これはデータやStateを管理して、子のPresentational Componentに渡す役割を担います。

たとえば、親が冷蔵庫を管理して中身を用意し、子がそれをテーブルに並べて見せるイメージです。親が「コンテナ」、子が「プレゼンテーション」という関係ですね。

5. 初心者が理解しておくと便利なポイント

Presentational Componentを理解すると、コードを役割ごとに分ける設計が身につきます。

「見た目」を作るコンポーネント → Presentational Component
「データや動き」を管理するコンポーネント → Container Component

この分け方を意識するだけで、コードが整理されて読みやすくなり、バグも少なくなります。プログラミング初心者でも「役割分担」をイメージすると理解が進みます。

6. Presentational Componentでボタンやリストを表現してみよう

Presentational Componentは、単に文字を表示するだけでなく、ボタンやリストなどのUI部品にもよく使われます。「どのようなボタンを表示するか」「どんなテキストを並べるか」といった見た目の部分だけを担当させることで、コンポーネントの役割がすっきり整理され、画面設計がとても行いやすくなります。

たとえば、同じデザインのボタンを画面のあちこちで使いたい場合、ボタン専用のPresentational Componentを用意しておくと便利です。ボタンの色や文字サイズなどを一箇所で管理できるため、あとからデザインを変更したくなったときも迷いません。


import React from "react";

function PrimaryButton(props) {
  return <button>{props.label}</button>;
}

function App() {
  return (
    <div>
      <PrimaryButton label="送信する" />
      <PrimaryButton label="キャンセル" />
    </div>
  );
}

export default App;

（同じボタンコンポーネントを使い回しながら、ラベルだけ変えて表示できます）

このようにボタンやリストなどのUIをPresentational Componentとして切り出しておくと、「画面にどんな部品が並んでいるのか」がひと目で分かりやすくなります。小さなコンポーネントから始めて、少しずつ共通化を進めていくと、Reactのコンポーネント設計に自然と慣れていけます。

7. CSSやデザインと組み合わせたPresentational Component

Presentational Componentは、見た目を担当するコンポーネントなので、CSSとの相性がとても良いです。ボタンの色・文字の太さ・余白・影などのスタイルをまとめておくことで、「このコンポーネントを使えば、アプリ全体のデザインが統一される」という状態を作りやすくなります。

たとえば、クラス名をPropsとして渡すのではなく、コンポーネント内であらかじめ決めておくと、「このコンポーネントを使えばそれっぽい見た目になる」という安心感が生まれます。デザインを変更したくなったときも、そのコンポーネントだけを修正すればよいので管理が楽になります。


function CardTitle(props) {
  return <h2 className="card-title">{props.text}</h2>;
}

function App() {
  return (
    <div className="card">
      <CardTitle text="お知らせ" />
    </div>
  );
}

（CardTitleにスタイルを集約しておくと、同じ見た目の見出しを簡単に増やせます）

このように、見た目に関するルールをPresentational Componentの中に閉じ込めておくと、コードを読むときも「ここは見た目担当の部分なんだな」とすぐに分かります。デザインを変えるときはPresentational Component、データの処理を変えるときはContainer Component、と自然に作業の分担ができるようになる点も大きなメリットです。

8. どんなときにPresentational Componentを作ればよい？

「どこからPresentational Componentに分ければいいのか分からない」という声もよく聞きます。迷ったときは、まず「同じ見た目のパーツを2回以上書いていないか」を確認してみてください。同じようなHTMLやJSXをコピペしている箇所があれば、そこがPresentational Componentに切り出す候補になります。

もうひとつの目安は、「このコンポーネントは見た目以外の処理をどのくらい持っているか」です。ボタンのクリック時にデータを更新したり、APIから値を取得したりしているコンポーネントは、Container的な役割も兼ねています。その場合は「見た目の部分だけ」を別コンポーネントに分離すると、Presentational Componentとして独立させやすくなります。

最初から完璧に分けようとする必要はありません。まずは1画面の中で「よく似た見た目」を見つけたら、小さなPresentational Componentとして切り出してみる。これを少しずつ繰り返すだけでも、Reactアプリ全体の構造が整い、読みやすく保守しやすいコードへと近づいていきます。

まとめ

Presentational Componentは、Reactの中でも特に初心者が理解しやすい大切な概念であり、画面表示に特化した役割を持つコンポーネントです。今回の記事では、Stateを持たないシンプルなコンポーネントがどのように設計され、どのような場面で活用できるのかを具体的な例とともに学びました。とくに、Presentational Componentは親から渡されたPropsをもとに画面を描画するという明確な目的を持っているため、役割がはっきりしていて再利用しやすく、UIのパーツを細かく作る際に非常に便利です。データ管理を行わず、見た目の表現に集中するという特徴は、Reactのコンポーネント分割を理解する第一歩になります。

また、Presentational Componentの対になる存在としてContainer Componentの役割についても触れました。Container ComponentはデータやStateを管理し、Presentational Componentに渡す役割を担います。この２つを組み合わせて使うことで、「見た目」と「動き」を自然に分離した設計ができるようになり、コードの可読性が上がるだけでなく、大規模なアプリケーションでも管理しやすい構造を作ることができます。役割を分けて考える習慣を身につけると、コンポーネント構造に迷うことが減り、React全体の理解が深まります。

Presentational Componentは一見すると単純な構造に見えますが、UI開発では欠かせない重要な要素です。「見た目を作るだけ」というテーマに絞ることで、デザインの表現やレイアウトの調整に集中でき、データの変更に左右されず再利用できる部品を作れるようになります。たとえば、ボタン、カード、メッセージ表示、ラベル、アイコンなど、さまざまなUI部品はPresentational Componentとして設計することで、複数の画面で流用しやすくなります。

以下に、Presentational Componentとしてより実用性の高い応用サンプルを記載します。Propsを複数受け取り、柔軟にスタイルを変えられるコンポーネントを用意することで、UI設計力を伸ばすことができます。

応用サンプル：柔軟な表示を行うPresentational Component


import React from "react";

function InfoBox({ title, message, color }) {
  return (
    <div class="info-box" style={{ border: `2px solid ${color}`, padding: "12px" }}>
      <h2 style={{ color }}>{title}</h2>
      <p>{message}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <InfoBox 
        title="お知らせ"
        message="このメッセージはPresentational Componentによって表示されています。"
        color="blue"
      />
      <InfoBox 
        title="エラー"
        message="エラーが発生しました。入力内容を確認してください。"
        color="red"
      />
    </div>
  );
}

export default App;

このように、Propsを利用して色・タイトル・メッセージなどの表示内容を変えることで、１つのコンポーネントを複数の用途で使い回すことができます。データ管理やStateの操作は行わず、あくまで「表示」に集中しているため、シンプルで安定した構造になり、Reactのメリットを最大限に引き出す設計につながります。

Presentational Componentを理解することで、UIとロジックをきれいに分けたReactらしい開発スタイルを身につけることができます。これはアプリが大きくなるほど重要になる考え方であり、チーム開発でも役割が明確になり、保守性・再利用性・効率性が大きく向上します。初心者でも「見た目を作るコンポーネント」と「データを扱うコンポーネント」をしっかり区別すると、React全体の理解がよりスムーズになり、複雑な仕組みでも迷いにくくなります。

先生と生徒の振り返り会話

生徒：「Presentational Componentは表示に特化しているってことがよくわかりました！」

先生：「そうですね。Stateを持たない分、役割がはっきりしているので初心者にとって理解しやすい部分です。」

生徒：「Container Componentと組み合わせると、Reactの構造がきれいに整理されるというのも納得できました。」

先生：「役割を分けるだけでコードが読みやすくなり、バグも減ります。Reactらしい開発スタイルが身につきます。」

生徒：「Propsで表示内容を変えられるところも便利ですね。再利用性の高さが実感できました！」

先生：「その調子です。まずはシンプルな表示コンポーネントから作ってみて、徐々にUIのパーツを増やしていくと理解がどんどん深まりますよ。」