helper และ form_with — เครื่องมือจัดจาน และฟอร์มที่ตั้งชื่อช่องให้เอง

1 · helper คืออะไร — เครื่องมือในลิ้นชักของคนจัดจาน

helper คือ method ที่ Rails เตรียมไว้ให้เรียกใน view เพื่อทำงานจัดหน้าตาที่ทุกหน้าต้องทำซ้ำ ๆ — ตัดข้อความยาวให้สั้น · บอกว่า "เขียนเมื่อ 1 เดือนก่อน" · ใส่หน่วยเงินให้ตัวเลข · มันรับค่าเข้าไป แล้วคืนข้อความ (หรือ HTML) ออกมาให้ <%= %> วางบนหน้า

ถ้าไม่มี helper ทุกหน้าต้องเขียนวิธีตัดข้อความ วิธีจัดวันที่ของตัวเอง · ผลคือแต่ละหน้าทำไม่เหมือนกัน และพังคนละแบบ

เทียบกับ Next.js: ในฝั่ง FRONT เราเขียนฟังก์ชันเล็ก ๆ เช่น formatDate(post.createdAt) แล้วเรียกใน JSX ด้วย {formatDate(…)} · helper คือฟังก์ชันแบบนั้นที่ Rails เขียนมาให้แล้วเป็นร้อยตัว และเราเพิ่มของเราเองได้ (หัวข้อ 4) · เทียบกับ Go: คล้าย package strings · fmt ที่มีฟังก์ชันจัดข้อความสำเร็จรูป แต่ helper ถูกออกแบบมาเพื่อใช้ในหน้าเว็บโดยเฉพาะ

ลองใน console ยังไง: console (ครัวทดลอง บท 104) ไม่ใช่ view จึงเรียก helper ตรง ๆ ไม่ได้ · ต้องเรียกผ่านตัวแปรชื่อ helper ที่ Rails เตรียมไว้ให้ใน console · ผมลองทั้งสองแบบ:

wongnok-blog-all-in-one(dev):001> truncate("ต้มยำกุ้ง", length: 5)
(wongnok-blog-all-in-one):1:in '<main>': undefined method 'truncate' for main (NoMethodError)
wongnok-blog-all-in-one(dev):002> helper.truncate("ต้มยำกุ้ง", length: 5)
=> "ต้..."

• บรรทัด 001 = เรียกเฉย ๆ → NoMethodError "ไม่รู้จัก method truncate" · คำว่า for main = "ในตัว console เอง" · console ไม่ได้ถือลิ้นชักเครื่องมือของ view
• บรรทัด 002 = เรียกผ่าน helper. → ได้ผล · ใน view ไม่ต้องมี helper. เขียน <%= truncate(…) %> ได้เลย
• "ต้..." = ยาวรวม 5 ตัว: ต + ้ (ไม้โท นับเป็นหนึ่งตัว) + จุดสามตัว · เรื่องนี้แหละที่หัวข้อถัดไปจะขุด

2 · ตัดข้อความภาษาไทย — [0..19] กับ truncate

หน้ารายการบทความอยากโชว์แค่ต้นเรื่องสั้น ๆ · วิธีที่คนเขียน Ruby นึกออกก่อน (และ AI ชอบเขียน) คือหยิบตัวอักษรช่วงแรกด้วย [0..19] = "ตัวที่ 0 ถึงตัวที่ 19" (รวม 20 ตัว) · ลองกับบทความแรกใน seeds (ต้มยำกุ้งน้ำข้น) ซึ่งเนื้อหาขึ้นต้นว่า "ต้มยำกุ้งแบบน้ำข้นใส่นมข้นจืด รสเปรี้ยวเผ็ดกลมกล่อม …":

wongnok-blog-all-in-one(dev):001> post = Post.find(1)
wongnok-blog-all-in-one(dev):002> post.description[0..19]

wongnok-blog-all-in-one(dev):001> post = Post.find(1)
=>
#<Post:0x0000000125d4ffc8
...
wongnok-blog-all-in-one(dev):002> post.description[0..19]
=> "ต้มยำกุ้งแบบน้ำข้นใส"

ทีนี้ลองเครื่องมือของลิ้นชัก — truncate แปลว่า "ตัดให้สั้น":

wongnok-blog-all-in-one(dev):003> helper.truncate(post.description, length: 40)
=> "ต้มยำกุ้งแบบน้ำข้นใส่นมข้นจืด รสเปรี้..."
wongnok-blog-all-in-one(dev):004> helper.truncate(post.description, length: 40, separator: " ")
=> "ต้มยำกุ้งแบบน้ำข้นใส่นมข้นจืด..."

• length: 40 = "ผลลัพธ์ยาวไม่เกิน 40 ตัว รวมจุดสามตัวแล้ว" · truncate เติม ... ให้เอง ผู้อ่านรู้ว่ายังมีต่อ
• บรรทัด 003 ยังตัดกลางคำ ("รสเปรี้...") — truncate ก็นับตัวอักษรเหมือน [0..19] ไม่ได้รู้จักคำไทยเลย
• separator: " " (บรรทัด 004) = "ถ้าจะตัด ให้ถอยไปตัดที่ช่องว่างตัวสุดท้าย" · คนไทยเว้นวรรคระหว่างวลี จุดตัดจึงอ่านรู้เรื่อง: "…ใส่นมข้นจืด..."
• ถ้าในช่วงนั้นไม่มีช่องว่างเลย separator ช่วยไม่ได้ — ผมลอง length: 20 และ 30 กับประโยคเดียวกัน ได้ผลเหมือนไม่ใส่ separator (ตัดกลางคำ) เพราะช่องว่างแรกอยู่ตัวที่ 30

3 · ลิ้นชักมีอะไรบ้าง — 4 กลุ่มที่ใช้บ่อย

ผมเปิด console แล้วลองทีละตัวกับข้อมูลจริง (post = บทความเลข 1 · ตัดบรรทัด SQL และบางบรรทัดออก เลขบรรทัดจึงกระโดด):

wongnok-blog-all-in-one(dev):002> helper.pluralize(1, "comment")
=> "1 comment"
wongnok-blog-all-in-one(dev):003> helper.pluralize(3, "comment")
=> "3 comments"
wongnok-blog-all-in-one(dev):007> helper.time_ago_in_words(post.created_at)
=> "about 1 month"
wongnok-blog-all-in-one(dev):008> helper.l(post.created_at, format: :long)
=> "October 08, 2026 03:35"
wongnok-blog-all-in-one(dev):009> helper.number_to_human(12500)
=> "12.5 Thousand"
wongnok-blog-all-in-one(dev):010> helper.number_to_currency(99)
=> "$99.00"
wongnok-blog-all-in-one(dev):011> helper.number_to_currency(99, unit: "฿")
=> "฿99.00"
wongnok-blog-all-in-one(dev):012> helper.tag.div("อร่อย", class: "card")
=> "<div class=\"card\">อร่อย</div>"

รวมเป็นตาราง — คอลัมน์ขวาคือผลจริงจาก console (เครื่องหมาย \" ใน console คือ " ธรรมดา ผมเขียนตารางเป็นแบบที่หน้าเว็บได้รับจริง):

สามเรื่องที่ชอบทำให้งง:

• time_ago_in_words ไม่มีคำว่า ago — ได้แค่ about 1 month · ต้องพิมพ์ ago (หรือ "ที่แล้ว") ต่อท้ายเอง
• number_to_currency ใส่ $ เป็นค่าตั้งต้น — ร้านไทยต้องบอก unit: "฿" ทุกครั้ง
• ทุกอย่างเป็นภาษาอังกฤษ (about 1 month · October · Thousand) และเวลา 03:35 คือเวลาสากล UTC (บท 107 · ช้ากว่าไทย 7 ชั่วโมง เพราะแอปยังไม่ได้ตั้งเขตเวลา — Lab บท 126 ตั้งให้)

ทำไมเป็นอังกฤษ: helper พวกนี้ไม่ได้เขียนคำตายตัวไว้ในโค้ด มันไปเปิดสมุดคำแปลของแอป (ไฟล์ใน config/locales/) ตามภาษาที่แอปตั้งไว้ · แอปของเรามีแค่สมุดภาษาอังกฤษ (en.yml) จึงได้อังกฤษ

ประเด็นที่ต้องจำ: ใช้ l(…) แล้ว วันหนึ่งเปลี่ยนภาษาได้ที่เดียวทั้งแอป · ถ้าเขียนรูปแบบวันที่ตายตัวเอง (strftime("%d/%m/%Y") = "เอาวัน/เดือน/ปี มาเรียงแบบนี้เป๊ะ ๆ") ต้องไล่แก้ทุกไฟล์ · (การใส่ภาษาไทยให้ทั้งแอปไม่ได้ทำในบทเรียนนี้ — ดูตารางท้ายบท)

4 · เขียน helper ของร้านเอง — reading_time

ของที่ลิ้นชักไม่มี เราเขียนเพิ่มเองได้ · ไฟล์อยู่ใน app/helpers/ (scaffold สร้าง posts_helper.rb ว่าง ๆ ไว้ให้แล้ว) · method ที่เขียนในไฟล์นี้ Rails ส่งให้ view เรียกใช้ได้เอง ไม่ต้อง import อะไร · เทียบ Next.js: เหมือนไฟล์ lib/format.ts ที่รวมฟังก์ชันจัดข้อความไว้ แต่ไม่ต้องเขียน import ที่หัวไฟล์ component

เปิด app/helpers/posts_helper.rb แล้วเติมให้เป็นแบบนี้ (สูตรจากสไลด์หน้า 15 — "บทความนี้อ่านกี่นาที"):

# app/helpers/posts_helper.rb
module PostsHelper
  def reading_time(text)
    "#{(text.to_s.split.size / 200.0).ceil} นาที"
  end
end

• module PostsHelper … end = กล่องรวม method (scaffold สร้างไว้แล้ว) · module คือกล่องที่ Rails เอาไปเสียบให้ view ใช้ได้ · เราเติมแค่ def … end ข้างใน
• text.to_s = เปลี่ยนเป็นข้อความก่อน · ถ้า text เป็น nil จะได้ "" แทนที่จะพัง
• .split = หั่นข้อความตรงช่องว่าง ได้ array ของ "คำ" · .size = นับว่ามีกี่ชิ้น
• / 200.0 = สไลด์สมมติว่าคนอ่านได้นาทีละ 200 คำ · ต้องมี .0 ไม่งั้น Ruby หารเลขเต็มทิ้งเศษ (11 / 200 ได้ 0)
• .ceil = ปัดขึ้น (0.055 → 1) · "#{…} นาที" = เอาตัวเลขไปแทรกในข้อความ (string interpolation บท 91)

ลองใน console (ถ้าเปิดค้างไว้ พิมพ์ reload! ก่อน · ไม่งั้นมันยังไม่เห็น method ใหม่ · บรรทัด 001 คือ post = Post.find(1) เหมือนเดิม):

wongnok-blog-all-in-one(dev):002> post.description.split.size
=> 11
wongnok-blog-all-in-one(dev):003> helper.reading_time(post.description)
=> "1 นาที"
wongnok-blog-all-in-one(dev):004> english = "very tasty " * 1000
wongnok-blog-all-in-one(dev):005> english.split.size
=> 2000
wongnok-blog-all-in-one(dev):006> helper.reading_time(english)
=> "10 นาที"
wongnok-blog-all-in-one(dev):007> thai = "อร่อยมาก" * 1000
wongnok-blog-all-in-one(dev):008> thai.length
=> 8000
wongnok-blog-all-in-one(dev):009> thai.split.size
=> 1
wongnok-blog-all-in-one(dev):010> helper.reading_time(thai)
=> "1 นาที"
wongnok-blog-all-in-one(dev):011> helper.reading_time(nil)
=> "0 นาที"

"very tasty " * 1000 = เอาข้อความมาต่อกัน 1,000 รอบ (ผมตัดบรรทัด => ที่ console โชว์ข้อความยาว ๆ ออก) · ภาษาอังกฤษ 2,000 คำ ได้ 10 นาที ตรงตามสูตร · แต่ภาษาไทย 8,000 ตัวอักษร ได้แค่ "1 นาที"

เพราะภาษาไทยไม่เว้นวรรคระหว่างคำ · split เห็นทั้งก้อนเป็น "คำเดียว" · บทความใน seeds ทั้ง 30 ชิ้นนับได้แค่ 3–11 "คำ" จึงได้ "1 นาที" ทุกชิ้น · สูตรนี้ใช้ฝึกเขียน helper ได้ แต่อย่าเชื่อตัวเลขกับภาษาไทย · ถ้าจะทำจริงต้องนับแบบอื่น (เช่นนับตัวอักษร) และต้องหาตัวเลขความเร็วอ่านภาษาไทยจากแหล่งที่เชื่อได้ — ผมไม่เดาตัวเลขให้

5 · form_with — ฟอร์มชิ้นเดียว ใช้ทั้งหน้า new และ edit

บท 118 เราอ่านฟอร์มของ scaffold ผ่าน ๆ ไปแล้ว · บทนี้ดูให้ลึกขึ้นว่า form_with สร้าง HTML อะไรให้ และทำไมไม่ควรเขียนช่องเอง · นี่คือไฟล์ฟอร์มของ Post (ผมตัด class: … ที่ยาวมากออกให้เห็นโครง ไฟล์จริงมี class ยาวทุกบรรทัด):

<%# app/views/posts/_form.html.erb (ตัด class ออก) %>
<%= form_with(model: post) do |form| %>
  <% if post.errors.any? %>
    … กล่องแดง: <%= pluralize(post.errors.count, "error") %> prohibited … + รายการ error …
  <% end %>

  <%= form.label :title %>
  <%= form.text_field :title %>

  <%= form.label :description %>
  <%= form.textarea :description, rows: 4 %>

  <%= form.label :category_id %>
  <%= form.text_field :category_id %>

  <%= form.submit %>
<% end %>

• form_with(model: post) do |form| = "วาดฟอร์มของแฟ้ม post นี้" · form คือผู้ช่วยวาดช่อง (สไลด์เขียนสั้นว่า f — ชื่อตัวแปรเฉย ๆ ตั้งอะไรก็ได้)
• form.label :title = ป้ายชื่อช่อง (ขึ้นว่า Title) · form.text_field :title = ช่องกรอกบรรทัดเดียวของ title · form.textarea = ช่องกรอกหลายบรรทัด
• if post.errors.any? = "แฟ้มนี้มีโน้ตสีเหลือง (errors บท 110) ไหม" · มีก็วาดกล่องแดงที่ list ทุกข้อ · หน้า new ครั้งแรกไม่มี error กล่องนี้จึงไม่โผล่
• form.submit = ปุ่มส่ง · แฟ้มนี้ใช้ helper ไปแล้วหนึ่งตัว: pluralize ในหัวกล่องแดง (1 error / 2 errors)
• ช่องหมวดเป็น text_field = ช่องพิมพ์ข้อความ · ผู้ใช้ต้องรู้เองว่าอาหารไทยคือเลข 1 — หัวข้อ 7 จะแก้

เปิดไฟล์จริงจะเห็นช่องแต่ละช่องลงท้ายด้วย class: ["block … w-full", {"border-gray-400 …": post.errors[:title].none?, "border-red-400 …": post.errors[:title].any?}] · อ่านว่า "class พื้นฐานชุดแรกใส่เสมอ · ถ้าช่อง title ไม่มี error ใส่ขอบเทา · ถ้ามี error ใส่ขอบแดง" — แค่นั้น ไม่ต้องจำรูปแบบนี้

เปิด server (bin/dev) ทิ้งไว้ แล้วดู HTML ที่เบราว์เซอร์ได้รับจริงของสองหน้า · คำสั่งยาวนี้ = ดึงหน้ามา → กรองเหลือเฉพาะแท็กฟอร์ม → ลบ class ทิ้งให้อ่านง่าย (ก็อปไปวางได้เลย หรือเปิดหน้าในเบราว์เซอร์แล้วกด Ctrl+U / ⌘⌥U ดูซอร์สแทนก็ได้):

$ curl -s localhost:3000/posts/new | grep -oE '<(form|input|textarea|label)[^>]*>' | sed -E 's/ class="[^"]*"//'
<form action="/posts" accept-charset="UTF-8" method="post">
<input type="hidden" name="authenticity_token" value="roV72dSbNORytib2tqzjP5B0dfVVs7JxUJegGxqsUxv3gccn_pjGkJne71ta2CaRYomqlGvYAPErHqE0l2hqXA" />
<label for="post_title">
<input type="text" name="post[title]" id="post_title" />
<label for="post_description">
<textarea rows="4" name="post[description]" id="post_description">
<label for="post_category_id">
<input type="text" name="post[category_id]" id="post_category_id" />
<input type="submit" name="commit" value="Create Post" data-disable-with="Create Post" />

$ curl -s localhost:3000/posts/1/edit | grep -oE '<(form|input|textarea|label)[^>]*>' | sed -E 's/ class="[^"]*"//'
<form action="/posts/1" accept-charset="UTF-8" method="post">
<input type="hidden" name="_method" value="patch" />
<input type="hidden" name="authenticity_token" value="YT93l9aqvj-5s5wsqlz_lu9mcgfi2hwt04wUtLvpLZumWAQW2Y4m1XCulgszWRbt44huGc6PFOO9wdLuJL6lcA" />
<label for="post_title">
<input type="text" value="ต้มยำกุ้งน้ำข้น" name="post[title]" id="post_title" />
<label for="post_description">
<textarea rows="4" name="post[description]" id="post_description">
<label for="post_category_id">
<input type="text" value="1" name="post[category_id]" id="post_category_id" />
<input type="submit" name="commit" value="Update Post" data-disable-with="Update Post" />

วางสองชุดเทียบกัน — โค้ดเดียวกันทุกตัวอักษร แต่ได้ HTML ต่างกันเพราะแฟ้มที่ส่งเข้าไปต่างกัน:

ส่วนที่เหลือไม่ต้องสนใจ: accept-charset="UTF-8" = ส่งตัวอักษรแบบที่รองรับภาษาไทย · data-disable-with = ป้ายสำหรับตัวช่วย JavaScript รุ่นเก่าของ Rails ที่แอปนี้ไม่ได้ติดตั้ง ไม่มีผลอะไร (การกันกดปุ่มซ้ำระหว่างรอ Turbo ทำให้เอง — Turbo เจอในบท 130) · <label for="post_title"> ผูกกับช่อง id="post_title" = คลิกที่ป้ายแล้วเคอร์เซอร์กระโดดไปที่ช่อง

เทียบกับ React: ใน Next.js ฟอร์มแก้ไขต้องมี useState (บท 73) หนึ่งตัวต่อช่อง · ดึงค่าเดิมมาใส่ state · ผูก onChange ทุกช่อง · แล้ว fetch ส่ง JSON เอง · ใน Rails server พิมพ์ฟอร์มพร้อมค่าเดิมมาเลย เบราว์เซอร์ไม่ต้องจำอะไรเพิ่ม — นี่คือประโยคหลักของ Day 3 ในรูปเล็ก ๆ: "ข้อมูลมีเจ้าของคนเดียวคือ server" (บท 122)

6 · ของฟรีสามอย่างที่ form_with ให้

① บัตรคิวกันใบสั่งปลอม — ช่องซ่อน authenticity_token คือ "บัตรคิว" (รหัส CSRF) จากบท 103 · ฟอร์มไหนไม่แนบบัตรนี้ Rails ตอบ 422 ไม่รับ · บท 103 บอกไว้ว่า "ฟอร์มของ Rails แนบให้เอง" — form_with คือตัวที่แนบ · ค่าเปลี่ยนทุกครั้งที่โหลดหน้า

② ชื่อช่อง post[title] ตรงกับที่ controller รอ — ดูบรรทัดท้ายของ app/controllers/posts_controller.rb:

def post_params
  params.expect(post: [ :title, :description, :category_id ])
end

params.expect(post: [ … ]) = "ขอกลุ่มชื่อ post ที่มีช่อง title · description · category_id" · ช่องชื่อ post[title] ใน HTML คือ "ช่อง title ในกลุ่ม post" พอดีเป๊ะ · form_with model: post ตั้งชื่อกลุ่มจากชื่อ model ให้เอง

ถ้าเขียนช่องเองทุกช่องด้วยชื่อเปล่า ๆ เช่น <input name="title"> (ลืมกลุ่ม post[…]) จะเกิดอะไร? ผมยิงใบสั่งแบบนั้นด้วย curl (วิธีถือบัตรคิวแบบบท 117) ได้:

Completed 400 Bad Request in 1ms (ActiveRecord: 0.0ms (0 queries, 0 cached) | GC: 0.0ms)
ActionController::ParameterMissing (param is missing or the value is empty or invalid: post):

400 + param is missing … post = "ไม่มีกลุ่ม post มาเลย" · พนักงานต้อนรับไม่รับใบสั่งทั้งใบ · ปล่อยให้ form_with ตั้งชื่อเอง ปัญหานี้ไม่มีทางเกิด

ถ้าลืมแค่ช่องเดียว (ช่องอื่นยังเป็น post[…]) ร้ายกว่า — ไม่ได้ 400 เพราะกลุ่ม post ยังมา แต่ช่องที่ลืมหายเงียบ ๆ · ผมลองส่ง title ชื่อเปล่า + post[description] + post[category_id] ได้ 422 พร้อม Title can't be blank ทั้งที่พิมพ์หัวข้อไปแล้ว

③ ค่าเดิมเติมกลับเมื่อบันทึกไม่ผ่าน — ผมเปิดหน้า /posts/new ใน Chrome · พิมพ์แค่หัวข้อ "ลาบหมู" · ไม่กรอกเนื้อหา ไม่ใส่หมวด · กดปุ่ม · หน้าเว็บขึ้นกล่องแดง 2 errors prohibited this post from being saved: ตามด้วย Category must exist · Description can't be blank · ช่องเนื้อหาขอบแดง · และช่องหัวข้อยังมีคำว่า "ลาบหมู" อยู่ ไม่ต้องพิมพ์ใหม่ · ใน log ของ server:

Started POST "/posts" for ::1 at 2026-11-07 10:39:56 +0700
  Parameters: {"authenticity_token" => "[FILTERED]", "post" => {"title" => "ลาบหมู", "description" => "", "category_id" => ""}, "commit" => "Create Post"}
Completed 422 Unprocessable Content in 10ms (Views: 1.5ms | ActiveRecord: 3.0ms (0 queries, 0 cached) | GC: 0.0ms)

และแท็กช่องหัวข้อที่ Chrome ได้รับในรอบนี้:

<input class="block shadow-sm rounded-md border px-3 py-2 mt-2 w-full border-gray-400 focus:outline-blue-600" type="text" value="ลาบหมู" name="post[title]" id="post_title">

• for ::1 = มาจากเครื่องตัวเอง · "[FILTERED]" = Rails ซ่อนค่าบัตรคิวไว้ ไม่ให้รหัสลับลงไฟล์ log
• "post" => {"title" => "ลาบหมู", …} = กลุ่ม post ที่ได้มาจากชื่อช่อง post[…] (ข้อ ②)
• save ไม่ผ่าน → controller สั่ง render :new พร้อม 422 โดยใช้ @post ตัวเดิม ที่ยังถือ "ลาบหมู" กับ errors อยู่ (บท 110) · form_with อ่าน @post.title มาใส่ value="ลาบหมู" เหมือนหน้า edit — เราไม่ได้เขียนโค้ดเติมค่ากลับเลยสักบรรทัด
• error ข้อ Category must exist มาจาก belongs_to :category ใน model (บท 115) — ไม่ได้มาจากฟอร์ม

7 · ช่องหมวด — จากพิมพ์เลขเอง เป็นเลือกจากรายการ

ช่องหมวดตอนนี้ให้พิมพ์เลข · ผู้ใช้ไม่มีทางรู้ว่า "ของหวาน" คือเลข 3 · collection_select สร้างช่องเลือก (dropdown) จากรายการในตู้ให้ · ผู้ใช้เห็นชื่อหมวด แต่สิ่งที่ส่งไปจริงคือเลข id

เทียบกับ React: ใน Next.js เราต้องดึงรายการหมวดมาเอง แล้ววนสร้าง <option> เองด้วย categories.map(c => …) · collection_select ทำทั้งสองอย่างในบรรทัดเดียว และเลือกค่าเดิมให้ด้วย

ใน app/views/posts/_form.html.erb เปลี่ยนบรรทัด form.text_field :category_id, class: [ … ] (บรรทัดยาว) ทั้งบรรทัดเป็น:

<%= form.collection_select :category_id, Category.all, :id, :name,
      { prompt: "เลือกหมวด" },
      class: "block shadow-sm rounded-md border border-gray-400 px-3 py-2 mt-2 w-full" %>

HTML ที่ได้ (คำสั่งกรองแบบเดิม เปลี่ยนเป็นจับแท็ก select/option):

$ curl -s localhost:3000/posts/new | grep -oE '<(select|option)[^>]*>[^<]*' | sed -E 's/ class="[^"]*"//'
<select name="post[category_id]" id="post_category_id">
<option value="">เลือกหมวด
<option value="1">อาหารไทย
<option value="2">ก๋วยเตี๋ยว
<option value="3">ของหวาน
<option value="4">อาหารริมทาง
<option value="5">เครื่องดื่ม

$ curl -s localhost:3000/posts/2/edit | grep -oE '<(select|option)[^>]*>[^<]*' | sed -E 's/ class="[^"]*"//'
<select name="post[category_id]" id="post_category_id">
<option value="1">อาหารไทย
<option selected="selected" value="2">ก๋วยเตี๋ยว
<option value="3">ของหวาน
<option value="4">อาหารริมทาง
<option value="5">เครื่องดื่ม

• value="3" + ของหวาน = คนเห็น "ของหวาน" · ส่ง post[category_id]=3 ไป · ชื่อช่องยังเหมือนเดิม controller ไม่ต้องแก้อะไร
• หน้า edit ของบทความเลข 2 (ก๋วยเตี๋ยวเรือ) มี selected="selected" ที่ "ก๋วยเตี๋ยว" — form builder อ่าน post.category_id แล้วเลือกให้เอง (ของฟรีข้อ ③ อีกรอบ)
• หน้า edit ไม่มี "เลือกหมวด" — prompt โผล่เฉพาะตอนช่องยังไม่มีค่า
• ผมลองกับ Chrome: เลือก "ของหวาน" แต่ไม่กรอกเนื้อหา กดส่ง → หน้า 422 กลับมาพร้อมช่องเลือกที่ยังเป็น "ของหวาน"

ถ้าสังเกตว่าในฟอร์มเดิมของ scaffold ช่องหมวดไม่เคยขึ้นขอบแดง แม้มี error Category must exist (ผมลองแล้ว ขอบยังเทา) — ไม่ใช่คุณทำพัง · error ข้อนี้เก็บไว้ใต้ชื่อ category (ชื่อ association) แต่ท่อนขอบแดงที่ดูในหัวข้อ 5 เช็ค category_id · Lab บท 126 จะแก้ตรงนี้

8 · ทำเองเป็นแล้ว — เขียนเป็นข้อกำหนดให้ AI และตรวจงานมัน

สไลด์หน้า 15 เตือนว่า ถ้าเราไม่รู้ว่ามี truncate · AI มักเขียน [0..80] · ถ้าไม่รู้ว่ามี l() มันจะเขียนรูปแบบวันที่ตายตัว · ตอนนี้เราลองเครื่องมือทุกตัวด้วยมือแล้ว ก็เขียนลงในข้อกำหนดของ prompt (ส่วน "ข้อกำหนด" ของ prompt 4 ส่วน บท 89 · ไฟล์ prompts/ ในบท 121):

ข้อกำหนดของ view:
- ตัดข้อความด้วย truncate(…, length: 80, separator: " ") ห้ามใช้ [0..N]
- วันที่ใช้ l(…) หรือ time_ago_in_words ห้าม strftime
- เงินใช้ number_to_currency(…, unit: "฿")
- ช่องในฟอร์มใช้ form.text_field / form.collection_select ห้ามเขียน <input> เอง
- collection_select ใส่ปีกกา { … } (options) ก่อน class: เสมอ

AI เขียนเสร็จแล้ว ตรวจเร็ว ๆ ด้วย grep (ค้นข้อความในทุกไฟล์ของโฟลเดอร์ · -rn = ค้นทุกไฟล์ข้างใน และบอกเลขบรรทัด) — ไม่มีผลขึ้นเลย = ผ่าน · ผมรันทั้งสามคำสั่งกับโค้ดตั้งต้นแล้ว ไม่มีผลขึ้น:

$ grep -rn '\[0\.\.' app/views     # เจอ = ตัดข้อความเอง → เปลี่ยนเป็น truncate
$ grep -rn 'strftime' app/views   # เจอ = จัดวันที่เอง → เปลี่ยนเป็น l()
$ grep -rn '<input' app/views     # เจอ = เขียนช่องฟอร์มเอง → ดูหัวข้อ 6 ว่าทำไมเสี่ยง

\[0\.\. ในบรรทัดแรกหน้าตาแปลกเพราะ [ กับ . มีความหมายพิเศษใน grep · ขีด \ ข้างหน้า = "อ่านตัวนี้ตรงตัว" · ทั้งก้อนจึงแปลว่า "หาคำว่า [0.."

# app/helpers/posts_helper.rb
module PostsHelper
  def reading_time(text)
    "#{(text.to_s.split.size / 200.0).ceil} นาที"
  end
end

<%# app/views/posts/show.html.erb — เพิ่มใต้ render @post %>
  <%= render @post %>

  <p>
    เขียนเมื่อ <%= time_ago_in_words(@post.created_at) %> ago
    (<%= l(@post.created_at, format: :long) %>)
    · อ่านจบใน <%= reading_time(@post.description) %>
  </p>

<%# app/views/posts/_form.html.erb — ช่องหมวด %>
  <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 border-gray-400 px-3 py-2 mt-2 w-full" %>
  </div>

  <p>
    เขียนเมื่อ about 1 month ago
    (October 08, 2026 03:35)
    · อ่านจบใน 1 นาที
  </p>

$ git restore app/helpers/posts_helper.rb app/views/posts/show.html.erb app/views/posts/_form.html.erb
$ git status --short

ทดสอบความเข้าใจ

ถามกลับได้เลย — ถ้าฟอร์มส่งไม่ผ่านแล้วไม่รู้ทำไม ก็อปบรรทัด Parameters: {…} จาก log ของ server กับบรรทัด params.expect ใน controller มาถาม · สองอย่างนี้บอกเกือบทุกอย่างว่าชื่อช่องตรงกันหรือเปล่า

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

อ้างอิง

• Rails Guides — Action View Helpers — อ่านหัวข้อ truncate · time_ago_in_words · number_to_currency (รายการ helper ทั้งลิ้นชักพร้อมตัวอย่างสั้น ๆ)
• Rails API — TextHelper#truncate — ดูตัวเลือก :separator และ :omission (เปลี่ยน ... เป็นคำอื่น)
• Rails Guides — Action View Form Helpers — อ่าน Creating Forms with Model Objects (new กับ edit) · The collection_select Helper · Form Input Naming Conventions (ที่มาของ post[title])
• Rails API — FormOptionsHelper#collection_select — ดูลำดับ argument: options = {} มาก่อน html_options = {} (ที่มาของกับดักปีกกาในหัวข้อ 7)
• Rails Guides — i18n: Adding Date/Time Formats — วิธีที่ l() หยิบรูปแบบวันที่จากสมุดคำแปล · และ gem rails-i18n ที่ branch ของอาจารย์ใช้