【React】Reactのエラーを徹底解説！初心者がつまずきやすいポイントと対処法まとめ

Reactを使って開発を進める中で、さまざまなエラーに直面することがあります。特に初心者のうちは、エラーが発生しても原因がわからず、つまずいてしまうことも多いでしょう。本記事では、React開発でよくあるエラーの原因とその対処法をまとめて解説します。エラーを解決するスキルを身につけることで、より効率的な開発ができるようになるはずです。

・Reactのエラーとは？

Reactで発生するエラーは、大きく分けて以下の3種類があります。

① コンパイルエラー

コードの文法ミスや構文エラーなど、ビルド時に検知されるものです。コードエディタ上やターミナルに表示されます。

② 実行時エラー

コンパイルは通るものの、実際にアプリを動かしたときに発生するエラーです。ブラウザのコンソールなどに表示されます。

③ 警告 (Warning)

致命的ではないものの、将来的に問題につながる可能性のあるコードに対する警告です。Reactの仕様に沿っていないケースなどが該当します。

・よくあるReactエラーとその対処法

エラー①：ReactDOM.renderが動かない

ReactDOM.render(<App />, document.getElementById('root'));

エラー例：

ReactDOM.render is not a function

原因と解決： React 18以降、ReactDOM.render()は廃止され、新しいcreateRoot()が推奨されています。

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

エラー②：コンポーネント名の先頭が小文字

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

エラー例：

Warning: The tag <sampleComponent> is unrecognized in this browser.

原因と解決： Reactのコンポーネント名は必ず大文字で始める必要があります。

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

エラー③：stateの更新に直接代入している

const [count, setCount] = useState(0);

count = count + 1;  // ❌

エラー例：

Assignment to constant variable.

原因と解決： setCount()関数を使ってstateを更新する必要があります。

setCount(count + 1);  // ✅

エラー④：Keyの指定忘れ（リストレンダリング時）

{items.map((item) => <li>{item}</li>)}

エラー例：

Warning: Each child in a list should have a unique "key" prop.

原因と解決： リストをレンダリングする際は、必ずkeyを指定しましょう。

{items.map((item, index) => <li key={index}>{item}</li>)}

エラー⑤：コンポーネントがメモリリークを起こしている

useEffect(() => {
    fetchData();
}, []);

エラー例：

Warning: Can't perform a React state update on an unmounted component.

原因と解決： コンポーネントがアンマウントされた後にstateを更新しようとしているケースです。キャンセル処理を入れることで防げます。

useEffect(() => {
    let isMounted = true;
    fetchData().then(() => {
        if (isMounted) {
            // update state
        }
    });

    return () => {
        isMounted = false;
    };
}, []);

・エラーの調べ方と効率的なデバッグ手法

① エラーメッセージをよく読む

Reactのエラーメッセージは比較的わかりやすいものが多いです。まずはエラー全文を読むことが重要です。最初の1行だけでなく、その下の説明もきちんと確認しましょう。

② 公式ドキュメントを活用

Reactの公式ドキュメントには、「よくあるエラーとその対処法」がまとまっています。エラーに遭遇したときは、まず公式をチェックしましょう。

• React 公式エラーページ

③ 最小構成で再現する

エラーが出たときは、エラーが再現する最小のコードを作ると原因究明が早くなります。余分なコードが多いと、エラーの本質が見えづらくなります。

・Reactエラーを防ぐためのベストプラクティス

① TypeScriptの導入

型安全が確保できるため、単純な型ミスやプロパティ名の誤りを事前に防ぐことができます。

② ESLint & Prettierを活用

コードの品質チェックツールを導入することで、構文ミスやベストプラクティス違反を自動的に検知できます。

③ コンポーネント設計を丁寧に

肥大化したコンポーネントはバグの温床です。役割ごとに適切に分割し、読みやすい構造を意識しましょう。

④ useEffectの依存配列に注意

依存配列が適切でないと、不具合や予期しない再レンダリングにつながります。依存配列には必ず「副作用で必要な変数」だけを指定しましょう。

・まとめ

Reactでエラーに遭遇するのは避けられません。しかし、エラーの読み方を理解し、エラーの種類ごとの対処法を知っておけば、慌てずに対応できます。React公式ドキュメントやGitHubのIssueなども積極的に活用し、エラーへの対応力を磨きましょう。

よくあるReactエラーまとめ

エラーに強いReactエンジニアを目指し、一緒にスキルアップしていきましょう！