関数コンポーネントとクラスコンポーネントの違いを解説！初心者でもわかるReactの基本構造
生徒
「Reactで『関数コンポーネント』と『クラスコンポーネント』って出てきたんですが、何が違うんですか？」
先生
「Reactでは、画面の部品であるコンポーネントを作る方法として、関数を使う方法とクラスを使う方法があります。」
生徒
「初心者にはどっちがおすすめなんですか？」
先生
「最近は関数コンポーネントが主流です。では、違いをわかりやすく解説していきましょう！」
1. 関数コンポーネントとクラスコンポーネントとは？
関数コンポーネントとクラスコンポーネントは、どちらもReactで使われる「画面の部品（UIパーツ）」を作る方法です。
どちらも「見た目」と「動き」を定義する役割を持っていますが、書き方と使い方に違いがあります。特に初心者の方にとっては、関数コンポーネントのほうがシンプルで分かりやすいでしょう。
Reactの開発初期ではクラスコンポーネントが使われていましたが、今では関数コンポーネントにuseStateやuseEffectといったフック（Hook）が導入されたため、より柔軟に使えるようになりました。
2. 関数コンポーネントの書き方
関数コンポーネントは、JavaScriptの関数として書きます。とてもシンプルで読みやすいのが特徴です。
import React from "react";
function Hello() {
return <h1>こんにちは！</h1>;
}
export default Hello;
このように、functionを使ってHTMLのようなコード（JSX）を返すだけで、Reactの部品として使えるのです。
3. クラスコンポーネントの書き方
クラスコンポーネントは、classという文法を使って作ります。少し長くて複雑に見えるかもしれませんが、やっていることは関数コンポーネントと同じです。
import React, { Component } from "react";
class Hello extends Component {
render() {
return <h1>こんにちは！</h1>;
}
}
export default Hello;
render()というメソッドの中で、JSXを返しています。Reactの古い書き方ではこのように書いていました。
4. 状態（state）の違いを見てみよう
Reactでは、「状態（state）」を使うことで、画面の中身を動的に変えることができます。関数コンポーネントではuseState、クラスコンポーネントではthis.stateを使います。
関数コンポーネントでの状態管理
import React, { useState } from "react";
function App() {
const [count, setCount] = useState(0);
return (
<div>
<p>クリック数: {count}</p>
<button onClick={() => setCount(count + 1)}>クリック</button>
</div>
);
}
export default App;
クラスコンポーネントでの状態管理
import React, { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return (
<div>
<p>クリック数: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
クリック
</button>
</div>
);
}
}
export default App;
クラスコンポーネントではthis.stateやthis.setState()などの書き方が必要になり、少し複雑に感じるかもしれません。
5. 今は関数コンポーネントが主流です
Reactでは昔からあるクラスコンポーネントもまだ使えますが、現在では関数コンポーネントが主に使われています。その理由は以下の通りです：
- コードが短く、読みやすい
useStateやuseEffectなどのフック（Hooks）が使える- 学習コストが低く、初心者でも扱いやすい
- 公式ドキュメントでも関数コンポーネントが中心
そのため、これからReactを学ぶ方は関数コンポーネントだけを覚えておけば十分です。
6. 違いを表にして比較してみよう
最後に、関数コンポーネントとクラスコンポーネントの違いを簡単な表でまとめてみましょう。
| 比較項目 | 関数コンポーネント | クラスコンポーネント |
|---|---|---|
| 書き方 | 関数（function） | クラス（class） |
| 状態（state）の管理 | useState |
this.state |
| イベント処理 | シンプルに記述可能 | thisの扱いが複雑 |
| おすすめ度 | 初心者向け・主流 | 古いコードで使用 |
このように、今のReact開発では関数コンポーネントが中心です。これからReactを始める人は、まず関数コンポーネントに慣れることから始めましょう。
まとめ
この記事では、Reactの関数コンポーネントとクラスコンポーネントの違いについて、基本的な書き方から状態管理まで解説しました。関数コンポーネントはシンプルで読みやすく、useStateやuseEffectといったフックを使うことで、状態管理や副作用の処理も簡単に行えます。一方、クラスコンポーネントはthis.stateやthis.setState()を使って状態を管理し、render()メソッド内でJSXを返す必要があります。
初心者にとっては、コード量が少なく、学習コストが低い関数コンポーネントを覚えることが最も効率的です。また、Propsを使ったデータ受け渡しやStateを使った動的な画面更新の仕組みを理解しておくと、より複雑なUIでもスムーズに開発できます。クラスコンポーネントは古いコードベースで見かけることがありますが、新規開発では関数コンポーネントを中心に使うのが現実的です。
状態管理の例では、関数コンポーネントでuseStateを使ったカウンターを作ることで、ユーザーの操作に応じた動的な表示が可能になることを確認しました。また、クラスコンポーネントでも同じ動きをthis.stateとthis.setState()を使って実装できます。これにより、コンポーネントの役割と状態管理の仕組みの違いが理解できます。
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>現在のカウント: {count}</p>
<button onClick={() => setCount(count + 1)}>カウントを増やす</button>
</div>
);
}
export default Counter;
生徒
「関数コンポーネントはシンプルで、StateやPropsの扱いもわかりやすいですね。」
先生
「その通りです。初心者がまず触るなら関数コンポーネントが最適です。フックを使うとState管理も簡単にできます。」
生徒
「クラスコンポーネントは昔の書き方ですが、State管理が複雑で少し難しいですね。」
先生
「そうですね。しかし古いコードや既存のプロジェクトではまだ使われていますので、仕組みだけ理解しておくと役立ちます。」
生徒
「PropsとStateを正しく使い分ければ、動的でインタラクティブな画面も作れるんですね。」
先生
「その通りです。関数コンポーネントの理解を中心に、PropsとStateの仕組みを押さえることで、Reactの開発がスムーズになります。」
この記事を読んだ人からの質問
