はじめに
アルゴリズムやデータ構造を練習できる教材は数多くありますが、
「リファクタリングを練習できる教材」はあまり見かけないのではないでしょうか？
実際、現場で求められるのは「汚いけど動くコードを、より読みやすく・変更に強くする力」です。
そこで今回、AIで自動生成される課題をリファクタリングできるWebアプリを試作してみました。
名前は Refactoring Dojo です。
サービスの概要
AIが「わざと汚いコード」を生成
ユーザーはそれをリファクタリングして「より良いコード」に書き直す
解答例もAIが提示するので、自分の改善と比較できる
現在は TypeScriptやPythonなど主要な13言語に対応しています。
必要であればすぐ追加できるのでご意見ください！
画面イメージ
AIのヒントをもらいながら汚いコードを修正していきます。
修正が完了して「コードを評価」してもらうと、リファクタリングの内容に応じて評価を受けることができます。
実際の課題例
問題コード（AI生成）
function calc(a: number, b: number, x: number): number {
let res = a + b;
if (x > 100) {
res = res * 1.2;
} else {
res = res * 1.1;
}
return res;
}
const a = 5;
const b = 10;
const x = 120;
const ans = calc(a, b, x);
console.log(ans);
リファクタリング後（AIが提示してきた解答）
function calculateTotalWithMultiplier(firstAddend: number, secondAddend: number, thresholdValue: number): number {
let totalSum = firstAddend + secondAddend;
if (thresholdValue > 100) {
totalSum = totalSum * 1.2;
} else {
totalSum = totalSum * 1.1;
}
return totalSum;
}
const firstAddend = 5;
const secondAddend = 10;
const thresholdValue = 120;
const finalTotal = calculateTotalWithMultiplier(firstAddend, secondAddend, thresholdValue);
console.log(finalTotal);
このように「動くけど分かりにくいコード」を題材に、改善を繰り返す練習ができます。
技術スタック
フロントエンド: Next.js / React
バックエンド: Next.js
LLM: Claude 3.5 Haiku
認証: NextAuth + Prisma
データベース: Neon(Postgres)
苦労したポイント
- LLMで生成するコードの品質：動くけどリファクタリング余地のあるものを出すのが難しい
- 採用するLLM：Claudeとかを使えば品質の高いものが出来上がるが、API料金が気になる
- SEO：英語圏・日本語圏どちらからも見つけてもらえるような工夫
今後の展望
- ユーザー数が伸びてきて、OpenRouterの無料LLMでは対応ができなくなってきたら有料プランを提供する
- スマートフォンでも使いやすいUI
まとめ
リファクタリングは「知識」よりも「繰り返し練習」で身につく部分が大きいと感じています。
もし興味があれば、ぜひ一度触ってみてください。