Чистый код, рефакторинг и деплой

01 Имена: код читают чаще, чем пишут

Компьютеру всё равно, как назвать переменную: a, x2 или somoniForOnePlov. Но программу читает не только компьютер — её читаете вы через неделю, ваш напарник по проекту и ИИ-помощник. Хорошее имя избавляет от комментария: из него сразу понятно, что это и зачем.

const d = 7;
const l = [5, 35, 15];
function proc(x) {
  return x * 11;
}
let flag = false;

const daysInWeek = 7;
const dishPrices = [5, 35, 15];
function convertUsdToSomoni(usd) {
  return usd * 11;
}
let isPaid = false;

Правила хороших имён

• Без сокращений, которые знаете только вы: cnt, usr, tmp. Лишние пять букв — дешёвая цена за понятность. Исключение — общепринятые: i в коротком цикле, id, url.
• Без «мусорных» слов: data, info, temp, thing, list2. Спросите себя: «Какие именно данные?»
• Одно слово — одно понятие. Если в одном месте getUser, в другом fetchOrder, а в третьем loadProduct — выберите один глагол для одного вида действий и держитесь его.
• Длина имени зависит от «жизни» переменной. Переменная на три строки может быть короткой (item), а видная всему файлу — подробной (selectedDishId).
• Только латиница, язык — английский. Комментарии и тексты для пользователя пишем по-русски.

const items = [5, 35];
const isEmpty = items.length > 0;   // ✖ на самом деле «не пусто»

if (isEmpty) {
  console.log("Корзина пуста");     // ← а корзина-то полная!
}

Читать подробнее: learn.javascript.ru — Стиль кода, learn.javascript.ru — Ниндзя-код (как делать не надо)

// 1
const d = 7;
// 2
const daysInWeek = 7;
// 3
function proc(x) { return x * 2; }
// 4
const isPaid = true;
// 5
const flag = false;   // здесь хранится «оплачен ли заказ»
// 6
const students = ["Рустам", "Нилуфар"];
// 7
function getStudentCount(students) { return students.length; }
// 8
const data2 = [1, 2, 3];

const badNames = [/* номера плохих имён */];
console.log(badNames.join(", "));

1, 3, 5, 8

const p = 25;
const n = 4;
const t = p * n;

console.log(`${price} × ${count} = ${total}`);

25 × 4 = 100

function check(a) {
  return a >= 18;
}

function calc(arr) {
  let s = 0;
  for (const x of arr) {
    s += x;
  }
  return s;
}

function fmt(n) {
  return n + " сомони";
}

console.log(isAdult(20), isAdult(15));
console.log(getTotal([5, 35, 15]));
console.log(formatPrice(getTotal([5, 35, 15])));

true false
55
55 сомони

02 Маленькие функции и ранний возврат

Правило номер один для функций: одна функция — одна задача. Если вы описываете её словом «и» («считает сумму и применяет скидку и печатает чек»), это три функции. Короткая функция проще читать, называть, проверять и использовать в другом месте.

• Размер. Ориентир — помещается на один экран, 10–20 строк. Не закон, а сигнал: если пролистываете — пора делить.
• Параметры. Два–три — нормально. Пять и больше — повод подумать, не стоит ли передать объект.
• Один уровень детализации. Верхняя функция рассказывает «что происходит» (validate → calc → render), а подробности спрятаны в маленьких функциях.

function processOrder(prices) {
  let sum = 0;
  for (const price of prices) {
    sum += price;
  }
  const discount = sum >= 100 ? sum / 10 : 0;
  console.log("К оплате: " + (sum - discount));
}

processOrder([40, 70, 20]);

function calcSum(prices) {
  let sum = 0;
  for (const price of prices) {
    sum += price;
  }
  return sum;
}

function calcDiscount(sum) {
  return sum >= 100 ? sum / 10 : 0;
}

function processOrder(prices) {
  const sum = calcSum(prices);
  const discount = calcDiscount(sum);
  console.log("К оплате: " + (sum - discount));
}

processOrder([40, 70, 20]);

Ранний возврат (guard clauses)

Когда проверки вкладываются друг в друга, получается «стрелка» из скобок: основная логика уехала вправо на три уровня, а в голове приходится держать все условия сразу. Лекарство — ранний возврат: сначала отсекаем плохие случаи и сразу выходим из функции, а основная логика остаётся на одном уровне.

function getFare(age, hasCard) {
  if (age >= 0) {
    if (hasCard) {
      if (age < 7) {
        return 0;
      } else {
        return 3;
      }
    } else {
      return 5;
    }
  } else {
    return -1;
  }
}

function getFare(age, hasCard) {
  if (age < 0) return -1;
  if (!hasCard) return 5;
  if (age < 7) return 0;
  return 3;
}

Обе функции возвращают одно и то же, но вторую читаешь сверху вниз как список правил. Заметили? Слово else пропало: после return оно не нужно, функция уже закончилась.

function divide(a, b) {
  if (b === 0) {
    console.log("Делить на ноль нельзя");   // сообщили, но не вышли!
  }
  return a / b;                             // всё равно делим
}

console.log(divide(10, 0));   // → Infinity, а хотели остановиться

Читать подробнее: learn.javascript.ru — Функции, refactoring.guru — Рефакторинг

function getAccessMessage(age, hasTicket, isVip) {
  if (age >= 18) {
    if (hasTicket) {
      if (isVip) {
        return "Добро пожаловать в VIP-зал";
      } else {
        return "Добро пожаловать в зал";
      }
    } else {
      return "Купите билет";
    }
  } else {
    return "Только с 18 лет";
  }
}

console.log(getAccessMessage(20, true, true));
console.log(getAccessMessage(20, true, false));
console.log(getAccessMessage(20, false, true));
console.log(getAccessMessage(15, true, true));
console.log(getAccessMessage.toString().includes("else"));

Добро пожаловать в VIP-зал
Добро пожаловать в зал
Купите билет
Только с 18 лет
false

function printReceipt(prices) {
  let sum = 0;
  for (const price of prices) {
    sum += price;
  }
  let discount = 0;
  if (sum >= 100) {
    discount = sum * 0.1;
  }
  const total = sum - discount;
  console.log("Сумма: " + sum);
  console.log("Скидка: " + discount);
  console.log("Итого: " + total);
}

printReceipt([40, 70, 20]);
printReceipt([30, 20]);

console.log(calcSum([10, 20, 30]));
console.log(calcDiscount(200));
console.log(calcDiscount(50));

Сумма: 130
Скидка: 13
Итого: 117
Сумма: 50
Скидка: 0
Итого: 50
60
20
0

function divide(a, b) {
  if (b === 0) {
    console.log("Делить на ноль нельзя");
  }
  return a / b;
}

console.log(divide(10, 0));
console.log(divide(10, 2));

Делить на ноль нельзя
null
5

function getTicketPrice(age, isStudent, isWeekend) {
  let price;
  if (age < 0 || age > 120) {
    price = -1;
  } else {
    if (age < 7) {
      price = 0;
    } else {
      if (isStudent) {
        price = 2;
      } else {
        if (isWeekend) {
          price = 4;
        } else {
          price = 5;
        }
      }
    }
  }
  return price;
}

console.log(getTicketPrice(5, false, false));
console.log(getTicketPrice(20, true, false));
console.log(getTicketPrice(30, false, true));
console.log(getTicketPrice(30, false, false));
console.log(getTicketPrice(-3, false, false));
console.log(getTicketPrice(200, true, true));
console.log(getTicketPrice.toString().includes("else"));

0
2
4
5
-1
-1
false

03 DRY и магические числа

DRY — Don't Repeat Yourself, «не повторяйся». Скопировали кусок кода три раза — значит, при любой правке придётся найти и исправить все три копии. Одну забудете — получите баг, который проявляется «иногда». Решение то же, что в уроке про функции: одно место, где написано, и много мест, где вызвано.

console.log("Самбуса: " + 5 + " сомони");
console.log("Курутоб: " + 35 + " сомони");
console.log("Шакароб: " + 15 + " сомони");

function printPriceTag(name, price) {
  console.log(`${name}: ${price} сомони`);
}

const menu = [
  { name: "Самбуса", price: 5 },
  { name: "Курутоб", price: 35 },
  { name: "Шакароб", price: 15 },
];

for (const dish of menu) {
  printPriceTag(dish.name, dish.price);
}

Магические числа

Магическое число — число (или строка) в коде, смысл которого непонятен без объяснений. Что значит * 11? А >= 300? Через месяц не вспомните сами. Лекарство — именованная константа: вынести значение наверх файла и дать ему имя.

function deliveryCost(sum) {
  if (sum >= 300) return 0;
  return 25;
}

const FREE_DELIVERY_FROM = 300; // сомони
const DELIVERY_PRICE = 25;      // сомони

function deliveryCost(sum) {
  if (sum >= FREE_DELIVERY_FROM) return 0;
  return DELIVERY_PRICE;
}

• Константы пишем ЗАГЛАВНЫМИ_С_ПОДЧЁРКИВАНИЕМ и собираем в начале файла — так видно все «настройки» программы.
• Единицу измерения — в имя или комментарий: TIMEOUT_MS, FREE_DELIVERY_FROM // сомони.
• Нужно поменять курс или порог — меняете в одном месте.
• Не магия: 0, 1, -1, 2 в очевидных местах (i % 2, list.length - 1). Выносить их — перебор.
• Строки-статусы тоже магия: вместо "paid" в десяти местах заведите const STATUS_PAID = "paid" — опечатка в имени константы поймается сразу, в строке — никогда.

Читать подробнее: refactoring.guru — Замена магического числа константой

function priceInSomoni(usd) {
  return usd * 11;
}

function deliveryCost(sum) {
  if (sum >= 300) return 0;
  return 25;
}

console.log(priceInSomoni(10));
console.log(deliveryCost(100));
console.log(deliveryCost(300));
console.log(typeof USD_RATE, typeof FREE_DELIVERY_FROM, typeof DELIVERY_PRICE);

110
25
0
number number number

const menu = [
  { name: "Самбуса", price: 5 },
  { name: "Курутоб", price: 35 },
  { name: "Шакароб", price: 15 },
];

const samsaPrice = 5;
console.log("Самбуса: " + samsaPrice + " сомони, с НДС " + (samsaPrice * 1.1).toFixed(2));
const kurutobPrice = 35;
console.log("Курутоб: " + kurutobPrice + " сомони, с НДС " + (kurutobPrice * 1.1).toFixed(2));
const shakarobPrice = 15;
console.log("Шакароб: " + shakarobPrice + " сомони, с НДС " + (shakarobPrice * 1.1).toFixed(2));

console.log(printPriceTag.length, typeof VAT_RATE);

Самбуса: 5 сомони, с НДС 5.50
Курутоб: 35 сомони, с НДС 38.50
Шакароб: 15 сомони, с НДС 16.50
2 number

function studentPrice(price) {
  const result = price - price * 20 / 100;
  return Math.round(result);
}

function seniorPrice(price) {
  const result = price - price * 30 / 100;
  return Math.round(result);
}

function childPrice(price) {
  const result = price - price * 50 / 100;
  return Math.round(result);
}

console.log(studentPrice(55), seniorPrice(55), childPrice(55));
console.log(applyDiscount(200, 25));
console.log(typeof STUDENT_DISCOUNT, typeof SENIOR_DISCOUNT, typeof CHILD_DISCOUNT);

44 39 28
150
number number number

04 Логика отдельно от отображения. Комментарии

В каждой программе есть две разные работы: считать (логика: отфильтровать товары, посчитать средний балл) и показывать (отображение: собрать HTML, вывести в консоль). Когда они свалены в одну функцию, её нельзя проверить без браузера, нельзя использовать повторно и страшно менять: тронешь вёрстку — сломаешь математику.

Схема: три роли

1. Функция-расчёт (getAffordableDishes, calcStats): получает данные, возвращает данные. Не трогает DOM, не печатает, не меняет внешние переменные. Её легко проверить через console.log.
2. Функция-отображение (renderMenu, formatStats): получает готовые данные, строит строку или элементы. Ничего не считает.
3. «Склейка» (обработчик события, главная функция): вызывает первую, результат отдаёт второй.

function showStats(grades) {
  let sum = 0;
  for (const grade of grades) sum += grade;
  console.log("Средний балл: " + sum / grades.length);
}

showStats([90, 55, 72]);

function calcAverage(grades) {
  let sum = 0;
  for (const grade of grades) sum += grade;
  return sum / grades.length;
}

function formatAverage(average) {
  return "Средний балл: " + average;
}

console.log(formatAverage(calcAverage([90, 55, 72])));
console.log(calcAverage([100, 50]));  // расчёт легко проверить отдельно

В уроках про DOM и события вы делали render() — это именно оно. Правило тянется дальше: в React (уроки 22–24) компонент получает данные и отображает их, а расчёты живут отдельно.

Комментарии: объясняйте «почему», а не «что»

Что делает код, видно из самого кода — если имена хорошие. А вот почему он так написан, из кода не видно никак. Это и есть место для комментария: бизнес-правило, обходной путь, неочевидное ограничение.

// увеличиваем i на 1
i++;

// если цена больше 100
if (price > 100) { ... }

// return total * 0.9;
return total;

// касса не принимает монеты меньше
// 1 сомони, поэтому округляем вверх
const payment = Math.ceil(total);

// TODO(Мадина, до пятницы): заменить
// на запрос к API, когда он будет готов

• Закомментированный код — удалите. Он засоряет файл, а в Git (урок 19) вся история сохранена — вернуть можно в любой момент.
• Устаревший комментарий хуже, чем его отсутствие — он врёт. Меняете код — проверьте комментарий над ним.
• Хочется объяснить, что делает кусок кода? Сначала попробуйте вынести его в функцию с хорошим именем — имя станет «комментарием», который не устаревает.
• TODO — допустимо, если с автором и сроком. Забытые «потом исправлю» гниют годами.

Читать подробнее: learn.javascript.ru — Комментарии

/*
// 1
total = total + price; // прибавляем цену к итогу

// 2
const MAX_TRIES = 3; // после 3 неверных паролей блокируем вход — требование службы безопасности

// 3
// return total * 0.9;

// 4
users.sort(byName); // сортируем пользователей по имени

// 5
if (hour < 6) return "ночь"; // до 6 утра маршруты не ходят, поэтому тариф «ночной»

// 6
// TODO(Шахром, до пятницы): заменить на запрос к API

// 7
let x = 5; // x равно пяти

// 8
// Функция считает сумму
function calcTotal(prices) { ... }
*/

const noise = [/* номера */];
console.log(noise.join(", "));

1, 3, 4, 7, 8

function showStats(grades) {
  let sum = 0;
  let best = 0;
  let passed = 0;
  for (const grade of grades) {
    sum += grade;
    if (grade > best) best = grade;
    if (grade >= 56) passed++;
  }
  console.log("Средний балл: " + sum / grades.length);
  console.log("Лучший: " + best);
  console.log("Сдали: " + passed + " из " + grades.length);
}

showStats([90, 55, 72, 38, 85]);

console.log(JSON.stringify(calcStats([60, 40])));
console.log(typeof formatStats, typeof PASS_SCORE);

Средний балл: 68
Лучший: 90
Сдали: 3 из 5
{"average":50,"best":60,"passedCount":1}
function number

<h3>Меню до 30 сомони</h3>
<ul id="menu"></ul>

const dishes = [
  { name: "Самбуса", price: 5 },
  { name: "Курутоб", price: 35 },
  { name: "Шакароб", price: 15 },
  { name: "Оши палав", price: 30 },
];
const menu = document.getElementById("menu");

// всё в куче: и фильтр, и вёрстка
for (const dish of dishes) {
  if (dish.price <= 30) {
    const li = document.createElement("li");
    li.textContent = dish.name + " — " + dish.price + " сомони";
    menu.append(li);
  }
}

// ПРОВЕРКА — не меняйте
console.log(typeof getAffordableDishes, typeof renderMenu);
console.log(menu.children.length);
console.log(getAffordableDishes(dishes, 15).length);

function function
3
2

05 Рефакторинг: меняем форму, не поведение

Рефакторинг — это улучшение устройства кода без изменения того, что он делает. Для пользователя ничего не поменялось: те же кнопки, те же цифры. Для вас поменялось всё: код стал понятнее и дальше его легче развивать. Главное слово здесь — «без изменения»: если по пути вы нечаянно изменили поведение, это уже не рефакторинг, а новый баг.

Безопасный рабочий цикл

1. Зафиксируйте поведение. Прежде чем что-то менять, запустите код и запишите, что он выводит для нескольких входов — включая граничные (0, пусто, ровно порог). Это ваши «тесты».
2. Один маленький шаг: переименовали → запустили → вывод тот же. Вынесли константу → запустили → тот же. Не делайте десять правок подряд.
3. Порядок шагов от простого к сложному: имена → константы → удалить мусор и мёртвый код → ранний возврат → выделить функции → убрать повторы → разделить логику и вывод.
4. Сломалось — откатитесь к последнему рабочему состоянию. В Git это одна команда; поэтому после каждого удачного шага делаем коммит (урок 19), например rename vars in cart.js.
5. Две шляпы. Либо вы рефакторите, либо чините баг/добавляете функцию. Одновременно — нельзя. Нашли баг по пути — запишите и вернитесь к нему отдельным коммитом.

Мини-тесты в одну функцию

Для проверки рефакторинга не нужны специальные инструменты. Достаточно маленькой функции, которая сравнивает ответ с ожидаемым:

function check(name, actual, expected) {
  console.log(`${actual === expected ? "OK  " : "FAIL"} ${name}`);
}

const isAdult = age => age >= 18;

check("18 — взрослый", isAdult(18), true);
check("17 — не взрослый", isAdult(17), false);
check("0 — не взрослый", isAdult(0), false);

Единый чек-лист качества кода

Чтобы «чистый» не означало «как мне нравится», у нас общий чек-лист из 12 пунктов — полная печатная версия в конце урока. Пункты 1–8 про код, 9–12 про проект. Сейчас нужны первые восемь:

Читать подробнее: refactoring.guru — Что такое рефакторинг

/*
function calc(l) {
  let t = 0;
  console.log("calc вызвана");
  for (let i = 0; i < l.length; i++) {
    t = t + l[i].p * l[i].q;
  }
  if (t > 500) {
    t = t - t * 0.05;
  }
  return t;
}
*/

const violations = [/* номера пунктов */];
console.log(violations.join(", "));

1, 5, 8

/*
function showProfile(user) {
  const box = document.createElement("div");   // создаём div
  if (user) {
    if (user.name) {
      if (user.birthYear) {
        const age = 2026 - user.birthYear;
        box.textContent = user.name + ", возраст: " + age;
        document.body.append(box);
      }
    }
  }
}
*/

const violations = [/* номера пунктов */];
console.log(violations.join(", "));

4, 5, 6, 7

function f(a, c) {
  let r = 0;
  for (let i = 0; i < a.length; i++) {
    r += a[i].p * a[i].q;
  }
  if (c === "NAVRUZ") {
    r = r - r * 15 / 100;
  } else {
    if (c === "STUDENT") {
      r = r - r * 10 / 100;
    }
  }
  if (r < 300) {
    r = r + 25;
  }
  return Math.round(r);
}

const small = [{ price: 50, quantity: 2 }, { price: 120, quantity: 1 }];
const big = [{ price: 200, quantity: 3 }];

console.log(calcOrderTotal(small, ""));
console.log(calcOrderTotal(small, "NAVRUZ"));
console.log(calcOrderTotal(small, "STUDENT"));
console.log(calcOrderTotal(big, ""));
console.log(calcOrderTotal(big, "NAVRUZ"));
console.log(calcOrderTotal(big, "UNKNOWN"));
console.log(calcSubtotal(small));
console.log(typeof FREE_DELIVERY_FROM, typeof DELIVERY_PRICE, typeof PROMO_DISCOUNTS);
console.log(calcOrderTotal.toString().includes("else"));

245
212
223
600
510
600
220
number number object
false

const PASS_SCORE = 56;

function getGrade(score) {
  if (score > 86) return 5;
  if (score >= 71) return 4;
  if (score > PASS_SCORE) return 3;
  return 2;
}

function check(name, actual, expected) {
  console.log(`${actual === expected ? "OK  " : "FAIL"} ${name}`);
}

check("90 → 5", getGrade(90), 5);
check("86 → 5", getGrade(86), 5);
check("71 → 4", getGrade(71), 4);
check("56 → 3", getGrade(56), 3);
check("55 → 2", getGrade(55), 2);
check("0 → 2", getGrade(0), 2);

OK 90 → 5
OK 86 → 5
OK 71 → 4
OK 56 → 3
OK 55 → 2
OK 0 → 2

function report(students) {
  const names = [];
  for (let i = 0; i < students.length; i++) {
    if (students[i].visited >= 8) {
      names.push(students[i].name.toUpperCase());
    }
  }
  let total = 0;
  for (let i = 0; i < students.length; i++) {
    total = total + students[i].visited;
  }
  const avg = total / students.length;
  return names.join(", ") + " | среднее: " + avg;
}

const group = [
  { name: "Рустам", visited: 10 },
  { name: "Зарина", visited: 7 },
  { name: "Нилуфар", visited: 8 },
  { name: "Далер", visited: 4 },
];

console.log(report(group));
console.log(report([{ name: "Фарход", visited: 9 }]));
console.log(report([{ name: "Анора", visited: 3 }]));
console.log(typeof MIN_VISITS_FOR_EXCELLENT);
console.log([report, getExcellentNames, calcAverageVisits].some(fn => fn.toString().includes("for (")));

РУСТАМ, НИЛУФАР | среднее: 7.25
ФАРХОД | среднее: 9
| среднее: 3
number
false

06 Сборка проекта: npm run build

В уроке 17 вы создали проект на Vite и запускали npm run dev. Это режим разработки: Vite отдаёт файлы «как есть», мгновенно обновляет страницу и добавляет подсказки для разработчика. Для настоящего сайта такой режим не годится — код не сжат, лишний, а сервер работает только у вас на ноутбуке. Для публикации нужна сборка (build).

Что делает сборка

1. Собирает все ваши модули (import/export) в несколько файлов.
2. Минифицирует: убирает пробелы, комментарии, сокращает имена переменных. Файл становится в несколько раз меньше — страница грузится быстрее.
3. Выкидывает неиспользуемое (tree shaking): если вы подключили библиотеку, но пользуетесь одной функцией, лишнее не попадёт на сайт.
4. Добавляет хеш в имена файлов (index-Ab12Cd34.js): изменили код — имя поменялось, и браузер скачает свежую версию, а не возьмёт старую из кэша.
5. Кладёт результат в папку dist/ — её и отдают на хостинг.

npm install        # если ещё не ставили зависимости
npm run build      # запускает «vite build», результат — в папке dist/
npm run preview    # локальный сервер для готовой сборки: http://localhost:4173

Что лежит в dist/ после сборки небольшого проекта:

dist/
├── index.html                  ← точка входа, ссылки на файлы из assets/
├── favicon.svg                 ← всё из папки public/ копируется как есть
└── assets/
    ├── index-Ab12Cd34.js       ← весь ваш JavaScript, сжатый
    └── index-Ef56Gh78.css      ← весь CSS, сжатый

Читать подробнее: vite.dev — Сборка для продакшена

// A. Папку dist нужно коммитить в репозиторий.
// B. В dist лежат минифицированные файлы JS и CSS.
// C. npm run preview показывает локально собранную версию сайта.
// D. Хеш в имени файла (index-Ab12Cd34.js) нужен, чтобы браузер брал свежую версию после обновления.
// E. Если в режиме dev всё работает, то и сборка точно пройдёт.
// F. dist/index.html надёжно открывается двойным кликом из папки.

const correct = [/* "A", "B" ... */];
console.log(correct.join(", "));

B, C, D

const files = ["src/Header.js", "src/footer.js", "src/utils/format.js", "public/Logo.png"];
const imports = ["src/header.js", "src/footer.js", "src/utils/Format.js", "public/Logo.png", "src/missing.js"];

function findCaseMismatches(files, imports) {
  // ваш код
}

console.log(JSON.stringify(findCaseMismatches(files, imports)));

["src/header.js","src/utils/Format.js"]

07 Переменные окружения и секреты

Адрес API на вашем компьютере — один, в «боевой» версии сайта — другой. Размер страницы, название приложения, ключ к сервису погоды — всё это настройки, которые не нужно зашивать в код. Их выносят в переменные окружения — отдельный файл, который читается при запуске и сборке.

Как это работает в Vite

Создайте в корне проекта (рядом с package.json) файл .env:

VITE_API_URL=https://dummyjson.com
VITE_PAGE_SIZE=12
VITE_APP_NAME=Лавка MakeFirstStep
DB_PASSWORD=не-попадёт-в-браузер

В коде читаем через import.meta.env:

export const API_URL = import.meta.env.VITE_API_URL;
export const PAGE_SIZE = Number(import.meta.env.VITE_PAGE_SIZE);   // все значения — строки!

console.log(import.meta.env.DB_PASSWORD);   // undefined: без префикса VITE_ переменная скрыта
console.log(import.meta.env.MODE);          // "development" при dev, "production" при build
console.log(import.meta.env.DEV);           // true только в режиме разработки

• Префикс VITE_ — единственные переменные, которые Vite отдаёт в браузерный код. Остальные остаются невидимыми.
• Значения — всегда строки. VITE_PAGE_SIZE=12 даёт "12", а VITE_DEBUG=false — строку "false", которая в условии считается истиной! Преобразуйте сами: Number(...), value === "true".
• После правки .env перезапустите npm run dev — переменные читаются при старте.
• Встроенные: import.meta.env.MODE, DEV, PROD, BASE_URL.

Какие бывают файлы .env

Файл «своего режима» перекрывает общий .env. А переменные, уже заданные в системе или на хостинге, перекрывают всё.

# macOS / Linux
grep -r "dummyjson" dist/assets

# Windows (PowerShell)
Select-String -Path dist\assets\*.js -Pattern "dummyjson"

Что делать, чтобы не было утечки

1. Личные файлы в .gitignore: строки .env.local и *.local. Проверьте командой git status — файла в списке быть не должно.
2. Заведите .env.example — копию .env с пустыми значениями. Он идёт в Git и подсказывает напарнику, какие переменные нужны: VITE_API_URL=
3. В README напишите: «скопируйте .env.example в .env и заполните».
4. На хостинге значения вводят в панели (Vercel — Settings → Environment Variables, GitHub — Settings → Secrets and variables), а не в репозитории.
5. Если ключ случайно попал в коммит — считайте его украденным: немедленно отзовите и выпустите новый в сервисе. Удалить коммит недостаточно: история Git и боты, сканирующие GitHub, уже успели его забрать.

node_modules
dist
.env.local
*.local

Читать подробнее: vite.dev — Переменные окружения и режимы

const env = {
  VITE_API_URL: "https://api.example.com",
  VITE_APP_NAME: "Мой магазин",
  DB_PASSWORD: "x1",
  SECRET_KEY: "y2",
  MODE: "production",
};

function getPublicEnv(env) {
  // ваш код
}

console.log(JSON.stringify(getPublicEnv(env)));

{"VITE_API_URL":"https://api.example.com","VITE_APP_NAME":"Мой магазин"}

const text = `
# адрес API
VITE_API_URL=https://dummyjson.com

VITE_APP_NAME="Лавка MakeFirstStep"
VITE_PAGE_SIZE = 12
VITE_FILTER=sort=asc
`;

function parseEnv(text) {
  // ваш код
}

console.log(JSON.stringify(parseEnv(text)));

{"VITE_API_URL":"https://dummyjson.com","VITE_APP_NAME":"Лавка MakeFirstStep","VITE_PAGE_SIZE":"12","VITE_FILTER":"sort=asc"}

console.log(Boolean("false"));

function readFlag(value) {
  // ваш код
}

function readNumber(value, fallback) {
  // ваш код
}

console.log(readFlag("true"), readFlag("false"), readFlag(undefined));
console.log(readNumber("12", 6), readNumber(undefined, 6), readNumber("abc", 6), readNumber("", 6));

true
true false false
12 6 6 6

const lines = [
  'const API_URL = import.meta.env.VITE_API_URL;',
  'const apiKey = "sk_live_51Hh83jKd92hs";',
  'fetch(`${API_URL}/products`);',
  "const password = 'qwerty12345';",
  'const token = import.meta.env.VITE_TOKEN;',
  'const secret = "";',
  'const authToken = "Bearer eyJhbGciOiJI";',
  'const title = "My secret garden";',
];

function findSecrets(lines) {
  // ваш код
}

console.log(findSecrets(lines).join(", "));

2, 4, 7

08 Деплой: Vercel и GitHub Pages

Деплой — публикация сайта в интернете, чтобы его открывал любой человек по ссылке. Пока проект лежит у вас на ноутбуке, это упражнение. Когда у него есть ссылка — это портфолио. Мы разберём два бесплатных способа для статических сайтов (а ваши проекты на Vite — именно такие).

Перед деплоем: короткий чек-лист

• npm run build проходит без ошибок, npm run preview показывает рабочий сайт.
• Проект лежит в репозитории на GitHub (урок 19), ветка с рабочим кодом отправлена: git push.
• В репозитории нет .env.local и секретов; есть .env.example.
• Регистр имён файлов и импортов совпадает.

Способ 1. Vercel

Vercel сам находит Vite, сам собирает проект и после каждого git push обновляет сайт. Для новичка — самый короткий путь.

1. Откройте vercel.com и войдите через кнопку Continue with GitHub (тариф Hobby бесплатный для личных проектов).
2. Нажмите Add New… → Project. Vercel покажет ваши репозитории: найдите нужный и нажмите Import (при первом разе разрешите доступ к репозиториям).
3. На экране настройки проверьте: Framework Preset — Vite (определяется сам), Build Command — npm run build, Output Directory — dist.
4. Раскройте Environment Variables и добавьте переменные из вашего .env (например, VITE_API_URL) — по одной: имя и значение. Файл .env Vercel из репозитория не читает.
5. Нажмите Deploy. Через минуту появится адрес вида название-проекта.vercel.app. Это ваша живая ссылка.
6. Дальше: каждый git push в основную ветку обновляет сайт, а каждая другая ветка получает отдельный адрес-превью — удобно показывать правки до слияния.

git add .
git commit -m "fix price format"
git push
# Vercel сам запустит npm run build и обновит сайт

Способ 2. GitHub Pages

Бесплатный хостинг прямо в репозитории (для публичных репозиториев). Адрес — https://ваш-логин.github.io/имя-репозитория/. Обратите внимание на последнюю часть: сайт живёт не в корне, а в подпапке. Поэтому Vite нужно сказать, откуда брать файлы — настройка base.

import { defineConfig } from "vite";

export default defineConfig({
  base: "/my-shop/",   // ← точное имя репозитория между слэшами
});

Без base страница загрузится пустой: в консоли будет 404 на /assets/index-….js, потому что браузер ищет файл в корне github.io, а не в вашем репозитории. В коде ссылки на файлы из public/ строим через import.meta.env.BASE_URL, а не пишем "/logo.png" руками.

1. Задайте base в vite.config.js, выполните npm run build и npm run preview (адрес превью будет включать /my-shop/).
2. Отправьте код на GitHub: git push.
3. В репозитории: Settings → Pages → в поле Source выберите GitHub Actions.
4. Создайте файл .github/workflows/deploy.yml (ниже), закоммитьте и отправьте.
5. Вкладка Actions: дождитесь зелёной галочки. Адрес сайта появится в Settings → Pages.
6. Нужны переменные? Settings → Secrets and variables → Actions → Variables, а в workflow передайте их шагу сборки (см. env ниже).

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: pages
  cancel-in-progress: true

jobs:
  deploy:
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - uses: actions/checkout@v7
      - uses: actions/setup-node@v7
        with:
          node-version: lts/*
          cache: npm
      - run: npm ci
      - run: npm run build
        env:
          VITE_API_URL: ${{ vars.VITE_API_URL }}
      - uses: actions/configure-pages@v6
      - uses: actions/upload-pages-artifact@v5
        with:
          path: ./dist
      - id: deployment
        uses: actions/deploy-pages@v5

Номера версий действий (@v7, @v5…) со временем меняются — перед копированием сверьтесь с актуальным примером на vite.dev/guide/static-deploy. Это нормально: инструкции по деплою всегда стоит открывать свежие, а не доверять памяти (и памяти ИИ).

Что выбрать

Для курса: первый проект — на Vercel, второй — на GitHub Pages. Так вы попробуете оба подхода, а в портфолио будет две живые ссылки.

Читать подробнее: vite.dev — Деплой статического сайта, Vercel — Vite

function getBase(repoName) {
  // ваш код
}

function assetUrl(base, path) {
  // ваш код
}

console.log(getBase("my-shop"));
console.log(getBase("komilovsg.github.io"));
console.log(assetUrl("/my-shop/", "img/logo.png"));
console.log(assetUrl("/my-shop/", "/img/logo.png"));
console.log(assetUrl("/", "/favicon.svg"));

/my-shop/
/
/my-shop/img/logo.png
/my-shop/img/logo.png
/favicon.svg

// Ситуации:
// 1. Локально картинка logo.png видна, на Vercel — нет. В коде написано "./Logo.png".
// 2. Сайт открылся, но запросы идут на адрес "undefined/products".
// 3. GitHub Pages: страница пустая, в консоли 404 на /assets/index-xxx.js.
// 4. Переменную добавили в панель Vercel, но сайт показывает старое значение.
//
// Причины:
// A. Не задан base в vite.config.js.
// B. Не совпадает регистр букв в имени файла.
// C. Переменная окружения не добавлена на хостинг.
// D. После добавления переменной не сделали Redeploy.

const answers = [/* "?", "?", "?", "?" */];
console.log(answers.join(", "));

B, C, A, D

09 ИИ-блок: ревью кода и README

Сегодня ИИ работает в двух ролях: ревьюер (читает ваш код и замечает проблемы) и помощник по текстам (README и описание проекта для портфолио). В обоих случаях главный навык не «получить ответ», а отделить хорошее от плохого: ИИ уверенно советует и полезное, и вредное.

Ревью по чек-листу: плохо и хорошо

Формула промпта курса: контекст → задача → ограничения → формат ответа → проверка.

Почему второй промпт работает лучше: ИИ знает ваш уровень, получил конкретный список критериев, не может «улучшить» то, о чём не просили, и ответ вы можете сразу сверить со своим списком.

Фильтр советов: принять или отклонить

Каждый совет ИИ проходит через пять вопросов. Достаточно одного «нет» — и совет не принимаем (или откладываем):

/*
function calcTotal(items, promo) {
  let total = 0;
  for (const item of items) {
    total += item.price * item.qty;
  }
  if (promo === "NAVRUZ") {
    total = total * 0.85;
  }
  if (total > 300) {
    total = total + 0;
  } else {
    total = total + 25;
  }
  return total;
}
*/

// Советы ИИ:
// 1. Числа 0.85, 300 и 25 вынесите в именованные константы.
// 2. Замените цикл for...of на reduce — reduce всегда лучше циклов.
// 3. Строка «total = total + 0» ничего не делает — удалите её.
// 4. Добавьте комментарий над каждой строкой функции.
// 5. Переименуйте total в finalTotalAmountWithPromoAndDeliveryCalculated.
// 6. Расчёт по промокоду вынесите в отдельную функцию applyPromo.
// 7. Оберните всё тело функции в try/catch на случай ошибки.
// 8. Подключите lodash, чтобы суммировать цены.

const verdicts = [/* "A" или "R" для советов 1–8 */];
console.log(verdicts.join(","));

A,R,A,R,R,A,R,R

/*
function getCheapProducts(products) {
  const result = [];
  for (let i = 0; i < products.length; i++) {
    if (products[i].price < 20) {
      result.push(products[i]);
    }
  }
  return result;
}
*/

// Советы ИИ:
// 1. Замените цикл на products.filter(...), а число 20 вынесите в константу MAX_PRICE.
// 2. Используйте встроенный метод products.filterByPrice(20) — он делает то же самое быстрее.
// 3. Замените «<» на «<=»: «до 20 сомони» логичнее включать границу.
// 4. Загружайте цены с сервера, вписав ключ прямо в функцию: const KEY = "sk_live_...".
// 5. Переименуйте result в cheapProducts.
// 6. Перед возвратом отсортируйте товары по цене по возрастанию.
// 7. Добавьте TypeScript и Redux — так функция станет надёжнее.

const verdicts = [/* "A", "T" или "R" для советов 1–7 */];
console.log(verdicts.join(","));

A,R,T,R,A,T,R

function getShipping(sum, isMember) {
  if (isMember) return 0;
  if (sum >= 300) return 0;
  return 25;
}

function getShippingAI(sum, isMember) {
  return isMember || sum > 300 ? 0 : 25;
}

const inputs = [[100, false], [300, false], [300, true], [500, false], [0, true], [299.99, false]];

// ваш код: цикл по inputs и сравнение

300 false: 0 → 25

README и текст для портфолио с ИИ

README — первое, что видит рекрутёр на странице репозитория. Хорошо, когда он отвечает на четыре вопроса: что это, на чём сделано, как запустить, где посмотреть. ИИ быстро соберёт каркас, но есть правило: ИИ получает только факты, которые вы ему дали. Иначе он дорисует функции, которых нет.

Что проверять в тексте ИИ

• Выдуманные функции и технологии. «Авторизация», «база данных», «покрытие тестами 95%» — если этого нет в проекте, вычёркиваем.
• Команды. Выполните каждую из README на чистой папке: npm install, npm run dev. Работает — оставляем.
• Скриншот и ссылка на демо — ставите вы сами, ИИ их не знает.
• Шаблонные обороты («данный проект представляет собой…», «современное решение») — перепишите своими словами. Рекрутёр слышит голос человека, а не нейросети.
• Честность. Что сделали сами, а что с помощью ИИ — можно сказать прямо. Никто не ждёт, что вы писали без помощников; ждут, что вы понимаете код.

// Черновик README от ИИ:
// 1. Поиск по названию товара и постраничный вывод.
// 2. Вход через аккаунт Google.
// 3. Запуск: npm install, затем npm run dev.
// 4. Данные хранятся в базе PostgreSQL.
// 5. Адаптивная вёрстка: сайт удобно открывать на телефоне.
// 6. Покрытие автотестами — 95%.
// 7. Данные о товарах берутся с dummyjson.com.

const invented = [/* номера */];
console.log(invented.join(", "));

2, 4, 6

10 Практика на уроке: ревью соседа и деплой группы

Вторая половина урока — командная: вы проверяете и улучшаете проект соседа, а потом вся группа выкладывает свои проекты в интернет. Это ровно то, что происходит в реальной команде: код-ревью → правки → релиз.

Часть A. Ревью проекта соседа (в парах)

1. Обменяйтесь ссылками на репозитории. Клонируйте проект соседа: git clone ссылка, затем npm install и npm run dev. Убедитесь, что он запускается.
2. Откройте печатный чек-лист (раздел 11). Пройдите по 12 пунктам и поставьте отметки в колонке «До».
3. Запишите 5–8 замечаний в одном формате: файл:строка — пункт № — что не так и почему — как исправить. Пример: src/cart.js:14 — пункт 5 — число 300 без имени, непонятно, что это порог доставки — вынести в FREE_DELIVERY_FROM.
4. Замечания должны быть вежливыми и конкретными: «функция calc называется непонятно» — плохо; «в calc переименовать t в total, чтобы было видно, что суммируем» — хорошо. Критикуем код, а не человека.
5. Обсудите замечания голосом: автор вправе не согласиться, если объяснит, почему.

Часть B. Рефакторинг по замечаниям

1. Автор создаёт ветку: git switch -c refactor/clean-code.
2. Идёт по замечаниям по одному. После каждого: запуск → всё работает так же → git commit -m "extract delivery constants" (сообщение — по правилам урока 19).
3. Проверка поведения: открыть приложение и пройти те же сценарии, что до правок (поиск, пагинация, ошибка сети). Что-то поменялось — откат: git restore ..
4. В конце: npm run build без ошибок. Затем git push ветки.
5. Повторно пройдите чек-лист, заполните колонку «После». Цель — не меньше 10 из 12.

Часть C. Деплой всех проектов группы

1. Проект 1 → Vercel по шагам из раздела 08. Время цели — 10 минут. Не получилось? Читайте лог сборки: ошибка почти всегда указана в последних строках.
2. Проект 2 → GitHub Pages: base, workflow, Settings → Pages. Те, кто закончил раньше, помогают соседям по очереди — объяснять, а не нажимать за другого.
3. Проверка ссылки: откройте в режиме инкогнито и на телефоне, в DevTools → Console не должно быть красных ошибок, в Network — ни одного 404.
4. Все ссылки вписываются в общую таблицу группы (формат: имя, проект, ссылка на сайт, ссылка на репозиторий).

Часть D. README с ИИ

1. Подготовьте факты о проекте: что делает, стек, команды запуска, ссылка на демо.
2. Попросите ИИ собрать README по промпту из раздела 09.
3. Проверьте по списку «Что проверять»: вычеркните выдумки, запустите команды, добавьте скриншот и ссылку, перепишите шаблонные фразы.
4. Закоммитьте README.md в корень и отправьте.

11 Чек-лист качества кода (печатная версия)

Один чек-лист на всю группу: по нему вы проверяете свои проекты, проекты соседей и (позже) финальный проект. Распечатайте страницу (Ctrl + P на Windows, Cmd + P на macOS) — панель и подсказки при печати скроются, а таблица останется. Либо сохраните её в PDF.

Проект: ____________________

Автор: ____________________

Ревьюер: ____________________

Дата: ______________

Итого: до рефакторинга ____ / 12, после ____ / 12.

Три главных замечания ревьюера:

1. ______________________________

2. ______________________________

3. ______________________________

12 Домашнее задание

Задание: отрефакторить мини-проект 2, задеплоить два проекта, оформить README и прислать ссылки. Результат урока — заполненный чек-лист качества кода и живые ссылки на проекты.

1. Оцените до. Пройдите мини-проект 2 по чек-листу из раздела 11 до любых правок. Запишите результат (X из 12) и список нарушений.
2. Отрефакторьте. Создайте ветку refactor/clean-code. Не меньше пяти осмысленных коммитов — каждый про одну правку («rename cart variables», «extract delivery constants», «split render from calc»). Поведение приложения не меняется.
3. Оцените после. Повторите чек-лист. Цель — не меньше 10 из 12. Слейте ветку в основную обычным способом (через PR, как в уроке 19).
4. Задеплойте два проекта. Мини-проект 2 — на Vercel; ещё один проект (мини-проект 1 или любой другой) — на GitHub Pages. Обе ссылки должны открываться без ошибок в консоли.
5. Секреты и окружение. В обоих репозиториях есть .env.example, нет настоящих ключей, переменные (если есть) заданы на хостинге.
6. README. В каждом репозитории: что это, стек, как запустить, скриншот, ссылка на демо, «что дальше». Черновик можно сделать с ИИ, но переписать своими словами и проверить все команды.
7. Текст для портфолио. 3–4 предложения о мини-проекте 2: задача, что сделали вы лично, стек, ссылка.

Что сдавать

• Ссылки на два репозитория и две живые ссылки на сайты.
• Заполненный чек-лист (колонки «До» и «После») со счётом.
• Журнал рефакторинга: таблица минимум из пяти строк — «пункт чек-листа → что изменили → название коммита».
• Текст для портфолио (в README или в отдельном файле).

Как оцениваем (0–10)