Frontend Academy · บทเรียน

Storybook: สตอรี คอนโทรล และเอกสาร

เขียนสตอรีสำหรับแต่ละสถานะของคอมโพเนนต์ ใช้ Controls เพื่อปรับพร็อพส์แบบโต้ตอบ และสร้างหน้าเอกสารจาก JSDoc และ argTypes

บทเรียน 1 จาก 414 ขั้นตอน

Storybook: สตอรี คอนโทรล และเอกสาร เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

Storybook คืออะไร

Storybook คือเวิร์กช็อปสำหรับ components ของส่วนติดต่อผู้ใช้ที่แยกออกจากแอปของคุณ คุณเขียน “เรื่องราว” ซึ่งเป็นตัวอย่างการใช้งานแต่ละ component ในสถานะต่าง ๆ แล้วเปิดดูผ่านเซิร์ฟเวอร์สำหรับพัฒนา เป็นเครื่องมือที่ขาดไม่ได้สำหรับระบบออกแบบ

เหตุผลที่ควรใช้ Storybook

1) พัฒนา components แบบแยกอิสระโดยไม่ต้องตั้งค่าบริบทของแอป 2) ตรวจสอบทุกสถานะด้วยภาพ (กำลังโหลด ข้อผิดพลาด ว่างเปล่า) 3) นักออกแบบและผู้จัดการผลิตภัณฑ์สามารถเปิดดูแค็ตตาล็อกได้ 4) สร้างเอกสารประกอบ 5) ทำการทดสอบการถดถอยทางภาพโดยอัตโนมัติ

การติดตั้ง Storybook

ใช้ตัวเริ่มต้นอย่างเป็นทางการ ซึ่งจะตรวจหาเฟรมเวิร์กของคุณและตั้งค่าทุกอย่างให้

npx storybook@latest init

# Adds:
#  .storybook/        config
#  src/stories/       example stories
#  scripts: 'storybook' and 'build-storybook'

npm run storybook   # opens http://localhost:6006

การเขียนเรื่องราว (CSF 3.0)

Component Story Format 3: การส่งออกเริ่มต้น = ข้อมูลเมตา การส่งออกแบบตั้งชื่อ = เรื่องราว

// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'Atoms/Button',
  component: Button,
  tags: ['autodocs']
};
export default meta;

type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: { label: 'Save', variant: 'primary' }
};

export const Disabled: Story = {
  args: { label: 'Save', variant: 'primary', disabled: true }
};

หลายเรื่องราวต่อหนึ่ง component

สร้างหนึ่งเรื่องราวต่อหนึ่งสถานะสำคัญ ได้แก่ ค่าเริ่มต้น โฮเวอร์ กำลังโหลด ข้อผิดพลาด ว่างเปล่า และมีข้อมูล ผู้ตรวจสอบสามารถคลิกดูและเห็นรูปแบบทั้งหมดได้ในพริบตา

export const Loading: Story = { args: { state: 'loading' } };
export const Error: Story    = { args: { state: 'error', message: 'Network failed' } };
export const Empty: Story    = { args: { items: [] } };
export const Populated: Story = { args: { items: mockItems } };

ตัวควบคุม (ตาราง Args)

ส่วนเสริม Controls ของ Storybook จะเปลี่ยนออบเจ็กต์ args ให้เป็นตัวควบคุมแบบฟอร์มที่โต้ตอบได้ ปรับค่าของพร็อพแบบสด ๆ ในส่วนติดต่อผู้ใช้เพื่อทดสอบกรณีขอบ

const meta: Meta<typeof Button> = {
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'danger']
    },
    onClick: { action: 'clicked' }
  }
};

ส่วนเสริม Actions

ใช้ action() เพื่อบันทึกการเรียกตัวจัดการเหตุการณ์ในแผง Actions เหมาะสำหรับทดสอบ callback โดยไม่ต้องเชื่อมต่อกับสถานะจริง

argTypes: {
  onClick: { action: 'clicked' },
  onChange: { action: 'changed' }
}

Autodocs — เอกสารที่สร้างโดยอัตโนมัติ

เพิ่ม tags: ['autodocs'] ลงในข้อมูลเมตา แล้ว Storybook จะสร้างหน้า Docs ที่มีตารางพร็อพของ component คำอธิบาย และตัวอย่างที่แสดงผลได้

MDX สำหรับเอกสารแบบสมบูรณ์

เขียนเอกสารของ component ด้วย MDX — Markdown ที่ฝัง JSX ได้ ผสมผสานเนื้อหาบรรยายกับตัวอย่าง component ที่โต้ตอบได้

{/* Button.mdx */}
import { Meta, Story, Canvas } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';

<Meta of={ButtonStories} />

# Button

The primary action element.

## Variants
<Canvas of={ButtonStories.Primary} />
<Canvas of={ButtonStories.Secondary} />

Decorators — ห่อเรื่องราวด้วยบริบท

ห่อเรื่องราวด้วย providers (Theme, Router, Redux) โดยใช้ decorators

export const decorators = [
  (Story) => (
    <ThemeProvider theme={lightTheme}>
      <Story />
    </ThemeProvider>
  )
];

การทดสอบการถดถอยทางภาพ

Chromatic (โดยทีม Storybook) จะจับภาพหน้าจอของทุกเรื่องราวในทุก commit แล้วเปรียบเทียบกับภาพฐาน ตรวจจับการถดถอยทางภาพโดยอัตโนมัติ

การนำ Storybook ไปใช้งาน

npm run build-storybook จะสร้างไซต์แบบสแตติกไว้ใน storybook-static/ นำไปปรับใช้กับ Netlify, Vercel หรือ GitHub Pages เพื่อให้ผู้ที่ไม่ใช่นักพัฒนาสามารถเปิดดูแค็ตตาล็อก components ได้

ตรวจสอบความเข้าใจอย่างรวดเร็ว

การเพิ่ม tags: ['autodocs'] ลงในข้อมูลเมตา Storybook ของ component ทำอะไร

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป: Storybook

เวิร์กช็อปแบบแยกอิสระสำหรับ components ของส่วนติดต่อผู้ใช้ CSF 3.0: การส่งออกเริ่มต้น = meta การส่งออกแบบตั้งชื่อ = เรื่องราว ใช้ argTypes สำหรับ Controls ใช้ action() สำหรับการบันทึก callback ใช้ tags: ['autodocs'] สำหรับเอกสารที่สร้างโดยอัตโนมัติ ใช้ MDX สำหรับเนื้อหาบรรยายที่สมบูรณ์ร่วมกับ JSX ใช้ Decorators เพื่อเติม providers ใช้ Chromatic สำหรับการถดถอยทางภาพ ใช้ build-storybook สำหรับการโฮสต์แบบสแตติก

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 41
บทเรียน: 163

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “Storybook: สตอรี คอนโทรล และเอกสาร” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Storybook: สตอรี คอนโทรล และเอกสาร” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Storybook: สตอรี คอนโทรล และเอกสาร”

เขียนสตอรีสำหรับแต่ละสถานะของคอมโพเนนต์ ใช้ Controls เพื่อปรับพร็อพส์แบบโต้ตอบ และสร้างหน้าเอกสารจาก JSDoc และ argTypes คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “Storybook: สตอรี คอนโทรล และเอกสาร” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Frontend Academy