光に覆われし漆黒よ。夜を纏いし爆炎よ。
紅魔の名のもとに原初の崩壊を顕現す。
終焉の王国の地に、力の根源を隠匿せし者。
我の前に統べよ！
エクスプロージョン（rm -rf）！！

我が名はエンジニア！
クリーンアーキテクチャを極めし者、そしてレガシーコードの破壊を渇望する者！

皆さんは、「触ると爆発するプロジェクト」にアサインされたことはありますか？
私はあります。というか、つい先日までその魔境に幽閉されていました。

本記事は、肥大化しきったスパゲティコードと複雑怪奇な密結合に対して、部分的なリファクタリングを諦め、「すべてを消し飛ばしてクリーンな設計へ再構築する」という爆裂魔法を放った1人のエンジニアの記録です。

（※技術的な詳細よりも、ポエムとカタルシス成分が多めです。温かい目でお読みください。）

第1章：始まりは「絞り込み検索をつけるだけ」の簡単なクエスト

ある日、PMからこんな依頼が飛んできました。

PM「商品一覧画面に、カテゴリの絞り込み検索をつけてもらえる？」
私「承知しました（まあ既存のリストにフィルター処理を追加するだけだろう）」

軽い気持ちでプロジェクトを git clone し、該当の画面コンポーネントを探しました。
しかし、そこには目を疑うような光景が広がっていたのです。

// 3000行を超える伝説のファイル `ProductListAndOtherStuff.tsx`
const ProductList = () => {
  // なぜかここでユーザーのログイン状態やカート情報まで管理している
  const [userData, setUserData] = useState<any>(null);
  const [cart, setCart] = useState<any[]>([]);

  useEffect(() => {
    // 画面のスクロール量に応じて謎のアニメーションを発火させつつ、
    // グローバルなwindowオブジェクトに直接フラグを立てる
    window.hasScrolled_DO_NOT_TOUCH = true;
    
    // TODO: 誰かこの状態管理どうにかして。2021年の俺より。
    // FIXME: たまに無限ループしてブラウザがフリーズする
  }, [userData, cart]);

  // 以下、2000行にわたるネストの深いJSXと三項演算子の地獄...
}

……お前は何を言っているんだ？

たかが一覧を表示するだけなのに、なぜカートの状態まで抱え込んでいるのか。
引数とStateの any の暴力。単一責任の原則を粉砕する「神（God）コンポーネント」。
そして燦然と輝く // TODO: 誰かこの状態管理どうにかして の文字。

私はそっとエディタを閉じ、虚無を見つめました。

第2章：飛来するバグ

嫌な予感は的中しました。
このプロジェクトは、過去数年にわたり何人ものエンジニアが「その場しのぎの秘伝のタレ」を継ぎ足し続けた、アンチパターンの見本市だったのです。

UIとビジネスロジックが完全に一体化した密結合
神（God）クラスと化した3000行のファイル
ランタイムでしか気づけない undefined is not a function の呪い
変更すると全く関係ないヘッダーが崩れる謎の依存関係

絞り込み検索を追加するためにStateを1つ足そうものなら、副作用の連鎖によって別のコンポーネントが予期せぬ再レンダリングを起こし、画面が真っ白になりました。

それはまるで、次から次へと押し寄せるキャベツの群れ。
1つのバグを切り伏せても、また別の場所から新しいバグが飛来してくるのです。
私は、このままでは自分が壊れてしまうと悟りました。

第3章：詠唱開始

通常、こうしたレガシーコードには「少しずつテストを書きながら、安全にリファクタリングしていく」のが定石です。ボーイスカウト・ルールです。

しかし、この魔境においては、テストを書くためのモックすら作れないほど結合度が密（ミツ）でした。何より、私は責務の曖昧な密結合がこの世で最も嫌いなのです。

私は決断しました。
「この神コンポーネント、根元からすべて消し飛ばして、適切な単位に切り出して作り直した方が早い」 と。

周囲の「えっ、ゼロから書き直すの？リスク高くない？」という不安の声を背に受けながら、私は最強の魔法を唱える準備に入りました。

黒より黒く闇より暗きスパゲティコードに、我がリファクタの混淆を望みたもう。
覚醒のとき来たれり。無謬の境界に落ちし仕様。密結合の歪みとなりて現出せよ！
踊れ踊れ踊れ、我が力の奔流に望むは再構築なり。並ぶ者なき再構築なり。
万象等しく灰塵に帰し、深淵より来たれ！
これがエンジニア最大の威力の解決手段、これこそが究極の破壊コマンド！

第4章：エクスプロージョン！

複雑怪奇な状態管理、無駄な副作用、ネストの深すぎるJSX。
それらをすべて選択し、私はターミナルに破壊の呪文を打ち込みました。

# さようなら、すべての負債たち
$ git rm -rf src/components/GodList/
$ git commit -m "feat: 諸悪の根源を爆砕"

消し飛んだコード：約10,000行。

そこからは無我の境地です。
ビジネスロジックと状態管理はカスタムフックへとカプセル化。
UIは見た目だけを担当するプレゼンテーショナルコンポーネントへ分割。
Strict に設定された TypeScript による堅牢な型定義の付与。

複雑な条件分岐はシンプルに整理され、謎のグローバル変数は完全に排除されました。

// 爆焔のあとに残された、美しき世界
export const ProductList: React.FC = () => {
  // 複雑な状態管理と副作用はすべてフックの奥底へ封印
  const { products, isLoading, error } = useFilteredProducts();

  if (isLoading) return <LoadingSpinner />;
  if (error) return <ErrorMessage error={error} />;

  return (
    <div className="grid">
      {products.map(product => (
        <ProductCard key={product.id} data={product} />
      ))}
    </div>
  );
};

UIとロジックの完全な分離。
圧倒的な可読性とテストのしやすさ。これが原初の光です。

終章：爆焔のあとに

数日後。
無事にPull Requestがマージされ、本番環境へデプロイされました。
懸念されていたバグは嘘のように消え去り、絞り込み検索は軽快に動作していました。

PM「おお、完璧！動作もなんだか早くなったね！」
私「……（無言のサムズアップ）」

コードベースは劇的に軽量化され、後から入ってくるメンバーも安心して触れる、見通しの良いプロジェクトへと生まれ変わりました。

しかし、代償は小さくありませんでした。
魔力（体力と精神力）を限界まで使い果たした私は、その日の午後、「もう……今日は1行もコード書けない……」 とデスクに突っ伏し、動けなくなりました。

最後に

レガシーコードと戦うすべてのエンジニアに告ぎます。

時には、既存のコードを尊重し、少しずつ改善していく忍耐が必要です。
しかし、どうにもならない呪いに直面したときは、勇気を持って"破壊"を選択することも大切です。
すべてを灰燼に帰したあとにしか、作れない美しくクリーンな設計があるからです。

ただし、用法・用量を守らないと、プロジェクトごと吹き飛んで自分がクビになる可能性があるので、爆裂魔法の使用は計画的に。

それでは皆さん、良きエンジニアライフを！