オブジェクトとコンポーネントって何が違うの？

最近、ReactやRailsで開発しているとよく「オブジェクト」と「コンポーネント」という言葉を耳にします。
なんとなく使ってるけど、「ぶっちゃけ何が違うの？」「同じようなもんじゃないの？」って思ったことないですか？

今回はこの2つの違いについて、解説していきます！

---

🧱 オブジェクトとは？ – 「モノ」をプログラムにする考え方

まずは「オブジェクト」から。

オブジェクトは、ざっくり言えば…

✅ 「実世界のモノ」をプログラムで表現したもの

例えば、犬という「モノ（実体）」をプログラムで書くとこうなります：

class Dog
  def initialize(name)
    @name = name
  end

  def bark
    puts "#{@name}がワン！"
  end
end

dog = Dog.new("ポチ")
dog.bark  # => ポチがワン！

この dog というのがオブジェクト。
名前という属性と、吠えるという動作をひとまとめにした「犬」という実体を表現してるんですね。

Rubyだけじゃなく、JavaやPython、C++などもこの「オブジェクト指向」をベースにした言語です。

---

🧩 コンポーネントとは？ – 「UIの部品」を作る考え方

次に「コンポーネント」。

ReactやNext.jsをやってると当たり前に出てくる単語ですが、
コンポーネントはざっくり言うと…

✅ UI（見た目＋ロジック）をひとつの“部品”としてまとめたもの

たとえば、React だとこんな感じ：

function Greeting({ name }) {
  return <p>こんにちは、{name}さん！</p>;
}

これは「挨拶を表示する」ためのUI部品（コンポーネント）。
再利用できるし、状態やイベントも扱えるし、まさに画面のパーツって感じですね。

---

🔍 オブジェクトとコンポーネント、何が違うの？

それでは本題！

比較項目	オブジェクト	コンポーネント
何を表現？	実世界の「モノ」	UIの「部品」
含むもの	データ（属性）＋ 処理（メソッド）	見た目（HTML/JSX）＋ 振る舞い（状態、イベント）
使われる場面	ロジック、モデル、バックエンド処理	画面の構成、フロントエンド、UI作成
主な文脈	オブジェクト指向（OOP）	コンポーネント指向（React/Vueなど）
例	User, Order, Animal	Header, Button, TodoItem

---

🧠 補足：「指向」ってなんだ？

ちなみに「オブジェクト指向」「コンポーネント指向」っていうけど、
これは「プログラミングの考え方（パラダイム）」のこと。

• オブジェクト指向：モノごとに処理やデータをまとめて考える
• コンポーネント指向：画面のパーツごとに機能をまとめて考える

両方とも「大きなものを小さく分けて、再利用・管理しやすくする」っていう意味では、似てる考え方なんです。

---

✅ まとめ：どっちも「まとめるための単位」だけど目的が違う！

• オブジェクト → データと処理のまとまり（裏方）
• コンポーネント → UIのまとまり（表）

両者の違いを理解することで、バックエンド・フロントエンドの役割やコード設計の考え方がよりクリアになります！

---