[WIP]Chakra UIを使いこなす

Chakra UIの役割

• スタイルつきのコンポーネント集
• かなり豊富なコンポーネント群
• Modalの表示を制御する hooks などもある

• CSS in JSライブラリ
• styled-system を内包している

裏側の実装

• emotion とstyled-system を組み合わせている
• styled-system: スタイル計算
• emotion: className 生成

設計原則

Design Principles

Skip to Content Build faster with Premium Chakra UI Components 💎 Chakra UI is established on principles that keep its components fairly consistent. Understanding these concepts will help you better contribute to Chakra UI.

https://chakra-ui.com/getting-started/principles

• Style Props
• すべてのコンポーネントは style propsで上書き可能になっていて、css props や styled()の使用を減らす設計になっている
• Chakra UI のコンポーネントはすべて上記の特性をもつ <Box>を使っている

• Simplicity
• コンポーネントのAPIをかなりシンプルに保つよう設計している

• Composition
• 複雑さを抑えるためにコンポーネントはなるべく小さく分割している
• これにより、スタイルや機能の柔軟性・拡張性を確保している

• Accessibility
• コンポーネントを作成する際、a11y を最優先に考えている
• キーボードナビゲーション、フォーカス管理、カラーコントラスト、ボイスオーバー、適切な aria-属性

• Dark Mode
• ダークモードを考慮している

• Naming Props
• 命名規則はdoes, has, is, shouldのような補助動詞を使うようになっている

他ライブラリとの比較

Comparison

When building a product, website, or application, it is a common question to consider the design system or component library to use to help you ship quality products fast, and deliver value to your customers in a way that scales with your team.

https://chakra-ui.com/getting-started/comparison

Tailwind CSSとの違い

• 学習コスト
• Tailwind: BootstrapやBulma CSSを使ったことがあればTailwindの学習は楽だが、styled-component, emotionなどを使っている場合、かなり厳しい学習曲線になるかもしれない
• Chakra UI: 非常に直感的で、CSSライク、かつ props ベースのスタイリングモデルが付属しており、習得が容易。コンポーネント名やprops名も非常にわかりやすくなっている。

• レスポンシブスタイル
• Tailwind: 記述が長くなる可能性がある <img class="w-16 md:w-32 lg:w-48" src="...">
• Chakra UI: 非常に簡単かつ直感的な方法でレスポンシブスタイルをかける <Img w={{ base: 16, md: 32, lg: 48 }} src="..." />

• スタイルの上書き
• Tailwind: CSSユーティリティフレームワークなので、特定のclassNameを上書きしたり、カスタムCSSを記述するための最適な方法を自分で見つける必要がある
• Chakra UI: Chakra UIスタイルはpropsベースなので、上書きはpropsを渡すのと同じくらい簡単

Theme UIとの違い

• Chakra UIはTheme UIにインスパイアされている

• Chakra UI は Theme UI よりも多くのコンポーネント、改良されたスタイリング API、アクセシビリティ、および直感的なコンポーネント API を提供している

• Chakra は、Theme UI をより堅牢にしたもので、styled-system の力をフルに活用して、より優れたコンポーネント・スタイルとテーマ性を提供するものと考えてください

Material UIとの違い

• Material UIが提供するものと同様のUIコンポーネントを開発者に提供するが、柔軟で合成可能、かつ拡張性のあるコードの作成に重点を置いている

• Material UI はスタイル、コンポーネントの上書き、特にレスポンシブデザインが絡むと特に大変

Ant Design との違い

• Ant Design: コンポーネントは既存の設計ルールや値に従いますが、特定の変数については限られた範囲でしかカスタマイズができない

• Chakra UI: デザインシステムに縛られることなく、より自由にコンポーネントをカスタマイズして、独自のデザインを実装することができる

• ex. Button コンポーネントのcolorSchemaで色変更ができるが、独自のカラー構成を追加することができるが、Ant Designはできない

useBreakpointでstyle以外のレスポンシブ対応も出来る

03Chakra UIのはじめかた・Installation 04基礎となるスタイルの付け方・Boxコンポーネントについて 05Tips. Chakra UIの設計原則 06Theme: 色のTheme・キーワード 07Theme: サイズ・Spacingに関するTheme 08Theme: その他の機能（variant, z-index, カスタマイズ) 09疑似要素スタイル(&:hover)等は_hoverのように指定する 10レスポンシブにするなら複数の値を設定する 11useBreakpointでstyle以外のレスポンシブ対応も出来る 12asプロパティでいろんなコンポーネントにする例 (ButtonをLink化する) 13コンポーネントを拡張したものを共通化して使う 14sxで例外的なCSS処理・部分的にグローバルなCSSを作る 152章 コンポーネント・APIのTips集 16要素を角丸にしたりshadowかけたりする 17Stackをどんどん使おう（リストレイアウト編） 18VStack / HStackもどんどん使おう（コンポーネントレイアウト編） 19Spacerを使って楽にレイアウトしていく 20どんなコンポーネントもChakra UIっぽく扱いたいならchakra factory機能を使う 213章 拡張・その他編 22SkeltonとIntersectionObservableを組み合わせる 23Accordionが開いた後に遅延読み込み(lazy load)処理をさせる 24TabをURL Hashに同期する 25Drawerとレスポンシブを使ってモバイルのときに隠れるメニューを作る 26おまけ（CSSからの脱却・他のフレームワークと比べて）

https://zenn.dev/terrierscript/books/2021-05-chakra-ui/viewer/1-5-2-use-breakpoint-value

[WIP] 各コンポーネント解説

Box

Box

Box is the most abstract component on top of which all other Chakra UI components are built. By default, it renders a `div` element The Box component is useful because it helps with three common use cases: Create responsive layouts with ease. Provide a shorthand way to pass styles via props (bg instead ofbackgroundColor).

https://chakra-ui.com/docs/components/box

• 最もプリミティブなコンポーネント（<div> みたいなものだと思えばOK）

• 主な機能・ユースケース
• レスポンシブレイアウトの構築
• propsを介してスタイルを渡すための省略記法を提供する(ex. backgroundColorの代わりにbg)
• as props で <div> 以外のHTML要素に変身