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

今回やること

既存projectの全ファイルを読むのではなく、調べたい動作の入口から必要な処理だけを追います。

入口を決め、呼び出しとデータの変化を記録し、目的を説明できたら読み終えます。

入口になる手がかり

調べる目的に合わせ、検索しやすい文字列を1つ選びます。

例：削除ボタンを追う

Todo画面の「削除」ボタンを押した時の処理を調べます。

まず文字列と関連しそうな名前を検索します。

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

見つかったcomponentで、click時に呼ばれる関数を確認します。

「削除」ボタン
  -> onClick
  -> deleteTodo(id)
  -> DELETE /api/todos/:id
  -> server route
  -> repository.delete(id)

入口から追う3手順

1. 「削除時、誰がどのTodoを削除できるか確認する」のように目的を1文にする
2. button、route、NetworkのAPI pathなど、利用者の操作に近い入口を選ぶ
3. 関数が次に何を呼ぶかを追う

component -> action -> API client -> route -> service -> repository

testや古い実装ではなく、実際にimportされる経路か確認します。

データ方向も追う

同じ呼び出しでも、値が途中で変わります。

idがどこで作られ、検証され、使われるかを矢印へ書き足します。呼び出しとデータを分けると、値の取り違えを発見しやすくなります。

読みながら小さな地図を作る

ファイル名と役割を1行ずつ記録します。

TodoItem.tsx       buttonとidを渡す
todos-client.ts    DELETE requestを作る
api/todos/[id].ts  認証者とpathを受け取る
todo-service.ts    所有者か確認する
todo-repository.ts idとownerIdで削除する

読み終わる条件

次の質問へ答えられたら、いったん読むのを止めます。

• 利用者の操作はどこから始まるか
• 主要な呼び出し順は何か
• 重要な値はどこで変わるか
• 認証・検証・保存はどこか
• 変更後にどの経路を確認するか

成功を確認する

作った地図と実際の動作を照合します。

1. BrowserのNetworkでmethodとURLを見る
2. 必要なら対象関数へ一時的なdebuggerを置く
3. 正常時と権限がない時を操作する
4. 地図の矢印どおり値が渡るか確認する

よくあるつまずき

全ファイルを上から読む

目的に関係しない情報で疲れます。観測できる入口から始めます。

検索結果を全部読む

利用中の経路か確認し、test、古い実装、未使用fileを分けます。

関数名だけ追う

重要な値と条件分岐も地図へ書きます。

読み終わりを決めない

目的に必要な5つの質問へ答えたら実装や検証へ移ります。

練習

「ログイン後に元のpageへ戻る処理」を追う入口を考えてください。

確認基準は次のとおりです。

• returnTo、redirect、callback URLを検索語にする
• route guardからlogin URL生成、callback、redirect helperまで追う
• 元URLが作られ、保存され、検証され、使われる場所を書く
• 外部URLへredirectできないか確認する

まとめ

• 調べる目的を1文にする
• 画面、URL、errorなど観測できる入口を選ぶ
• 呼び出し方向とデータ方向を分けて追う
• 分岐、副作用、権限の境界を見る
• 目的を説明できたら読み終える

次のステップ

実行せずに役割を予測する練習はコードを実行せずに読む方法へ進みましょう。

参考リソース

• GitHub: Navigating code
• エラーを読んで検索する方法
• 単一責任の原則

×

PR

×

PR