FlowingDev

شرح JSON: صيغة البيانات المفضلة للإنترنت

تعلم أساسيات JSON (JavaScript Object Notation)، صيغة تبادل البيانات خفيفة الوزن التي تشغل واجهات برمجة التطبيقات (APIs) وتطبيقات الويب الحديثة.

جرّب الأداة: عارض JSON

في جملة واحدة

JSON هي طريقة نصية لهيكلة البيانات على شكل قائمة أو قاموس، مما يجعل قراءة وكتابة وتبادل المعلومات سهلاً للغاية لكل من أجهزة الكمبيوتر والبشر.

المشكلة التي يحلها

تخيل شبكة الإنترنت في أوائل الألفية الثانية. إذا أردت أن تجلب صفحة الويب خاصتك بيانات جديدة بدون إعادة تحميل الصفحة بالكامل (مفهوم جديد ومثير آنذاك يسمى AJAX)، فمن المحتمل أنك كنت تصارع مع XML. كانت XML (eXtensible Markup Language) هي البطل المسيطر في عالم تبادل البيانات. كانت قوية، صارمة، و... بصراحة، كانت عبئًا ثقيلًا.

مستند XML مليء بالتفاصيل غير الضرورية. كل معلومة تكون مغلفة بوسوم فتح وإغلاق.

<user>
  <id>123</id>
  <name>Alex</name>
  <isAdmin>true</isAdmin>
</user>

هذا ليس سيئًا جدًا، لكنه ضخم. والأهم من ذلك، أن تحليله (parsing) في لغة JavaScript — لغة المتصفح — كان بمثابة صداع. كان عليك التنقل في Document Object Model (DOM) معقد، والتعامل مع العُقد (nodes)، والسمات (attributes)، والمحتوى النصي. كان الأمر أشبه باستخدام مطرقة ثقيلة لكسر حبة جوز.

وهنا يأتي دور دوغلاس كروكفورد، وهو مطور كان يعمل في شركة ستصبح فيما بعد Yahoo!. لقد لاحظ شيئًا عبقريًا: لغة JavaScript لديها بالفعل طريقة مدمجة وممتازة لتعريف البيانات المهيكلة. كانت تسمى "object literal notation".

// هذا مجرد كود JavaScript عادي!
var user = {
  "id": 123,
  "name": "Alex",
  "isAdmin": true
};

أدرك كروكفورد أن هذه المجموعة الفرعية من صيغة JavaScript كانت صيغة بيانات رائعة في حد ذاتها. كانت خفيفة الوزن، وسهلة القراءة للبشر، و — وهذه كانت الميزة القاتلة — سهلة التحليل بشكل لا يصدق في JavaScript. كان بإمكانك ببساطة استخدام eval() عليها (على الرغم من أننا نستخدم الآن طرقًا أكثر أمانًا مثل JSON.parse() لأسباب أمنية).

قام بصياغة هذه الصيغة بشكل رسمي، وأطلق عليها اسم JavaScript Object Notation (JSON)، وأنشأ موقعًا إلكترونيًا بسيطًا من صفحة واحدة لشرحها. لقد حلت مشكلة الحاجة إلى صيغة بيانات أقل حجمًا من XML ومتوافقة أصلاً مع بيئة الويب. انتشرت JSON كالنار في الهشيم، لتصبح اللغة الفعلية لواجهات برمجة التطبيقات (APIs)، وملفات الإعدادات، وعدد لا يحصى من التطبيقات الأخرى. لقد فازت لأنها كانت بسيطة وعملية، ووُلدت من رحم اللغة التي صُممت لخدمتها.

كيف يعمل من الداخل

في جوهرها، JSON هي مجرد مجموعة من القواعد لكتابة البيانات كنص. فكر فيها كمخطط عالمي لهيكل البيانات. لديها طريقتان فقط لهيكلة الأشياء وستة أنواع بسيطة من البيانات لوضعها بداخلها.

اللبنات الأساسية: أنواع البيانات

تأتي أناقة JSON من مجموعة أنواع القيم البسيطة التي تستخدمها. كل شيء في JSON هو واحد من هذه الأنواع.

النوع مثال الوصف
String "Hello, world!" سلسلة من حروف Unicode، مغلفة بـ علامات اقتباس مزدوجة.
Number 42, -3.14, 2.99e8 عدد صحيح أو عشري. لا يوجد NaN أو Infinity.
Boolean true, false القيم المنطقية لـ true و false، دائمًا بأحرف صغيرة.
Null null يمثل الغياب المتعمد للقيمة، دائمًا بأحرف صغيرة.
Array [1, "two", false] قائمة مرتبة من القيم، محاطة بأقواس مربعة [].
Object {"key": "value"} مجموعة غير مرتبة من أزواج المفتاح/القيمة، داخل أقواس معقوصة {}.

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

الهيكل: الكائنات والمصفوفات

السحر الحقيقي يحدث عندما تجمع بين هذه اللبنات الأساسية.

  • Objects (الكائنات) تُستخدم عندما يكون لديك مجموعة من الأشياء المسماة. "المفاتيح" (الأسماء) يجب أن تكون سلاسل نصية (strings) بين علامتي اقتباس مزدوجتين. "القيم" يمكن أن تكون أيًا من أنواع البيانات الستة، بما في ذلك كائن آخر أو مصفوفة. هذه هي الطريقة التي تنشئ بها التسلسل الهرمي.

  • Arrays (المصفوفات) تُستخدم عندما يكون لديك قائمة مرتبة من الأشياء. الترتيب مهم، ويمكنك الوصول إلى العناصر حسب موقعها (الفهرس أو index)، بدءًا من الصفر.

دعنا ننشئ ملفًا شخصيًا بسيطًا لمستخدم. إنه كائن (object) لأنه يحتوي على خصائص مسماة مثل name و email. إحدى هذه الخصائص، skills، هي قائمة، لذلك نستخدم مصفوفة (array).

{
  "userId": "u-9a8b7c",
  "username": "CodeWizard",
  "isActive": true,
  "lastLogin": null,
  "profile": {
    "realName": "Dana Scully",
    "location": "Washington, D.C."
  },
  "skills": [
    "Forensic Pathology",
    "Firearms",
    "Rational Skepticism"
  ]
}

هل ترى التداخل؟ كائن (profile) هو قيمة داخل الكائن الرئيسي. ومصفوفة (skills) هي قيمة أخرى. يمكن لهذا الهيكل الشبيه بالشجرة أن يتعمق بقدر ما تحتاج، مما يتيح لك نمذجة بيانات معقدة بشكل لا يصدق.

في JavaScript، الوصول إلى هذه البيانات بديهي بشكل جميل: data.username سيعطيك "CodeWizard". data.profile.realName سيعطيك "Dana Scully". data.skills[0] سيعطيك "Forensic Pathology".

هذا الربط المباشر بهياكل اللغة الأصلية هو سبب عشق المطورين لها.

قواعد اللعبة: الصيغة (Syntax)

لكي يكون ملفك صالحًا كملف JSON، عليك اتباع بعض القواعد الصارمة. هذه الصرامة هي ما تجعله قابلاً للتحليل آليًا بشكل موثوق.

  1. علامات الاقتباس المزدوجة فقط: يجب أن تكون جميع المفاتيح وجميع القيم النصية محاطة بعلامات اقتباس مزدوجة ("). علامات الاقتباس المفردة (') تعتبر خطأ في الصيغة.
  2. لا فواصل زائدة في النهاية: تُستخدم الفاصلة للفصل بين العناصر في مصفوفة أو الأزواج في كائن. لا يمكنك وضع فاصلة بعد العنصر الأخير.
    // خطأ! فاصلة زائدة بعد `true`
    {
      "key1": "value1",
      "key2": true, 
    }
    
  3. الكائنات والمصفوفات: يتم هيكلة البيانات في كائنات ({}) أو مصفوفات ([]). يمكن أن يكون مستند JSON صالحًا عبارة عن قيمة واحدة (مثل السلسلة النصية "hello"), ولكنه يكون دائمًا تقريبًا كائنًا أو مصفوفة كحاوية رئيسية.
  4. المسافات البيضاء مرنة: المسافات، وعلامات الجدولة (tabs)، والأسطر الجديدة خارج السلاسل النصية لا تهم. هذا يسمح بكل من الصيغ "الجميلة" ذات المسافات البادئة لسهولة القراءة البشرية والصيغ "المصغرة" (minified) في سطر واحد لنقل فعال عبر الشبكة.

قصص من الواقع

صفحة الأخبار في وسائل التواصل الاجتماعي

مطور الواجهة الأمامية، مايا، مكلفة ببناء صفحة الأخبار ذات التمرير اللانهائي لشبكة اجتماعية جديدة. في كل مرة يقترب فيها المستخدم من أسفل الصفحة، يحتاج كود JavaScript الخاص بها إلى طلب المزيد من المنشورات من الخادم. الخادم لا يستجيب بـ HTML، بل ببيانات صافية. يرسل مصفوفة JSON، حيث كل عنصر فيها هو كائن يمثل منشورًا. يحتوي هذا الكائن على نص المنشور، واسم المستخدم للمؤلف، ورابط لصورته الشخصية، وعدد الإعجابات، وحتى مصفوفة متداخلة لأول بضعة تعليقات. يستقبل كود مايا هذا الـ JSON النظيف، ويدور عبر المصفوفة، وينشئ ديناميكيًا كود HTML لكل منشور، ويضيفه إلى الصفحة.

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

ملف إعدادات اللعبة

مطوّر ألعاب مستقل، ليو، يقوم بإنشاء لعبة تقمص أدوار. يحتاج إلى إدارة مئات العناصر: سيوف، جرعات، دروع، إلخ. كتابة خصائص كل عنصر (الاسم، الضرر، الوزن، السعر) مباشرة في كود C++ الخاص باللعبة سيكون كابوسًا للموازنة والتحديث. بدلاً من ذلك، أنشأ ملف items.json. وهو كائن JSON ضخم حيث كل مفتاح هو معرّف العنصر (مثل "longsword") والقيمة هي كائن آخر يحتوي على جميع إحصائياته. عند بدء اللعبة، تقرأ هذا الملف وتحمل جميع بيانات العناصر في الذاكرة. لإعادة موازنة اللعبة، كل ما عليه فعله هو تعديل الملف النصي، دون الحاجة إلى إعادة ترجمة الكود (recompiling).

الدرس المستفاد: JSON هي صيغة ممتازة لملفات الإعدادات، حيث تفصل بيانات التطبيق عن منطقه وتجعلها سهلة التعديل من قبل البشر.

أوركسترا الخدمات المصغرة (Microservices)

مهندسة الواجهات الخلفية، فاطمة، تعمل على نظام يتكون من عشرات الخدمات المصغرة. "خدمة المستخدمين" تدير حسابات المستخدمين، و"خدمة الطلبات" تدير المشتريات، و"خدمة الإشعارات" ترسل رسائل البريد الإلكتروني. عندما يقدم مستخدم طلبًا، تحتاج خدمة الطلبات إلى تأكيد عنوان الشحن الخاص بالمستخدم. هي لا تستعلم من قاعدة البيانات مباشرة؛ بل تقوم بطلب HTTP إلى نقطة نهاية API الخاصة بخدمة المستخدمين، مثل GET /api/users/123/address. تستجيب خدمة المستخدمين بكائن JSON بسيط: {"street": "123 Main St", "city": "Anytown"}. تقوم خدمة الطلبات بتحليل هذا، والتحقق من صحة الطلب، ثم ترسل طلبًا إلى خدمة الإشعارات (أيضًا مع حمولة JSON) لإرسال الإيصال عبر البريد الإلكتروني.

الدرس المستفاد: في نظام موزع، تعمل JSON كعقد عالمي ومستقل عن اللغة، مما يسمح للخدمات المكتوبة بلغات Go و Python و Node.js بالتواصل مع بعضها البعض بسلاسة.

أخطاء وفخاخ شائعة

  • الفواصل الزائدة في النهاية (Trailing Commas): هذا هو خطأ التحقق الأكثر شيوعًا. غالبًا ما تكون المصفوفات والكائنات في JavaScript أكثر تساهلاً، لكن JSON صارم: لا توجد فاصلة بعد العنصر الأخير في مجموعة.
  • التعليقات: JSON لا يحتوي على تعليقات. نقطة. المطورون المعتادون على // أو /* */ غالبًا ما يحاولون إضافتها، مما يبطل صحة JSON على الفور. "الحل" الرسمي هو إضافة مفتاح مثل "_comment": "ملاحظتك هنا"، والذي سيعامله المحلل (parser) كجزء آخر من البيانات.
  • علامات الاقتباس المفردة مقابل المزدوجة: يجب أن تستخدم جميع المفاتيح وجميع السلاسل النصية علامات اقتباس مزدوجة ("). إذا كنت قادمًا من قواميس Python أو بعض أنماط JavaScript، فقد تكون معتادًا على علامات الاقتباس المفردة، لكنها محظورة في JSON.
  • undefined ليس شيئًا موجودًا: في JavaScript، الخاصية المفقودة في كائن تكون undefined. لا يوجد مفهوم كهذا في JSON. لتمثيل قيمة مفقودة أو فارغة، يجب عليك استخدام null بشكل صريح.
  • علامات الاقتباس غير المعالجة (Unescaped): إذا كانت قيمتك النصية بحاجة إلى احتواء علامة اقتباس مزدوجة، فيجب عليك معالجتها بشرطة مائلة عكسية (\). نسيان هذا ({"quote": "She said "Hello""}) سيكسر الهيكل. الطريقة الصحيحة هي {"quote": "She said \"Hello\""}.

لماذا يجب أن تضعه في اعتبارك

في تطوير البرمجيات الحديث، JSON ليس مجرد شيء "يجب أن تضعه في اعتبارك"؛ بل هو أساس كل شيء. إنه الصيغة الافتراضية للكثير من المهام الحاسمة لدرجة أن عدم الإلمام به يشبه أن تكون طاهياً لا يعرف ما هو الملح.

يجب أن تفكر في JSON كلما:

  • كنت تبني أو تستخدم واجهة برمجة تطبيقات ويب (API).
  • كنت بحاجة إلى ملف إعدادات لتطبيق ما.
  • كنت بحاجة إلى تخزين بيانات مهيكلة في ملف نصي بسيط أو قاعدة بيانات NoSQL مثل MongoDB.
  • كنت ترسل بيانات من عملية على جانب الخادم إلى تطبيق JavaScript على جانب العميل.
  • كنت بحاجة إلى صيغة بسيطة وقابلة للقراءة البشرية لعمل تسلسل (serializing) لكائن لإرساله عبر الشبكة أو حفظه على القرص.

بشكل أساسي، إذا كنت بحاجة إلى برنامجين مختلفين للتحدث مع بعضهما البعض، أو إذا كنت بحاجة إلى فصل بياناتك عن الكود الخاص بك، فإن JSON هو دائمًا إجابتك الأولى والأفضل.

تعمق أكثر

  • JSON.org: المواصفات الأصلية من صفحة واحدة بقلم دوغلاس كروكفورد. تحفة فنية في التوثيق المختصر.
  • RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format: المعيار الرسمي والنهائي للإنترنت. إنه كثيف لكنه حاسم.
  • MDN Web Docs: JSON: دليل ممتاز وعملي لمطوري الويب، يركز على كائن JSON المدمج في JavaScript.
  • Wikipedia: JSON: للحصول على نظرة عامة عالية المستوى على تاريخه وبدائله ودوره في عالم البرمجة.
  • Google TechTalks: The JSON Saga: فيديو لدوغلاس كروكفورد نفسه يشرح فيه التاريخ وفلسفة التصميم وراء JSON. مشاهدة ممتعة ومفيدة.

انتهينا من النظرية. حان وقت التطبيق — 100% في متصفحك.

جرّب الأداة: عارض JSON