ALT Claude Code の /code-review と /simplify を対等に並べた比較図。/code-review は「正しさのバグ検出＋クリーンアップ」で、effort を low〜max で調整、--fix で適用、--comment で GitHub PR にコメント、ultra でクラウド多エージェントレビューができる。/simplify は「品質改善だけ・バグは探さない」で、4つのレビューエージェントが並列に再利用・簡潔さ・効率・抽象度を診断して修正を適用し、引数は target のみ。名前は似ていても目的が違うことを示している。

ALT 'use client' import { DndContext } from '@dnd-kit/core' import { SortableContext, useSortable, arrayMove, } from '@dnd-kit/sortable' import { CSS } from '@dnd-kit/utilities' // 並べ替えたい要素に useSortable を挿す function Item({ id }: { id: string }) { const { attributes, listeners, setNodeRef, transform } = useSortable({ id }) return ( <li ref={setNodeRef} style={{ transform: CSS.Transform.toString(transform) }} {...attributes} {...listeners} > {id} </li> ) } function SortableList() { const [items, setItems] = useState(['a', 'b', 'c']) return ( <DndContext onDragEnd={({ active, over }) => { if (!over || active.id === over.id) return const from = items.indexOf(active.id as string) const to = items.indexOf(over.id as string) // 並び替え後の配列が一発で出る setItems(arrayMove(items, from, to)) }} > <SortableContext items={items}> <ul> {items.map((id) => <Item key={id} i

ALT 'use client' import { useQueryState, parseAsInteger } from 'nuqs' function Search() { // ?q=... をそのまま useState 感覚で const [q, setQ] = useQueryState('q') // ?page=1 は型付き＆デフォルト値も指定可 const [page, setPage] = useQueryState( 'page', parseAsInteger.withDefault(1), ) return ( <div> <input value={q ?? ''} onChange={(e) => setQ(e.target.value)} /> {/* shallow更新ならサーバー再レンダリングなし */} <button onClick={() => setPage(page 1, { shallow: true })}> 次へ（現在 {page} ページ） </button> </div> ) }

ALT // const obj に as const を付けると、値の literal 型を // 保ったまま固定できる。そのキーを union 型として // 取り出すのが keyof typeof👇 const STATUS = { todo: 'TODO', doing: 'DOING', done: 'DONE', } as const type StatusKey = keyof typeof STATUS // 'todo' | 'doing' | 'done' // 値側の union も typeof indexed access で引ける type StatusValue = (typeof STATUS)[StatusKey] // 'TODO' | 'DOING' | 'DONE' // 関数の引数もこれで縛れる👇 function setStatus(key: StatusKey) { return STATUS[key] } setStatus('done') // ✅ OK setStatus('hoge') // ❌ Error: 'hoge' は StatusKey じゃない

ALT type TextField = { kind: 'text'; value: string } type NumberField = { kind: 'number'; value: number } type Field = TextField | NumberField // Conditional Type を1段被せて "kind から value の型を引く"👇 type ValueOf<K extends Field['kind']> = Extract<Field, { kind: K }>['value'] // ↑だけだと型の話で終わるので、関数側も縛ってみる👇 function setValue<K extends Field['kind']>(kind: K, value: ValueOf<K>) { // kind に応じて value の型が確定する } setValue('text', 'hello') // ✅ OK setValue('number', 42) // ✅ OK setValue('number', 'x') // ❌ Error: string は number に渡せない