レシピ(逆引き)
各レシピは対応する最小例にリンクする。まず例を見て、詳細は ../spec/ で確認するのが速い。
状態
| やりたいこと | 例 |
|---|---|
| カウンタ的な状態と更新 | features/01-slot-and-reducer |
| 値の範囲・形式を縛る | features/02-nominal-type |
| レコードを不変更新する | features/04-record-and-copy |
| 純粋なヘルパ関数 | features/05-pure-fn |
コレクション
| やりたいこと | 例 |
|---|---|
| リストを map / filter / 描画 | features/07-list |
| Map に追加・取得・削除 | features/08-map |
| Set でトグル | features/09-set |
| 任意値(あるかも)を扱う | features/10-option |
| 成否を表す | features/22-result |
| 日時・期間 | features/11-time-and-duration |
UI
| やりたいこと | 例 |
|---|---|
| 行・列・グリッドで並べる | features/12-layout |
| 入力欄と双方向結合 | features/13-text-input-bind |
| プルダウン | features/14-select |
| チェックボックス | features/15-checkbox |
| 条件で出し分け | features/16-conditional-ui |
| テーマ切替 | features/17-theme |
アプリレベル
| やりたいこと | 例 |
|---|---|
| ルーティング・パラメータ・404 | features/18-routing |
| HTTP からデータ取得 | features/19-effect-http |
| localStorage に永続化 | features/20-effect-storage |
| 定期実行(タイマー) | features/21-timer |
| 起動時・画面遷移時の処理 | features/23-lifecycle-route-enter |
実アプリで組み合わせを見る
- CRUD + Map + Option: apps/04-issue-tracker
- 入れ子データ + カンバン + テーマ: apps/05-project-management