Panda CSS と Ark UI ではじめる個人開発

https://aegis.connpass.com/event/317419/ の登壇資料です！

Transcript

1. Panda CSS と Ark UI で始める個人開発 ikuma-t AegisエンジニアLT交流会
2. ikuma-t 2 株式会社エンペイで働くエンジニア。 普段のお仕事ではVue.jsやRailsを書いています。 プライベートでは SVG と格闘しています。 もうそろそろエンジニア3年目に入ります。 千葉のどこかに住んでいます。 ikuma-t ikumatdkr ikuma-t.com
3. Panda CSS と Ark UI の とりあえずのはじめ方 お話しすること
4. チーム開発における運用を意識した 両ライブラリの使い方 話さないこと お！言い訳だ！
5. • 「ドキュメント見るのめんどいから、今回もTailwind CSSでいいか」と思っている人 • Panda CSS / Ark UI を使おうと思っている方 想定する聴者
6. Panda CSS の概要を掴む
7. Panda CSS Chakra UI が開発している ゼロランタイム CSS in JS ライブラリ https://panda-css.com/ 本物のパンダは和歌山でみるのがおすすめ
8. とりあえずスタイリングしたい 個人開発なので、そこまで考えず
12. Panda CSS は選択肢が多い😮 これまでの CSS フレームワークのいいとこ取りだから
13. Panda CSS の 2 つの側面 Styling engine Token generator sea.80 text-button-normal
14. Panda CSS の 2 つの側面 Styling engine Token generator sea.80 text-button-normal 個人で使う分には まずスタイリング（左側）できればOK
15. Panda CSS のスタイリング記法 1. Object Literal（Atomic Styles / Shorthand Properties） 2. Template Literals（`css` / `styled`） 3. Patterns 4. Recipes 5. Slot Recipes Panda CSSでスタイリングを行うための記法は以下のとおり。
16. Object Literal （Atomic Style） • オブジェクトで CSS プロパティを記載する • class に適用する • 型補完が効く
17. • オブジェクトで CSS プロパティを記載する • Panda が提供する独自 短縮記法プロパティ （Utilities）を利用する Object Literal （Shorthand Properties）
18. Template Literals • テンプレートリテラルで定 義する記法。 • token に対する補完が効 かない、pattern と recipe が生成されないな どの不足がある。
19. Patterns • よく使用するレイアウトを 簡単に再利用するための 機能。 • Flex、Divider、...etc • JSXの形式でも使用でき る。
20. Recipes • 複数のプロパティのセット をひとまとめにしたもの。 • 例えばボタンの形式・サイ ズを定義する • ラフに使うのは Atomic Recipe（cva）
21. Slot Recipes • 複数の要素から構成され るコンポーネントの Recipeを定義するため のもの • Compound Pattern の スタイリングに有効
22. どれで書くのか？💭
23. 基本は Object Literal（Atomic Style）を使う • Object Literal は Panda CSS の推奨。過不足なく使える。 ◦ Utilitiesは短縮してかけるが、CSS-in-JS自体が補完を行えるのでそこまで恩恵を感じ ない。通常のCSSプロパティを使った方が移行容易性・保守性は良さそう。 ◦ Template Literal は一部生成されない内容がある。 • ある程度利用パターンが見えている場合（共通のコンポーネント）には、適 宜 Recipes / Slot Recipes も使える。 • Patterns は無秩序にならなそうなら便利に使える。
24. ラフに規約を設定する 資料のみです
25. 規約を設定する • チーム開発ではないので、すべてをガチガチに固める必要はない • 一方で開発時の迷いやミスを削減するために、選択肢を絞るような規約を 設けることは、個人開発においても効果的。
26. • panda.config.ts のオプションを指定すると、不要なプロパティや値を生成 しないことができる（補完にも出なくなる）。 • shorthands： ショートハンドプロパティの生成を制限 ◦ 例）backgroundColor は使えるが、bg が使えなくなる。 • strictPropertyValues：一部のCSSプロパティについて、無効な値の設定 をできないようにする ◦ 例）display: “hoge” はエラー。display: “grid”や”flex”はOK。 使わないプロパティや値 / 無効な値に対する規約
27. やりすぎな気もするけど、patterns も消せる • panda css には Preset と呼ばれる設定集がある。 • デフォルトでは次の 2 種類の Preset が適用されている。 ◦ @pandacss/preset-base：pattern や 擬似要素を定義している。 ◦ @pandacss/preset-panda： デフォルトのカラーパレットなどを定義している。 • Preset は npm として提供されており、またインターフェースとして Config のオブジェクトを返すだけなので、patterns を省いたオブジェクトで Config を再構成すると、patterns が生成されなくなる。 ◦ https://panda-css.com/docs/customization/presets#which-panda-presets-will -be-included-
28. デザイントークンを段階的に定義する 意味的なレイヤー 参照レイヤー sea.80 text-button-normal 原始的な値 #0017C1 Primitive / Semantic な値をそれぞれ指定可能
29. デザイントークン定義の ためのヘルパー関数 • 色やボーダー、余白など 部分的にトークンを定義 できる。 • defineToken と defineSemanticToken という二種類のAPIが用 意されている。
30. 作成済みのデザイントークンを参照する（panda studio） Astro製のカタログ。npmで別途 @pandacss/studio を追加する必要がある
31. Ark UI のコンポーネントを使う
32. Ark UI Headless UI コンポーネント ライブラリ https://ark-ui.com/
33. Ark UI は Zag.js で構築されている
34. Zag.js UIの状態・属性を管理 Ark UI 状態や属性をDOMに注入 Panda CSS スタイル層
35. Zag.js 有限ステートマシンによる コンポーネントフレームワーク https://zagjs.com/
36. 余談）Zag 用語 • Zag：方向を急激に変えること。Zag.js のアプローチの革新性を示してい る。 • zag it!：「Zag.jsでコンポーネント作ろうぜ！」 • zagger：Zag.js を使っている人 • zagadat：Zag.js を使ったときの感覚 • zag nation：Zag.js のコミュニティ
37. Zag.jsをざっくり掴む - State Machine - コンポーネントの状態を State Machine で管理するライブラリ Dialogの場合（簡略版） closed open open close 薄暗い背景を表示 薄暗い背景を非表示 data-state=”open” data-state=”closed” （共通）適切な aria 属性を付与 状態に応じたdata属性の付与 アクセシビリティの考慮 状態に応じたDOMの変更
38. Zag.jsをざっくり掴む - Components Anatomy - コンポーネントの構成要素。この単位で属性の付与が行われる。 画像引用元：https://zagjs.com/components/react/dialog
39. Zag.jsをざっくり掴む - machine と connect - 状態遷移を定義する「machine」とそれを UI に繋ぎこむ「connect」で構成
40. Zag.jsからArk UIへ zag.jsと同じ粒度でコンポーネントを構成 https://ark-ui.com/docs/react/components/dialog
41. Zag.js からArk UI へ State Machine Connect Custom Hook HTML Dialog.Title Dialog.Content Dialog.Description Dialog.Trigger Dialog.CloseTrigger Dialog.Backdrop Dialog
42. Panda CSS の Slot Recipes を使ってスタイリングする Ark UIのコンポーネントはCompound Patternで構成されている。
43. Slot Recipes • 複数の要素から構成され るコンポーネントの Recipeを定義するため のもの • Compound Pattern の スタイリングに有効
44. 補足：slotには @ark-ui/anatomy が便利 • @ark-ui/anatomy には 各コンポーネントの Anatomy が格納されて いる。 • このkeyをとることで、 slotsが簡単に指定でき る。
45. 補足：Atomic Slot Recipes と Config Slot Recipes • slot recipesを構成する方法には、sva（Atomic Slot Recipes）と、 defineSlotRecipes（Config Slot Recipes）がある。 • 前者のCSSはJust in timeで生成されるため、パフォーマンス的には後者 のほうが優れている。 • デザインシステムなどの共通化が多くある場合は後者を利用する。このと き、Storybookですべてのパターンが生成されないので注意が必要 （staticCSSというオプションで回避できる。）
46. 状態によって変わる部分にスタイリングを当てる • Zag.js経由で各要素に状態に応じたdata属性が付与されているので、こ れをターゲットにスタイルをつける。 • Panda CSSでは、「_」から始まるプロパティがdata属性に変換される （Utilityとして定義のあるもののみ）。 • 例えば「_open」と指定した場合、「&:is([open], [data-open], [data-state="open"])」に対してスタイリングされる。
47. Factory を使って共通 コンポーネントを作る • Ark UI には Button や Input といったコンポーネ ントはない。 • factory を使うと、 asChild が付与されたコ ンポーネントを作れる
48. おわりに
49. Panda CSS と Ark UI で始める個人開発 ikuma-t AegisエンジニアLT交流会
50. Panda CSS と Ark UI で始める個人開発 ikuma-t AegisエンジニアLT交流会
51. 結局 ikuma-t は何を個人開発しているのか？ 自動補完で単語帳作成 集めた単語を並べて ... スワイプで理解度チェック
52. 実際に機能としてもだいたい 実装できていたのですが...
53. なんか飽きてしまった！😉
54. 個人開発は技術を使うよりも モチベーションが大事！（唐突）
55. ありがとうございました！