AIを用いた開発でReactプロジェクトをカオスにしないための準備

Hello world, Hello innovation. AIを用いた開発でReactプロジェクトを カオスにしないための準備 ～レバテックMeetUP～React開発の最前線～ ©️ 2026 Simplex Inc. 1

Hello world, Hello innovation. 自己紹介 名前 毛塚航太 経歴 2020年にシンプレクスに新卒入社。 FX領域でのフロント開発リードを複数経験したのち、教育業 界など他領域でもアプリ開発を経験。最近はAIエージェント 開発に尽力。 技術スタック React, Flutter, Jetpack Compose, Spring Boot, LangChain .. 趣味 ハワイ旅行、サッカー観戦 ©️ 2026 Simplex Inc. 2

Hello world, Hello innovation. 会社紹介 シンプレクス・ホールディングスを上場会社として、1997年創業のテックファームであるシンプレクス と、2021年創設のコンサルファームであるクロスピアが、グループ中核企業となって顧客企業のDX支 援に取り組んでいます。 ©️ 2026 Simplex Inc. 3

Hello world, Hello innovation. AIを用いた開発でReactプロジェクトを カオスにしないための準備 ©️ 2026 Simplex Inc. 4

Hello world, Hello innovation. AIを用いた開発 • コーディングエージェントを用いた開発によって、コードを生み出す速度は 上がった • 要件を伝えてプランを立てさせてorゴールを伝えて…とやっていけば、画面/API接続/ テストなど広い範囲をカバーして作ってくれる • 間違ったコードはモデルの進化とともに減ってきた • Reactの経験、知識がない人でもコーディングエージェントを使う前提で チャレンジしやすくなった • 特に小～中規模の開発では、フロントエンド・バックエンドを完全に分けず、少人数で フルスタックに進めるケースも ©️ 2026 Simplex Inc. 5

Hello world, Hello innovation. AIを用いた開発でReactプロジェクトを カオスにしないための準備 ©️ 2026 Simplex Inc. 6

Hello world, Hello innovation. とあるプロジェクトでの例 ©️ 2026 Simplex Inc. 7

Hello world, Hello innovation. 注文一覧画面を作っていた • ユーザストーリーの単位で分割した 注文一覧画面を実装 ©️ 2026 Simplex Inc. 8

Hello world, Hello innovation. 注文を一覧する • APIから取得して表示してくれてい る • ローディングも考慮されている ©️ 2026 Simplex Inc. 9

Hello world, Hello innovation. ©️ 2026 Simplex Inc. 10

Hello world, Hello innovation. 次々と機能を追加 ©️ 2026 Simplex Inc. 11

Hello world, Hello innovation. ©️ 2026 Simplex Inc. 12

Hello world, Hello innovation. ©️ 2026 Simplex Inc. 13

Hello world, Hello innovation. ©️ 2026 Simplex Inc. 14

Hello world, Hello innovation. AIで実装の速度は上がったが... ファイルが1000行を超えていた 状態管理も複雑化していた ©️ 2026 Simplex Inc. 15

Hello world, Hello innovation. その変更で影響がでないのかを判断できな くなった 新たに機能を追加する時や不具合改修時の 対応のスピードが徐々に失われていった ©️ 2026 Simplex Inc. 16

Hello world, Hello innovation. なんでこうなったのか ©️ 2026 Simplex Inc. 17

Hello world, Hello innovation. 差分の正しさに気を取られていた コーディングエージェントが実装した コードの正しさにフォーカスしていた 自分で実装している最中に考えていた、 全体像やコンポーネントの責務といった 観点が抜けていた 特に時間あたりのコード追加量が増え、 全体像はますます見えなくなっていた ©️ 2026 Simplex Inc. 18

Hello world, Hello innovation. 差分だけを見て受け入れ続けた結果 全体像/各コンポーネントの責務を説明 できなくなっていた ©️ 2026 Simplex Inc. 19

Hello world, Hello innovation. ©️ 2026 Simplex Inc. 20

Hello world, Hello innovation. さらに ©️ 2026 Simplex Inc. 21

Hello world, Hello innovation. 設計判断をAIに任せすぎていた SWRやTanStack Queryを用いず に自前でAPIレスポンスのキャッ シュを行うのか？ 自前でやるとして、状態管理は React.useStateで行う？ 自分で実装している最中に考えて 下していた設計判断はコーディン グエージェントの出力次第になっ ていた ©️ 2026 Simplex Inc. 22

Hello world, Hello innovation. なんでその選択/変更をしたのかといった 設計判断を説明できなくなっていた ©️ 2026 Simplex Inc. 23

Hello world, Hello innovation. ©️ 2026 Simplex Inc. 24

Hello world, Hello innovation. 調べてみると... ©️ 2026 Simplex Inc. 25

Hello world, Hello innovation. 意図負債/認知負債という負債 認知負債 全体像や仕組みの理解に宿る負債。 コードがどう動くか、どこを変えると何が壊れるか、設計の全体像がどうなっているかを、人間側が十 分に理解できていない状態。 意図負債 「なぜそうしたか」などが残っていない負債。 仕様、ADR、設計メモ、チケット、テスト、ドキュメント、業務ルールなど外部化された根拠とコード のつながりが切れていて、コードは読めても変更判断ができない状態。 Storey, arXiv:2603.22106v4 [cs.SE], 2026. https://arxiv.org/abs/2603.22106 ©️ 2026 Simplex Inc. 26

• https://arxiv.org/abs/2603.22106

Hello world, Hello innovation. つまり ©️ 2026 Simplex Inc. 27

Hello world, Hello innovation. オーナーシップをもっていなかった - Ownership is a general term used to describe whether one person has responsibility for a software component, or if there is no one clearly responsible developer. （「オーナーシップ」とは、あるソフトウェアコンポーネントに対して特定の担当者がいる か、あるいは明確に責任を負う開発者がいないかを表す総称。） Christian Bird et al., “Don’t Touch My Code! Examining the Effects of Ownership on Software Quality”, ESEC/FSE 2011. https://www.microsoft.com/en-us/research/publication/dont-touch-my-code-examining-the-effects-of-ownership-on-softwarequality/ 設計判断を説明できず、全体像を踏まえた理解をできていなかったため、 オーナーシップを持てていなかった ©️ 2026 Simplex Inc. 28

• https://www.microsoft.com/en-us/research/publication/dont-touch-my-code-examining-the-effects-of-ownership-on-software-quality/

Hello world, Hello innovation. オーナーシップの低さが品質リスクに繋がる - The statistics showed that Minor is positively related to both pre and post-release failures to a statistically significant degree. （統計分析の結果、Minor(※)はリリース前およびリリース後の不具合の両方で、統計的に有意 な程度で正の相関関係にあることが示された。） - We found that high levels of ownership, specifically operationalized as high values of Ownership and Major, and low values of Minor, are associated with less defects. （オーナーシップのレベルが高いことが、欠陥の減少と関連していることを発見した。） Christian Bird et al., “Don’t Touch My Code! Examining the Effects of Ownership on Software Quality”, ESEC/FSE 2011. https://www.microsoft.com/en-us/research/publication/dont-touch-my-code-examining-the-effects-of-ownership-on-softwarequality/ ※そのコンポーネントにオーナーシップを持っていないMinor Contributor ©️ 2026 Simplex Inc. 29

• https://www.microsoft.com/en-us/research/publication/dont-touch-my-code-examining-the-effects-of-ownership-on-software-quality/

Hello world, Hello innovation. オーナーシップの低さが品質リスクに繋がる オーナーシップのレベルと不具合の数に関係がある ここで述べられているのはジュニアかシニアかといったエンジニアのレベルではなくオー ナーシップのレベル イメージ ©️ 2026 Simplex Inc. 30

Hello world, Hello innovation. それを踏まえて ©️ 2026 Simplex Inc. 31

Hello world, Hello innovation. オーナーシップを取り戻すためにコードを整理した • コンポーネントにViewとロジックが入り乱れていたのを分割しながら全体 像を整え、ライブラリに寄せるべきものを寄せた • コンポーネントを切り出し • ロジックをカスタムフックに切り出し • 各所に散らばっていたHTMLタグを直接用いた実装を共通コンポーネントと して切り出した • 入力フォームなど • +α テストコードを整理した • 内部構造に依存したテストや担保したい観点が不明瞭なテストが量産されていたため、 どのテストで何を担保/確認したいかを踏まえて整理 ©️ 2026 Simplex Inc. 32

Hello world, Hello innovation. 後から整備するのはしんどい ©️ 2026 Simplex Inc. 33

Hello world, Hello innovation. 先に整備してそれに則ったコードを 書かせたい ©️ 2026 Simplex Inc. 34

Hello world, Hello innovation. AIを用いた開発でReactプロジェクトを カオスにしないための準備 ©️ 2026 Simplex Inc. 35

Hello world, Hello innovation. 設計判断をAIに任せすぎていた 再掲 SWRやTanStack Queryを用いず に自前でAPIレスポンスのキャッ シュを行うのか？ 自前でやるとして、状態管理は React.useStateで行う？ 自分で実装している最中に考えて 下していた設計判断はコーディン グエージェントの出力次第に なっていた ©️ 2026 Simplex Inc. 36

Hello world, Hello innovation. 差分の正しさに気を取られていた 再掲 コーディングエージェントが実装した コードの正しさにフォーカスしていた 自分で実装している最中に考えていた、 全体像やコンポーネントの責務といった 観点が抜けていた 特に時間あたりのコード追加量が増え、 全体像はますます見えなくなっていた ©️ 2026 Simplex Inc. 37

Hello world, Hello innovation. ベースコードでオーナーシップを持っておく • 機能開発を本格的に開始する前のベースコードで一定の判断をいれておく • 説明可能/把握している構造の中でコーディングエージェントがコードを書く状態にする 機能開発 ベースコード ©️ 2026 Simplex Inc. ガードレールとしてベースコードを整備する ことで、人間が把握している全体像の中で コーディングエージェントが具体の実装をし ている状態にする 38

Hello world, Hello innovation. 具体的に ©️ 2026 Simplex Inc. 39

Hello world, Hello innovation. アーキテクチャ(レイヤー / 責務分離) • コーディングエージェントは特に明確 な指示をしない限り、ViewとLogicを一 つのファイルで実装してしまいやすい • 設計判断は見えにくい状態で実装を 太らせやすい • 下記を曖昧なまま進めると全体像、構 造を見失いやすい • どこを境界線として責務を分けるのか • 分け方はどうするのか • 純粋関数 / カスタムフック... • 分けた時にどこに何をおくのか ©️ 2026 Simplex Inc. 40

Hello world, Hello innovation. UIコンポーネント(共通コンポーネント) • よく使うパーツはあらかじめ用意しそれを使わせるようにしないと各所でHTMLタ グを用いた実装が散乱しやすい • 特に業務知識が絡んでくるものは、あらかじめ構造の設計及び配置場所を考えてお いた方が良い • 例：入力フォーム ©️ 2026 Simplex Inc. 41

Hello world, Hello innovation. 自動テスト(テスト戦略) • どのテストで何を担保しておきたいかを決めずにコーディング エージェントにテストを書かせるとただテストコードが存在し ているだけになりやすい • 特に内部構造に依存したテストや担保したい観点が不明瞭なテストが生 まれ始めると、オーナーシップを取り戻すためのリファクタリングもし にくくなる • どのテストで何を担保したいかが、レイヤー/責務の分離にも関 わってくる • 細かい単位でテストしようとするほどレイヤー/責務は細かく分割される • 分割される粒度によってディレクトリ構成も変えたくなるかもしれない ©️ 2026 Simplex Inc. 42

Hello world, Hello innovation. ベースコードで表現する • コーディングエージェント用のド キュメントを用意するだけでなく、 画面～API通信までの簡単なパター ンをサンプルコードとして書くアプ ローチが有効 • それを書く際に下した設計判断をド キュメントとして残しておくことで、 コーディングエージェントも人もアー キテクチャの構造を把握しやすく、全 体像がぶれにくい ©️ 2026 Simplex Inc. 43

Hello world, Hello innovation. 既存コードでオーナーシップを持つ • すでに機能実装がされているプロジェクトでオーナーシップを失っていると 感じる場合は、一度立ち止まった方が良い • まずは一つの機能をもとに整備してしまえば、同じ構造にさせるのはコーディングエー ジェントに任せやすくなる • すでに機能実装がされているプロジェクトでオーナーシップを持ち続けてい る場合 • 工夫している点があればぜひ共有してほしいです！ ©️ 2026 Simplex Inc. 44

Hello world, Hello innovation. 今回ピックアップしたもの • アーキテクチャ • レイヤー / 責務分離 • UIコンポーネント • 共通コンポーネント • 自動テスト • テスト戦略 ©️ 2026 Simplex Inc. 45

Hello world, Hello innovation. ©️ 2026 Simplex Inc. 46

Hello world, Hello innovation. まとめ ✓ コーディングエージェントに開発させていると、短時間で多くのコードが 生まれるので設計判断や全体像がわからなくなりやすい ✓ オーナーシップを失うと品質リスクにもつながる ✓ オーナーシップを持ち続けることが大事で、ベースコードでガードレール を用意しておく ✓ すでにオーナーシップを失っているのであれば一度立ち止まって取り戻す ©️ 2026 Simplex Inc. 47

Hello world, Hello innovation. 最後に ©️ 2026 Simplex Inc. 48

Hello world, Hello innovation. 宣伝 • Simplex Tech Gathering vol.5 明日開催 • AI時代のシン・育成論 • AIを用いた開発における準備だけでなく、 AI時代にどう成長していくかのヒントになるかもし れません！ • Simplex Tech Gathering vol.6 来月開催 • Tech Day後夜祭 • 今までシンプレクスの技術文化を育んできた社内イベン トが初の外部公開！AI×運用のSREがテーマです！！ ©️ 2026 Simplex Inc. 49

Hello world, Hello innovation. 明日の内容をチラ見せ - AI時代のシン・育成論 ©️ 2026 Simplex Inc. 50

Hello world, Hello innovation. 宣伝 connpass上で毎月イベント開催してます！！ ©️ 2026 Simplex Inc. 51

Hello world, Hello innovation. ありがとうございました ©️ 2026 Simplex Inc. 52