easy-model のはじめ方（クイックスタートガイド）

TL;DR モデルクラスをインストールして記述する。React で使用/購読するには useModel を、共有インスタンスには provide を使用する。 pnpm add @e7w/easy-model class TodoModel { items: string[] = []; add(text: string) { this.items.push(text); } remove(index: number) { this.items.splice(index, 1); } } import { useModel } from "easy-model"; function TodoList() { const todo = useModel(TodoModel, []); return ( <div> <button onClick={() => todo.add("new item")}>Add</button> {todo.items.map((it, i) => ( <div key={i}> <button onClick={() => todo.remove(i)}>✖</button> {it} </div> ))} </div> ); } これはコアなワークフローです：ミニマルな React の結合部を持ちながらモデルファーストの設計。もしビジネスロジックを既にクラスでモデル化している場合、easy-model は状態を自然に感じさせます。 GitHub: easy-model npm: @e7w/easy-model

TL;DR Install and write a model class. Use useModel to create/subscribe in React. Use provide for shared instances. pnpm add @e7w/easy-model class TodoModel { items: string[] = []; add(text: string) { this.items.push(text); } remove(index: number) { this.items.splice(index, 1); } } import { useModel } from "easy-model"; function TodoList() { const todo = useModel(TodoModel, []); return ( todo.add("new item")}>Add {todo.items.map((it, i) => ( * todo.remove(i)}> {it} ))} ); } This is the core workflow: model-first design with minimal React glue. If you already model business logic with classes, easy-model makes state feel natural. GitHub: easy-model npm: @e7w/easy-model