React 入門で知っておくべき注意点

React 入門で知っておくべき注意点まとめ

React はシンプルな UI ライブラリですが、「HTML・CSS・JavaScript とは少し違う考え方」が必要になります。
ここでは、React を初めて学ぶときに注意すべきポイントを体系的に解説します。

1. JSX は「HTML」ではない

React の構文は HTML に似ていますが、実際には JavaScript の構文（JSX）です。
そのため、以下のような違いがあります。

// HTMLではOKでもReactではNGな例
<div class="title">Hello</div>

// Reactでは class → className にする
<div className="title">Hello</div>

注意点：

• class → className
• for → htmlFor
• 属性値は {} で JavaScript を埋め込める
  例：<img src={imageUrl} />

JSX は「JavaScript の中で UI を構築する仕組み」なので、文法ミスがあるとコンパイル時にすぐエラーになります。

2. State（状態）を直接変更しない

React の基本は「状態が変われば UI が再描画される」という考え方。
ただし、State を直接書き換えると再レンダリングされません。

❌ 悪い例：

const [count, setCount] = useState(0);
count = count + 1; // 再描画されない

✅ 正しい例：

setCount(count + 1);

React は useState の setter 関数を通して状態変化を検知する仕組みです。
「直接代入しない」 は React で最も重要なルールの 1 つです。

3. コンポーネント名は大文字で始める

React はコンポーネントと HTML タグを区別するために、
大文字で始まる関数を「コンポーネント」として認識します。

function App() {
  return <div>Hello</div>;
}

もし小文字で定義すると、HTML のタグとして解釈されてしまいます。
（例：function app() → <app> として認識されてしまう）

4. 再レンダリングの仕組みを理解する

React は「仮想 DOM（Virtual DOM）」を使って効率的に描画します。
ただし、State や Props が更新されるたびに再レンダリングされるため、
不要なレンダリングが多いとパフォーマンスが落ちます。

改善のコツ：

• コンポーネントを小さく分ける
• React.memo でメモ化する
• 計算コストの高い処理は useMemo でキャッシュする

5. useEffect の依存配列に注意

useEffect は副作用（データ取得・DOM 操作など）を行うためのフックですが、
依存配列を間違えると無限ループの原因になります。

❌ 無限ループの例：

useEffect(() => {
  setCount(count + 1);
});

✅ 正しい使い方：

useEffect(() => {
  console.log("初回だけ実行");
}, []);

依存配列 [] を正しく指定することで、
「いつ実行するか」を明確にコントロールできます。

6. Props（親 → 子のデータ渡し）と State の違い

• Props：親から渡される「外部からのデータ」
• State：コンポーネント内で変化する「内部のデータ」

Props は読み取り専用（immutable）なので、子コンポーネントで変更してはいけません。

function Child({ title }) {
  // title = "変更" ← NG！
  return <h1>{title}</h1>;
}

7. コンポーネントを作りすぎない／分けすぎない

「小さく分ける」のは良いことですが、
1 つのページに 10 個以上の極小コンポーネントを作ると逆に管理が難しくなります。

目安としては：

• 1 つのコンポーネントが「1 つの明確な責任」を持つ
• 再利用できる部分だけ分離する（例：ボタン、フォームなど）

8. 環境設定は Create React App や Vite で簡単に

React の開発環境を手動で構築するのは初学者には難しいです。
以下のようなツールを使うと、すぐに始められます。

# 最新の推奨方法（Vite）
npm create vite@latest my-app -- --template react

cd my-app
npm install
npm run dev

Vite は高速で軽量、開発中のホットリロードも非常に快適です。

9. CSS の管理に注意（スコープの考え方）

React ではコンポーネントごとにスタイルを分けるのが一般的です。
ただし、CSS ファイルをグローバルに読み込むと他のコンポーネントに影響してしまうことも。

対策としては：

• CSS Modules（例：Button.module.css）
• styled-components
• Tailwind CSS（クラスベースの設計）

10. まずは「小さく作って動かす」

React 学習の最初の壁は「環境構築」と「データの流れ理解」です。
最初から大きなアプリを作るよりも、
✅ 「カウンター」
✅ 「ToDo リスト」
✅ 「フォーム入力＋表示」
など、小さい単位で理解を積み重ねるのが上達の近道です。

🔚 まとめ

React は最初こそ独特ですが、
「状態が変わる → UI が変わる」というシンプルな仕組みを理解すれば、
どんな Web アプリでも作れるようになります。