React Tokyoのハンズオンに飛び込んでみた話

Transcript

1. React Tokyoのハンズオンに 飛び込んでみた話 さい/sai-lens 2025.9.28 / AkarengaLT vol.37 1
2. 名前：さい フロント初心者 React興味あり React Tokyo ハンズオン （札幌開催）に参加 自己紹介 2
3. 開催日: 9/7（日） 会場: エアウォーターの森 講師: Daishi Katoさん Teruhisa さん 参加者: 少人数（私＋3人） フレームワーク作者から直接 学べる貴重な場！ イベント概要 3
4. これまでのReactの課題 React Server Componentとはそもそもなにか フレームワークであるNext.jsとWakuの比較 「RSCで何を解決したかったのか」を知る 座学で学んだこと 4
5. 状態管理 Server / Client Components 動的 / 静的レンダリング 学習法（PodcastやNotebookLMの活用） 学習の視点が広がった！ ディスカッションテーマ 5
6. Wakuを使って在庫管理アプリを作成 作者本人から直接サポート 初学者でもコードを書きながら理解できた ハンズオン 6
7. 在庫一覧 新規登録フォーム 削除ボタン サーバーでデータ管理、クライアントで操作 という役割 分担を体験 アプリの全体像 7
8. 1. 在庫を追加 → JSONが更新される 2. 一覧が最新に反映される 3. 削除 → 即座に反映 フロントエンドとバックエンドの役割分担が腑に落ちた！ 動作デモ 8
9. import "/styles/globals.css"; import InventoryList from "../components/InventoryList"; import NewItemForm from "../components/NewItemForm"; import { readItems } from "../lib/items"; export default async function HomePage() { const items = await readItems(); return ( <main className="grid"> <InventoryList items={items} /> <NewItemForm /> </main> ); } export const getConfig = async () => ({ render: "dynamic" } as const); コード紹介(1/4) src/pages/index.tsx 9
10. import { addItemServer, readItems, deleteItemServer, type Item } from "../../lib/items"; . . if (req.method === "GET") { const items = await readItems(); return new Response(JSON.stringify(items), { headers: { "content-type": "application/json" }; if (req.method === "POST") {...}; return new Response(JSON.stringify(await addItemServer(item)), { headers: { "content-type": "application/json" } }); } if (req.method === "DELETE") {...}; return new Response(JSON.stringify(await deleteItemServer(id)), { headers: { "content-type": "application/json" } }); } . . コード紹介(2/4)データの窓口となる api/items.ts 10
11. export async function readItems() { ... } export async function addItemServer(item) { ... } export async function deleteItemServer(id) { ... } コード紹介（3/4）サーバーでデータを扱う lib/items.ts 11
12. 'use client'; export default function NewItemForm() { const onAdd = async () => { await fetch("/api/items", { method: "POST", body: ... }); location.reload(); }; return <button onClick={onAdd}>追加</button>; } クライアントは「受付窓口」 コード紹介（4/4）クライアントのフォーム NewItemForm.tsx 12
13. RSCの機能 と フレームワーク（WakuやNext.js）の機能 を切り分け て理解することが大事 「わからない」を抱えたままでも手を動かすと理解が深 まる 学んだこと 13
14. フレームワーク作者から直接学べた貴重な機会 在庫管理アプリを通して RSCの役割分担 を体感 勉強会やハンズオンに飛び込むこと自体が学びのきっか けになる まとめ 14
15. 結論 「わからない・できない」を恐れずに 勉強会やハンズオンに飛び込もう！ 15