Reactのデバックで表示の切り替えを行う

「デバッグの一環として、処理をいくつかの表示のバージョンで切り替えたい」

---

✅ 方法1：手動スイッチ（環境変数や定数で切り替え）

jsx

const DEBUG_MODE = 'v2'; // 'v1' | 'v2' | 'v3' //ここで処理コードを選択
function processData(input) {
  switch (DEBUG_MODE) {
    case 'v1':
      return input + ' processed by V1';
    case 'v2':
      return input.toUpperCase();
    case 'v3':
      return [...input].reverse().join('');
    default:
      return input;
  }
}

これは開発中に手動で切り替えたいときに便利です。

---

✅ 方法2：ReactのUIから切り替え（ボタンで実行ロジックを選べる）

表示コンポーネントを表示ボタンで切り替える

import React, { useState } from 'react';

function App() {
  const [view, setView] = useState('home');

  const renderView = () => {
    switch (view) { //ここで処理コンポーネントを選択
      case 'home':
        return <Home />;
      case 'about':
        return <About />;
      case 'settings':
        return <Settings />;
      default:
        return <NotFound />;
    }
  };

  return (
    <div>
      <nav>
        <button onClick={() => setView('home')}>Home</button>
        <button onClick={() => setView('about')}>About</button>
        <button onClick={() => setView('settings')}>Settings</button>
      </nav>
      {renderView()}
    </div>
  );
}
//表示したいコンポーネントを個別に記述
function Home() { return <h1>Home</h1>; }
function About() { return <h1>About</h1>; }
function Settings() { return <h1>Settings</h1>; }
function NotFound() { return <h1>Not Found</h1>; }

---

✅ 方法3：関数マッピング（コードの整理がしやすい）

jsx

const processors = {
  v1: (input) => input + ' processed v1',
  v2: (input) => input.toUpperCase(),
  v3: (input) => input.split('').reverse().join('')
};

const DEBUG_VERSION = 'v2'; //ここで処理コードを選択
const result = processors[DEBUG_VERSION]('sample');

---

🔍 補足

開発環境と本番環境で切り替えたい場合は process.env.NODE_ENV や
.env ファイルを使っても良いです。