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