師匠：「動くコードは誰でも作れるが、“役割の形”がどこにもないからだよ」

前任不在、急な無茶ぶり。AIで爆速開発したけれど──

そのプロジェクトは、すでに継続が危ぶまれる状態だった。

要件は曖昧、スケジュールは逼迫。
仕様が決まらないまま、実装だけが進められる。

上司も余裕がなく、会話はいつも指示だけ。
そして追い詰められたように、前任のフロントエンド担当が、ある日突然いなくなった。

それでもプロジェクトは止まらない。

「君、React触れるよね？」

上司にそう言われて、若手の自分にすべてが降ってきた。

設計も方針も分からない。
ただ“早く作れ”という空気だけが漂っていた。

若手（心の声）：「……無理だろ、これ……」

唯一の救いは、「AI使っていい」という社内ルールだった。
自分に残された時間も、気力も、決して多くはなかった。

試しにChatGPTに打ち込んだ。

「ReactでTodoアプリ作って」

ほんの数秒でコードが返ってきた。
コピペして実行すると、ちゃんと動く。
フォームもボタンも、リストも整っている。

若手：「……これ、本当に使えるんじゃないか……？」

興奮気味に追加機能も投げ込んだ。
完了チェック、削除、残数カウント……
ChatGPTは言えば言うだけ応えてくれる。

誰も教えてくれない現場で、唯一“助けてくれる存在”のように思えた。

若手：「……もう、開発ってこういう時代なんじゃないか？」

けれど、ふとした瞬間に違和感が刺す。

似たような処理があちこちに散らばっていく。
コードを読むたび、「これ、どこで何してるんだっけ？」と手が止まる。

若手：「このまま機能や処理を積み重ねたら……」
「いつか“触るのが怖いコード”になってしまう……」

目の前にあるのは、“今は動くアプリ”。
でもその裏側に広がるコードは、
かつて自分がプロジェクトで経験した“破綻の兆し”と、どこか似ていた。

作成した画面

作成したコード

import { useState } from 'react';

function App() {
  const [text, setText] = useState('');
  const [todos, setTodos] = useState<string[]>([]);

  const handleAdd = () => {
    if (text.trim() === '') return;
    setTodos([...todos, text]);
    setText('');
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Todoアプリ</h1>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="やることを入力"
      />
      <button onClick={handleAdd}>追加</button>
      <ul>
        {todos.map((todo, idx) => (
          <li key={idx}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

機能が増えると、コードが長く複雑化して不安が募る

締切・優先度・並び替えなど、よくある仕様を追加し始めると、
useState や useEffect が画面中にどんどん増えていった。

最初はコピペで済んでいた処理も、だんだん違いが出てきて、
似たようなロジックがあちこちに散らばるようになった。

変更するたびに、「あれ、ここも直すんだっけ？」と不安になる。
気づけば、「どこで何をしてるのか」が自分でも把握しきれなくなっていた。

「今は動いてる。でも……もう全体が読めない」
「手を入れるたびに、自分の書いたコードが怖くなる」

機能追加した画面

作成したコード

import React, { useState, useEffect } from 'react';

type Todo = {
  text: string;
  done: boolean;
};

const TodoApp: React.FC = () => {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [newTodo, setNewTodo] = useState('');
  const [filter, setFilter] = useState<'all' | 'active' | 'completed'>('all');
  const [sorted, setSorted] = useState(false);
  const [filteredTodos, setFilteredTodos] = useState<Todo[]>([]);

  useEffect(() => {
    let result = [...todos];

    if (filter === 'active') {
      result = result.filter(todo => !todo.done);
    } else if (filter === 'completed') {
      result = result.filter(todo => todo.done);
    }

    if (sorted) {
      result.sort((a, b) => a.text.localeCompare(b.text));
    }

    setFilteredTodos(result);
  }, [todos, filter, sorted]);

  const addTodo = () => {
    if (newTodo.trim() === '') return;
    setTodos([...todos, { text: newTodo, done: false }]);
    setNewTodo('');
  };

  const toggleTodo = (index: number) => {
    const updated = [...todos];
    updated[index].done = !updated[index].done;
    setTodos(updated);
  };

  const deleteTodo = (index: number) => {
    const updated = [...todos];
    updated.splice(index, 1);
    setTodos(updated);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        value={newTodo}
        onChange={e => setNewTodo(e.target.value)}
        placeholder="Add new todo"
      />
      <button onClick={addTodo}>Add</button>
      <div>
        <button onClick={() => setFilter('all')}>All</button>
        <button onClick={() => setFilter('active')}>Active</button>
        <button onClick={() => setFilter('completed')}>Completed</button>
        <button onClick={() => setSorted(!sorted)}>
          {sorted ? 'Unsort' : 'Sort'}
        </button>
      </div>
      <ul>
        {filteredTodos.map((todo, index) => (
          <li key={index}>
            <input
              type="checkbox"
              checked={todo.done}
              onChange={() => toggleTodo(index)}
            />
            {todo.text}
            <button onClick={() => deleteTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoApp;

“どこから手をつけていいか分からないコード”にぶつかったとき、頼る人は一人だった

過去、別のプロジェクトで、
不具合だらけのコードに誰もが匙を投げかけていたとき――

一人の技術者が、黙々とコードを読み解き、整理し、
機能を壊さずにリファクタリングを進めていった。

60代、酒好きでちょっと豪快。
でも書くコードは静かで、整っていて、まるで無駄がなかった。

その姿に、技術だけじゃない「人としての芯」を感じた。
そして何より、崩れていたコードが美しく整っていくあの体験が忘れられなかった。

若手：「この人に、もっと近づきたい」

そう思って、弟子入りを願い出たのが、あのときだった。

再び師匠から教わる。キーワードは“WHATで説明しろ”

若手は迷いながらも、師匠に連絡を入れた。
すぐに「近くにいる」と返事があり、その日のうちに会うことになった。

カウンターの奥、酒を片手に師匠は待っていた。
ノートPCを開いて座ると、師匠が静かに言った。

師匠：「……そのコード、見せてごらん」

機能を追加したコードではなく、シンプルな機能に戻したコードを師匠に見せた。

画面を見つめながら、師匠はスクロールを止めずに言う。

「ひどいコードだなぁ。こりゃ」
「一見動いてるけど、誰も中身が追えなくなるやつだよ、これ」
「これじゃ、どこを直しても他に影響出そうで怖いだろ？」

若手は焦りながら、コードの内容を説明しようとするが──

師匠：「ソースコードで説明するな。“WHATで説明しろ”って言っただろう？」

一瞬、言葉に詰まった。

若手：「……WHATって、なんでしたっけ……？」

師匠：「“何をしたいのか”だよ。それが設計の出発点なんだよ。コードはその手段にすぎない」

言われてみれば、自分は機能の処理やUIの操作の話ばかりしていた。

画面に書いたコードが、何のためにあるのか。
どこで意味を持ち、どう伝わるべきか。
それを考えていなかった。

若手はコードを見つめながら、ぽつりとつぶやく。

若手：「……全部“処理の話”ばっかりしてた気がする……」

師匠はグラスを置き、ふと笑ってこう言った。

師匠：「ちなみに俺、Reactのことは全く知らないんだけど」
若手：「……えっ！？」

いや、使う言語知らなくて、設計ってできるの？

次回へ続く

次回の記事予告

ここまでお読みいただき、ありがとうございました。
本記事では、AIを使って開発を進める中で直面した「設計不在」の怖さと、それを乗り越えるために必要な“伝わる設計”の視点について紹介しました。

次回は、師匠から教わった設計の基本――「STS設計（入力・変換・出力）」というシンプルで強力な考え方を軸に、実際にReactアプリの構造を改善していくプロセスを紹介します。

もし、AIの出力をそのまま使ってコードが混乱してきた方、自分の設計に不安を感じている方には、きっと役立つ内容になるはずです。ぜひご期待ください！

また、今回紹介した内容をより実践的に学びたい方には、以下のUdemy講座もおすすめです。

Udemyコース（8,800円 → クーポンで割引中）

▶️ AI時代でも生き残れるエンジニアへ！AI×React×クリーンコードでシンプルな設計を武器にする実践入門（限定クーポン付き）

▶️ AIとC#で極める！クリーンコードの技法（限定クーポン付き）

C#でクリーンコードと設計力を身につける実践講座
ChatGPTの活用方法や、伝わるコードの考え方を解説

出版書籍『あきらめない者たち』

▶️ Amazonで見る

技術の基礎からやり直すために、なぜ一歩勇気を振り絞れたのかのノンフィクション作品です。