Как ускорить работу фронтендера с помощью ИИ

Фронтенд-разработка включает повторяющиеся задачи, отладку и документацию. Агент может подготовить код, тесты или документацию, но результат нужно проверить. В статье разберём пять типовых задач и то, что разработчику стоит проверить перед принятием изменения.

1. Генерация шаблонного кода и компонентов

Фронтендеры часто создают повторяющиеся элементы: карточки товаров, формы, модальные окна. Написание такого кода вручную занимает часы, особенно если нужно адаптировать компоненты под дизайн-систему вроде MUI.

Как помогает ИИ: AI-ассистенты, такие как Cursor или GitHub Copilot, генерируют готовые компоненты по описанию задачи. Например, вы можете попросить: «Создай React-компонент карточки товара с названием, ценой и кнопкой». ИИ предложит код компонента. Перед использованием проверьте его логику, доступность и соответствие требованиям проекта.

Пример кода:

<script>
function ProductCard({ name, price }) {
  return (
    <div className="product-card">
      <h3>{name}</h3>
      <p>Цена: {price} ₽</p>
      <button>Добавить в корзину</button>
    </div>
  );
}
</script>

<style>
.product-card {
  border: 1px solid #ddd;
  padding: 16px;
  border-radius: 8px;
  max-width: 300px;
}
</style>

2. Автоматизация написания тестов

Тестирование — неотъемлемая часть разработки, но написание unit-тестов для компонентов или логики (например, корзины интернет-магазина) может быть утомительным. Краевые случаи и сценарии часто упускаются из виду.

Как помогает ИИ: AI-ассистенты вроде Cursor могут генерировать тесты на основе описания функциональности или даже анализируя существующий код. Например, для функции расчёта итоговой суммы корзины ИИ предложит тесты, включая граничные случаи, такие как пустая корзина или отрицательные значения.

Пример кода:

import { calculateTotal } from './cart';

describe('calculateTotal', () => {
  it('возвращает 0 для пустой корзины', () => {
    expect(calculateTotal([])).toBe(0);
  });
  it('считает сумму для корзины с товарами', () => {
    const items = [{ price: 100, quantity: 2 }, { price: 50, quantity: 1 }];
    expect(calculateTotal(items)).toBe(250);
  });
});

3. Рефакторинг и улучшение кода

Код, написанный в спешке, часто требует рефакторинга: устранения дублирования, повышения читаемости или оптимизации производительности. Это особенно актуально для больших проектов, где кодовая база разрастается.

Как помогает ИИ: ИИ может анализировать код и предлагать улучшения: заменять громоздкие конструкции, добавлять типизацию (например, TypeScript) или оптимизировать производительность. Например, вы можете попросить: «Упростить эту функцию для работы с корзиной».

Пример кода до и после:

До:

function addToCart(cart, item) {
  let newCart = [];
  for (let i = 0; i < cart.length; i++) {
    newCart.push(cart[i]);
  }
  newCart.push(item);
  return newCart;
}

После (с помощью ИИ):

function addToCart(cart, item) {
  return [...cart, item];
}

4. Документирование кода

Документация — больная тема для многих разработчиков. Описывать функции, компоненты или API вручную долго и скучно, но без этого командная работа страдает.

Как помогает ИИ: AI-ассистенты автоматически генерируют комментарии, описания функций и даже пользовательскую документацию на основе кода или запроса. Например, для функции корзины ИИ может создать JSDoc или README.

Пример документации:

/**
 * Добавляет товар в корзину и возвращает обновлённую корзину.
 * @param {Array} cart - Текущая корзина с товарами.
 * @param {Object} item - Товар для добавления.
 * @returns {Array} Обновлённая корзина.
 */
function addToCart(cart, item) {
  return [...cart, item];
}

5. Интеграция сторонних API

Подключение внешних API, таких как геокодирование или платежные системы, требует изучения документации и написания boilerplate-кода. Это может быть времязатратно, особенно если API новый для разработчика.

Как помогает ИИ: AI-ассистенты, такие как Cursor, анализируют документацию API и генерируют код для интеграции, обработки ответов и ошибок. Например, вы можете попросить: «Подключи API геокодирования к проекту».

Пример кода:

async function getCoordinates(address) {
  const response = await fetch(`https://api.example.com/geocode?address=${encodeURIComponent(address)}`);
  if (!response.ok) throw new Error('Ошибка геокодирования');
  const data = await response.json();
  return data.coordinates;
}

Работайте с агентами инженерно

Поручать агенту компоненты и тесты полезно, если вы можете проверить результат. Уже понимаете код? Посмотрите актуальную программу «Разработка с AI-агентами: инженерный подход». На курсе вы работаете с агентом над интернет-магазином.

Заключение

AI-ассистенты могут помочь с кодом, тестами, документацией и интеграциями. Решение о принятии изменения остаётся за разработчиком: проверьте требования, поведение кода и результаты тестов.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.