Reactのコンポーネント分割で失敗しない！初心者でもわかる再利用とバグ対策
生徒
「Reactって、部品みたいに分けて作れるって聞いたんですが、本当ですか？」
先生
「はい。Reactでは画面を小さな部品に分けるコンポーネント分割が基本です。」
生徒
「でも、分けたらエラーが出たり、動かなくなったりしそうで不安です…」
先生
「大丈夫です。よくあるバグと原因を知っておけば、防ぐことができますよ。」
1. Reactのコンポーネント分割とは？
Reactのコンポーネント分割とは、画面を小さな部品に分けて作る考え方です。 たとえば、料理でいうと「ご飯」「おかず」「お皿」を別々に用意して、最後に並べるイメージです。 ひとつのファイルに全部を書くよりも、役割ごとに分けたほうが見やすく、修正もしやすくなります。 Reactでは、この部品のことをコンポーネントと呼びます。 コンポーネントを再利用できる点が、Reactの大きな特徴です。
2. コンポーネント分割で起きやすいバグ① propsの渡し忘れ
コンポーネント分割で最も多いミスが、propsの渡し忘れです。 propsとは、親コンポーネントから子コンポーネントへ情報を渡す仕組みです。 例えるなら、メモ用紙に「この値を使ってね」と書いて渡すようなものです。 これを忘れると、画面に何も表示されなかったり、エラーが出たりします。
function Message(props) {
return <p>{props.text}</p>;
}
function App() {
return <Message text="こんにちは" />;
}
export default App;
3. コンポーネント分割で起きやすいバグ② stateの場所が間違っている
stateは、画面の状態を保存する箱のようなものです。 コンポーネントを分割すると、このstateをどこに置くかで混乱しやすくなります。 ボタンと表示が別コンポーネントなのに、stateを子側に置くと、 親から操作できずバグの原因になります。 基本は、複数の部品で使うstateは共通の親に置くと覚えておきましょう。
import { useState } from "react";
function Counter({ count, onAdd }) {
return <button onClick={onAdd}>{count}</button>;
}
function App() {
const [count, setCount] = useState(0);
return <Counter count={count} onAdd={() => setCount(count + 1)} />;
}
export default App;
4. コンポーネント分割で起きやすいバグ③ exportとimportのミス
コンポーネントを別ファイルにすると、exportとimportが必要になります。 これは「この部品を外から使えるようにする」「この部品を持ってくる」という意味です。 名前を間違えたり、書き忘れたりすると、画面が真っ白になることもあります。 ファイル名とコンポーネント名をそろえると、ミスが減ります。
function Header() {
return <h1>ヘッダー</h1>;
}
export default Header;
5. コンポーネントが細かすぎて逆にわかりにくい問題
分割しすぎも、実はよくある失敗です。 ボタン一個、文字一行ごとに分けると、ファイルが増えすぎて管理が大変になります。 目安としては「意味のあるかたまり」で分けることです。 人が見て理解しやすい単位を意識すると、バグも減ります。
6. 再利用できないコンポーネントになってしまう原因
コンポーネント分割の目的は再利用です。 しかし、中に決め打ちの文字や処理を書きすぎると、他で使えなくなります。 propsを使って外から内容を変えられるようにすると、 同じコンポーネントを何度も使えるようになります。
function Button({ label }) {
return <button>{label}</button>;
}
export default Button;
7. コンポーネント分割時のデバッグの考え方
バグが出たときは、どのコンポーネントで問題が起きているかを切り分けます。 まずは画面に表示されているか、次にpropsが正しく渡っているかを確認します。 小さく分けているからこそ、原因を見つけやすいのがReactの強みです。 焦らず、一つずつ確認することが大切です。
