概要
https://www.m3tech.blog/entry/2025/10/09/100000
詳細内容
## 「生成AIでサクッと！」というわけには行かなかったCoffeeScript → TypeScriptへの置き換え
https://www.m3tech.blog/entry/2025/10/09/100000
M3 TechがCoffeeScriptとBackbone.jsで構築されたレガシーフロントエンドをTypeScriptとReactへ段階的に移行した経験を共有し、その過程で生成AIの限界と人間が読みやすいコードの重要性を強調する。
**Content Type**: 📖 Tutorial & Guide
**Scores**: Signal:4/5 | Depth:4/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:5/5
**Main Journal**: 89/100 | **Annex Potential**: 88/100 | **Overall**: 88/100
**Topics**: [[Legacy System Migration, CoffeeScript to TypeScript, Backbone.js to React, Generative AI in Refactoring, Code Readability]]
M3 Techのコンシューマーチームは、20年近い歴史を持つサービス「AskDoctors」の内部ツールフロントエンドを、旧式のCoffeeScript+Backbone.jsからTypeScript+Reactへと大規模に移行した経験を共有しています。このプロジェクトは、レガシーシステムの現代化における現実的な課題と、生成AIが持つ能力の限界、そして人間によるコード品質の重要性を浮き彫りにしました。
移行は段階的に進められました。まず、decaffeinateツールを用いてCoffeeScriptをES2015準拠のJavaScriptに変換しましたが、言語仕様の違い（`super`の位置、暗黙的リターン、class body内の式）から多くの警告が発生し、生成AIによる修正は限定的でした。特に、コンテキストが長くなるとAIの精度が落ち、人間がロジック全体を理解して丁寧に修正する必要がありました。
次に、Backbone.jsの依存解消とReactコンポーネントへの置き換えでは、既存のjQueryがReactコンポーネントをappendするという「ReactComponent in Backbone」方式を採用。このような非標準的な共存戦略では、生成AIはハルシネーションを多発させ、現実的な解決策を提示できませんでした。
TypeScriptへの移行では、aspida clientを用いてRailsバックエンドのAPIレスポンスから型定義を試みましたが、Rubyの型を持たない複雑なロジックにより、レスポンスのフィールドが状況に応じて変化。これもAIに頼ることが難しく、人間がコードを深く調査し、型定義を構築する必要がありました。
この経験から得られた重要な教訓は、「生成AIでサクッと」という期待はレガシーコードの複雑なリファクタリングでは通用しないという現実です。生成AIはコード生成は得意ですが、特に人間が読むのに苦労するような「秘伝のタレ」のようなスパゲッティコードの読解は苦手です。しかし、TypeScriptによる型付け、適切なコメント、責務の分解を意識した「人間にとって読みやすいコード」は、AIにとっても処理しやすく、結果としてAIコーディングの効率を格段に向上させることが判明しました。このプロジェクトは、レガシー刷新だけでなく、AI時代におけるコード品質とエンジニアの役割を再考させる価値ある事例と言えるでしょう。