shadcn/uiから考えるコンポーネント設計
shadcn/ui
- インストール不要でコピペで使うUIコンポーネント集
- v0ではかれるコードで使われてる
- 大規模より小規模向き
- RadixUIベース
- cvaでスタイル指定をする
- Variant指定
- formはReactHookFormを使ってる
contenteditableと向き合う
contenteditable
- 請求書発行のプロダクト
- どんな金額になるか等さまざまなパターンがある
- リッチエディタが必要
- contenteditable
- input要素などではない要素で入力可能にする
- キー操作を自前で再実装が必要
- 日本語入力の挙動
- ADR
- 技術選択の背景の記録
- 他の妥当そうな選択肢を並べる
- やってみて
- キー操作の再現がとにかく大変
状態管理ライブラリZustandの導入から運用まで
- daikiさん
- https://speakerdeck.com/k1tikurisu/zhuang-tai-guan-li-raiburarizustandnodao-ru-karayun-yong-made
Zustandの導入
- 入力フォームの内容を大きいオブジェクトで管理してる
- 再レンダリングの最適化をしたい
- 状態管理ライブラリを選定
- 状態管理ライブラリ
- 使ってみて
- ネストしたオブジェクトの管理が大変
...がたくさん- Zustandにimmerのmiddlewareが入ってる
- Providerがいらないので入れやすい
- 型定義を書いていくのが大変
- ネストしたオブジェクトの管理が大変
Open UIによるWeb UI標準化へのアプローチ
Open UI
Rechartsで楽にゴリゴリにカスタマイズする！
Rechartsのカスタマイズ
- チャートをカスタマイズしたい
- Rechartsはカスタマイズの口は用意してるがsvgしか入れられない
TypeScriptとGraphQLを活用した変化に強いプロダクト作り
GraphQL採用のメリット
Next.jsでクエリパラメータを楽に扱おう nuqsを紹介！
- 🐸いまいまい🐌さん
- https://speakerdeck.com/imaimai17468/next-dot-jsdekueriparametawole-nixi-ou-nuqswoshao-jie
nuqs
- URLの文字列を単純な連結で組み立てるのは危険
- stateの同期など大変
- nuqsでクエリ管理ができる
- hooksでクエリと同期させられる
- 型安全にURL文字列にできる
Cloudflare PagesとCloudflare Accessで安全にWebサイトを共有する
- tottoさん
