大きなコードを全部読まない：入口から処理を追うコードリーディング | 実践講座

既存プロジェクトを開くと、ファイル数の多さに圧倒されます。しかし、すべてを理解してから修正する必要はありません。

目的の処理へつながる入口を決め、必要な範囲だけを深く読みます。

入口になる手がかり

画面に「削除」という文字があるなら、まずリポジトリ内を検索します。

rg -n "削除|deleteTodo|DELETE" src

見つかったコンポーネントから、クリック時に呼ばれる関数を確認します。

表示文字
  -> クリック処理
  -> API呼び出し
  -> サーバーのルート
  -> 保存処理

一つ先へ進むたびに、ファイル名と役割をメモします。

コードを読む時は、二種類の流れが混ざります。

関数の呼び出しは追えても、IDが途中で文字列から数値へ変換されていることを見落とす場合があります。引数と戻り値も一緒に確認します。

TodoRow.tsx
  onDelete(id: string)
    -> deleteTodo(id)

api/todos.ts
  DELETE /api/todos/:id
    -> todoRepository.remove(Number(id))

この地図は正確な設計図ではなく、今回の変更に必要な作業メモです。目的が変われば作り直して構いません。

次を説明できれば、修正に必要な読み取りは一度止められます。

全体理解を目指すと終わりがありません。今回の目的に必要な理解へ範囲を絞ります。