React実験室

import { useState } from 'react'

const buttonClass = 'rounded-lg border border-brand-700 px-4 py-2 text-sm font-semibold text-brand-800 hover:bg-brand-50 focus-visible:outline-2 focus-visible:outline-offset-2'

export function QuantityExperiment() {
  const [direct, setDirect] = useState(1)
  const [functional, setFunctional] = useState(1)
  const [operations, setOperations] = useState(0)
  function addBundle() {
    setDirect(direct + 1)
    setDirect(direct + 1)
    setFunctional(q => q + 1)
    setFunctional(q => q + 1)
    setOperations(n => n + 1)
  }
  return <div className="rounded-xl border border-slate-200 bg-slate-50 p-5 my-6">
    <div className="grid sm:grid-cols-2 gap-4 mb-5" aria-live="polite">
      <div className="rounded-lg bg-white p-4"><p className="text-sm text-slate-600">値を直接渡すカート</p><p className="text-3xl font-bold mt-2"><output aria-label="直接更新の個数">{direct}</output> 個</p><p className="text-sm mt-2">合計 {direct * 300} 円</p></div>
      <div className="rounded-lg bg-white p-4"><p className="text-sm text-slate-600">更新関数を渡すカート</p><p className="text-3xl font-bold mt-2"><output aria-label="関数型更新の個数">{functional}</output> 個</p><p className="text-sm mt-2">合計 {functional * 300} 円</p></div>
    </div>
    <div className="flex flex-wrap gap-3"><button className={buttonClass} onClick={addBundle}>2個セットを追加</button><button className={buttonClass} onClick={() => { setDirect(1); setFunctional(1); setOperations(0) }}>カートをリセット</button></div>
    <p className="mt-4 text-sm text-slate-600" role="status">{operations === 0 ? '初期値はどちらも1個。1回押した後の個数を予想してください。' : `${operations}回操作：直接更新は${direct}個、関数型更新は${functional}個。直接更新は同じレンダーの値を2回使います。`}</p>
  </div>
}

const initialLessons = [{ id: 'props', name: 'Props' }, { id: 'state', name: 'State' }, { id: 'effect', name: 'Effect' }]
function LessonRow({ name, group }: { name: string; group: string }) {
  const [note, setNote] = useState('')
  return <label className="block rounded-lg border border-slate-200 bg-white p-3">
    <span className="block text-sm font-semibold mb-2">{name}</span>
    <input aria-label={`${group} ${name}のメモ`} value={note} onChange={e => setNote(e.target.value)} placeholder="復習メモを入力" className="w-full min-w-0 border border-slate-300 rounded px-3 py-2 text-sm" />
  </label>
}
export function KeyExperiment() {
  const [reversed, setReversed] = useState(false)
  const [revision, setRevision] = useState(0)
  const lessons = reversed ? [...initialLessons].reverse() : initialLessons
  return <div className="rounded-xl border border-slate-200 bg-slate-50 p-5 my-6">
    <div key={revision} className="grid sm:grid-cols-2 gap-5 mb-5">
      <section aria-label="indexをkeyにするリスト"><h3 className="font-bold mb-3">key = 配列のindex</h3><div className="space-y-3">{lessons.map((lesson, i) => <LessonRow key={i} name={lesson.name} group="index" />)}</div></section>
      <section aria-label="IDをkeyにするリスト"><h3 className="font-bold mb-3">key = 教材のID</h3><div className="space-y-3">{lessons.map(lesson => <LessonRow key={lesson.id} name={lesson.name} group="ID" />)}</div></section>
    </div>
    <div className="flex flex-wrap gap-3"><button className={buttonClass} onClick={() => setReversed(v => !v)}>教材の順序を反転</button><button className={buttonClass} onClick={() => { setReversed(false); setRevision(v => v + 1) }}>メモと並び順をリセット</button></div>
    <p role="status" className="mt-4 text-sm text-slate-600">現在の順序：{lessons.map(l => l.name).join(' → ')}</p>
  </div>
}

import { useEffect, useState } from 'react'
const button = 'rounded-lg border border-brand-700 px-4 py-2 text-sm font-semibold text-brand-800 disabled:opacity-40'
// Each request owns its delivery promise. The learner controls delivery order.
type Delivery = { query: string; resolve: (value: string) => void; response: Promise<string> }
export function RequestExperiment() {
  const [current, setCurrent] = useState<Delivery | null>(null)
  const query = current?.query ?? ''
  const [requests, setRequests] = useState<Delivery[]>([])
  const [unsafe, setUnsafe] = useState('未取得')
  const [safe, setSafe] = useState('未取得')
  const [events, setEvents] = useState<string[]>([])
  function search(name: string) {
    let resolve!: (value: string) => void
    const response = new Promise<string>(deliver => { resolve = deliver })
    const request = { query: name, resolve, response }
    setCurrent(request)
    setRequests(previous => [...previous, request])
    setSafe('取得中')
    setEvents(previous => [...previous, `${name}の取得を開始`])
  }
  useEffect(() => {
    if (!current) return
    let active = true
    const response = current.response
    response.then(value => {
      setUnsafe(value)
      if (active) setSafe(value)
      setEvents(previous => [...previous, `${value}が到着${active ? '：両方を更新' : '：修正版は古い結果を無視'}`])
    })
    return () => { active = false }
  }, [current])
  return <div className="rounded-xl border border-slate-200 bg-slate-50 p-5 my-6">
    <p className="mb-4 text-sm">実通信は行いません。Promiseで応答を保留し、到着順をボタンで指定する実験です。</p>
    <div className="flex flex-wrap gap-3"><button className={button} disabled={query !== ''} onClick={() => search('りこ')}>1. りこを検索</button><button className={button} disabled={query !== 'りこ'} onClick={() => search('たける')}>2. たけるを検索</button></div>
    <p className="my-4">現在の検索対象：<strong>{query || '未選択'}</strong></p>
    <div className="flex flex-wrap gap-3">{requests.map((request, i) => <button key={`${request.query}-${i}`} className={button} onClick={() => { request.resolve(`${request.query}のプロフィール`); setRequests(previous => previous.filter(item => item !== request)) }}>{request.query}の応答を届ける</button>)}</div>
    <div className="grid sm:grid-cols-2 gap-4 mt-5" aria-live="polite"><div className="bg-white rounded-lg p-4"><h3>修正前：届いた結果を表示</h3><output aria-label="修正前の検索結果">{unsafe}</output></div><div className="bg-white rounded-lg p-4"><h3>修正後：現在の取得だけ表示</h3><output aria-label="修正後の検索結果">{safe}</output></div></div>
    <ol aria-label="通信の記録" className="text-sm mt-4 space-y-2">{events.map((event, i) => <li key={i}>{i + 1}. {event}</li>)}</ol>
  </div>
}
export function ResettableRequestExperiment() {
  const [revision, setRevision] = useState(0)
  return <><RequestExperiment key={revision} /><button className={button} onClick={() => setRevision(value => value + 1)}>通信実験をリセット</button></>
}