Reactで画面を動かしながらStateの値を確認する方法

React デバッグ

Reactで画面を動かしながらStateの値を確認する方法

Reactの開発ではデバッグ時にStateの値を確認したい場面が多々あります。
コンポーネントのStateの値を確認しながら画面を動かすには、いくつかの方法があります。
代表的な方法として以下の3つが挙げられます：

1. 開発者ツールを使用する
2. React Developer Toolsを使用する
3. Stateの値を画面上に表示する

1. 開発者ツールを使用する

ブラウザの開発者ツール（F12キー）を使って、コンポーネントのStateの値を確認できます。
特にコンソールタブを利用すると便利です。
Reactを開発モードで起動した場合は、コマンドプロンプトやターミナルからも確認することが可能です。

console.log(this.state);  // クラスコンポーネントの場合
console.log(state);  // フックを使用した関数コンポーネントの場合

2. React Developer Toolsを使用する

React専用の開発者ツール「React Developer Tools」を使うと、Reactコンポーネントのツリー構造を視覚的に確認でき、各コンポーネントのStateやPropsの値も容易に確認できます。

  • ChromeウェブストアやFirefoxアドオンからReact Developer Toolsをインストールします。
  • インストール後、開発者ツールを開くと「Components」タブが追加され、そこでReactコンポーネントの状態を確認できます。

3. Stateの値を画面上に表示する

Stateの値をそのままUIに表示することで、動的に値を確認することができます。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>増加</button>
    </div>
  );
};

export default MyComponent;

このように、Stateの値を直接画面上に表示することで、ユーザーがボタンをクリックするたびにカウントの値が更新されていく様子を視覚的に確認できます。

どの方法も併用することで、より効果的に開発とデバッグを進めることができます。