การตั้งชื่อสำหรับตัวแปรและโฟลเดอร์ในโปรเจกต์มีความสำคัญมากในการรักษาความอ่านง่ายและความเป็นระเบียบของโค้ด ต่อไปนี้คือลักษณะและกฎทั่วไปในการตั้งชื่อ:

การตั้งชื่อตัวแปร

1. ใช้ camelCase: สำหรับตัวแปร, ฟังก์ชัน, และชื่อของ props หรือ state variables เช่น:

   • userName
   • isLoggedIn
   • handleClick

2. ตั้งชื่อให้ชัดเจน: ชื่อของตัวแปรควรสื่อความหมายให้ชัดเจนเกี่ยวกับหน้าที่หรือข้อมูลที่มันเก็บ เช่น:

   • cartItems (สำหรับรายการในรถเข็น)
   • authToken (สำหรับโทเคนการยืนยันตัวตน)

3. ใช้ชื่อที่สื่อถึงประเภทข้อมูล: หากมีหลายประเภทข้อมูลในตัวแปรเดียวกัน เช่น:

   • userAge (ถ้ามีตัวแปรหลายประเภทเกี่ยวกับผู้ใช้)
   • productPrice

4. หลีกเลี่ยงการใช้ตัวย่อ: ใช้ชื่อเต็มเพื่อความชัดเจน เช่น:

   • ใช้ userProfile แทน usrProf

การตั้งชื่อโฟลเดอร์

1. ใช้ kebab-case หรือ snake_case: สำหรับชื่อของโฟลเดอร์ เช่น:

   • user-profile (kebab-case)
   • user_profile (snake_case)

2. ตั้งชื่อให้สื่อความหมาย: ชื่อของโฟลเดอร์ควรสื่อถึงเนื้อหาหรือฟังก์ชันการทำงานของโฟลเดอร์นั้น เช่น:

   • components/ (สำหรับเก็บคอมโพเนนต์ React)
   • services/ (สำหรับเก็บฟังก์ชันบริการหรือ API)
   • hooks/ (สำหรับเก็บ custom hooks)

3. ใช้รูปแบบที่สม่ำเสมอ: รักษารูปแบบการตั้งชื่อที่สม่ำเสมอในทั้งโปรเจกต์ เพื่อความเป็นระเบียบ เช่น:

   • ถ้าใช้ kebab-case สำหรับโฟลเดอร์หนึ่ง ให้ใช้รูปแบบเดียวกันสำหรับโฟลเดอร์ทั้งหมด

4. หลีกเลี่ยงการใช้ชื่อทั่วไปหรือคลุมเครือ: ใช้ชื่อที่บ่งบอกถึงเนื้อหาหรือฟังก์ชันของโฟลเดอร์ เช่น:

   • ใช้ utils/ แทน misc/
   • ใช้ store/ แทน data/

ตัวอย่าง

โฟลเดอร์:

src/
├── components/
│   ├── Button.tsx
│   └── Header.tsx
├── hooks/
│   └── useFetch.ts
├── services/
│   └── apiService.ts
├── stores/
│   ├── auth/
│   │   ├── useAuthStore.ts
│   │   └── authTypes.ts
│   ├── user/
│   │   ├── useUserStore.ts
│   │   └── userTypes.ts
│   ├── product/
│   │   ├── useProductStore.ts
│   │   └── productTypes.ts
│   └── cart/
│       ├── useCartStore.ts
│       └── cartTypes.ts
└── index.ts

ตัวแปร:

// ตัวอย่างใน useAuthStore.ts
interface AuthState {
  isAuthenticated: boolean;
  user: string | null;
  login: (username: string) => void;
  logout: () => void;
}

// ตัวอย่างใน useUserStore.ts
interface UserState {
  name: string;
  email: string;
  updateUser: (name: string, email: string) => void;
}

การใช้กฎการตั้งชื่อที่ดีจะช่วยให้โค้ดของคุณดูเป็นระเบียบและเข้าใจง่ายขึ้น

การตั้งชื่อค่าคอนฟิกหรือค่าคงที่เช่น DATABASE_CONFIG ควรปฏิบัติตามหลักการที่ช่วยให้เข้าใจง่ายและตรงตามวัตถุประสงค์ นี่คือกฎในการตั้งชื่อค่าคอนฟิก:

กฎในการตั้งชื่อค่าคอนฟิก

1. ใช้รูปแบบ UPPER_SNAKE_CASE: ชื่อของค่าคอนฟิกหรือค่าคงที่ควรใช้รูปแบบ UPPER_SNAKE_CASE เพื่อแสดงให้เห็นว่านี่คือค่าคงที่และไม่ควรถูกเปลี่ยนแปลง เช่น:

   • DATABASE_CONFIG
   • API_ENDPOINT
   • MAX_RETRY_ATTEMPTS

2. สื่อความหมายได้ชัดเจน: ชื่อของค่าคอนฟิกควรบ่งบอกถึงการใช้งานหรือวัตถุประสงค์ของมัน เช่น:

   • DATABASE_HOST (สำหรับโฮสต์ของฐานข้อมูล)
   • CACHE_EXPIRATION_TIME (สำหรับเวลาหมดอายุของแคช)

3. รวมคอนเท็กซ์และการใช้งาน: ค่าคอนฟิกควรมีชื่อที่รวมคอนเท็กซ์หรือการใช้งานเพื่อให้เข้าใจได้ง่าย เช่น:

   • EMAIL_SERVICE_API_KEY (สำหรับคีย์ API ของบริการอีเมล)
   • JWT_SECRET_KEY (สำหรับคีย์ลับของ JSON Web Token)

4. หลีกเลี่ยงการใช้ชื่อที่คลุมเครือ: ชื่อของค่าคอนฟิกควรเฉพาะเจาะจงและไม่ควรใช้ชื่อที่คลุมเครือหรือทั่วไปเกินไป เช่น:

   • ใช้ DATABASE_PORT แทน PORT
   • ใช้ SESSION_TIMEOUT แทน TIMEOUT

5. ใช้คำที่สื่อถึงประเภทของค่า: ชื่อค่าคอนฟิกควรสื่อถึงประเภทของค่า เช่น ค่าเชิงตัวเลข, สตริง, หรือ Boolean เป็นต้น เช่น:

   • MAX_CONNECTIONS (ค่าตัวเลขสูงสุดของการเชื่อมต่อ)
   • ENABLE_LOGGING (ค่า Boolean สำหรับเปิดหรือปิดการบันทึก)

ตัวอย่างการตั้งชื่อค่าคอนฟิก

ไฟล์คอนฟิก

// ตัวอย่างในไฟล์ config.ts

export const DATABASE_CONFIG = {
  HOST: 'localhost',
  PORT: 5432,
  USER: 'dbuser',
  PASSWORD: 'password',
  DATABASE_NAME: 'mydatabase'
};

export const API_CONFIG = {
  BASE_URL: 'https://api.example.com',
  TIMEOUT: 5000, // Timeout in milliseconds
  API_KEY: 'your-api-key-here'
};

export const APP_SETTINGS = {
  MAX_RETRY_ATTEMPTS: 3,
  SESSION_TIMEOUT: 3600, // Timeout in seconds
  ENABLE_LOGGING: true
};

การใช้ค่าคอนฟิกในโค้ด

import { DATABASE_CONFIG, API_CONFIG, APP_SETTINGS } from './config';

// การใช้ค่าคอนฟิกในการเชื่อมต่อฐานข้อมูล
const dbConnection = connectToDatabase({
  host: DATABASE_CONFIG.HOST,
  port: DATABASE_CONFIG.PORT,
  user: DATABASE_CONFIG.USER,
  password: DATABASE_CONFIG.PASSWORD,
  database: DATABASE_CONFIG.DATABASE_NAME
});

// การใช้ค่าคอนฟิกสำหรับ API
const fetchData = async () => {
  try {
    const response = await fetch(API_CONFIG.BASE_URL + '/data', {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${API_CONFIG.API_KEY}`
      },
      timeout: API_CONFIG.TIMEOUT
    });
    const data = await response.json();
    return data;
  } catch (error) {
    if (APP_SETTINGS.ENABLE_LOGGING) {
      console.error('Error fetching data:', error);
    }
    throw error;
  }
};

การใช้หลักการเหล่านี้จะช่วยให้คุณตั้งชื่อค่าคอนฟิกอย่างมีระเบียบและเข้าใจง่ายครับ