Lab Vibe 1 — หน้า index และ show ที่อ่านรู้เรื่อง

แผนที่ของ Lab: ตอนนี้มีอะไร จบแล้วจะมีอะไร

สไลด์หน้า 20 สรุปไว้สองฝั่ง · ฝั่งซ้ายคือหน้าที่ scaffold ให้มา (ใช้ได้ แต่คนอ่านไม่รู้เรื่อง) · ฝั่งขวาคือเป้าหมายของบทนี้

ทำไมต้องมีบทความถึง 30 ชิ้น (ที่เราใส่ไว้ตั้งแต่บท 120): สไลด์หน้า 20 บอกว่าปัญหาอย่าง N+1 หรือการแบ่งหน้าไม่โผล่ตอนมีข้อมูล 3 แถว · ใน Lab นี้คุณจะเห็นเองว่าถ้าลืม includes จำนวน query กระโดดจาก 3 เป็น 12 — กับข้อมูล 3 แถว มันต่างกันนิดเดียวจนไม่มีใครสังเกต

ขั้น 0 — เตรียมร้านก่อนเริ่ม

เปิด terminal สองแท็บในโฟลเดอร์โปรเจกต์ · แท็บแรกเปิดร้าน แท็บที่สองไว้พิมพ์คำสั่ง

# แท็บที่ 1 — เปิดร้านพร้อมตัว build CSS (บท 120 · ละเอียดในบท 128)
$ bin/dev

# แท็บที่ 2 — ต้องไม่ขึ้นอะไรเลย = ไม่มีของค้างจากบท 121–125
$ git status --short

ทำไมต้องสะอาด: ตอนท้าย Lab เราจะ git commit ทั้งหมดเป็นก้อนเดียว · ถ้ามีของทดลองค้างจากบทก่อนจะปนเข้าไปด้วย · ถ้ายังมีของค้าง ให้ git restore . (คืนไฟล์ที่แก้) แล้ว git status --short อีกรอบ

เปิด http://localhost:3000/posts ดูของเดิมก่อน · แต่ละชิ้นจะมีบรรทัด Category: ตามด้วยเลข เช่น 1 · แล้วดู log ของ request นั้น (ไฟล์ log/development.log หรือหน้าจอแท็บที่ 1) — ผลจริง ตัดมาแค่บรรทัดที่ไปตู้:

  Post Load (2.4ms)  SELECT "posts".* FROM "posts" /*action='index',application='WongnokBlogAllInOne',controller='posts'*/

อ่านบรรทัดนี้: Post Load = "ไปหยิบบทความจากตู้" · (2.4ms) = ใช้เวลาเท่าไหร่ (ของคุณจะต่าง) · ก้อน /*action='index',…*/ ท้ายบรรทัดคือคอมเมนต์ที่ Rails แปะบอกว่า SQL นี้มาจาก action ไหน — ไม่ต้องสนใจ ต่อจากนี้จะย่อเป็น /*…*/

ไม่มี LIMIT = หยิบทุกแฟ้มในลิ้นชัก มาจัดจานพร้อมกัน · ตอนนี้ 30 ชิ้นยังไม่เป็นไร แต่ถ้าวันหนึ่งมี 30,000 ชิ้น หน้านี้จะช้าจนใช้ไม่ได้ — นี่คือกฎข้อ 6 ใน prompts/00-context.md ("index action ต้องมี limit หรือ pagination") ที่ scaffold ไม่รู้ (บท 121)

ขั้น 1 — ติดตั้ง pagy: ตัวช่วยแบ่งรายการเป็นหน้า ๆ

pagination คือการแบ่งรายการยาว ๆ เป็นหน้า ๆ — หน้า 1 โชว์ชิ้นที่ 1–10 · หน้า 2 โชว์ 11–20 · มีปุ่ม "ถัดไป / ก่อนหน้า" · ใน SQL ทำด้วยสองคำ: LIMIT 10 (เอาแค่ 10 แผ่น) กับ OFFSET 10 (ข้าม 10 แผ่นแรกก่อน)

แล้วทำไมไม่เขียน Post.limit(10).offset(...) เอง? เพราะของที่ต้องคิดเพิ่มเยอะกว่าที่เห็น: ผู้ใช้พิมพ์ ?page=0 · ?page=abc · ?page=99 มาจะเป็นยังไง · ทั้งหมดมีกี่หน้า · หน้าสุดท้ายต้องซ่อนปุ่ม "ถัดไป" · ลิงก์ของแต่ละปุ่มต้องเป็น URL อะไร · สไลด์หน้า 22 จัด "ทำ pagination เองด้วย offset แทนที่จะใช้ gem" ไว้ในรายการที่ AI พลาดประจำ
gem คือแพ็กเกจโค้ดสำเร็จรูปของ Ruby ที่คนอื่นเขียนและทดสอบมาแล้ว (เหมือน module ของ Go ที่ go get มา) · ตัวที่เราใช้ชื่อ pagy

สั่งติดตั้ง (ผลจริง):

$ bundle add pagy --version "~> 43.5"
Fetching gem metadata from https://rubygems.org/........
Resolving dependencies...

• bundle add pagy — "เพิ่ม gem ชื่อ pagy ลงโปรเจกต์" · มันเขียนบรรทัดใหม่ลง Gemfile แล้วติดตั้งให้
• --version "~> 43.5" — ขอรุ่น 43.5 ขึ้นไป แต่ไม่ข้ามไป 44 · ~> อ่านว่า "ประมาณ" (ใน Go คือ go.mod ที่ล็อกรุ่นหลักไว้)
• เครื่องผมมี pagy อยู่แล้วเลยขึ้นแค่สองบรรทัด · เครื่องที่ยังไม่เคยมีจะเห็นบรรทัดดาวน์โหลดและติดตั้งเพิ่ม — ปกติ

ดูสิ่งที่เปลี่ยน — ท้าย Gemfile มีสองบรรทัดใหม่ (บรรทัดว่าง + บรรทัดนี้):

gem "pagy", "~> 43.5"

และ Gemfile.lock (สมุดจดว่า "ติดตั้งรุ่นไหนไปจริง ๆ") ได้ pagy (43.8.1) กับ yaml (0.4.0) ที่ pagy ต้องใช้ · ถ้าของคุณได้ 43.x ที่ใหม่กว่า ไม่เป็นไร โค้ดในบทนี้ใช้ได้เหมือนกัน

ขั้น 2 — controller: หยิบทีละ 10 ชิ้น เรียงใหม่ไปเก่า พร้อมหมวด

ก่อนใช้ pagy(...) ใน controller ได้ ต้อง "สอน" controller ให้รู้จักมันก่อน · ทำที่ app/controllers/application_controller.rb (แม่ของทุก controller — ใส่ที่นี่ทีเดียว ทุกแผนกได้ใช้) · ไฟล์ทั้งไฟล์หลังแก้:

class ApplicationController < ActionController::Base
  include Pagy::Method

  # Only allow modern browsers supporting webp images, web push, badges, import maps, CSS nesting, and CSS :has.
  allow_browser versions: :modern

  # Changes to the importmap will invalidate the etag for HTML responses
  stale_when_importmap_changes
end

• เพิ่มแค่บรรทัดที่ 2 กับบรรทัดว่างใต้มัน · include Pagy::Method = "เอาความสามารถใน module Pagy::Method มาใส่ class นี้" (module ของ Ruby · บท 95) → ทุก controller เรียก pagy(...) ได้
• บรรทัด 4–8 เป็นของเดิมที่ rails new ใส่ไว้ ไม่ต้องแตะ · allow_browser = รับเฉพาะเบราว์เซอร์รุ่นใหม่ · stale_when_importmap_changes เกี่ยวกับไฟล์ JavaScript (เรื่อง importmap อยู่บท 127)

ต่อไปที่ app/controllers/posts_controller.rb · ใน action index ของเดิมมีบรรทัดเดียวคือ @posts = Post.all · เปลี่ยนเป็นแบบนี้:

  # GET /posts or /posts.json
  def index
    @pagy, @posts = pagy(Post.includes(:category).recent, limit: 10)
  end

อ่านจากในออกนอก:

• Post.includes(:category) — "ตอนหยิบบทความ หยิบหมวดของมันมาทั้งตะกร้าด้วย" (บท 114) · ต้องมีเพราะขั้น 3 เราจะโชว์ชื่อหมวด
• .recent — scope ที่มีอยู่แล้วใน model: scope :recent, -> { order(created_at: :desc) } = เรียงจากใหม่ไปเก่า (-> { } = lambda ก้อนโค้ดที่เก็บไว้รันทีหลัง · บท 115)
• pagy(…, limit: 10) — ส่งใบเบิก (ที่ยังไม่ยื่น) ให้ pagy · pagy อ่าน ?page= จาก URL เอง แล้วคืนของสองชิ้น: ข้อมูลของการแบ่งหน้า (หน้าไหน · ทั้งหมดกี่หน้า) กับบทความ 10 ชิ้นของหน้านั้น
• @pagy, @posts = … — Ruby รับของสองชิ้นใส่สองตัวแปรในบรรทัดเดียว (เหมือน a, b := f() ของ Go) · ทั้งคู่ขึ้นต้นด้วย @ = วางบนถาดหน้าครัวให้ view หยิบ

ในไฟล์เดียวกันเปลี่ยนข้อความแจ้งเตือนสามจุดเป็นภาษาไทยด้วย (ผู้ใช้เห็น) — เปลี่ยนแค่ข้อความในเครื่องหมายคำพูด:

        format.html { redirect_to @post, notice: "สร้างบทความแล้ว" }
…
        format.html { redirect_to @post, notice: "บันทึกการแก้ไขแล้ว", status: :see_other }
…
      format.html { redirect_to posts_path, notice: "ลบบทความแล้ว", status: :see_other }

(ของเดิมคือ "Post was successfully created." · "…updated." · "…destroyed." ใน action create · update · destroy)

รีเฟรช /posts — หน้าตายังเหมือนเดิม แต่เหลือ 10 ชิ้น · ดู log (ผลจริง ตัดบรรทัดประกอบที่ยังไม่ต้องดูออก — ขั้น 4 จะโชว์ log เต็มทั้งก้อน):

  Post Count (0.7ms)  SELECT COUNT(*) FROM "posts" /*…*/
  Post Exists? (0.8ms)  SELECT 1 AS one FROM "posts" LIMIT 1 OFFSET 0 /*…*/
  Post Load (0.8ms)  SELECT "posts".* FROM "posts" ORDER BY "posts"."created_at" DESC LIMIT 10 OFFSET 0 /*…*/
  Category Load (0.7ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" IN (5, 4, 3, 2, 1) /*…*/
Completed 200 OK in 50ms (Views: 23.2ms | ActiveRecord: 7.7ms (4 queries, 0 cached) | GC: 8.5ms)

AVOID eager loading detected
  Post => [:category]
  Remove from your query: .includes([:category])

• บรรทัด Completed คือบรรทัดที่ต้องหาเสมอ · 200 OK = เสิร์ฟสำเร็จ · (4 queries, 0 cached) = ไปตู้ 4 ครั้ง (cached อธิบายตอนตรวจรับ) · ตัวเลข ms ของคุณจะต่าง
• Post Count — pagy นับก่อนว่ามีกี่ชิ้น (จะได้รู้ว่ามี 3 หน้า)
• Post Exists? — มาจาก if @posts.any? ใน index เดิมของ scaffold ("มีสักชิ้นไหม") · ขั้น 4 จะเอาออก
• Post Load … LIMIT 10 OFFSET 0 — หยิบ 10 แผ่นแรก เรียงใหม่ไปเก่า · Category Load … IN (…) — ใบเบิกทีเดียวของ includes
• AVOID eager loading — gem bullet (ตัวจับ N+1 ที่เปิดไว้ในโปรเจกต์ · บท 125) บอกว่า "หยิบหมวดมาแต่ไม่ได้ใช้ เอา includes ออกได้" (eager loading = ชื่อทางการของการหยิบล่วงหน้าแบบ includes) — ถูกของมัน เพราะ partial เดิมยังโชว์เลข category_id · ขั้นถัดไปเราจะใช้ชื่อหมวด แล้วคำเตือนนี้จะหายเอง

ขั้น 3 — partial _post: แม่พิมพ์ที่ใช้ได้ทั้งหน้ารายการและหน้าเต็ม

เขียนทับ app/views/posts/_post.html.erb ทั้งไฟล์ · partial นี้จะถูกใช้สองแบบ: แบบย่อในหน้ารายการ (หัวข้อเป็นลิงก์ · ข้อความตัดสั้น) กับแบบเต็มในหน้า show (หัวข้อใหญ่ · ข้อความเต็ม) · สลับด้วยสวิตช์ full

<%# locals: (post:, full: false) -%>
<article id="<%= dom_id post %>" class="py-5 border-b border-gray-200">
  <p class="text-sm text-gray-500">
    <span class="font-medium text-blue-700"><%= post.category.name %></span>
    · <%= time_ago_in_words(post.created_at) %> ago
  </p>

  <% if full %>
    <h1 class="mt-2 text-3xl font-bold"><%= post.title %></h1>
    <p class="mt-4 leading-relaxed whitespace-pre-line"><%= post.description %></p>
  <% else %>
    <h2 class="mt-1 text-xl font-semibold">
      <%= link_to post.title, post, class: "hover:underline" %>
    </h2>
    <p class="mt-2 text-gray-700"><%= truncate(post.description, length: 80, separator: " ") %></p>
  <% end %>
</article>

ทีละบรรทัด:

• บรรทัด 1 <%# locals: (post:, full: false) -%> — strict locals (บท 123): "แม่พิมพ์นี้รับของ 2 อย่าง · post ต้องส่งมาเสมอ · full ไม่ส่งก็ได้ ถือว่า false" · ขีด - ก่อน %> = ไม่ทิ้งบรรทัดว่างไว้ใน HTML
• บรรทัด 2 <article id="<%= dom_id post %>"> — dom_id สร้าง id ให้ทุกชิ้นไม่ซ้ำกัน เช่น post_30 (Day 3 ช่วง Hotwire บท 131 จะใช้ id นี้) · <article> = แท็ก HTML ของ "เนื้อหาหนึ่งชิ้น"
• บรรทัด 4 post.category.name — ไปที่หมวดของบทความแล้วเอาชื่อ (association · บท 115) · นี่คือบรรทัดที่ต้องใช้ includes ไม่งั้นเดินไปตู้ทีละชิ้น
• บรรทัด 5 time_ago_in_words(post.created_at) — ได้ 1 day · about 1 month · เราต่อคำว่า ago เอง · เป็นภาษาอังกฤษเพราะโปรเจกต์นี้ยังไม่ได้ตั้งภาษาไทยให้ helper (เรื่อง i18n ไม่อยู่ในชุดนี้)
• บรรทัด 8–10 แบบเต็ม — หัวข้อเป็น <h1> · whitespace-pre-line = คลาส Tailwind ที่ให้การขึ้นบรรทัดใหม่ในข้อความโชว์เป็นบรรทัดใหม่จริง
• บรรทัด 13 link_to post.title, post — ส่ง object ไปตรง ๆ Rails เดา URL ให้เป็น /posts/30 (บท 103) · ไม่ต้องเขียน "/posts/#{post.id}" เอง
• บรรทัด 15 truncate(…, length: 80, separator: " ") — ตัดเหลือไม่เกิน 80 ตัวอักษร (รวม ...) และตัดที่ช่องว่างเท่านั้น · ดูเหตุผลด้านล่าง
• คลาสที่เหลือคือ Tailwind (บท 72) อ่านออกเสียงได้: py-5 เว้นบนล่าง · mt-2 เว้นด้านบน · leading-relaxed ระยะห่างระหว่างบรรทัดมากขึ้น · border-b border-gray-200 เส้นเทาอ่อนด้านล่าง · text-sm text-gray-500 ตัวเล็กสีเทา · text-xl font-semibold ตัวใหญ่หนา · hover:underline ขีดเส้นใต้ตอนเอาเมาส์ชี้

ทำไมต้องมี separator: " " (ทวนบท 124) — ภาษาไทยมีสระกับวรรณยุกต์ที่ "ลอย" อยู่บนล่างตัวอักษร และนับเป็นตัวอักษรแยก · ถ้าตัดตรงกลางคำ อาจได้คำที่วรรณยุกต์หาย · ผลจริงกับ "ข้าวเหนียวมะม่วง" (bin/rails runner · ข้อความยาว 98 ตัวอักษร · … หน้าผลคือเราตัดส่วนต้นออกให้เห็นแค่ท้ายที่ถูกตัด):

description[0..80]                         → …โรยถั่วทองกรอบ ของหวานที่นัก
truncate(description, length: 80)          → …โรยถั่วทองกรอบ ของหวานที...
truncate(description, length: 80, separator: " ") → …โรยถั่วทองกรอบ...

แบบที่สอง (truncate เฉย ๆ) ได้ ที... — ไม้เอกของ "ที่" หายไป · truncate ดีกว่า [0..80] ตรงที่เติม ... ให้และรับ separator ได้ แต่ตัวมันไม่ได้รู้จักภาษาไทย · พอบอกให้ตัดที่ช่องว่าง (ภาษาไทยเว้นวรรคระหว่างวลีอยู่แล้ว) ก็ได้วลีครบ

เทียบกับ React: partial = component · locals = props (บท 71) · full: false = ค่าตั้งต้นของ prop แบบ function Post({ post, full = false }) · render @post, full: true ≈ <Post post={post} full /> · ต่างกันที่ React ไม่มีถาดกลางให้แอบหยิบ — component เห็นแค่ props ที่ส่งมา

รีเฟรช /posts — ชิ้นแรกเป็นแบบนี้ (HTML ที่เบราว์เซอร์ได้จริง จาก curl -s localhost:3000/posts):

<!-- BEGIN app/views/posts/_post.html.erb
--><article id="post_30" class="py-5 border-b border-gray-200">
  <p class="text-sm text-gray-500">
    <span class="font-medium text-blue-700">เครื่องดื่ม</span>
    · 1 day ago
  </p>

    <h2 class="mt-1 text-xl font-semibold">
      <a class="hover:underline" href="/posts/30">นมเย็น</a>
    </h2>
    <p class="mt-2 text-gray-700">นมสีชมพูจากน้ำแดง หวานหอม เด็ก ๆ ชอบที่สุด เติมไข่มุกได้</p>
</article>

• <!-- BEGIN app/views/posts/_post.html.erb --> — ป้ายที่ Rails แปะให้ใน development บอกว่า HTML ก้อนนี้มาจากไฟล์ไหน (production ไม่มี)
• id="post_30" ← dom_id post · เครื่องดื่ม ← post.category.name · 1 day ago ← time_ago_in_words + คำว่า ago
• ไม่มี <h1> และ if/else/end ไม่โผล่ใน HTML — <% %> ทำในครัวเงียบ ๆ ไม่ขึ้นจาน (บท 122)
• ข้อความนี้สั้นกว่า 80 ตัวอักษรเลยไม่ถูกตัด · ชิ้นที่ 5 (มัสมั่นเนื้อ) จะเห็น ... ท้าย

log ตอนนี้: (4 queries, 0 cached) และคำเตือน AVOID ของ bullet หายไปแล้ว — เพราะเราใช้หมวดที่หยิบมาจริง

http://localhost:3000/posts       ← หน้ารายการ
http://localhost:3000/posts/30    ← หน้าเต็ม

GET /posts     → 500  ActionView::Template::Error (undefined method 'category' for nil)
GET /posts/30  → 200

ขั้น 4 — หน้า index กับแถบเปลี่ยนหน้า

เขียนทับ app/views/posts/index.html.erb ทั้งไฟล์:

<% content_for :title, "บทความทั้งหมด" %>

<div class="w-full max-w-3xl mx-auto">
  <% if notice.present? %>
    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-md inline-block" id="notice"><%= notice %></p>
  <% end %>

  <div class="flex justify-between items-center gap-4">
    <h1 class="font-bold text-3xl sm:text-4xl">บทความทั้งหมด</h1>
    <%= link_to "เขียนบทความใหม่", new_post_path, class: "shrink-0 rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white font-medium" %>
  </div>

  <div id="posts">
    <%= render(@posts) || tag.p("ไม่พบบทความ", class: "text-center text-gray-500 my-10") %>
  </div>

  <%= render "shared/pagination", pagy: @pagy %>
</div>

• บรรทัด 1 content_for :title — ส่งชื่อหน้าไปติดที่แท็บเบราว์เซอร์ (บท 123)
• บรรทัด 3 max-w-3xl mx-auto — กว้างไม่เกินประมาณหน้ากระดาษแล้ววางกลางจอ อ่านง่ายกว่าเต็มจอ
• บรรทัด 4–6 กล่องแจ้งเตือนสีเขียว — ของเดิมจาก scaffold ไม่ได้แตะ · notice = ข้อความแจ้งครั้งเดียวที่ controller ฝากมากับ redirect_to (เช่น "ลบบทความแล้ว" ที่เพิ่งแปลในขั้น 2 · บท 102) · .present? = "มีค่าและไม่ว่าง" (บท 94)
• บรรทัด 8–11 หัวข้อกับปุ่ม · flex justify-between items-center = วางเรียงแนวนอน ดันหัวข้อไปซ้าย ปุ่มไปขวา กึ่งกลางแนวตั้ง · gap-4 = ช่องว่างระหว่างกัน · sm:text-4xl = ใหญ่ขึ้นเมื่อจอกว้าง · shrink-0 = ปุ่มห้ามหดตอนจอแคบ (หัวข้อจะตัดบรรทัดแทน) · new_post_path = ชื่อ route ไม่ใช่ string "/posts/new"
• บรรทัด 14 — หัวใจของหน้า: render(@posts) = "ใช้แม่พิมพ์ _post กับทุกชิ้นใน @posts" (Rails เดาชื่อ partial จากชนิดของของ · ส่งแต่ละชิ้นเป็น local ชื่อ post ให้เอง) · ถ้า @posts ว่าง render คืน nil (คู่มือ Rails เขียนไว้) → || ("ถ้าทางซ้ายว่าง ใช้ทางขวา") จึงไปทำ tag.p("ไม่พบบทความ") แทน · tag.p(...) = helper สร้างแท็ก <p> (บท 124)
• บรรทัด 17 render "shared/pagination", pagy: @pagy — ใช้แม่พิมพ์ app/views/shared/_pagination.html.erb (โฟลเดอร์ shared = ของที่ทุกแผนกใช้ร่วม) และยื่น @pagy ใส่มือในชื่อ pagy

ทำไมไม่เขียน if @posts.any? แบบ scaffold: ขั้น 2 เห็นแล้วว่า any? ทำให้มี Post Exists? เพิ่ม 1 ครั้ง → 4 query เกินเกณฑ์ "ไม่เกิน 3" (เกณฑ์ตรวจรับของสไลด์ · เจอเต็ม ๆ ในขั้น 7) · ส่วน render(...) || ไม่ต้องถามตู้เพิ่ม เพราะรู้ว่าว่างจากของที่หยิบมาแล้ว

ต่อไปสร้างโฟลเดอร์ app/views/shared/ (ยังไม่มี · mkdir app/views/shared หรือให้ editor สร้าง) แล้วสร้าง app/views/shared/_pagination.html.erb:

<%# locals: (pagy:) -%>
<nav class="mt-8 flex items-center justify-between gap-2 text-sm" aria-label="เปลี่ยนหน้า">
  <% if pagy.previous %>
    <%= link_to "← ก่อนหน้า", pagy.page_url(:previous), class: "rounded-md px-3 py-2 bg-gray-100 hover:bg-gray-200 font-medium" %>
  <% else %>
    <span class="rounded-md px-3 py-2 text-gray-400">← ก่อนหน้า</span>
  <% end %>

  <span class="text-gray-600">หน้า <%= pagy.page %> / <%= pagy.last %></span>

  <% if pagy.next %>
    <%= link_to "ถัดไป →", pagy.page_url(:next), class: "rounded-md px-3 py-2 bg-gray-100 hover:bg-gray-200 font-medium" %>
  <% else %>
    <span class="rounded-md px-3 py-2 text-gray-400">ถัดไป →</span>
  <% end %>
</nav>

• บรรทัด 1 — แม่พิมพ์นี้รับของอย่างเดียวคือ pagy (ไม่มีค่าตั้งต้น = ต้องส่งมาเสมอ)
• บรรทัด 2 <nav aria-label="เปลี่ยนหน้า"> — แท็กของ "แถบนำทาง" · aria-label = ชื่อที่โปรแกรมอ่านหน้าจอสำหรับคนตาบอดอ่านออกเสียง · flex justify-between = วางสามชิ้นซ้าย–กลาง–ขวา
• บรรทัด 3 pagy.previous — เลขหน้าก่อนหน้า หรือ nil ถ้าอยู่หน้าแรก · nil นับเป็น "เท็จ" ใน if (บท 94)
• บรรทัด 4 pagy.page_url(:previous) — pagy สร้าง URL ของหน้านั้นให้ เช่น /posts?page=1 · เราไม่ต้องต่อ string เอง
• บรรทัด 6 ถ้าไม่มีหน้าก่อน โชว์ข้อความสีเทาที่กดไม่ได้ (<span> ไม่ใช่ลิงก์) — ปุ่มไม่หายไป แถบจึงไม่ขยับไปมา
• บรรทัด 9 pagy.page = หน้าปัจจุบัน · pagy.last = หน้าสุดท้าย (= จำนวนหน้าทั้งหมด)
• บรรทัด 11–15 ฝั่ง "ถัดไป" แบบเดียวกัน · pagy.next เป็น nil เมื่ออยู่หน้าสุดท้าย

รีเฟรช /posts · แถบท้ายหน้าที่เบราว์เซอร์ได้จริง (จาก curl -s localhost:3000/posts):

<nav class="mt-8 flex items-center justify-between gap-2 text-sm" aria-label="เปลี่ยนหน้า">
    <span class="rounded-md px-3 py-2 text-gray-400">← ก่อนหน้า</span>

  <span class="text-gray-600">หน้า 1 / 3</span>

    <a class="rounded-md px-3 py-2 bg-gray-100 hover:bg-gray-200 font-medium" href="/posts?page=2">ถัดไป →</a>
</nav>

หน้า 1 → "ก่อนหน้า" เป็น <span> สีเทา (มาจากบรรทัด 6) · "ถัดไป" เป็นลิงก์ /posts?page=2 (บรรทัด 12) · ส่วน log ของหน้านี้ (ผลจริง ครบทั้งก้อน):

Started GET "/posts" for ::1 at 2026-11-07 10:38:12 +0700
Processing by PostsController#index as */*
  Post Count (0.9ms)  SELECT COUNT(*) FROM "posts" /*action='index',application='WongnokBlogAllInOne',controller='posts'*/
  ↳ app/controllers/posts_controller.rb:6:in 'PostsController#index'
  Rendering layout layouts/application.html.erb
  Rendering posts/index.html.erb within layouts/application
  Post Load (0.7ms)  SELECT "posts".* FROM "posts" ORDER BY "posts"."created_at" DESC LIMIT 10 OFFSET 0 /*action='index',application='WongnokBlogAllInOne',controller='posts'*/
  ↳ app/views/posts/index.html.erb:15
  Category Load (0.7ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" IN (5, 4, 3, 2, 1) /*action='index',application='WongnokBlogAllInOne',controller='posts'*/
  ↳ app/views/posts/index.html.erb:15
  Rendered collection of posts/_post.html.erb [10 times] (Duration: 1.1ms | GC: 0.1ms)
  Rendered shared/_pagination.html.erb (Duration: 0.0ms | GC: 0.0ms)
  Rendered posts/index.html.erb within layouts/application (Duration: 4.4ms | GC: 0.2ms)
  Rendered layout layouts/application.html.erb (Duration: 4.6ms | GC: 0.2ms)
Completed 200 OK in 6ms (Views: 4.0ms | ActiveRecord: 1.3ms (3 queries, 0 cached) | GC: 0.2ms)

• สองบรรทัดแรก: for ::1 = คำขอมาจากเครื่องตัวเอง (::1 คือ localhost แบบ IPv6 · เหมือน 127.0.0.1) · as */* เพราะผมยิงด้วย curl — เปิดในเบราว์เซอร์จะเห็น as HTML (ผลจริงทั้งสองแบบ)
• 3 queries = นับ (pagy) + หยิบ 10 แผ่น + หยิบหมวดทั้งตะกร้า · Post Exists? หายไปแล้ว
• สังเกตบรรทัด ↳ (บอกว่าบรรทัดไหนของโค้ดทำให้ไปตู้): COUNT เกิดใน controller เพราะ pagy นับทันที · แต่ Post Load เกิดใน view บรรทัด 15 — ใบเบิกยังไม่ถูกยื่นจนถึงตอน render(@posts) ใช้ข้อมูลจริง (บท 113) (เลขบรรทัดของ view ใน log อาจคลาดจากไฟล์ 1 บรรทัด — ดูชื่อไฟล์เป็นหลักพอ)
• Rendered collection of posts/_post.html.erb [10 times] = แม่พิมพ์ถูกใช้ 10 ครั้ง

ขั้น 5 — หน้า show พร้อมทางกลับ (breadcrumb)

breadcrumb คือแถบเล็ก ๆ บนหัวหน้าที่บอกว่า "ตอนนี้อยู่ตรงไหน และกลับไปทางไหนได้" เช่น บทความทั้งหมด › เครื่องดื่ม › นมเย็น · ชื่อมาจากนิทานที่โปรยเศษขนมปังไว้หาทางกลับบ้าน · เขียนทับ app/views/posts/show.html.erb ทั้งไฟล์:

<% content_for :title, @post.title %>

<div class="w-full max-w-3xl mx-auto">
  <% if notice.present? %>
    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-md inline-block" id="notice"><%= notice %></p>
  <% end %>

  <nav class="text-sm text-gray-500" aria-label="breadcrumb">
    <%= link_to "บทความทั้งหมด", posts_path, class: "hover:underline" %>
    ›
    <%= link_to @post.category.name, @post.category, class: "hover:underline" %>
    ›
    <span class="text-gray-800"><%= @post.title %></span>
  </nav>

  <%= render @post, full: true %>

  <div class="mt-6 flex flex-col sm:flex-row gap-2">
    <%= link_to "แก้ไข", edit_post_path(@post), class: "text-center rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-200 font-medium" %>
    <%= link_to "กลับไปหน้ารวม", posts_path, class: "text-center rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-200 font-medium" %>
    <%= button_to "ลบบทความ", @post, method: :delete, class: "w-full rounded-md px-3.5 py-2.5 text-white bg-red-600 hover:bg-red-500 font-medium cursor-pointer", data: { turbo_confirm: "ลบบทความนี้จริงไหม?" } %>
  </div>
</div>

• บรรทัด 1 — ชื่อแท็บเบราว์เซอร์เป็นหัวข้อบทความ (แทน "Showing post")
• บรรทัด 8–14 breadcrumb · posts_path → /posts · link_to @post.category.name, @post.category → ส่ง object หมวดไป Rails เดาได้ /categories/5 · ชิ้นสุดท้ายเป็น <span> ไม่ใช่ลิงก์ (อยู่หน้านี้แล้ว) · › เป็นตัวอักษรธรรมดา
• ที่นี่ใช้ @post ได้ — show.html.erb ไม่ใช่ partial (ชื่อไม่ขึ้นต้นด้วย _) มันคือคนจัดจานของเมนูนี้ที่หยิบจากถาดได้ตามปกติ
• บรรทัด 16 render @post, full: true — แม่พิมพ์ตัวเดิม แต่ยื่น full: true ไปด้วย → ได้แบบเต็ม
• บรรทัด 18–22 ปุ่มสามปุ่ม · flex-col sm:flex-row gap-2 = จอแคบเรียงลง จอกว้างเรียงข้าง · edit_post_path(@post) = ชื่อ route ของหน้าแก้ไข ได้ /posts/30/edit · button_to … method: :delete = ปุ่มที่ส่งคำขอลบ (บท 124) · data: { turbo_confirm: "…" } = ขึ้นกล่องถาม "ลบบทความนี้จริงไหม?" ก่อนลบ (เป็นความสามารถของ Turbo ที่มีในโปรเจกต์อยู่แล้ว · Turbo ละเอียดในบท 130)

เปิด /posts/30 · breadcrumb กับตัวบทความที่เบราว์เซอร์ได้จริง (curl -s localhost:3000/posts/30):

  <nav class="text-sm text-gray-500" aria-label="breadcrumb">
    <a class="hover:underline" href="/posts">บทความทั้งหมด</a>
    ›
    <a class="hover:underline" href="/categories/5">เครื่องดื่ม</a>
    ›
    <span class="text-gray-800">นมเย็น</span>
  </nav>

  <!-- BEGIN app/views/posts/_post.html.erb
--><article id="post_30" class="py-5 border-b border-gray-200">
  <p class="text-sm text-gray-500">
    <span class="font-medium text-blue-700">เครื่องดื่ม</span>
    · 1 day ago
  </p>

    <h1 class="mt-2 text-3xl font-bold">นมเย็น</h1>
    <p class="mt-4 leading-relaxed whitespace-pre-line">นมสีชมพูจากน้ำแดง หวานหอม เด็ก ๆ ชอบที่สุด เติมไข่มุกได้</p>
</article>

ครึ่งล่างมาจากแม่พิมพ์ _post ตัวเดียวกับหน้ารายการ แต่เข้าฝั่ง if full → ได้ <h1> กับข้อความเต็ม · log ของหน้านี้ (ผลจริง): (2 queries, 0 cached) = หยิบบทความ 1 แผ่น + หยิบหมวด 1 แผ่น · ลิงก์ เครื่องดื่ม พาไปหน้าหมวดของ scaffold (ยังเป็นภาษาอังกฤษ ไม่ได้แตะในบทนี้)

ขั้น 6 — ฟอร์ม: เลือกหมวดจากรายการ แทนพิมพ์เลข

ฟอร์มของ scaffold ให้ พิมพ์เลข category_id เอง — ผู้ใช้จะรู้ได้ยังไงว่าหมวดของหวานคือเลข 3 · เปลี่ยนเป็นกล่องเลือก (dropdown) ด้วย collection_select (บท 124) · ไฟล์ app/views/posts/_form.html.erb ทั้งไฟล์หลังแก้:

<%= form_with(model: post, class: "contents") do |form| %>
  <% if post.errors.any? %>
    <div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-md mt-3">
      <h2>บันทึกไม่ได้ มี <%= post.errors.count %> จุดที่ต้องแก้:</h2>

      <ul class="list-disc ml-6">
        <% post.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="my-5">
    <%= form.label :title, "หัวข้อ" %>
    <%= form.text_field :title, class: ["block shadow-sm rounded-md border px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": post.errors[:title].none?, "border-red-400 focus:outline-red-600": post.errors[:title].any?}] %>
  </div>

  <div class="my-5">
    <%= form.label :description, "เนื้อหา" %>
    <%= form.textarea :description, rows: 4, class: ["block shadow-sm rounded-md border px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": post.errors[:description].none?, "border-red-400 focus:outline-red-600": post.errors[:description].any?}] %>
  </div>

  <div class="my-5">
    <%= form.label :category_id, "หมวด" %>
    <%= form.collection_select :category_id, Category.all, :id, :name, { prompt: "เลือกหมวด" }, class: ["block shadow-sm rounded-md border px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": post.errors[:category].none?, "border-red-400 focus:outline-red-600": post.errors[:category].any?}] %>
  </div>

  <div class="inline">
    <%= form.submit "บันทึก", class: "w-full sm:w-auto rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white inline-block font-medium cursor-pointer" %>
  </div>
<% end %>

เทียบกับของเดิม จุดที่เปลี่ยน (ที่เหลือเป็นของ scaffold ทั้งหมด):

• บรรทัด 4 หัวกล่อง error — เดิม pluralize(post.errors.count, "error") … prohibited this post from being saved: เปลี่ยนเป็นภาษาไทย
• บรรทัด 15 · 20 · 25 form.label :title, "หัวข้อ" — argument ที่สองคือข้อความที่โชว์ (ไม่ใส่ = Rails ใช้ชื่อช่องภาษาอังกฤษ)
• บรรทัด 26 collection_select แทน text_field — อ่านทีละ argument: :category_id ช่องที่จะส่ง · Category.all รายการให้เลือก · :id ค่าที่ส่งจริง · :name ข้อความที่ผู้ใช้เห็น · { prompt: "เลือกหมวด" } ตัวเลือกแรกที่ว่าง · ก้อนท้าย class: […] คือ class ของแท็ก
  ทำไมมีปีกกาสองก้อน: ก้อนแรกคือ "ตั้งค่าของ helper" ก้อนหลังคือ "attribute ของแท็ก HTML" · ถ้าไม่มี { } ครอบก้อนแรก Ruby จะรวมทุกอย่างเป็นก้อนเดียวแล้ว class หาย
• บรรทัด 26 (ท้าย) post.errors[:category] แทน post.errors[:category_id] — เมื่อไม่เลือกหมวด belongs_to ใส่ error ไว้ที่ชื่อ :category ("Category must exist" · บท 115) ไม่ใช่ :category_id · ถ้าใช้ของเดิม ขอบกล่องจะไม่เป็นสีแดงเลย
• บรรทัด 30 form.submit "บันทึก" — ข้อความบนปุ่ม (เดิม Rails ตั้งเป็น "Create Post" / "Update Post")

ก้อน class: [ "…", { "…": เงื่อนไข } ] ยาว ๆ ที่ไม่ได้แตะ อ่านยังไง — เป็นของ scaffold · ช่องแรกคือคลาสที่ใช้เสมอ · ในปีกกาคือ "คลาสนี้ : ใส่เมื่อเงื่อนไขเป็นจริง" · ช่องไม่มี error (.none?) ได้ขอบเทา · มี error (.any?) ได้ขอบแดง · ดูผลได้ใน HTML ข้างล่าง: ฟอร์มเปล่ายังไม่มี error จึงได้ border-gray-400 focus:outline-blue-600 ต่อท้าย

เปิด /posts/new · กล่องเลือกที่เบราว์เซอร์ได้จริง (curl -s localhost:3000/posts/new):

    <label for="post_category_id">หมวด</label>
    <select class="block shadow-sm rounded-md border px-3 py-2 mt-2 w-full border-gray-400 focus:outline-blue-600" name="post[category_id]" id="post_category_id"><option value="">เลือกหมวด</option>
<option value="1">อาหารไทย</option>
<option value="2">ก๋วยเตี๋ยว</option>
<option value="3">ของหวาน</option>
<option value="4">อาหารริมทาง</option>
<option value="5">เครื่องดื่ม</option></select>

• name="post[category_id]" — ชื่อช่องตรงกับที่ controller รอใน params.expect(post: [ :title, :description, :category_id ]) เป๊ะ (บท 117) — controller ไม่ต้องแก้
• value="1" (ส่งจริง) ← :id · อาหารไทย (ผู้ใช้เห็น) ← :name · <option value="">เลือกหมวด ← prompt:

ลองกด บันทึก โดยไม่กรอกอะไรเลย (ตรวจด้วย Chrome จริง): ได้กล่องแดง บันทึกไม่ได้ มี 3 จุดที่ต้องแก้: Category must exist · Title can't be blank · Description can't be blank และกล่องเลือกหมวดขอบแดง · ข้อความ error ยังเป็นภาษาอังกฤษเพราะมาจาก Rails (ไม่ได้ตั้งภาษาไทย) · ใน Console ของเบราว์เซอร์ (คลิกขวา → Inspect → แท็บ Console) จะมี 422 (Unprocessable Content) — ปกติของฟอร์มที่ไม่ผ่าน validation ไม่ใช่บั๊ก

สุดท้ายของขั้นนี้ แปลข้อความในหน้า new กับ edit · app/views/posts/new.html.erb ทั้งไฟล์:

<% content_for :title, "เขียนบทความใหม่" %>

<div class="md:w-2/3 w-full">
  <h1 class="font-bold text-4xl">เขียนบทความใหม่</h1>

  <%= render "form", post: @post %>

  <%= link_to "กลับไปหน้ารวม", posts_path, class: "w-full sm:w-auto text-center mt-2 sm:mt-0 sm:ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
</div>

app/views/posts/edit.html.erb ทั้งไฟล์:

<% content_for :title, "แก้ไขบทความ" %>

<div class="md:w-2/3 w-full">
  <h1 class="font-bold text-4xl">แก้ไขบทความ</h1>

  <%= render "form", post: @post %>

  <%= link_to "ดูบทความนี้", @post, class: "w-full sm:w-auto text-center mt-2 sm:mt-0 sm:ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
  <%= link_to "กลับไปหน้ารวม", posts_path, class: "w-full sm:w-auto text-center mt-2 sm:mt-0 sm:ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
</div>

เปลี่ยนแค่ข้อความ · class เดิมทุกตัว · render "form", post: @post = ยื่น @post ใส่มือแม่พิมพ์ _form ในชื่อ post (นี่คือเหตุผลที่ใน _form เขียน post.errors ไม่ใช่ @post.errors)

ขั้น 7 — เวลาไทย และไฟล์ prompt ของ Lab

ใน config/application.rb (ไฟล์ตั้งค่าของทั้งแอป) มีบรรทัดที่ถูกปิดไว้ด้วย # · แก้บรรทัดนี้:

    # config.time_zone = "Central Time (US & Canada)"

เป็น:

    config.time_zone = "Asia/Bangkok"

ปิดแล้วเปิดร้านใหม่ (ไฟล์ใน config/ ถูกอ่านแค่ตอนเปิดร้าน) · อยากเห็นผลต่างเอง ให้ถามเวลาสร้างของ "นมเย็น" ด้วย bin/rails runner (รันโค้ด Ruby หนึ่งบรรทัดในแอป) ทั้งก่อนและหลังแก้ · ผลจริง:

$ bin/rails runner 'p Time.zone.name; p Post.find_by!(title: "นมเย็น").created_at'
# ก่อนแก้
"UTC"
2026-11-06 04:14:55.753375000 UTC +00:00
# หลังแก้
"Asia/Bangkok"
2026-11-06 11:14:55.753375000 +07 +07:00

เวลาเดียวกัน แต่แสดงเป็นเวลาไทย (+7 ชั่วโมง) · ในตู้ยังเก็บเป็น UTC เหมือนเดิม · จะเห็นผลเวลาเปิด /posts.json หรือเมื่อโชว์วันที่ (บท 124 l) · time_ago_in_words ไม่เปลี่ยน เพราะมันนับแค่ส่วนต่าง

ต่อไปคือ prompt ของ Lab · สร้างไฟล์ prompts/01-views.md ตามสไลด์หน้า 21 (ทั้งไฟล์ ข้างใน prompts/ ที่มี 00-context.md อยู่แล้ว · บท 121):

## เป้าหมาย

หน้า index กับ show ของ Post ที่คนอ่านรู้เรื่อง
ใช้ partial ร่วมกัน และมีข้อมูลตัวอย่างพอให้เห็นปัญหา

## ข้อกำหนด

- partial app/views/posts/_post.html.erb
  รับค่าผ่าน local ห้ามใช้ instance variable
- index ใช้ render @posts ไม่ต้องเขียน each เอง
- โชว์ชื่อหมวด ไม่ใช่ category_id
- ตัดคำอธิบายด้วย truncate ไม่ใช่ substring
- แสดงเวลาด้วย time_ago_in_words
- index ต้องมี pagination หน้าละ 10
- controller ต้อง includes(:category)
- show มี breadcrumb กลับไปหน้า index
- db/seeds.rb สร้าง 5 หมวด 30 โพสต์ ข้อความไทย

## ห้าม

- ใช้ raw หรือ html_safe กับข้อมูลจากผู้ใช้
- Post.all ที่ไม่มี limit
- เขียน path เป็น string เช่น "/posts/#{id}"
- แตะ @post ข้างใน partial

## เกณฑ์ตรวจรับ

- [ ] เปิด /posts แล้วเห็นรายการพร้อมชื่อหมวด
- [ ] log โชว์ไม่เกิน 3 query ต่อการโหลด 1 หน้า
- [ ] partial ไม่มีคำว่า @ อยู่เลย
- [ ] grep หาคำว่า raw กับ html_safe แล้วไม่เจอ
- [ ] มี pagination ใช้งานได้จริง
- [ ] seed รันซ้ำได้ไม่พัง

สไลด์หน้า 21 ชี้ว่า ทุกบรรทัดในข้อกำหนดกับข้อห้ามมาจากสิ่งที่เพิ่งเรียน — ถ้าเมื่อเช้าให้เขียน prompt นี้ เราจะเขียนได้แค่บรรทัดเป้าหมาย · ลองจับคู่ดูว่าแต่ละบรรทัดมาจากไหน และใน Lab นี้เราทำตรงไหน:

แก้ prompts/00-context.md อีกหนึ่งบรรทัด (ในหัวข้อ "รูปแบบโค้ด") · บรรทัดเดิม:

- ข้อความที่ผู้ใช้เห็นเป็นภาษาไทย ผ่าน i18n

เปลี่ยนเป็น:

- ข้อความที่ผู้ใช้เห็นเป็นภาษาไทย เขียนตรง ๆ ใน view (ยังไม่ใช้ i18n)

ทำไม: i18n คือระบบแยกข้อความไปเก็บในไฟล์ภาษาแล้วเรียกด้วย t(".title") · โปรเจกต์ของเรายังไม่ได้ตั้งระบบนั้น (เขียนภาษาไทยตรง ๆ ใน view อย่างที่ทำมาทั้ง Lab) · ถ้าปล่อยบรรทัดเดิมไว้ AI ที่อ่าน context จะเขียน t(".title") มาให้ แล้วหน้าเว็บโชว์ข้อความแปลก ๆ แทนภาษาไทย — context ที่ไม่ตรงกับโค้ดจริงทำให้ AI เข้าใจผิด

ตรวจรับตาม checklist ของสไลด์หน้า 21 — ทีละข้อ

ถึงตรงนี้โค้ดครบแล้ว · ตรวจรับเหมือนเป็นงานที่คนอื่น (หรือ AI) ส่งมา — ทุกข้อมีคำสั่งตรวจจริงและผลจริง:

grep = คำสั่งค้นหาข้อความในไฟล์ · -n บอกเลขบรรทัด · -r ค้นทั้งโฟลเดอร์ · \| = "หรือ" · _*.html.erb = ทุกไฟล์ที่ขึ้นต้นด้วย _ (คือ partial ทั้งหมด) · ไม่มี output = ไม่เจอ = ผ่าน

pagination: ลองค่าแปลก ๆ

นี่คือเหตุผลที่ไม่เขียนเอง — ผลจริงจาก curl ทีละ URL (ถ้าคุณเคยทำ Go บท 35 ที่ต้องเขียน binding:"min=1" เองแล้วได้ 400 · pagy เลือกอีกทาง):

ใน Chrome จริง: กด "ถัดไป →" แล้ว URL เปลี่ยนเป็น /posts?page=2 หัวข้อแรกเป็น ชามะนาว · และจอกว้าง 375px (ขนาดมือถือ) ทุกหน้าไม่มีแถบเลื่อนแนวนอน

http://localhost:3000/posts?page=99

  <div id="posts">
    <p class="text-center text-gray-500 my-10">ไม่พบบทความ</p>
  </div>

  <!-- BEGIN app/views/shared/_pagination.html.erb
--><nav class="mt-8 flex items-center justify-between gap-2 text-sm" aria-label="เปลี่ยนหน้า">
    <a class="rounded-md px-3 py-2 bg-gray-100 hover:bg-gray-200 font-medium" href="/posts?page=3">← ก่อนหน้า</a>

  <span class="text-gray-600">หน้า 99 / 3</span>

    <span class="rounded-md px-3 py-2 text-gray-400">ถัดไป →</span>
</nav>

ใส่บั๊กกลับ เพื่อให้เชื่อตัวตรวจได้

"log ได้ 3 query" ผ่านแล้ว — แต่ถ้าตัวตรวจไม่เคยจับบั๊กได้เลย เราจะรู้ได้ไงว่ามันทำงาน · ลองลบ .includes(:category) ออกชั่วคราว ให้เหลือ pagy(Post.recent, limit: 10) แล้วรีเฟรช /posts · log จริง (ตัดบรรทัด ↳ กับ Rendering ออก · ย่อคอมเมนต์ท้าย SQL · ตัดบรรทัด user: กับ Call stack ของ bullet ออก):

  Post Count (0.6ms)  SELECT COUNT(*) FROM "posts" /*…*/
  Post Load (0.7ms)  SELECT "posts".* FROM "posts" ORDER BY "posts"."created_at" DESC LIMIT 10 OFFSET 0 /*…*/
  Category Load (0.6ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" = 5 LIMIT 1 /*…*/
  Category Load (0.7ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" = 4 LIMIT 1 /*…*/
  Category Load (0.7ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" = 3 LIMIT 1 /*…*/
  Category Load (0.7ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" = 2 LIMIT 1 /*…*/
  Category Load (0.7ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" = 1 LIMIT 1 /*…*/
  CACHE Category Load (0.3ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" = 5 LIMIT 1
  CACHE Category Load (0.3ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" = 4 LIMIT 1
  CACHE Category Load (0.3ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" = 3 LIMIT 1
  CACHE Category Load (0.3ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" = 2 LIMIT 1
  CACHE Category Load (0.3ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" = 1 LIMIT 1
Completed 200 OK in 21ms (Views: 14.0ms | ActiveRecord: 4.5ms (12 queries, 5 cached) | GC: 0.0ms)

USE eager loading detected
  Post => [:category]
  Add to your query: .includes([:category])

• 12 queries — เดินไปตู้ทีละชิ้นต่อบทความ 10 ชิ้น (+ นับ + หยิบบทความ) · ตัวตรวจ "≤ 3" จับได้ทันที
• CACHE (cache = กระดาษจดคำตอบไว้ใช้ซ้ำ) — หมวดเลข 5 ถูกถามซ้ำ Rails จำคำตอบเดิมใน request นี้ไว้ ไม่ต้องไปตู้จริง (มีแค่ 5 หมวด แต่ 10 บทความ) · แต่ยังเป็นบั๊ก ถ้ามี 10 หมวดก็จะไปตู้จริงครบ 10 ครั้ง
• bullet เตือน USE eager loading ("ควรใช้ includes") และหน้าเว็บมีกล่อง bullet footer โผล่ท้ายหน้า (เป็นของ development เท่านั้น)

ใส่ .includes(:category) กลับ แล้วรีเฟรช → กลับมา 3 queries · ก่อน commit ต้องอยู่ในสถานะนี้

seed รันซ้ำไม่พัง

$ bin/rails db:seed
categories: 5 · posts: 30
$ bin/rails db:seed
categories: 5 · posts: 30

รอบสองตัวเลขไม่เพิ่ม เพราะ seeds ของบท 120 ใช้ find_or_create_by! ("หาแฟ้มนี้ก่อน มีแล้วใช้ของเดิม ไม่มีค่อยสร้าง") · นี่คือประโยค ② ของวันในรูปเล็ก ๆ: ทำซ้ำได้โดยไม่เบิ้ล · seed ที่ใช้ create! ตรง ๆ รอบสองจะได้ 60 บทความ

ที่ AI พลาดประจำในบล็อกนี้ — อาการ และตรวจยังไง

สไลด์หน้า 22 รวบรวมไว้ 5 ข้อ · ผมเติม 2 ข้อท้ายที่เจอเองตอนทำ Lab นี้ (pagy เปลี่ยน API บ่อย AI มักเขียนตามรุ่นเก่า):

สังเกตว่าเกือบทุกข้อ "ใช้ได้" ตอนเปิดดูด้วยตา — เปิดหน้าแล้วสวยไม่ได้แปลว่าผ่าน · checklist ที่รันเป็นคำสั่งได้จึงสำคัญ

ทางเลือก: ลองให้ AI ทำ Lab เดียวกัน แล้วตรวจด้วย checklist ชุดนี้

ทำหลัง commit ของ Lab แล้ว (ส่วนถัดไป) · ไม่บังคับ · ขั้นตอน:

1. git switch -c ai-vibe1 HEAD~1 — สร้าง branch ใหม่จาก commit ก่อน Lab (= สถานะตอนจบบท 120) แล้วย้ายไปอยู่ที่นั่น · โค้ดใน editor จะกลับเป็น scaffold ดิบ (HEAD~1 = "ถอยไป 1 commit" · ถ้า commit ภารกิจท้ายบทไปแล้วด้วย ใช้ HEAD~2)
2. git checkout @{-1} -- prompts/ — ก็อปโฟลเดอร์ prompts/ จาก branch ที่เพิ่งจากมา (@{-1} = "branch ก่อนหน้า") · AI จะได้มีใบสั่งงานกับคู่มือ
3. เปิด Claude Code (บท 86) แล้วสั่งประมาณ: "อ่าน @prompts/00-context.md และ @prompts/01-views.md แล้วทำตาม · เสร็จแล้วรันเกณฑ์ตรวจรับทุกข้อให้ดู"
4. ตรวจเองด้วยตาราง checklist และตาราง "AI พลาดประจำ" ด้านบน — อย่าเชื่อที่ AI บอกว่าผ่าน รันคำสั่งเอง
5. กลับบ้าน: git add . && git commit -m "ลอง AI" แล้ว git switch - (กลับ branch เดิม) · ปิดเปิด bin/dev ใหม่ · ถ้า AI แก้ seeds หรือสร้าง migration ข้อมูลในตู้จะเปลี่ยนตาม → bin/rails db:reset (ล้างตู้แล้วสร้างใหม่จาก schema + seeds ของ branch ที่อยู่)

เทียบผลกับของที่คุณทำเอง · ข้อที่ AI พลาด = วัตถุดิบของภารกิจท้ายบท

เก็บเข้าโปรเจกต์

ดูก่อนว่าจะเก็บอะไรบ้าง (ผลจริง):

$ git status --short
 M Gemfile
 M Gemfile.lock
 M app/controllers/application_controller.rb
 M app/controllers/posts_controller.rb
 M app/views/posts/_form.html.erb
 M app/views/posts/_post.html.erb
 M app/views/posts/edit.html.erb
 M app/views/posts/index.html.erb
 M app/views/posts/new.html.erb
 M app/views/posts/show.html.erb
 M config/application.rb
 M prompts/00-context.md
?? app/views/shared/
?? prompts/01-views.md

M = แก้ไฟล์เดิม · ?? = ไฟล์/โฟลเดอร์ใหม่ที่ git ยังไม่รู้จัก · ต้องมีครบ 14 บรรทัดนี้ ไม่มากไม่น้อย (ถ้ามีไฟล์อื่นโผล่ เช่น ไฟล์ทดลองจากบทก่อน ให้จัดการก่อน) · แล้วเก็บด้วยข้อความ commit ตามสไลด์หน้า 22 (ผลจริง):

$ git add .
$ git commit -m "views: index + show + seed"
[my-day3 265cf20] views: index + show + seed
 14 files changed, 121 insertions(+), 60 deletions(-)
 create mode 100644 app/views/shared/_pagination.html.erb
 create mode 100644 prompts/01-views.md

my-day3 คือ branch ที่สร้างไว้ในบท 120 · เลข commit (265cf20) ของคุณจะต่าง · ตัวเลข 14 files changed, 121 insertions(+), 60 deletions(-) ควรตรงกัน ถ้าพิมพ์ตามบทเรียนครบทุกตัวอักษร (ต่างนิดหน่อยได้ถ้า Gemfile.lock ได้ pagy รุ่นอื่น)

ภารกิจ: เติมกฎที่เจอเองลง 00-context.md

สไลด์หน้า 22: ทุกครั้งที่ AI พลาดเรื่องเดิมซ้ำ ให้เติมเป็นกฎถาวรลง 00-context.md · ไฟล์นี้จะโตขึ้นเรื่อย ๆ ตลอดวัน และนั่นคือสิ่งที่ควรเกิด — มันคือบันทึกว่าทีมเราเจออะไรมาแล้ว

diff --git a/prompts/00-context.md b/prompts/00-context.md
index 53783b1..c0426ef 100644
--- a/prompts/00-context.md
+++ b/prompts/00-context.md
@@ -33,3 +33,8 @@
 - บอกชื่อไฟล์ทุกไฟล์ที่แก้หรือสร้าง
 - ถ้าต้องมี migration ให้เขียนมาด้วย
 - อย่าเพิ่ง refactor อย่างอื่นที่ไม่ได้ขอ
+
+## กฎที่ทีมเราเจอเอง
+
+- pagy รุ่น 43: include Pagy::Method และ pagy(..., limit: 10)
+  ห้ามใช้ Pagy::Backend หรือ items: ของรุ่นเก่า

Quiz

ถ้าเปิดสไลด์ดูประกอบ

อ้างอิง

• pagy — Quick Start — อ่านหัวข้อ Steps ส่วนที่เขียน include Pagy::Method และ @pagy, @records = pagy(...) (ตรงกับขั้น 2) · สังเกตว่าคู่มือใช้ <%== @pagy.series_nav %> ซึ่งเราเลี่ยง
• pagy — page_url — รายการค่าที่ส่งได้ (:previous · :next · :first · :last) ที่ใช้ในแถบเปลี่ยนหน้าของเรา
• Rails Guides — Layouts and Rendering — อ่านหัวข้อ Rendering Collections ช่วงท้าย ที่บอกว่า "In the event that the collection is empty, render will return nil" (ที่มาของ render(@posts) || …)
• Rails Guides — Action View Overview — อ่านหัวข้อ Strict Locals วิธีเขียน <%# locals: (…) %> และค่าตั้งต้นแบบ full: false
• Rails API — TextHelper#truncate — ตัวอย่างการใช้ separator: · และ FormOptionsHelper#collection_select ลำดับ argument (ขั้น 6)
• Rails Guides — Active Record Query Interface — อ่านหัวข้อ includes ตัวอย่างทางการของการหยิบทั้งตะกร้าแบบเดียวกับขั้น 2