من فكرة إلى أداة: كيف قمت ببناء "مدقق الأكواد" الخاص بي بـ JavaScript (القصة الكاملة)

كم مرة كنت تكتب كوداً، وضغطت "تشغيل"، لتجد أن كل شيء ينهار بسبب خطأ بسيط؟ بالنسبة لي، كانت هذه لحظة إحباط متكررة. كنت أقضي وقتاً طويلاً في البحث عن قوس } مفقود أو نسيان سمة alt في صورة، وهي أخطاء كان يجب اكتشافها بسهولة.

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

الخطوة 1: تحديد المشكلة (ما الذي أريد حله؟)

المشكلة ليست "الكود لا يعمل"، بل هي أخطاء محددة تتكرر. قررت أن أبدأ بثلاث مشاكل رئيسية كانت تضيع وقتي:

1. الأقواس غير المتطابقة (Unmatched Brackets): نسيان إغلاق } أو ) في JavaScript أو CSS.
2. أخطاء SEO بسيطة (Accessibility): نسيان سمة alt في وسوم <img>.
3. أخطاء منطقية شائعة (Equality Operator): استخدام == (المقارنة بدون نوع) بدلاً من === (المقارنة الصارمة مع النوع) في JavaScript، مما يسبب نتائج غير متوقعة.

بدلاً من بناء أداة ضخمة، قررت التركيز على هذه الثلاث فقط. هذا هو الدرس الأول: ابدأ صغيراً ومحدداً (Start Small and Focused). الأداة التي بنيتها هي في جوهرها Linter بسيط وخاص بي.

الخطوة 2: الخطة التقنية (كيف؟)

كنت أعلم أن الأداة يجب أن تعمل في المتصفح (Client-side) لضمان الخصوصية وسرعة الأداء. هذا يعني أن JavaScript ستكون هي الحل. كانت الخطة كالتالي:

• جلب النص من <textarea>.
• تقسيم النص إلى أسطر (باستخدام code.split('\n')) لتحديد رقم السطر للخطأ.
• إنشاء دالة لكل نوع من أنواع الفحص، مما يضمن وحدة الكود (Modularity).
• عرض النتائج في <div> مخصص.

التحدي 1: كيف تتحقق من الأقواس المتطابقة؟ (بنية المكدس)

هذه هي المشكلة الكلاسيكية التي تُحل باستخدام بنية بيانات تسمى "المكدس" (Stack). الفكرة بسيطة:

1. نقوم بإنشاء مصفوفة (Array) فارغة لتكون بمثابة المكدس.
2. نقرأ الكود حرفاً حرفاً.
3. إذا وجدنا قوس فتح (مثل { أو ()، نقوم بـ "دفعه" (push) إلى المكدس.
4. إذا وجدنا قوس إغلاق (مثل })، نقوم بـ "إخراجه" (pop) من المكدس إذا كان مطابقاً. إذا لم يكن مطابقاً أو كان المكدس فارغاً، فهذا يعني أن لدينا خطأ!
5. في النهاية، إذا لم يكن المكدس فارغاً، فهذا يعني أن هناك أقواساً فُتحت ولم تُغلق.

هذه الخوارزمية البسيطة هي قلب "مدقق الأكواد" الخاص بنا، وتثبت أن هياكل البيانات ضرورية في التطبيقات العملية.

التحدي 2 و 3: كيف نجد `alt` و `==` ؟ (Regex)

هنا يأتي دور التعبيرات النمطية (Regular Expressions - Regex). إنها قوية جداً في البحث عن أنماط نصية معينة في الكود.

• لسمة `alt`: نستخدم Regex للبحث عن وسم <img> ونستبعد منه (باستخدام النمط السلبي) أي وسم يحتوي على alt=.
• لـ `==`: نبحث عن نمط == وننبه المستخدم إلى ضرورة التفكير في استخدام === بدلاً منها. هذا يحسن جودة الكود ويقلل من الأخطاء المنطقية.

// تعبير نمطي بسيط للبحث عن وسم img بدون alt
const imgRegex = /<img(?!.*\balt\s*=)[^>]*>/i; 
const eqRegex = /(?<!={2})==(?!=)/g; // للبحث عن == وتجنب ===

// ... عند العثور على تطابق ...
// وجدنا خطأ! أبلغ المستخدم.
suggestions.push(`خطأ في السطر ${lineNumber}: وسم <img> يفتقد سمة alt.`);
    

الخلاصة: أفضل طريقة للتعلم هي البناء

استغرق مني بناء النسخة الأولى من مدقق الأكواد عدة ساعات من البحث والتجربة والفشل. لكنني تعلمت خلال هذه الساعات عن (Regex) و (Stacks) أكثر مما تعلمته من أي دورة نظرية. هذا يثبت وجهة نظري: لا تكتفِ بالتعلم، بل قم بالبناء.

ابحث عن مشكلة (حتى لو كانت صغيرة ومملة) وقم ببناء أداة لحلها. يمكنك البدء بتجربة الأكواد في محرر الويب المباشر الخاص بنا. إن الشعور بإنشاء أداة تعمل فعليًا هو أعظم محفز للمطورين الجدد.

ما هي المشكلة الصغيرة التي تواجهك دائماً وتفكر في بناء أداة لها؟ شاركنا أفكارك في التعليقات!

✍️ كتب بواسطة KamalZone