View layer — ทำไม Rails ไม่ต้องมีชั้น API และ ERB 4 แบบ

บล็อก A ของ Day 3: ทั้งบล็อกคือเรื่องของ "คนจัดจาน"

Day 3 ช่วงเช้ามี 3 บล็อก · บล็อก A คือ view (คนจัดจาน) · บล็อก B คือ CSS · บล็อก C คือทำให้หน้าเว็บขยับได้ · บล็อก A ยาว 5 บท และจบด้วยหน้า index กับ show ที่อ่านรู้เรื่อง (บท 126)

• 122 (บทนี้) — ทำไม Rails ส่ง HTML ไม่ใช่ JSON · ERB 4 แบบ
• 123 — layout กับ partial (แม่พิมพ์ที่ใช้ซ้ำได้) · 124 — helper กับฟอร์ม · 125 — ช่องโหว่ที่ซ่อนใน view · 126 — Lab

งานเดียวกัน สองเส้นทาง

โจทย์: โชว์รายการบทความทั้งหมดบนหน้าเว็บ (แอปของเรามี 30 ชิ้น) · ฝั่ง FRONT + BACK ของคอร์สนี้สอนให้ทำแบบ ① · Rails ทำแบบ ② · อ่านจากบนลงล่าง = ข้อมูลเดินทางจากฐานข้อมูลไปถึงตาคน (ภาพจากสไลด์หน้า 10)

คำในภาพสองคำ: render = แปลงข้อมูลให้กลายเป็นหน้าตา (HTML) · DOM = หน้าเว็บที่เบราว์เซอร์อ่าน HTML แล้วสร้างเก็บไว้ในหน่วยความจำ ก่อนวาดออกจอ (ตัวที่เห็นในแท็บ Elements ของ DevTools) · บทนี้ให้คิดว่ามันคือ "จานที่วางอยู่บนโต๊ะแล้ว" พอ

ฝั่ง ① server ส่ง JSON ออกไป — ข้อมูลล้วน ๆ แบบที่ Go ส่งในบท 38 ยังไม่มีหน้าตา · แล้วโค้ด React ที่รันในเบราว์เซอร์ต้องรับมา เก็บไว้ แล้ววาดเอง

ฝั่ง ② server ทำทุกอย่างจนเสร็จ ส่ง HTML ที่พร้อมโชว์ออกไป · เบราว์เซอร์แค่เอาไปแสดง · ไม่มีใครต้อง "เรียก API" เพราะ controller กับ view อยู่ในแอปเดียวกัน ส่งของกันผ่าน @posts ได้เลย — ชั้น API ไม่ได้หายไปไหน แค่ไม่จำเป็นต้องมี

กล่องที่หายไป: "state ใน client" — ที่เกิดของบั๊ก "ทำไมหน้าจอไม่อัปเดต"

เทียบสองภาพข้างบน กล่องที่ ② ไม่มีคือ ★ state ใน client · ฟังดูเป็นแค่กล่องเดียว แต่สไลด์หน้า 10 บอกว่า บั๊กประเภท "ทำไมหน้าจอไม่อัปเดต" เกิดที่กล่องนี้เกือบทั้งหมด · มาดูว่าทำไม

นี่คือหน้ารายการแบบ ① ด้วยของที่คุณเพิ่งเรียน (ไฟล์ PostList.tsx · สมมติว่า Go รันอยู่ที่พอร์ต 8080 · แค่อ่าน ไม่ต้องพิมพ์ตาม):

'use client'
import { useEffect, useState } from 'react'

type Post = { id: number; title: string }

export default function PostList() {
  const [posts, setPosts] = useState<Post[]>([])

  useEffect(() => {
    fetch('http://localhost:8080/posts')
      .then((res) => res.json())
      .then((data: Post[]) => setPosts(data))
  }, [])

  return (
    <ul>
      {posts.map((p) => (
        <li key={p.id}>{p.title}</li>
      ))}
    </ul>
  )
}

• 'use client' — บอก Next.js ว่า component นี้รันในเบราว์เซอร์ (บท 73) · type Post — บอกว่าบทความหนึ่งชิ้นมี id กับ title (บท 63–64)
• useState<Post[]>([]) — สร้างความจำชื่อ posts เริ่มจากรายการว่าง ← นี่คือ ★ state ใน client
• useEffect(() => { … }, []) — หลังวาดจอครั้งแรก ให้ทำงานข้างใน ครั้งเดียว ([] = ไม่ต้องทำซ้ำ · บท 74)
• fetch(…) — คำสั่งของเบราว์เซอร์สำหรับขอข้อมูลจาก URL (คล้าย curl แต่สั่งจากในโค้ด JavaScript) · ตรงนี้ขอ JSON จาก Go
• .then(…) — "ได้ของมาแล้วค่อยทำต่อ" (ต้องรอเพราะของเดินทางผ่านเน็ต) · (res) => res.json() = ฟังก์ชันสั้น ๆ ที่รับคำตอบ res แล้วแปลงข้อความ JSON เป็นข้อมูลที่ใช้ได้
• setPosts(data) — จดรายการบทความลงความจำ → React วาดจอใหม่
• posts.map(…) — วนทุกบทความ สร้าง <li> หนึ่งอันต่อหนึ่งชิ้น (key = ป้ายประจำแต่ละแถว ให้ React จำได้)

ตอนนี้ข้อมูลบทความมี สองชุด: ชุดจริงในฐานข้อมูล กับชุดที่ก็อปมาไว้ในหน่วยความจำของแท็บนี้ · ถ้าเพื่อนเปิดอีกแท็บแล้วแก้ชื่อบทความ — ฐานข้อมูลเปลี่ยนแล้ว แต่ posts ในแท็บของคุณไม่มีใครบอกมัน · useEffect ก็สั่งไว้ให้ fetch แค่ครั้งเดียว จอจึงโชว์ชื่อเก่าต่อไป

ทีมที่ใช้แบบ ① จึงต้องเขียนโค้ดเพิ่มเพื่อตามล้างชุดที่สอง: แก้เสร็จแล้ว fetch ใหม่ · ทุกกี่วินาทีไปถามใหม่ · หน้าไหนใช้ข้อมูลเดียวกันต้องบอกกัน — ลืมจุดเดียว = บั๊ก

นี่คือประโยคหลักข้อแรกของ Day 3 (สไลด์หน้า 8): เว็บที่โต้ตอบได้ไม่จำเป็นต้องมี state สองชุด — ถ้า server เป็นเจ้าของข้อมูลชุดเดียว บั๊ก sync ก็ไม่มี · บล็อก C (บท 130) จะพากลับมาที่ประโยคนี้อีกครั้ง

แฟร์ ๆ: ฝั่ง ① ไม่ได้ผิด มันแลกมาเพื่อของบางอย่าง

สไลด์หน้า 10 ย้ำไว้เองว่า "ไม่ใช่ว่าฝั่งซ้ายผิด" · ฝั่ง ① ยอมรับความยุ่งของสมุดเล่มที่สอง เพื่อแลกกับสองเรื่องนี้:

ช่อง "เสีย" ของ Rails มีทางแก้ที่ซ่อนอยู่ในแอปของคุณแล้ว — scaffold ทำ JSON ไว้ให้ด้วย · มาดูของจริงกัน

ดูของจริง: แอปเดียวกัน เสิร์ฟได้ทั้ง HTML และ JSON

เปิด server ในโฟลเดอร์แอป (bin/dev ตามบท 120) แล้วเปิดเทอร์มินัลอีกหน้าต่าง ลองขอหน้า /posts แบบที่เบราว์เซอร์ขอ · (-s = เงียบ ไม่ต้องโชว์แถบความคืบหน้า · บท 102) · ด้านล่างตัดมาเฉพาะต้นไฟล์กับบทความชิ้นแรก (ผลจริง · ทั้งหน้ายาวมาก):

$ curl -s localhost:3000/posts
<!-- BEGIN app/views/layouts/application.html.erb
--><!DOCTYPE html>
<html>
  <head>
    <title>Posts</title>
…
  <div id="posts" class="min-w-full divide-y divide-gray-200 space-y-5">
        <div class="flex flex-col sm:flex-row justify-between items-center pb-5 sm:pb-0">
          <!-- BEGIN app/views/posts/_post.html.erb
--><div id="post_1" class="w-full sm:w-auto my-5 space-y-5">
  <div>
    <strong class="block font-medium mb-1">Title:</strong>
    ต้มยำกุ้งน้ำข้น
  </div>
…

• ได้ HTML พร้อมโชว์ — มีทั้งหัวหน้าเว็บ (<head>) · กล่อง · ป้าย "Title:" · ชื่อบทความ "ต้มยำกุ้งน้ำข้น" ถูกวางลงจานแล้ว
• class="min-w-full divide-y …" — คลาสของ Tailwind (บท 72) ที่ scaffold ใส่มาให้ · ตอนนี้ไม่ต้องสนใจ เรื่องหน้าตาอยู่บล็อก B
• <!-- BEGIN … --> — โน้ตที่ Rails แปะให้ตอนพัฒนา บอกว่าส่วนนี้มาจากไฟล์ไหน (บท 103) · _post.html.erb คือแม่พิมพ์ของบทความหนึ่งชิ้น (เจอละเอียดในบท 123)

ทีนี้ขอ URL เดิม แต่เติม .json ท้าย · ขอบทความชิ้นเดียว (/posts/1.json) จะได้อ่านง่าย · ท่อน | python3 -m json.tool --no-ensure-ascii แค่จัดบรรทัดให้สวยและโชว์ภาษาไทยตรง ๆ (ไม่ต้องจำ):

$ curl -s localhost:3000/posts/1.json | python3 -m json.tool --no-ensure-ascii
{
    "id": 1,
    "title": "ต้มยำกุ้งน้ำข้น",
    "description": "ต้มยำกุ้งแบบน้ำข้นใส่นมข้นจืด รสเปรี้ยวเผ็ดกลมกล่อม กุ้งแม่น้ำตัวใหญ่ หอมตะไคร้ ข่า ใบมะกรูด กินกับข้าวสวยร้อน ๆ ได้ทั้งถ้วย ร้านนี้เปิดมาสามสิบปีแล้ว คิวยาวทุกวันเสาร์อาทิตย์",
    "category_id": 1,
    "created_at": "2026-10-08T03:38:59.900Z",
    "updated_at": "2026-11-07T03:38:59.900Z",
    "url": "http://localhost:3000/posts/1.json"
}

บทความชิ้นเดียวกัน แต่คราวนี้เป็นวัตถุดิบดิบ — ไม่มีกล่อง ไม่มีป้าย ไม่มีสี · เหมือน JSON ที่ Go ส่งในบท 38 ทุกอย่าง · (วันที่ created_at ของคุณจะต่าง เพราะข้อมูลตัวอย่างนับย้อนจากวันที่คุณรัน seed) · ช่อง url ไม่ได้อยู่ในตาราง — แม่แบบ JSON ของ scaffold เติมที่อยู่ของบทความชิ้นนั้นให้

ทีนี้สั่ง curl -s localhost:3000/posts แล้วตามด้วย curl -s localhost:3000/posts.json (รายการทั้งหมดแบบ JSON) · ใน log ของ server (log/development.log) เห็นชัดว่าเป็น action เดียวกัน แค่เลือกแม่แบบคนละไฟล์ (ผลจริง · ตัดบรรทัดที่ไม่เกี่ยวออก):

Started GET "/posts" for ::1 at 2026-11-07 11:22:43 +0700
Processing by PostsController#index as */*
  Rendering layout layouts/application.html.erb
  Rendering posts/index.html.erb within layouts/application
…
Started GET "/posts.json" for ::1 at 2026-11-07 11:22:44 +0700
Processing by PostsController#index as JSON
  Rendering posts/index.json.jbuilder
…

• for ::1 — ใบสั่งมาจากเครื่องตัวเอง (::1 คือ localhost แบบเขียนอีกแบบ) · วันเวลาของคุณจะต่าง
• PostsController#index — action เดียวกันทั้งสองครั้ง (โค้ดข้างในมีแค่ @posts = Post.all)
• as */* / as JSON — Rails ดูว่าลูกค้าขอแบบไหน (เรียกว่า format) · ท้าย URL เป็น .json = ขอ JSON · */* = curl บอกว่า "รับได้ทุกแบบ" Rails เลยให้ HTML · (ถ้าเปิด /posts ด้วยเบราว์เซอร์ บรรทัดนี้จะเป็น as HTML — ผมเช็คกับ Chrome จริงแล้ว)
• Rendering posts/index.json.jbuilder กับ posts/index.html.erb — แม่แบบคนละไฟล์ · HTML มี layout (จานรองมาตรฐาน) ครอบด้วย · JSON ไม่มี

ลองวัดขนาดหน้ารายการ 30 บทความ (-o /dev/null = ไม่ต้องโชว์เนื้อ · -w '%{size_download}' = บอกขนาดที่ได้มาเป็นไบต์) — ผลจริงในเครื่องที่ใช้ตรวจ:

$ curl -s -o /dev/null -w '%{size_download}\n' localhost:3000/posts
53937
$ curl -s -o /dev/null -w '%{size_download}\n' localhost:3000/posts.json
13566

HTML ใหญ่กว่าราว 4 เท่า เพราะมีของหน้าตาติดมาด้วย (ชื่อ class ยาว ๆ · ปุ่ม Show/Edit/Destroy · โน้ต BEGIN/END ของโหมดพัฒนา) · ตัวเลข HTML ของคุณจะต่างเล็กน้อย และโตขึ้นนิดหน่อยทุกครั้งที่สั่งซ้ำ (เครื่องมือวัดความเร็ว rack-mini-profiler ที่ติดมากับแอปแปะรหัสเพิ่มท้ายหน้า) · ตัวเลขนี้คือหน้า scaffold ในเครื่องพัฒนา ไม่ใช่กฎตายตัว · ประเด็นคือ Rails ไม่ได้ "ทำ API ไม่ได้" — ถ้าวันหนึ่งต้องมีแอปมือถือ JSON ก็อยู่ตรงนี้แล้ว แค่ไม่บังคับให้หน้าเว็บต้องผ่านมัน

ชื่อไฟล์บอกทุกอย่าง: index.html.erb กับ index.json.jbuilder

ดูโฟลเดอร์ view ของบทความ (ผลจริง · ในเทอร์มินัลของคุณชื่ออาจเรียงเป็นหลายคอลัมน์ แต่เป็นไฟล์ชุดเดียวกัน):

$ ls app/views/posts
_form.html.erb
_post.html.erb
_post.json.jbuilder
edit.html.erb
index.html.erb
index.json.jbuilder
new.html.erb
show.html.erb
show.json.jbuilder

ไฟล์มาเป็นคู่ — index มีทั้ง .html.erb และ .json.jbuilder · show ก็เหมือนกัน · ชื่อไฟล์แบ่งเป็น 3 ท่อน อ่านจากขวาไปซ้าย (สไลด์หน้า 11):

ไฟล์ index.json.jbuilder สั้นมาก — มีบรรทัดเดียว:

# app/views/posts/index.json.jbuilder
json.array! @posts, partial: "posts/post", as: :post

• json.array! @posts — "สร้าง JSON เป็นรายการ จากบทความทุกชิ้นบนถาด @posts"
• partial: "posts/post", as: :post — "แต่ละชิ้นให้จัดตามแม่พิมพ์ _post.json.jbuilder" (แม่พิมพ์แบบนี้คือ partial — ละเอียดในบท 123)

บทนี้แค่ให้รู้ว่ามันอยู่ตรงนี้ · Day 3 ทั้งวันเราทำงานกับไฟล์ .html.erb

ERB 4 แบบ — ทวนบท 103 แล้วลองบนหน้าจริง

บท 103 รู้จักไปแล้ว 3 แท็ก · สไลด์หน้า 11 นับเป็น 4 แบบ เพราะแยก "วนลูป" ออกมาเป็นอีกแบบ (จริง ๆ คือสองแท็กแรกทำงานร่วมกัน):

มาลองบนหน้า /posts ของแอปจริง · เปิดไฟล์ app/views/posts/index.html.erb หาบรรทัดที่ 3 <div class="w-full"> · แล้วแทรก 9 บรรทัดนี้ต่อจากมัน (โค้ดทดลอง · จบบทจะลบทิ้ง):

  <%# ทดลองบท 122: โน้ตของเชฟ ลูกค้าไม่เห็น %>
  <!-- ทดลองบท 122: โน้ต HTML ลูกค้าเปิดดูได้ -->
  <p>มีบทความทั้งหมด <%= @posts.size %> ชิ้น</p>
  <p>บทความแรก: <%= @posts.first.title %></p>
  <ul>
    <% @posts.first(3).each do |post| %>
      <li><%= post.title %></li>
    <% end %>
  </ul>

• บรรทัด <%# … %> — แบบ ④ โน้ตของ ERB
• บรรทัด <!-- … --> — ไม่ใช่ ERB · เป็นคอมเมนต์ของ HTML ธรรมดา (ข้อความที่เบราว์เซอร์ไม่โชว์บนจอ) · ใส่ไว้เทียบกัน
• @posts.size — นับว่ามีกี่ชิ้น (บท 113) · แบบ ① จึงโชว์ตัวเลข
• @posts.first.title — ชื่อของชิ้นแรก · first = ชิ้นแรกเรียงตามเลขที่
• @posts.first(3).each do |post| — แบบ ③ · first(3) = เอา 3 ชิ้นแรก แล้ววนทีละชิ้น

เซฟแล้วไม่ต้องรีสตาร์ต server (โหมดพัฒนาอ่านไฟล์ view ใหม่ทุกครั้งเอง) · curl ดูเฉพาะช่วงที่แทรก (ผลจริง · ตัดส่วนอื่นออก):

$ curl -s localhost:3000/posts
…
      <!-- BEGIN app/views/posts/index.html.erb
-->
<div class="w-full">
  <!-- ทดลองบท 122: โน้ต HTML ลูกค้าเปิดดูได้ -->
  <p>มีบทความทั้งหมด 30 ชิ้น</p>
  <p>บทความแรก: ต้มยำกุ้งน้ำข้น</p>
  <ul>
      <li>ต้มยำกุ้งน้ำข้น</li>
      <li>ก๋วยเตี๋ยวเรืออยุธยา</li>
      <li>ข้าวเหนียวมะม่วง</li>
  </ul>
…

• โน้ต <%# %> หายไปทั้งบรรทัด — ไม่ถูกส่งออกจากครัวเลย
• โน้ต <!-- --> ยังอยู่ — ถูกส่งไปถึงเบราว์เซอร์ · ผมเปิดใน Chrome จริง: บนจอไม่โชว์ แต่ใครกด "ดูซอร์สของหน้า" (View Page Source) ก็อ่านได้
• <%= @posts.size %> กลายเป็น 30 · <%= @posts.first.title %> กลายเป็นชื่อบทความ
• บรรทัด <% … each … %> กับ <% end %> หายไป · แต่ <li> ข้างในถูกพิมพ์ 3 รอบ

กับดัก ①: ลืม = ตัวเดียว — หน้าว่าง ไม่มี error

สไลด์หน้า 11 บอกว่านี่คือบั๊กที่มือใหม่เจอบ่อยที่สุด · บท 103 เห็นมาแล้วกับข้อมูลจำลอง · คราวนี้ลองกับฐานข้อมูลจริง แล้วดูให้ลึกกว่าเดิม

<%# แก้บรรทัดเดียวในโค้ดทดลอง: ลบ = ออกจาก "บทความแรก" %>
  <p>บทความแรก: <% @posts.first.title %></p>

  <p>มีบทความทั้งหมด 30 ชิ้น</p>
  <p>บทความแรก: </p>

  Post Load (0.8ms)  SELECT "posts".* FROM "posts" ORDER BY "posts"."id" ASC LIMIT 1 /*action='index',application='WongnokBlogAllInOne',controller='posts'*/
  ↳ app/views/posts/index.html.erb:8

กับดัก ②: ใส่ = เกินที่บรรทัด each

ทิศกลับกันก็พัง · ลองคืน = ให้บรรทัด "บทความแรก" แล้วเผลอใส่ = ที่บรรทัด each แทน:

    <%= @posts.first(3).each do |post| %>

ผลจริงจาก curl (ตัดมาเฉพาะ <ul> · บรรทัดยาวมากจนต้องเลื่อนดู):

  <ul>

      <li>ต้มยำกุ้งน้ำข้น</li>

      <li>ก๋วยเตี๋ยวเรืออยุธยา</li>

      <li>ข้าวเหนียวมะม่วง</li>
[#&lt;Post id: 1, title: &quot;ต้มยำกุ้งน้ำข้น&quot;, description: &quot;ต้มยำกุ้งแบบน้ำข้นใส่นมข้นจืด รสเปรี้ยวเผ็ดกลมกล่อ...&quot;, category_id: 1, created_at: &quot;2026-10-08 03:38:59.900313000 +0000&quot;, updated_at: &quot;2026-11-07 03:38:59.900694000 +0000&quot;&gt;, #&lt;Post id: 2, … &gt;]  </ul>

• รายการ 3 ชิ้นยังโผล่ครบ · แต่ต่อท้ายด้วยก้อนข้อความยาวเหยียด ที่ขึ้นต้นด้วย [#<Post id: 1, …
• ทำไม: each วนครบแล้วคืนรายการเดิมทั้งก้อนกลับมา · <%= แปลว่า "เอาผลไปวางลงจาน" มันจึงวางรายการบทความทั้งก้อนลงไป ในรูปที่ Ruby ใช้โชว์ข้อมูลใน console
• < · " — คือ < กับ " ที่ Rails แปลงให้ไม่ทำงานเป็น HTML (เรื่องกัน XSS · บท 103 และลงลึกในบท 125)

ผมเปิดหน้านี้ใน Chrome จริง: ใต้รายการมีข้อความ [#<Post id: 1, title: "ต้มยำกุ้งน้ำข้น", … โชว์อยู่บนจอให้ทุกคนเห็น · (วันที่ในข้อความของคุณจะต่าง)

กับดัก ③: <!-- --> ไม่ได้หยุด Ruby

มือใหม่ชอบ "ปิดบรรทัดชั่วคราว" ด้วยคอมเมนต์ HTML เพราะคุ้นจากตอนเขียน HTML ล้วน ๆ · ลองครอบบรรทัด "บทความแรก" (ที่มี = ครบแล้ว) ด้วย <!-- -->:

  <!-- <p>บทความแรก: <%= @posts.first.title %></p> -->

ผลจริง:

  <!-- <p>บทความแรก: ต้มยำกุ้งน้ำข้น</p> -->

ชื่อบทความยังถูกเติมเข้าไปในคอมเมนต์ · และ log ยังมีบรรทัด Post Load … LIMIT 1 ครบ · ERB ไม่รู้จัก <!-- --> — สำหรับมันนั่นคือ HTML ธรรมดา ก้อนหนึ่ง มันเติมช่อง <%= %> ข้างในตามปกติ แล้วเบราว์เซอร์ค่อยซ่อน · ถ้าในนั้นเป็นข้อมูลที่ไม่ควรให้ใครเห็น ก็หลุดไปถึงเบราว์เซอร์แล้ว

วิธีที่ถูก: เติม # หลัง <% ให้กลายเป็นคอมเมนต์ของ ERB:

  <p>บทความแรก: <%#= @posts.first.title %></p>

ผลจริง: ได้ <p>บทความแรก: </p> และใน log ไม่มีบรรทัด LIMIT 1 แล้ว — Ruby ไม่ได้ทำงานเลย · แอปของคุณใช้ท่านี้อยู่แล้ว: เปิด app/views/layouts/application.html.erb จะเจอบรรทัด <%#= tag.link rel: "manifest", … %> ที่ Rails ปิดไว้ให้

เทียบกับ JSX: ทิศกลับกัน

สไลด์หน้า 11 สรุปไว้ประโยคเดียว: JSX คือ JavaScript ที่เขียน HTML ได้ · ERB คือ HTML ที่เขียน Ruby ได้ · วางงานเดียวกันข้างกันจะเห็นชัด:

<ul>
  {posts.map((p) => (
    <li key={p.id}>{p.title}</li>
  ))}
</ul>

<ul>
  <% @posts.each do |post| %>
    <li><%= post.title %></li>
  <% end %>
</ul>

• ไฟล์ทั้งไฟล์เป็นภาษาอะไร — .tsx คือ TypeScript ที่มีก้อน HTML แทรก · .html.erb คือ HTML ที่มีช่อง Ruby แทรก (ส่วนที่ไม่อยู่ในแท็ก <% %> ส่งออกไปตามตัวอักษร)
• ช่องสำหรับโชว์ค่า — JSX ใช้ { } · ERB ใช้ <%= %>
• วนลูป — JSX ใช้ map ที่คืนรายการ <li> ออกมา · ERB ใช้ each ที่ "พิมพ์ทุกรอบ" แล้วผลของ each เองต้องทิ้ง (เพราะอย่างนี้ใส่ = ที่ each จึงพัง — กับดัก ②)
• รันที่ไหน — JSX ของ client component รันในเบราว์เซอร์ และวาดใหม่ทุกครั้งที่ state เปลี่ยน · ERB รันบน server ครั้งเดียวต่อหนึ่งใบสั่ง ได้ HTML แล้วจบ

ภารกิจ

  <p>มีบทความทั้งหมด 30 ชิ้น</p>
  <ol>
      <li>ต้มยำกุ้งน้ำข้น</li>
      <li>ก๋วยเตี๋ยวเรืออยุธยา</li>
      <li>ข้าวเหนียวมะม่วง</li>
      <li>หมูปิ้งข้าวเหนียว</li>
      <li>ชาไทยเย็น</li>
  </ol>

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

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

อ้างอิง

• Rails Guides — Action View Overview § ERB — อ่านแค่หัวข้อ ERB (สั้น) · ยืนยัน <% %> · <%= %> และคอมเมนต์ <%# %> · หัวข้อถัดไป § Jbuilder อ่านแค่ย่อหน้าแรกพอรู้ว่าไฟล์ .json.jbuilder คืออะไร
• Rails API — ActionView::Base § ERB — ดูตัวอย่างวนลูปย่อหน้าแรก (each ใช้ <% %> · ชื่อใช้ <%= %>) กับตัวอย่าง WRONG ถัดมาที่บอกว่า puts ใช้พิมพ์ใน ERB ไม่ได้
• Rails Guides — Using Rails for API-only Applications § Why Use Rails for JSON APIs? — ฝั่งตรงข้ามของบทนี้: ถ้าทีมเลือกแบบ ① Rails ก็เป็น JSON API ล้วน ๆ ได้ · อ่านแค่หัวข้อนี้กับหัวข้อก่อนหน้า (What is an API Application?)
• React — Writing Markup with JSX — ฝั่ง JSX ที่เทียบกัน · อ่านถึงหัวข้อ The Rules of JSX จะเห็นว่า JSX คือ JavaScript ที่เขียน markup ได้
• React — You Might Not Need an Effect — สำหรับคนที่อยากรู้ว่าทีม React เองก็ระวังการเก็บสำเนาข้อมูลไว้ใน state · อ่านแค่ย่อหน้าแรกกับหัวข้อ How to remove unnecessary Effects
• MDN — HTML Comments — ยืนยันว่าคอมเมนต์ HTML เป็นส่วนหนึ่งของเอกสารที่ส่งไปถึงเบราว์เซอร์ แค่ไม่ถูกแสดง · อ่านส่วน Syntax