Chapter 05無料公開

Tips. Chakra UIの設計原則

terrierscript
terrierscript
2021.05.09に更新

ここで、Chakra UIの設計原則について見てみます。

https://chakra-ui.com/docs/principles

基本的にコントリビューター向けの情報ですが、利用者にとっても使いこなすのに知っておいて損は無いでしょう

Propsを利用したStyle設定

すべてのコンポーネントがpropsとして設定、上書き出来ることで、css propsやstyled()の利用を減らす設計になっています。
この特性を持つ<Box>を使ってすべてのコンポーネントが作られるようになっています

シンプル

現実の利用を考えてながらも、なるべくシンプルにAPIを保つように設計されています

コンポジション

コンポーネントはなるべく小さく・細かく分割されています。一つのコンポーネントにPropsを多く持たせて何かをするより、コンポーネントそれぞれが小さく、Propsが最小で済むような形になり、それぞれでの拡張がしやすくなります

アクセシビリティ

それぞれのコンポーネントは、focusやvoice over, aria属性などを含み、アクセシビリティを考慮するように作られています。
また、例えばVisullyHiddenなどアクセシビリティのためのコンポーネントも存在しています

ダークモード

コンポーネントはダークモードを考慮して設計されています。

命名規則

命名規則はhas,is,shouldのような補助動詞を使うようになっています。例えばButtonであればisDisableisLoadingなどです。
その他shouldWrapChildrenhasCopiedなども一部コンポーネントやhooksに出てきます。

もしカスタムコンポーネントを作る場合、この命名規則に従っておくと良いかもしれません。