Для чего используется заглавная буква в нейминге?

Заглавные буквы в нейминге (Naming Conventions)

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

Основные соглашения о нейминге

1. PascalCase (ПаскальКейс) - Заглавная буква в начале

Использование:

• Классы
• Компоненты (React, Vue, Angular)
• Интерфейсы (TypeScript)
• Конструкторы

// ПРАВИЛЬНО - PascalCase для классов
class UserProfile {
  constructor(name) {
    this.name = name;
  }
}

// ПЛОХО - строчная буква
class userProfile {
  constructor(name) {
    this.name = name;
  }
}

// React компоненты - ОБЯЗАТЕЛЬНО PascalCase
function UserCard() {
  return <div>User Card</div>;
}

// ПЛОХО - будет ошибка
function userCard() {
  return <div>User Card</div>;
}

// TypeScript интерфейсы
interface IUserData {
  id: number;
  name: string;
  email: string;
}

type TUserStatus = 'active' | 'inactive' | 'banned';

Почему важно:

• Визуально показывает, что это класс или компонент
• React требует PascalCase для компонентов (иначе парсит как HTML тег)
• Помогает отличить классы от функций

2. camelCase (кэмелКейс) - Строчная в начале

Использование:

• Переменные
• Функции
• Методы
• Свойства объектов

// ПРАВИЛЬНО - camelCase для переменных
const userAge = 25;
const maxRetries = 3;
let isLoading = false;
let firstName = 'John';

// ПЛОХО - PascalCase для переменной
const UserAge = 25;  // Выглядит как класс
const MaxRetries = 3;

// ПРАВИЛЬНО - camelCase для функций
function getUserData() {
  return { name: 'John', age: 30 };
}

const calculateTotal = (items) => {
  return items.reduce((sum, item) => sum + item.price, 0);
};

// ПРАВИЛЬНО - camelCase для методов
const user = {
  name: 'John',
  getFullName() {
    return this.name;
  },
  setName(newName) {
    this.name = newName;
  }
};

3. UPPER_SNAKE_CASE (ВЕРХНИЙ_ПОДЧЕРКИВАТЕЛЬ) - Все заглавные

Использование:

• Константы
• Финальные значения (которые не меняются)
• Конфигурационные значения

// ПРАВИЛЬНО - константы
const MAX_USERS = 100;
const DEFAULT_TIMEOUT = 5000;
const API_BASE_URL = 'https://api.example.com';
const COLORS = {
  PRIMARY: '#007bff',
  SECONDARY: '#6c757d',
  SUCCESS: '#28a745'
};

// ПЛОХО - переменная константой
const maxUsers = 100;  // Выглядит как переменная
const defaultTimeout = 5000;

// Environment переменные
const DATABASE_URL = process.env.DATABASE_URL;
const JWT_SECRET = process.env.JWT_SECRET;
const NODE_ENV = process.env.NODE_ENV;

4. snake_case (подчеркиватель) - Строчные буквы

Использование:

• Имена файлов (в Python)
• URL пути
• Некоторые конфиги
• CSS селекторы (не рекомендуется, лучше kebab-case)

// Файловая система (Python)
// my_module.py
// user_service.py
// get_user_data.py

// Не рекомендуется в JavaScript
const user_name = 'John'; // Выглядит неестественно для JS
const user_age = 30;

5. kebab-case (дефис) - С дефисами

Использование:

• CSS классы
• HTML атрибуты
• URL пути
• Имена файлов фронтенда

/* CSS классы - kebab-case */
.user-profile { }
.card-header { }
.btn-primary { }
.error-message { }

<!-- HTML атрибуты -->
<div class="user-card" data-user-id="123">
  <h2 class="user-name">John Doe</h2>
</div>

// Имена файлов
// user-profile.tsx
// auth-service.ts
// button-component.tsx

// URL пути
fetch('/api/user-profile')
fetch('/api/auth/logout')

Практический пример: Правильный нейминг в React проекте

// ✅ ПРАВИЛЬНО

// Компонент - PascalCase
function UserProfile({ userId }) {
  // Переменные - camelCase
  const [userData, setUserData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  
  // Константы - UPPER_SNAKE_CASE
  const MAX_NAME_LENGTH = 50;
  const API_TIMEOUT = 5000;
  
  // Функции - camelCase
  const fetchUserData = async () => {
    setIsLoading(true);
    try {
      const response = await fetch(`/api/users/${userId}`);
      const data = await response.json();
      setUserData(data);
    } catch (error) {
      console.error('Error:', error);
    } finally {
      setIsLoading(false);
    }
  };
  
  // CSS классы - kebab-case
  return (
    <div className="user-profile">
      <h2 className="user-name">{userData?.name}</h2>
      <div className="user-email">{userData?.email}</div>
    </div>
  );
}

// Экспорт компонента
export default UserProfile;

// ❌ НЕПРАВИЛЬНО
// class userProfile { }        // Неправильный класс
// const UserAge = 25;          // Выглядит как класс
// function GetUserData() { }    // PascalCase для функции
// const max_name = 50;         // snake_case переменная

Почему заглавные буквы важны

1. Разделение ответственности:

// С первого взгляда понятно:
class User { }              // Это класс - можно создавать экземпляры
const user = new User();    // Это переменная экземпляра
function getName() { }      // Это функция
const MAX_USERS = 100;      // Это константа

2. React требование:

// РАБОТАЕТ - PascalCase
function MyComponent() {
  return <div>Hello</div>;
}

// НЕ РАБОТАЕТ - camelCase
function myComponent() {
  return <div>Hello</div>;
}

// React парсит как:
// <MyComponent /> -> компонент (правильно)
// <myComponent /> -> HTML тег (ошибка)

3. Читаемость кода:

// Ясно видно, какой тип значения:
const userList = [];           // Массив/переменная
const UserService = {};        // Класс или сервис
const getUser = async () => {}; // Функция
const API_KEY = 'abc123';      // Константа

Соглашения в разных технологиях

JavaScript/TypeScript:

• PascalCase: Классы, компоненты, интерфейсы
• camelCase: Переменные, функции, методы
• UPPER_SNAKE_CASE: Константы
• kebab-case: CSS, HTML, файлы

Python:

• PascalCase: Классы
• snake_case: Функции, переменные, методы
• UPPER_SNAKE_CASE: Константы

CSS/HTML:

• kebab-case: Классы, IDs, атрибуты
• UPPER_SNAKE_CASE: CSS переменные (иногда)

Инструменты для проверки

// ESLint конфигурация для соблюдения стандартов
{
  "rules": {
    "camelcase": ["error", {
      "properties": "always",
      "ignoreDestructuring": false
    }],
    "no-unused-vars": "error",
    "prefer-const": "error"
  }
}

Итого: Заглавные буквы в нейминге — это не просто косметика кода. Это конвенция, которая:

1. Делает код более читаемым
2. Помогает быстро понять тип переменной
3. Необходима для корректной работы (React требует PascalCase)
4. Упрощает командную разработку
5. Делает код более профессиональным

Соблюдение правильного нейминга — это признак опытного разработчика.