wehub-resource-sync
d48cda4081
CI / Test (ubuntu-latest, Node 18.x, bun) (push) Failing after 15m1s
CI / Test (ubuntu-latest, Node 18.x, npm) (push) Failing after 15m1s
CI / Test (ubuntu-latest, Node 18.x, pnpm) (push) Failing after 15m1s
CI / Test (ubuntu-latest, Node 18.x, yarn) (push) Failing after 15m1s
CI / Test (ubuntu-latest, Node 20.x, bun) (push) Failing after 17m13s
CI / Test (ubuntu-latest, Node 20.x, npm) (push) Failing after 18m42s
CI / Test (ubuntu-latest, Node 20.x, pnpm) (push) Failing after 15m0s
CI / Test (ubuntu-latest, Node 20.x, yarn) (push) Failing after 49m44s
CI / Test (ubuntu-latest, Node 22.x, bun) (push) Failing after 51m55s
CI / Test (ubuntu-latest, Node 22.x, pnpm) (push) Failing after 21m57s
CI / Test (ubuntu-latest, Node 22.x, npm) (push) Failing after 37m39s
CI / Test (ubuntu-latest, Node 22.x, yarn) (push) Failing after 34m7s
CI / Validate Components (push) Failing after 37m15s
CI / Python Tests (push) Failing after 10m1s
CI / Security Scan (push) Failing after 10m1s
CI / Lint (push) Failing after 17m12s
CI / Coverage (push) Failing after 20m19s
CI / Test (macos-latest, Node 18.x, bun) (push) Has been cancelled
CI / Test (macos-latest, Node 18.x, npm) (push) Has been cancelled
CI / Test (macos-latest, Node 18.x, pnpm) (push) Has been cancelled
CI / Test (macos-latest, Node 18.x, yarn) (push) Has been cancelled
CI / Test (windows-latest, Node 18.x, npm) (push) Has been cancelled
CI / Test (windows-latest, Node 18.x, pnpm) (push) Has been cancelled
CI / Test (windows-latest, Node 18.x, yarn) (push) Has been cancelled
CI / Test (macos-latest, Node 20.x, bun) (push) Has been cancelled
CI / Test (macos-latest, Node 20.x, npm) (push) Has been cancelled
CI / Test (macos-latest, Node 20.x, pnpm) (push) Has been cancelled
CI / Test (macos-latest, Node 20.x, yarn) (push) Has been cancelled
CI / Test (windows-latest, Node 20.x, npm) (push) Has been cancelled
CI / Test (windows-latest, Node 20.x, pnpm) (push) Has been cancelled
CI / Test (windows-latest, Node 20.x, yarn) (push) Has been cancelled
CI / Test (macos-latest, Node 22.x, bun) (push) Has been cancelled
CI / Test (macos-latest, Node 22.x, npm) (push) Has been cancelled
CI / Test (macos-latest, Node 22.x, pnpm) (push) Has been cancelled
CI / Test (macos-latest, Node 22.x, yarn) (push) Has been cancelled
CI / Test (windows-latest, Node 22.x, npm) (push) Has been cancelled
CI / Test (windows-latest, Node 22.x, pnpm) (push) Has been cancelled
CI / Test (windows-latest, Node 22.x, yarn) (push) Has been cancelled
80 lines
2.8 KiB
Markdown
80 lines
2.8 KiB
Markdown
> このファイルは [common/patterns.md](../common/patterns.md) を Web 固有のパターンで拡張します。
|
|
|
|
# Web パターン
|
|
|
|
## コンポーネントコンポジション
|
|
|
|
### コンパウンドコンポーネント
|
|
|
|
関連する UI が状態とインタラクションのセマンティクスを共有する場合、コンパウンドコンポーネントを使用する:
|
|
|
|
```tsx
|
|
<Tabs defaultValue="overview">
|
|
<Tabs.List>
|
|
<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
|
|
<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
|
|
</Tabs.List>
|
|
<Tabs.Content value="overview">...</Tabs.Content>
|
|
<Tabs.Content value="settings">...</Tabs.Content>
|
|
</Tabs>
|
|
```
|
|
|
|
- 親が状態を所有する
|
|
- 子はコンテキスト経由で消費する
|
|
- 複雑なウィジェットでは props のバケツリレーよりもこれを優先する
|
|
|
|
### レンダープロップ / スロット
|
|
|
|
- 動作は共有されるがマークアップを変える必要がある場合、レンダープロップまたはスロットパターンを使用する
|
|
- キーボードハンドリング、ARIA、フォーカスロジックはヘッドレスレイヤーに保持する
|
|
|
|
### コンテナ / プレゼンテーション分離
|
|
|
|
- コンテナコンポーネントがデータ読み込みと副作用を所有する
|
|
- プレゼンテーションコンポーネントは props を受け取り UI をレンダリングする
|
|
- プレゼンテーションコンポーネントは純粋に保つべきである
|
|
|
|
## 状態管理
|
|
|
|
これらを個別に扱う:
|
|
|
|
| 関心事 | ツール |
|
|
|--------|--------|
|
|
| サーバー状態 | TanStack Query、SWR、tRPC |
|
|
| クライアント状態 | Zustand、Jotai、signals |
|
|
| URL 状態 | search params、route segments |
|
|
| フォーム状態 | React Hook Form または同等のもの |
|
|
|
|
- サーバー状態をクライアントストアに複製しない
|
|
- 冗長な計算済み状態を保存する代わりに値を導出する
|
|
|
|
## 状態としての URL
|
|
|
|
共有可能な状態を URL に永続化する:
|
|
- フィルタ
|
|
- ソート順
|
|
- ページネーション
|
|
- アクティブタブ
|
|
- 検索クエリ
|
|
|
|
## データフェッチ
|
|
|
|
### Stale-While-Revalidate
|
|
|
|
- キャッシュされたデータを即座に返す
|
|
- バックグラウンドで再バリデーションする
|
|
- 手作りする代わりに既存のライブラリを優先する
|
|
|
|
### 楽観的更新
|
|
|
|
- 現在の状態のスナップショットを取る
|
|
- 楽観的な更新を適用する
|
|
- 失敗時にロールバックする
|
|
- ロールバック時に可視的なエラーフィードバックを出す
|
|
|
|
### 並列ローディング
|
|
|
|
- 独立したデータを並列にフェッチする
|
|
- 親子のリクエストウォーターフォールを避ける
|
|
- 正当な理由がある場合、次のルートや状態をプリフェッチする
|