تجهيز بيئة العمل: ما يحتاجه مطوّر الويب ليبدأ

قبل أن تكتب سطر شيفرةٍ واحدًا، تحتاج إلى تجهيز «ورشتك»: الأدوات التي ستعمل بها كل يوم. والخبر الجيّد أن أكثرها مجّانيٌّ، وأنك لا تحتاج جهازًا خارقًا للبدء. في المقالات السابقة عرفتَ ما الويب وكيف يعمل؛ وهنا ينتقل بك المسار من الفهم إلى الاستعداد للبناء.

سأعرض في هذا المقال ما تحتاجه فعلًا: العتاد المناسب (دون مبالغة)، ونظام التشغيل وأيّها تختار، ثمّ «مجموعة الأدوات» البرمجية التي يقوم عليها العمل، مع تركيزٍ على ما لا يخصّص له مقالٌ مستقلٌّ في هذه السلسلة (مثل بيئة جافاسكربت ومدير الحزم والخادم المحلّيّ). والمبدأ الذي سأكرّره في كل قسم: ابدأ بالحدّ الأدنى، وأضِف الأدوات حين تحتاجها فعلًا لا قبل ذلك، ولا تغرق في الإعداد قبل أن تبدأ البناء.

العتاد: لا تبالغ

أوّل ما يقلق المبتدئ: «هل أحتاج جهازًا قويًّا؟». الجواب لتطوير الويب: لا، أيّ حاسوبٍ حديثٍ معقول يكفي للبدء. ما يهمّ أكثر من المعالج هو «الذاكرة العشوائية» (RAM)، لأنك ستشغّل المتصفّح بعدّة تبويباتٍ والمحرّر وأدواتٍ في الخلفية معًا، فثمانية غيغابايت حدٌّ أدنى مريح، وستة عشر أفضل. ويسرّع «قرص الحالة الصلبة» (SSD) فتح المشاريع وأدواتها فرقًا محسوسًا. أمّا تفاصيل اختيار المعالج والذاكرة والتخزين فلها مقالاتها في سلسلة أساسيّات الحاسوب.

وتفيدك شاشةٌ ثانيةٌ كثيرًا (شيفرةٌ على واحدةٍ ونتيجةٌ على أخرى)، لكنها ترفٌ لا ضرورة. لا تجعل ضعف جهازك عذرًا للتأجيل: كثيرون بدؤوا على أجهزةٍ متواضعةٍ جدًّا. الجهاز وسيلةٌ لا غاية.

وما يغفل عنه كثيرون أمران: اتّصالٌ مستقرّ بالإنترنت، فالتطوير الحديث يحمّل كثيرًا (أدواتٌ ومكتباتٌ وتوثيق)، وبطء الاتّصال أو تقطّعه يعطّلك أكثر من بطء المعالج. والثاني راحة محيطك: لوحة مفاتيحٍ وفأرةٌ مريحتان، وجِلسةٌ صحّية، فأنت ستقضي ساعاتٍ طويلةً أمام الجهاز، وإرهاق اليد أو الظهر يكلّفك أكثر ممّا تظنّ. هذه ليست رفاهية، بل استثمارٌ في قدرتك على الاستمرار.

وسواءٌ كان حاسوبك محمولًا أو مكتبيًّا فالفرق في الراحة لا القدرة: المحمول يمنحك التنقّل، والمكتبيّ يمنحك أداءً أعلى بسعرٍ أقلّ وشاشاتٍ أكبر. وإن أردت تجربة لينكس دون مغادرة نظامك، يمكنك تشغيله في «آلةٍ افتراضية» داخل نظامك الحاليّ، أو استعمال WSL على ويندوز كما سيأتي. المهمّ ألّا يصير اختيار العتاد ذريعةً للتسويف.

نظام التشغيل: أيّ ملعبٍ تختار

أنظمة التشغيل الثلاثة تصلح كلّها لتطوير الويب، ولكلٍّ طابعه.^[1] «ويندوز» الأشيع والأمألف، ويعمل عليه كل شيء. و«ماك» محبوبٌ عند المطوّرين لأن نظامه مبنيٌّ على «يونكس»، فطرفيّته وأدواته قريبةٌ من بيئة الخوادم. و«لينكس» خيار كثيرٍ من المحترفين (وهو تفضيلي الشخصيّ)، مجّانيٌّ مفتوح، وبيئته الأقرب إلى الخوادم التي يعمل عليها الويب فعلًا.

ولمستخدم ويندوز بشارةٌ مهمّة: «نظام ويندوز الفرعيّ للينكس» (WSL) يتيح تشغيل بيئة لينكس حقيقيّةٍ كاملةٍ داخل ويندوز نفسه.^[3] فتجمع راحة ويندوز إلى قوّة أدوات لينكس التي يعتمدها كثيرٌ من العالم الحديث للتطوير. لهذا لم يَعُد اختيار النظام معضلةً كبيرة: ابدأ بما تألفه، وأضِف WSL إن كنت على ويندوز. المهمّ ألّا تضيّع أسابيع في «أيّ نظامٍ أفضل» بدل أن تبدأ التعلّم.

ولماذا يميل المطوّرون إلى ماك ولينكس؟ ليس تفضيلًا جماليًّا، بل لأن خوادم الويب في العالم تعمل غالبًا على لينكس، فالعمل في بيئةٍ شبيهةٍ بها (طرفيّةٌ وأدواتٌ متوافقة) يقرّبك من بيئة التشغيل الحقيقية ويقلّل المفاجآت بين جهازك والخادم. ولهذا تحديدًا وُجد WSL: ليمنح مستخدم ويندوز هذه القُربى دون أن يغادر نظامه. فاختيار النظام ليس عن «الأجمل»، بل عن «الأقرب إلى حيث يعمل عملك فعلًا».

وفائدةٌ عمليّةٌ تستحقّ أن تعرفها من اليوم الأوّل: على كل نظامٍ «مدير حزمٍ» يثبّت لك الأدوات بأمرٍ واحدٍ في الطرفية بدل تنزيلها يدويًّا من المواقع. على ماك يشيع Homebrew، وعلى توزيعات لينكس مديرٌ مدمجٌ مثل apt، وعلى ويندوز winget. تكتب أمرًا قصيرًا فيتولّى المدير التنزيل والتثبيت والربط، وهذه أنظف طريقةٍ لتجهيز جهازٍ جديدٍ بسرعة. لا تحفظ أوامرها الآن؛ يكفي أن تعرف أنها الطريق الأسهل حين يحين وقت التنصيب.

مجموعة الأدوات الأساسية

هذه القطع تتكامل لتصنع بيئة عملك. بعضها له مقاله المستقلّ في السلسلة فأشير إليه، وبعضها أفصّله هنا لأنه لا يُفرَد بمقال.

المتصفّح ومحرّر الأكواد

متصفّحك أداة عملٍ لا أداة تصفّحٍ فحسب، بفضل «أدوات المطوّر» المدمجة فيه (مرّ بك في مقال المتصفّح)، فاجعل لك متصفّحًا أساسيًّا تعرف أدواته. أمّا قلب الورشة فهو «محرّر الأكواد»، والخيار الأشيع بفارقٍ كبير «VS Code»: مجّانيٌّ، خفيف، قابلٌ للتوسعة بآلاف الإضافات.^[5] وله بدائل ممتازة (محرّراتٌ سريعة، وبيئات تطويرٍ متكاملةٍ أقوى)، لكنّ VS Code أفضل نقطة بداية. وله مقالٌ خاصٌّ تضبطه فيه: «دليل VS Code».

والفرق بين «المحرّر» و«بيئة التطوير المتكاملة» (IDE) أن الأوّل خفيفٌ تبنيه بالإضافات على قدر حاجتك، والثانية تأتي محمّلةً بكل شيءٍ سلفًا فأثقل وأقوى. وVS Code محرّرٌ يصير شبه بيئةٍ متكاملةٍ بإضافاتٍ قليلةٍ أساسيّة: مدقّقُ أخطاءٍ ينبّهك إلى الخلل وأنت تكتب، ومنسّقٌ يرتّب شيفرتك تلقائيًّا، ودعمٌ للغة التي تعمل بها. لا تُثقِل محرّرك بعشرات الإضافات من اليوم الأوّل؛ ابدأ بالأساس وأضِف ما يخدم عملك فعلًا.

ومن نضج بيئتك أن تستثمر فيها قليلًا مع الوقت: تعلّم اختصارات لوحة المفاتيح في محرّرك (فهي تضاعف سرعتك)، واضبط إعداداته على ذوقك. وVS Code يتيح «مزامنة الإعدادات»: تحفظ تخصيصاتك وإضافاتك في حسابك، فتستعيدها كاملةً على أيّ جهازٍ جديدٍ في دقائق. هذه الاستثمارات الصغيرة تتراكم: المطوّر الذي يطيّع أدواته لنفسه أسرع وأقلّ إرهاقًا ممّن يصارعها كل يوم.

الطرفية وإدارة الإصدارات

ستحتاج «الطرفية» (Terminal) لتشغيل الأدوات بأوامر نصّية، وهي أسرع وأقوى من الواجهات الرسومية لكثيرٍ من المهامّ، ولها مقالها: «الطرفية». وستحتاج «نظام التحكّم بالإصدارات» Git ومنصّة GitHub لحفظ تاريخ مشروعك والعمل الجماعيّ، وهو غير قابلٍ للتفاوض في العمل الاحترافيّ، وله مقاله: «Git وGitHub». هاتان أداتان لا غنى عنهما، لكنّك لا تحتاج إتقانهما من اليوم الأوّل، بل حين تبدأ مشروعًا حقيقيًّا.

وللطرفية «صَدفاتٌ» (Shells) مختلفة: على لينكس وماك تجد غالبًا bash أو zsh، وعلى ويندوز PowerShell (ومع WSL تحصل على bash). لا يلزمك حفظ الفروق الآن؛ يكفي أن تعرف أنها كلّها تؤدّي الغرض. ويفيدك أن تثبّت أكثر من متصفّحٍ لا متصفّحًا واحدًا، لتختبر موقعك على محرّكات عرضٍ مختلفة كما رأيتَ في مقال المتصفّح، فما يعمل في واحدٍ قد يختلف في آخر.

جافاسكربت خارج المتصفّح: Node.js وnpm

هنا قطعةٌ يجهلها المبتدئ ولا غنى عنها في التطوير الحديث. «Node.js» بيئةٌ تتيح تشغيل جافاسكربت خارج المتصفّح، على جهازك مباشرةً.^[2] ولماذا تحتاجها وأنت تبني للمتصفّح؟ لأنها تأتي معها بـ«npm» (مدير الحزم)، وهو الأداة التي تثبّت بها آلاف المكتبات والأدوات التي يقوم عليها التطوير الحديث بأمرٍ واحد. حين تنصّب إطار عملٍ مثل React، أو أداة بناءٍ، أو مكتبةً جاهزة، فأنت تستعمل npm.

فكّر في npm «متجرًا» هائلًا للأدوات البرمجية المجّانية: بدل أن تكتب كل شيءٍ من الصفر، تثبّت ما بناه غيرك وتبني فوقه. ولهذا فإن تنصيب Node.js (الذي يجلب npm معه) من أوائل ما يفعله مطوّر الويب الحديث بعد المحرّر. ومعه ظهرت أدوات بناءٍ حديثة (مثل Vite) تسرّع تطوير المشاريع الكبيرة، تُثبَّت كلّها عبر npm.^[4] ونصيحةٌ عمليّة عند التنصيب: اختر إصدار Node ذا الدعم طويل الأمد (يُرمز له بـLTS) لا الأحدث التجريبيّ، فهو الأثبت والأكثر توافقًا مع الأدوات. ولتسهيل التنقّل بين إصداراته لاحقًا توجد أدواتٌ خاصّة بإدارة نسخ Node، لكنّ تنصيبًا واحدًا يكفيك في البداية.

وتعمل الفكرة هكذا: يحمل كل مشروعٍ ملفًّا اسمه package.json يسرد الأدوات التي يعتمد عليها وإصداراتها، فإذا نسخت المشروع على جهازٍ آخر، يكفي أمرٌ واحد (npm install) ليجلب npm كل الاعتماديّات إلى مجلّدٍ اسمه node_modules. هكذا لا تنقل المكتبات يدويًّا، بل تنقل قائمتها فقط. وثمّة بدائل لـnpm (مثل yarn وpnpm) تؤدّي الدور نفسه بكفاءةٍ أعلى أحيانًا، لكنّ npm يأتي افتراضيًّا مع Node فهو نقطة البداية.

وتفصيلٌ يربك المبتدئ أوّل مرّة: مجلّد node_modules قد يضخم حتى مئات الميغابايت لمشروعٍ صغير، وهذا طبيعيٌّ لا خلل فيه (لذا ينفعك قرص SSD ذو سعةٍ معقولة). والقاعدة المهمّة: لا ترفع هذا المجلّد إلى Git، بل تستبعده بملفّ .gitignore؛ فمن ينسخ مشروعك يعيد توليده بأمرٍ واحدٍ من package.json. أنت تتعقّب قائمة الأدوات، لا الأدوات نفسها.

الخادم المحلّيّ: موقعك على جهازك

كيف ترى موقعك يعمل قبل أن تنشره للعالم؟ على «خادمٍ محلّيّ» (localhost): بيئةٌ تشغّل موقعك على جهازك أنت، فتجرّبه وتطوّره بأمانٍ قبل رفعه. لبعض المشاريع يكفي فتح ملفّ HTML في المتصفّح مباشرةً، لكنّ المشاريع الأعقد (وخاصّةً ما يحتاج خادمًا كمواقع ووردبريس) تحتاج خادمًا محلّيًّا حقيقيًّا. وأدوات الخادم المحلّيّ كثيرةٌ، بعضها متخصّصٌ بمنصّةٍ بعينها. فقبل أن يصل موقعك إلى استضافةٍ على الإنترنت (وهو موضوع سلسلة الاستضافة)، يعيش ويُختبَر على جهازك أوّلًا.

وعمليًّا، حين تشغّل خادمًا محلّيًّا يصير موقعك متاحًا على عنوانٍ مثل localhost مع رقم منفذ، تفتحه في متصفّحك كأنه موقعٌ حقيقيّ. وهناك أدواتٌ خفيفة تعيد تحميل الصفحة تلقائيًّا كلّما حفظتَ تغييرًا (فترى أثره فورًا)، وأدواتٌ متكاملة لمنصّاتٍ بعينها (مثل أداة Local التي تشغّل لك خادمًا وقاعدة بياناتٍ كاملةً لموقع ووردبريس بنقرة، وهي ما أستعمله أنا لتطوير مواقع ووردبريس محليًّا). اختيارك يتبع ما تبني: صفحةٌ ثابتةٌ تكفيها أداةٌ بسيطة، وموقع ووردبريس يحتاج بيئةً تحاكي الخادم كاملًا.

تنظيم مساحة عملك

الأدوات نصف القصّة؛ نصفها الآخر ترتيبٌ يوفّر عليك فوضى لاحقة. خصّص مجلّدًا واحدًا لكل مشاريعك (مثل ~/dev أو Projects)، وامنح كل مشروعٍ مجلّده المستقلّ، فلا تتبعثر ملفّاتك بين سطح المكتب والتنزيلات. واتّبع في كل مشروعٍ بنيةً متشابهة، فتعرف أين تجد كل شيءٍ دون تفكير. هذا الانضباط الصغير يصير حاسمًا حين تتعدّد مشاريعك.

ومع الوقت تتراكم لك إعداداتٌ تخصّك: تخصيصات المحرّر، واختصاراتك في الطرفية، وإعدادات Git. كثيرٌ من المطوّرين يحفظون هذه الملفّات (تُسمّى أحيانًا dotfiles) في مستودع Git خاصّ، فإذا انتقلوا إلى جهازٍ جديدٍ استعادوا بيئتهم كما تركوها في دقائق بدل أن يضبطوها من الصفر. لا تحتاج هذا في يومك الأوّل، لكن اعرف أنه ممكن: بيئتك أصلٌ تبنيه مرّة وتحمله معك.

وتفصيلٌ يربك المنتقل بين الأنظمة: شكل «مسار الملفّ» يختلف بينها. على ويندوز يبدأ المسار بحرف القرص ويفصل بين المجلّدات بشَرطةٍ خلفيّة (C:Usersyou)، وعلى ماك ولينكس يبدأ من الجذر ويفصل بشرطةٍ أماميّة (/home/you). ستلتقي بهذا الفرق كثيرًا حين تكتب الأوامر في الطرفية، فاعرفه من الآن حتى لا يفاجئك لاحقًا.

أدواتٌ مساعدة، بقدرٍ

إلى جانب الأساس، أدواتٌ تعينك دون أن تكون ضرورية للبدء. أداة تصميمٍ لقراءة تصاميم الواجهات والتعامل معها (الأشهر اليوم أداةٌ سحابيّةٌ تتيح للمصمّم والمطوّر العمل على التصميم نفسه). وإضافاتٌ في المتصفّح تعينك على فحص واجهتك (كأدوات فحص أطر العمل الشائعة، وأداة قياس الأداء وإمكانية الوصول المدمجة في المتصفّح)، تكشف لك ما يصعب رؤيته بالعين. وأدوات تواصلٍ وتنظيم مهامّ إن عملت في فريق. لكنّ تحذيري هنا واضح: لا تجمع الأدوات لمجرّد جمعها. كل أداةٍ تتعلّمها قبل أن تحتاجها عبءٌ لا عون. ابدأ بالمحرّر والمتصفّح، وأضِف ما عداهما حين يفرضه عملك. الأداة الأفضل هي التي تستعملها فعلًا.

وصار «مساعد الذكاء الاصطناعي» جزءًا من بيئة كثيرٍ من المطوّرين، يقترح الشيفرة ويكملها داخل المحرّر. وهو معينٌ نافع، لكن بشرطٍ ذكرتُه لك في مقال «مطوّر الواجهات الأمامية»: أن تفهم ما يولّده لتحكم عليه وتصلحه، لا أن تنسخه أعمى. اجعله مساعدًا لا بديلًا عن التعلّم، خاصّةً في البداية. وانتبه أيضًا إلى تحديث أدواتك: المحرّر والمتصفّح وNode والحزم تتلقّى تحديثاتٍ تسدّ ثغراتٍ أمنية، فإهمالها يفتح أبوابًا. ومن أدوات npm أمرٌ يفحص اعتماديّاتك بحثًا عن ثغراتٍ معروفة، استعمله في مشاريعك.

ولنلخّص في قائمةٍ ما يكفيك للبدء فعلًا، دون زيادة:

• متصفّحٌ حديثٌ تعرف أدوات مطوّريه.
• محرّر VS Code مع إضافتي تدقيقٍ وتنسيقٍ أساسيّتين.
• طرفيّةٌ تألفها (مع WSL إن كنت على ويندوز).
• Git وحساب GitHub.
• Node.js (يجلب npm معه) حين تبدأ مشاريع تحتاجها.
• طريقةٌ لتشغيل موقعك محليًّا.

هذه القائمة وحدها تكفيك أوّل أشهرٍ كاملة. وما عداها أضِفه حين يفرضه مشروعك، لا قبل ذلك.

وممّا يطمئنك أن هذا كلّه مجّانيّ: المتصفّح والمحرّر وGit وNode ولينكس، كلّها بلا تكلفة. لا يقف بينك وبين البدء حاجزٌ ماليّ، بل قرارُك أن تبدأ. وهنا أحذّرك من فخٍّ شائع: «شلل الإعداد». كثيرون يقضون أسابيع في ضبط المحرّر وتجربة الأدوات ومشاهدة دروس الإعداد، فيشعرون بالإنتاجية وهم لم يكتبوا صفحةً واحدة. الإعداد وسيلةٌ لا غاية: جهّز الحدّ الأدنى في ساعة، ثمّ ابدأ البناء، وحسّن أدواتك في أثناء العمل لا قبله.

ولنرَ «يومك الأوّل» عمليًّا: ثبّت متصفّحًا حديثًا، ثمّ VS Code، ثمّ Git، وأنشئ حساب GitHub. أنشئ مجلّدًا لأوّل مشروع، افتحه في المحرّر، اكتب ملفّ index.html بسيطًا، وافتحه في المتصفّح. بهذا تكون قد أكملت دورتك الأولى: كتابةٌ، وحفظٌ، ومعاينةٌ في المتصفّح. كل ما بعد ذلك تفصيلٌ تضيفه على هذا الأساس. وهذه الدورة الصغيرة هي مهنة المطوّر كلّها في صورةٍ مصغّرة: تكتب، وتجرّب، وتصلح، ثمّ تكرّر.

من الورشة إلى أوّل أداة

هذه هي بيئة العمل: حاسوبٌ معقولٌ لا خارق، ونظامٌ تألفه (مع WSL إن كنت على ويندوز)، ومجموعة أدواتٍ نواتها المتصفّح والمحرّر، تكمّلها الطرفية وGit وبيئة Node.js والخادم المحلّيّ حين تحتاجها. والمبدأ الذي يحميك من الغرق: الحدّ الأدنى أوّلًا، والإضافة عند الحاجة.

وآخر نصيحةٍ تخصّ البيئة كلّها: لكل أداةٍ من هذه الأدوات توثيقٌ رسميٌّ مكتوبٌ بعناية، وقد جمعت لك روابطها في المصادر أسفل المقال. عوّد نفسك منذ البداية على الرجوع إليه بدل الاكتفاء بمقاطع متفرّقة، فالمطوّر الذي يقرأ التوثيق يتعلّم أعمق وأسرع ممّن يجمع الإجابات قطعةً قطعة. هذه عادةٌ تفرّق بين من يستعمل الأداة ومن يتقنها.

وأهمّ هذه الأدوات وأكثرها ملازمةً لك هو محرّر الأكواد، فهو المكان الذي ستقضي فيه أكثر وقتك. ولذا يكون ضبطه وإتقانه أوّل ما تبدأ به في المقال التالي: «دليل VS Code للمبتدئين».

المصادر

1. MDN: إعداد بيئة العمل. أساسيّات تجهيز بيئة تطوير الويب.
2. Node.js: عن Node.js. تشغيل جافاسكربت خارج المتصفّح ومدير الحزم npm.
3. Microsoft: نظام ويندوز الفرعيّ للينكس (WSL). بيئة لينكس داخل ويندوز.
4. npm: عن npm. مدير حزم النظام البيئيّ لجافاسكربت.
5. Visual Studio Code: توثيق VS Code. المحرّر الأشيع لتطوير الويب.