書いたことのないコードを理解する
特定の関数を読み解いて、何をしているか把握する
⏱ 想定 ~5 分
01 · 読む
前のレッスンでは、コードベース全体の見取り図の取り方を学びました。今度はズームインします。特定の関数を読んで、それが何をするか理解するには？
これはエンジニアとして毎日使うスキルです。ファイルを開き、誰かが書いた関数を見て、何をしているか、どう動くか、バグはあるか、それを掴む必要があります。
いいニュース：コードは構造的で論理的に書かれています。何を見ればいいか分かれば、関数を読むのはレシピを読むのに近い感覚です。
02 · 読む
ここからは、出会ったどの関数にも使える体系的なやり方です。順番に進めれば、混乱する関数も少しずつ筋が通ってきます。
ポイントまとめ
- 関数名を読む —— 何をするか書いてあることが多いです
- パラメータを読む —— どんな入力を期待していますか？
- 戻り値を読む —— 何を出力しますか？
- 1 行ずつロジックを追う
- Claude に：「この関数を平易な言葉で説明して」
03 · コード例
次の関数を読んで、解説を見る前に何をしているか考えてみましょう。上の手順を使ってください：名前、パラメータ、戻り値、それからロジックを追う。
謎の関数
function processItems(items, threshold) {
const filtered = items.filter(item => item.price > threshold);
const sorted = filtered.sort((a, b) => b.price - a.price);
return sorted.slice(0, 5);
}
この関数はアイテムのリストと価格のしきい値を受け取り、しきい値より下を除外し、価格順（高い順）に並べ替えて上位 5 件を返します。 'filter' 、 'sort' 、 'slice' といった名前がヒントです。コメントがなくても、コード自体が何をしているかを語ってくれます —— 読み方を知っていれば。
04 · プロンプトテンプレート
関数で詰まったら、 Claude に自分の理解を確認してもらいましょう。プレースホルダを実際のファイルや解釈に置き換えてください。
{{filename}} の中の processItems 関数が何をしているか説明して。私の理解では {{your_understanding}} なんだけど、合ってる？05 · 空欄補充
関数を読むとき、もっとも多くを教えてくれる 3 つは、名前、 _____ 、そして戻り値です。
06 · クイズ
見慣れない関数を読むとき、 最初に 見るべきは？
- 関数の上のコメント
- 関数の最後の行
- 関数の中の変数
- 関数名とパラメータ
⚠ 全機能のインタラクティブ体験には JavaScript が必要です。JavaScript を有効にして再読み込みしてください。
※ このサイトは独立した教育プロジェクトで、Anthropic の公式製品ではありません。Claude™ は Anthropic, PBC の商標です。