🧭 Dev Naming Guide — แนวทางการตั้งชื่อไฟล์ ตัวแปร และโครงสร้างโปรเจคสำหรับทีม Dev
"โค้ดที่ดี คือโค้ดที่อ่านออกเสียงได้" — เคล็ดลับเล็กๆ ที่สร้างทีม Dev ให้โหดขึ้นเยอะ
🎯 ทำไมการตั้งชื่อจึงสำคัญ
- ช่วยให้ทีมอ่านโค้ดได้ง่าย
- ลดความสับสนในโครงสร้างโปรเจค
- เพิ่ม productivity และลด bug
- ใช้ร่วมกับ Git ได้ดี เช่น branch, commit message
- รองรับการ scale ระบบได้ในระยะยาว
🧱 โครงสร้างและการตั้งชื่อแบบ Dev-friendly
📁 โฟลเดอร์ (Folder Naming)
| กรณี | ชื่อที่แนะนำ |
|---|---|
| ทั่วไป | user-profile/, product-list/ |
| ใช้ React/Vue/Next | features/user/, shared/components/ |
| หลีกเลี่ยง | UserProfile/, user profile/ |
📌 ใช้: kebab-case, สื่อถึงสิ่งที่อยู่ภายใน
📄 ไฟล์ (File Naming)
| ประเภท | ตัวอย่าง |
|---|---|
| TypeScript / JS | user-card.tsx |
| React Component | UserCard.tsx |
| Markdown Docs | getting-started.md |
📌 PascalCase สำหรับ Component และ kebab-case สำหรับทั่วไป
🧠 ตัวแปร และ ฟังก์ชัน (Variables & Functions)
| ประเภท | ตัวอย่าง |
|---|---|
| ตัวแปรทั่วไป | userName, isAuthenticated |
| ฟังก์ชัน | fetchData(), handleSubmit() |
📌 ใช้ camelCase ทั้งหมด
🎨 CSS Class / Utility
- ถ้าใช้ BEM:
<div class="card card--active"> <div class="card__title">Title</div> </div> - ถ้าใช้ Tailwind CSS:
<div class="bg-gray-100 p-4 rounded-lg">Content</div>
🌿 Git Branch Naming
| ชนิด | ตัวอย่าง |
|---|---|
| Feature | feature/login-page |
| Bugfix | bugfix/fix-header-overlap |
| Hotfix | hotfix/crash-on-submit |
📌 ใช้ kebab-case และ prefix ที่ชัดเจน
🧾 Git Commit Message (Conventional Commits)
feat: add login functionality
fix: resolve header issue on mobile
refactor: cleanup auth service
docs: update README.md
📌 ใช้ prefix: feat, fix, refactor, docs, test, chore
📡 API Path Naming
GET /api/users
POST /api/auth/login
DELETE /api/products/:id
📌 ใช้ lowercase และ kebab-case เท่านั้น
🗄️ Database Table & Column Naming
| สิ่งที่ตั้งชื่อ | รูปแบบที่แนะนำ |
|---|---|
| Table name | snake_case พหูพจน์ เช่น users, order_items |
| Column name | snake_case เช่น user_id, created_at |
| Foreign Key | ${table}_id เช่น user_id, product_id |
📌 ชื่อตารางควรใช้พหูพจน์เสมอ เช่น users, products, transactions 📌 หลีกเลี่ยงการใช้ตัวย่อ เช่น usr, prd ที่อาจทำให้ทีมใหม่เข้าใจผิด
📦 ตัวอย่างโครงสร้างโปรเจคแบบเต็ม
my-app/
├── public/
│ └── index.html
├── src/
│ ├── features/
│ │ └── auth/
│ │ ├── LoginForm.tsx
│ │ └── authAPI.ts
│ ├── shared/
│ │ ├── components/
│ │ │ └── Button.tsx
│ │ └── utils/
│ │ └── validators.ts
│ └── app/
│ ├── App.tsx
│ └── routes.ts
├── README.md
├── .gitignore
├── package.json
└── tsconfig.json
✅ สรุป: Naming Checklist
| สิ่งที่ต้องตั้งชื่อ | รูปแบบที่แนะนำ |
|---|---|
| โฟลเดอร์ | kebab-case |
| ไฟล์ | kebab-case, PascalCase (สำหรับ Component) |
| ตัวแปร | camelCase |
| ฟังก์ชัน | camelCase |
| CSS Class | BEM หรือ Tailwind |
| Git Branch | feature/x, bugfix/x |
| Commit Message | Conventional Commits |
| API Endpoint | kebab-case |
| Table/Column DB | snake_case, ใช้ชื่อเต็ม |
🚀 พร้อมใช้ในทีมคุณ
นำแนวทางเหล่านี้ไปปรับใช้ร่วมกับทีม และตกลงกันว่า "เราใช้แบบเดียวกันนะ" เพื่อให้การพัฒนาโปรเจคเดินหน้าไปแบบไม่มีสะดุด และรองรับการ scale ในอนาคตได้ง่ายขึ้น