Zenn
🤖

業務で実際にClineを使った感想

に公開
frontend
Cline
tech

Summary

Clineを用いてフロントエンドアプリのリファクタを行った。プランモードでのアイデア出しは完璧、Actモードでの実行は微妙だった。

Details

業務でSPAのフロントエンドアプリの開発に途中参加した。React + TS + ReduxのシンプルなSPAで(僕だったらReduxなくしてつくるが)、この構成は5年前の構成をまるパクリしたものだった。

チームメンバーにはTSやフロントエンドについて知見を持っているひとは少なく、その結果として以下の問題点があった。

  1. tscによる型チェックがない
  2. Linter, Formatterが入っていない
  3. Reactアンチパターン
    4. Props Plowing (親Propsがすべての依存コンポーネント・APIクライアントに引き継がれている)
    5. Class Component
    6. Unit Testゼロ
    7. デザインシステム無視のSass上書き

これら全てを直すのはかなり大変だなあと思っていたが、プロジェクトが大きくなる前に制約を入れようということで問題1と2から取り組むことにした。こういう簡単だが面倒なタスクはAIくんが得意だろうなということで、Cline + Sonnet3.7にやらせてみることにした。

良かった部分

  • TypeScript、Linter、Formatterの設定ファイルを書かせる (Plan + Act)
  • prebuildステップでチェックを入れる (Act)
  • ESLintエラー修正のScopeドキュメントをつくる (Plan)
提案されたScopeドキュメント、よくできている

ESLint Error Analysis & Fix Strategy

I've analyzed the ESLint configuration and errors in your codebase. There are 181 ESLint errors across the project, with the following breakdown:

🔍 Error Types by Frequency

1. Missing Type Definitions – 95 errors

  • Rule: @typescript-eslint/explicit-module-boundary-types
  • Issue: Missing return types or parameter types on functions

2. Default Exports – 34 errors

  • Rule: import/no-default-export
  • Issue: Using default exports instead of named exports

3. any Types – 21 errors

  • Rule: @typescript-eslint/no-explicit-any
  • Issue: Using the any type explicitly

4. Banned Types – 16 errors

  • Rule: @typescript-eslint/ban-types
  • Issue: Using banned types like Object, object, or Function

5. Console Usage – 13 errors

  • Rule: no-console
  • Issue: Using console.log (only warn, error, info are allowed)

6. Other Minor Issues – 12 errors

  • Rules: prefer-const, no-prototype-builtins, eqeqeq, etc.

🛠️ Fix Strategy

✅ Easy Fixes (Automated or Simple)

🟢 Default Exports → Named Exports (34 errors)

  • Change export default X to export const X
  • Update imports accordingly

🟢 Console Usage (13 errors)

  • Replace console.log with console.info
  • Or remove unnecessary console statements

🟢 Minor Issues (12 errors)

  • prefer-const: Change let to const where variables aren't reassigned
  • eqeqeq: Replace == with ===
  • prefer-template: Use template literals instead of string concatenation

🟡 Medium Difficulty Fixes

✏️ Missing Return Types (part of the 95 type errors)

  • Example:
    const func = () => {}  
// →  
const func = (): void => {}

✏️ Missing Parameter Types (part of the 95 type errors)

  • Example:
    (data) => {}  
// →  
(data: DataType) => {}

🔴 Difficult Fixes (Require ESLint Disable Comments)

⚠️ any Types (21 errors)

  • Requires understanding of actual types
  • May need complex type definitions
  • Use:
    // eslint-disable-next-line @typescript-eslint/no-explicit-any

⚠️ Banned Types (16 errors)

  • Replace with more specific types (e.g., unknown, custom interfaces)
  • May require significant refactoring
  • Use disable comments as needed

📅 Implementation Plan

  1. Start with easy fixes to reduce the error count quickly
  2. Address medium difficulty issues where types are clear
  3. For difficult fixes, use eslint-disable comments with TODO notes for future refactoring

よくなかった部分

Actモードで実際にエラーを直させるのは非常に渋かった。

  • escape hatchで後回しにすればいいようなところを、無駄に考察して直そうとする。
  • Reduxの古いAPIを使っているから型つけに困っているようなところを、新しいAPIに移そうとするのではなく力技で解決しようとする。

結局40ドル使って10個近くしか直っていなかったので自分でゴリゴリ直してしまった。

「時間がないから妥協して後回しにしましょう(チケット切りましょう)」というタイムバウンドな判断や、「別のベストプラクティスがあるんではないか？」という舵切りを変えるような判断をさせるのはまだ難しいのかなと感じた。

Discussion