reveal.js

# Code Review: คุณภาพโค้ด, Clean Code, Best Practice

Lesson 2 - โปรเจกต์สุดท้าย Full-Stack Angular Application

**Code Review** คือกระบวนการตรวจโค้ดเพื่อหาความเสี่ยง ปรับคุณภาพ และสร้างมาตรฐานร่วมกันในทีม โดยเน้นทั้งความถูกต้อง อ่านง่าย ทดสอบได้ และดูแลต่อได้

---

## Timeline/ประวัติศาสตร์

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
 subgraph Era1["ยุค Review หลังงานเสร็จ / Late Review"]
 A["พบ bug ตอนท้าย แก้แพง"]
 end
 subgraph Era2["ยุค Pull Request / Collaborative Review"]
 B["PR Review ตรวจเป็นรอบ"]
 C["Clean Code อ่านง่าย"]
 end
 subgraph Era3["ยุค Automated Quality / Tooling"]
 D["ESLint ตรวจ rule"]
 E["Prettier format อัตโนมัติ"]
 end
 A --> B --> C --> D --> E
</pre>

---

## แนวคิดสำคัญ

- **Naming Convention** ตั้งชื่อตัวแปร ฟังก์ชัน และ Component ให้สื่อความหมาย
- **DRY** หลีกเลี่ยงการเขียนโค้ดซ้ำโดยไม่จำเป็น
- **Single Responsibility** ให้แต่ละ Function หรือ Component ทำหน้าที่เดียว
- **Angular Style Guide** คือแนวทางของ Google สำหรับโครงสร้าง Angular
- **ESLint และ Prettier** ช่วย auto-fix และ format โค้ด
- **Comment ที่ดี** ควรอธิบาย WHY มากกว่า WHAT

---

## ตาราง Code Review Checklist

| หัวข้อ | คำถามตรวจ | ตัวอย่างปัญหา |
|---|---|---|
| Naming | ชื่อสื่อความหมายไหม | `x`, `data2` |
| DRY | มี logic ซ้ำไหม | copy function หลายที่ |
| Responsibility | component หนักเกินไหม | API logic อยู่ใน component |
| Error Handling | จัดการ error ไหม | ไม่มี fallback |
| Testability | test ง่ายไหม | dependency ผูกแน่น |

---

## Mermaid Diagram: Code Review Loop

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart TD
 A["Open Pull Request เปิด PR"] --> B["Automated Checks lint/test"]
 B --> C["Reviewer Reads Code อ่านโค้ด"]
 C --> D["Feedback ข้อเสนอแนะ"]
 D --> E["Author Updates แก้ไข"]
 E --> B
 B --> F["Approve & Merge ผ่านและรวม"]
</pre>

---

## Code Example

```ts
// bad-example.ts
// ตัวอย่างที่อ่านยากและทำหลายหน้าที่ใน function เดียว
function doIt(x: any[]) {
  return x.filter(i => i.active).map(i => i.name);
}
```

```ts
// good-example.ts
// แยกชื่อให้สื่อความหมาย และกำหนด type ชัดเจน
interface User {
  name: string;
  active: boolean;
}

function getActiveUserNames(users: User[]): string[] {
  return users
    .filter(user => user.active)
    .map(user => user.name);
}

// ตัวอย่างการใช้งาน:
const names = getActiveUserNames([
  { name: 'Ana', active: true },
  { name: 'Bob', active: false }
]);
console.log(names); // ['Ana']
```

```json
{
  "scripts": {
    "lint": "ng lint",
    "format": "prettier --write \"src/**/*.{ts,html,css}\""
  }
}
```

---

## วิดีโอแนะนำ

- [YouTube: Clean Code Code Review Best Practices](https://www.youtube.com/results?search_query=Clean+Code+Code+Review+Best+Practices)

---

## กิจกรรมท้ายบท

- ตรวจ PR ของเพื่อนด้วย checklist
- หาโค้ดซ้ำและเสนอ refactor
- เพิ่ม script format/lint
- เขียน comment ใหม่ให้ตอบว่า “ทำไมต้องทำแบบนี้”

---

## End

<a href="/web-programming/15-final-project/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>