Формати даних — JSON, Markdown, CSV та інші

Формати даних — документи різних форматів акуратно розкладені на робочому столі

У попередніх уроках ти вже зустрічав різні файли: package.json, README.md, .gitignore. Але чому одні файли мають розширення .json, інші .md, а деякі .csv? Сьогодні розберемося з форматами даних — правилами, за якими інформація записується у файл, щоб будь-яка програма могла її прочитати.

Навіщо потрібні формати даних?

Уяви, що тобі потрібно передати список студентів іншій програмі. Можна написати:

Анна Коваленко, 20 років, Київ
Олег Шевченко, 22 роки, Львів

Але як програма зрозуміє де ім'я, де вік, а де місто? Потрібні чіткі правила запису — формат даних.

JSON — король веб-розробки

JSON (JavaScript Object Notation) — найпопулярніший формат обміну даними в інтернеті. Ти вже бачив його — package.json написаний саме у цьому форматі:

{
  "name": "Анна Коваленко",
  "age": 20,
  "city": "Київ",
  "isStudent": true,
  "hobbies": ["програмування", "малювання"],
  "address": null
}

Правила JSON

JSON суворий — будь-яка помилка і файл не прочитається:

Вкладені структури

JSON дозволяє вкладати об'єкти та масиви на будь-яку глибину:

{
  "students": [
    {
      "name": "Анна",
      "grades": { "math": 95, "english": 88 }
    },
    {
      "name": "Олег",
      "grades": { "math": 78, "english": 92 }
    }
  ],
  "totalStudents": 2
}

Де JSON використовується?

• package.json — опис проєкту та залежностей (ти вже знаєш!)
• API — сервери відправляють та приймають дані у форматі JSON
• Конфіги — tsconfig.json, .eslintrc.json, settings.json у VS Code
• localStorage — браузер зберігає дані як JSON-рядки

Markdown — мова документації

Markdown — легка мова розмітки для створення форматованого тексту. Файли README.md на GitHub написані саме в Markdown.

# Заголовок 1
## Заголовок 2

Звичайний текст. **Жирний текст**. *Курсив*.

- Елемент списку
- Ще один елемент
  - Вкладений елемент

1. Перший пункт
2. Другий пункт

[Посилання на Google](https://google.com)

![Текст для зображення](image.webp)

Код у Markdown

Для коду є два варіанти. Інлайн: обгортай у одинарні бектіки — `console.log()`. Блок коду: обгортай у потрійні бектіки з назвою мови:

```javascript
const greeting = "Привіт!";
console.log(greeting);
```

Де Markdown використовується?

• README.md — опис проєкту на GitHub
• Документація — більшість технічної документації
• Блоги — багато платформ підтримують Markdown
• Нотатки — Notion, Obsidian, Bear
• Цей курс — всі уроки написані в MDX (Markdown + React-компоненти)!

CSV — таблиці у текстовому файлі

CSV (Comma-Separated Values) — найпростіший формат для табличних даних. Кожен рядок — це запис, значення розділені комами:

name,age,city
Анна Коваленко,20,Київ
Олег Шевченко,22,Львів
Марія Бондаренко,19,Одеса

Це те саме, що таблиця:

Якщо значення містить кому, його беруть у лапки: "Київ, Україна". CSV можна відкрити в Excel, Google Sheets або будь-якому текстовому редакторі. Його використовують для експорту з баз даних, аналітики та обміну табличними даними між різними системами.

XML — прадідусь HTML

XML (eXtensible Markup Language) — мова розмітки з тегами, схожими на HTML. Колись XML був стандартом для обміну даними, але JSON його здебільшого замінив:

<?xml version="1.0" encoding="UTF-8"?>
<students>
  <student>
    <name>Анна Коваленко</name>
    <age>20</age>
  </student>
  <student>
    <name>Олег Шевченко</name>
    <age>22</age>
  </student>
</students>

Порівняй ті самі дані у JSON — він значно компактніший:

{
  "students": [
    { "name": "Анна Коваленко", "age": 20 },
    { "name": "Олег Шевченко", "age": 22 }
  ]
}

XML досі використовується для SVG (векторна графіка — це XML!), RSS (стрічки новин) та у деяких legacy-системах (банки, держсервіси).

YAML — зрозумілий для людей

YAML (YAML Ain't Markup Language) — формат, оптимізований для читання людиною. Використовує відступи замість дужок:

name: Анна Коваленко
age: 20
city: Київ
isStudent: true
hobbies:
  - програмування
  - малювання

Порівняй з JSON — ті самі дані, але без лапок, без ком, без дужок. YAML популярний для конфігураційних файлів:

# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm install
      - run: npm run build

Порівняння форматів

Коли що використовувати?

• Обмін даними з API → JSON
• Табличні дані для Excel → CSV
• Документація та README → Markdown
• Конфігурація CI/CD → YAML
• Векторна графіка → SVG (XML)

Що далі?

Тепер ти знаєш основні формати даних у веб-розробці. JSON буде супроводжувати тебе постійно — у Block 4 (JavaScript) навчишся парсити та створювати JSON програмно, а в Block 6 — отримувати JSON з API. Markdown ти вже використовуєш для README. А YAML стане в нагоді, коли дійдеш до деплою і CI/CD.