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

React Tokyoのハンズオンに飛び込んでみた話さい/sai-lens 2025.9.28 / AkarengaLT vol.37 1

名前：さいフロント初心者 React興味あり React Tokyo ハンズオン（札幌開催）に参加自己紹介 2

開催日: 9/7（日）会場: エアウォーターの森講師: Daishi Katoさん Teruhisa さん参加者:
少人数（私＋3人）フレームワーク作者から直接学べる貴重な場！イベント概要 3

これまでのReactの課題 React Server ComponentとはそもそもなにかフレームワークであるNext.jsとWakuの比較「RSCで何を解決したかったのか」を知る座学で学んだこと 4

状態管理 Server / Client Components 動的 / 静的レンダリング学習法（PodcastやNotebookLMの活用）学習の視点が広がった！
ディスカッションテーマ 5

Wakuを使って在庫管理アプリを作成作者本人から直接サポート初学者でもコードを書きながら理解できたハンズオン 6

在庫一覧新規登録フォーム削除ボタンサーバーでデータ管理、クライアントで操作という役割分担を体験アプリの全体像 7

1. 在庫を追加 → JSONが更新される 2. 一覧が最新に反映される 3. 削除 → 即座に反映
フロントエンドとバックエンドの役割分担が腑に落ちた！動作デモ 8

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

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

export async function readItems() { ... } export async function
addItemServer(item) { ... } export async function deleteItemServer(id) { ... } コード紹介（3/4）サーバーでデータを扱う lib/items.ts 11

'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

RSCの機能とフレームワーク（WakuやNext.js）の機能を切り分けて理解することが大事「わからない」を抱えたままでも手を動かすと理解が深まる学んだこと 13

フレームワーク作者から直接学べた貴重な機会在庫管理アプリを通して RSCの役割分担を体感勉強会やハンズオンに飛び込むこと自体が学びのきっかけになるまとめ 14

結論「わからない・できない」を恐れずに勉強会やハンズオンに飛び込もう！ 15

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

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

sai-lens

More Decks by sai-lens

Other Decks in Technology

Featured

Transcript