تجاوز إلى المحتوى
العربية
المستوى 4: اقرأ مع Claude
الدرس 4 · +15 XP

من أين يأتي هذا، وأين يُستخدم؟

أعطاك الدرس 4.3 وحدة الفضول: الرمز. وهذا الدرس يعطيك الخطوة التي تصل الرموز ببعضها.

«من أين يأتي هذا؟» و*«أين يُستخدم هذا؟»* هما السؤال نفسه، مطروحًا في اتجاهين. كلاهما كان يستغرق من المطورين ذوي الخبرة ساعةً باستخدام grep. الآن يستغرقان جملة.

إن كان هناك فصل واحد في هذا المستوى يجب أن تستوعبه بعمق، فهو هذا.

اتجاها التتبّع

الكود شبكة. كل شيء تقريبًا في الـ codebase متصل بشيء آخر: function تستدعي function أخرى، ومتغيّر يُضبَط في مكان ويُقرَأ في آخر، وقيمة تتدفق من الـ database عبر الـ backend إلى الـ frontend ثم إلى الشاشة.

حين تريد أن تفهم أي جزء من تلك الشبكة، يكون لديك سؤالان طبيعيان:

  • من أين جاء هذا؟ — إلى الخلف، نحو المصدر.
  • أين يُستخدم هذا؟ — إلى الأمام، نحو العواقب.

كان كلا السؤالين صعبًا. الآن لم يَعُدا كذلك.

من أين يأتي هذا؟

تقرأ function فترى متغيّرًا اسمه apiKey يُستخدَم. من أين حصل على قيمته؟ لا داعي للتمرير. اسأل:

من أين يحصل المتغيّر apiKey في src/server/auth.ts على قيمته؟ تتبّعه إلى الوراء.
where does the apiKey variable in src/server/auth.ts get its value? Trace it back.

سيتتبّع Claude الأثر: ربما يُقرَأ من environment variable. ربما يُمرَّر إليه من function أمّ. ربما يُحمَّل من ملف إعدادات. الإجابة سلسلة — «يبدأ في .env، ويُحمَّل بواسطة loadConfig() في src/config.ts، ثم يُمرَّر إلى auth.ts كجزء من كائن Config».

تلك السلسلة نموذج ذهني حقيقي لكيفية تشبيك الكود. ما كنتَ لتقرأه خطيًا. Claude جمّعه لك.

أين يُستخدم هذا؟

الآن اقلبه. لقد فهمتَ function. السؤال التالي هو من يعتمد عليها؟ — لأن هذا ما يخبرك بما إذا كان تغييرها آمنًا.

ما الذي يستدعي handleLogin؟ اسرد الملفات وما تفعله بالـ return value.
what calls handleLogin? List the files and what they do with the return value.

ستحصل على إجابة مثل: «ثلاثة مستدعِين — معالِج إرسال نموذج صفحة تسجيل الدخول، وعامل تجديد الـ session، وtest في auth.test.ts». هذا كنز. أنت الآن تعرف:

  • ما الذي يتغيّر إن كسرتَ هذه الـ function.
  • ما إذا كان تغييرك بحاجة إلى الحفاظ على نوع الإرجاع نفسه.
  • ما إذا كان هناك test موجود سيمسكك متلبّسًا حين تخطئ.

هذا هو السؤال الذي يطرحه كبار المطورين قبل كل refactor. إنه السؤال الذي يفصل بين «سأنقل هذه الـ function هنا وهناك» و*«يا للهول، لقد كسرتُ الـ production للتوّ».*

ساعة grep التي تحوّلت إلى جملة

قبل agents مثل Claude، كان التتبّع وظيفة كاملة. كنتَ تفتح المشروع في محرّرك، وتُجري عمليات بحث نصّية، وتتبع الـ imports يدويًا، وتفتح أربعة ملفات في آنٍ واحد، وتحتفظ بـ stack ذهني من «وهذا يُستدعى من هنا، الذي يُستدعى من هنا…». إن كان الـ codebase غير مألوف، فقد تختفي ساعة كاملة في تتبّع واحد.

ما يدور حوله هذا الدرس حقًا: انخفضت تكلفة الفضول إلى ما يقارب الصفر. تتبّع كل شيء. تتبّع مرتين. تتبّع حتى حين لا تحتاج إلى ذلك. كان مكلفًا، فتخطّاه الناس. لا تفعل.

بضعة أشكال أخرى تستحق المعرفة

تتبّع البيانات إلى الخلف:

من أين تأتي قيمة `user.email` على هذه الصفحة فعليًا؟ تتبّعها إلى الوراء حتى الـ database.
where does the value of `user.email` on this page actually come from? Trace it back to the database.

تتبّع البيانات إلى الأمام:

حين يُرسل مستخدم نموذج التسجيل، ماذا يحدث؟ اشرح لي كل function تعمل، بالترتيب.
when a user submits the signup form, what happens? Walk me through every function that runs, in order.

تتبّع الـ imports:

ما الذي يستورد من src/lib/utils.ts؟ هل أي منها مهمّ؟
what imports from src/lib/utils.ts? Are any of them important?

العثور على الإعدادات:

أين تُضبَط سلسلة اتصال الـ database في هذا المشروع؟
where is the database connection string set in this project?

أسئلة مختلفة، شكل واحد: ابدأ عند نقطة واحدة، واتبع السلك.

النقطة التي تربك الناس

ستُغرى بسؤال Claude «هل هذه الـ function مستخدَمة في أي مكان؟» وبالوثوق بإجابة نعم/لا. لا تفعل. اطلب من Claude دائمًا أن يسرد المستدعِين — ملفًا ملفًا. لسببين:

  1. «نعم، إنها مستخدَمة» لا يخبرك بشيء تقريبًا. القائمة هي ما يُمكن التصرّف بناءً عليه.
  2. القائمة قابلة للفحص. تستطيع فتح أحد تلك الملفات في بضع ثوانٍ والتأكد من أن Claude عثر على مستدعٍ حقيقي — لا متخيَّل. (المزيد عن هذا في الدرس 4.7.)

التتبّع الذي لا يمكنك التحقق منه ليس تتبّعًا. إنه حكاية.

التتبّع، يدويًا

يرتكز هذا الدرس بأكمله على ادعاء واحد: ساعة من الـ grep تنطوي في جملة. فلنشغّل الـ grep إذن، لتشعر بطرفيه معًا.

في مشروع taskly، يعتمد كود تسجيل الدخول على مساعِد اسمه validate. تتبّعه — في كلا الاتجاهين دفعةً واحدة:

grep -rn "validate" src

اقرأ الأسطر الثلاثة التي تعود. أحدها هو التعريفexport function validate في src/utils.ts. هذا هو من أين يأتي. والآخران داخل src/auth.ts: الـ import، والموضع الذي يستدعيه فيه تسجيل الدخول فعليًا. هذا هو أين يُستخدم. command واحد، كلا الاتجاهين — السؤالان اللذان بُني عليهما هذا الدرس بالضبط.

حين تسأل Claude «من أين يأتي validate، وما الذي يستخدمه؟»، فهذا هو البحث الكامن تحته. الفرق هو المردود: Claude يقرأ كل مطابقة ويسلّمك جملة — «مُعرَّفة في utils.ts، ومُستدعاة مرة واحدة في فحص تسجيل الدخول» — بدلًا من أن يتركك تفكّ شيفرة أرقام الأسطر. قائمة تستطيع التصرّف بناءً عليها، لا جدار عليك قراءته.

ثم خذه إلى مشروع حقيقي: اختر متغيّرًا لا تتعرّف عليه واسأل من أين يأتي؛ اختر function واسأل ما الذي يستدعيها. سؤال واحد، ثم المتابعة. خريطة ذهنية في ثلاث دقائق، كانت تستغرق ساعةً من الصفر.

ما التالي

يساعد التتبّع حين يكون الكود يعمل لكنه غير مألوف. النصف الآخر من القراءة هو حين يكون الكود معطوبًا — حين يكون لديك جدارٌ من نصّ الخطأ الأحمر ولا فكرة عمّا يعنيه. هذا هو الدرس التالي.