メンテモエンジニアリング

Engineering at Mentemo Inc.

Chakra UI 2年目のあれこれ

Chakra UI 使ってますか？

お久しぶりです、メンテモの @Qrymy です。書こう書こうと思っている内に時間が過ぎて、気づけば前回のエントリから2ヶ月が過ぎようとしています。今日はこれまでの記事とか少し毛色を変えて、メンテモのフロントエンドについて皆さんにお伝えできればと思います。

掲題の通り、皆さんは Chakra UI を使っていますか？メンテモは使っています。なんと Chakra UI をメンテモのリポジトリにインストールしたのは 2020年6月5日 ということなので、Chakra UI キャリアは2年ということになります。v0.8.0 というバージョンでした。この2年のキャリアを生かして、Chakra UI のあれこれをご紹介します。

メンテモは Chakra UI を導入してよかったです。少なくとも、React / TypeScript 環境でフロントエンドをやる上で有力な選択肢の一つになるのではないかと思います。

そもそも Chakra UI とは

タイトルから走ってしまいましたが、そもそも Chakra UI が何なのかご説明します。一言でいうならば、CSS 属性を Props として渡せる React 向けのコンポーネントライブラリです。特徴は Tailwind CSS にインスパイアされた Utilify first と、TypeScript で開発されていることであると言えます。

コード実例

つまり、面倒な CSS と一定の距離を置くことができる コンポーネントライブラリです。 chakra-ui.com

なぜ Chakra UI か

登用したのが2年前のことになるので、もうだいぶ記憶が薄れていますが、なぜ我々が Chakra UI に決定したかをお伝えできればと思います。一般的に React でスタイリングをするとなると、以下のような選択肢から選ぶことが一般的だと思います。

まず、スコープを絞れないという観点で純粋な CSS を読み込むという選択肢はなくなり、CSS Modules はコンポーネントをスタイリングする際に参照すべきファイルが増えること、型定義を効かせることが難しく (可能な方法があったら教えて下さい) typo が発生した場合に気づかずにスタイルが非適用というリスクがあるため選択肢から外しました。

残るは、CSS in JS / CSS フレームワーク / コンポーネントライブラリですが、最終的には TypeScript との相性で決定しました。Chakra UI を使うことで既存の Linter/Formatter エコシステムで容易にコードの品質担保が可能なこと、Props base であることから typo やミスに気づきやすい (tsc が落としてくれる) ことから Chakra UI を導入することに。当時、まだ v1 に達してもいないライブラリをメインに使うことは今考えると恐ろしい意思決定だと思います。(今同様の状況に直面したならば、確実に選ばないでしょう...)。とりあえず、人気が出てメンテナンスし続けられるライブラリになってくれて一安心です。

Chakra UI を使う上でのイロハ

ここからはせっかく2年間も Chakra UI を使っているのでちょっとしたおトク情報をお伝えできればと思います。

Props を並び替える設定を入れよう

ご存知の通り、Chakra UI は JSX の Props にスタイルを渡していくことになります。シンプルな (≒ あまりスタイルを当てる必要のない) コンポーネントならまだしも、複雑なコンポーネントになるととんでもない量の Props が発生することになります。またかんたんに padding と言っても、paddingX px paddingLeft paddingRight などなど大量の Props が存在します。これらがバラけた箇所に点在していると、スタイルの重複やコンフリクトが発生しやすくなります。そこでメンテモでは、ESLint の react/jsx-sort-props を有効にして、Props の順番を整列しています。

アップデートは慎重に

Chakra UI はまだまだ新しいライブラリなので、アグレッシブなアップデートがしばしば行われます。major version のアップデートについては Migration Guide が出されるのでまだマシですが、minor version のアップデートに罠が潜んでいます。詳細は覚えていませんが、Chakra UI 内部のプロパティの初期値 (たしか flexbox 関連のなにか) がサイレントに変更され、それを知らずに Renovate が出した PR をサクッとマージした結果、本番環境のレイアウトが大変なことになったという事件もありました。当たり前ですが、スタイルのあれこれは CI で落とせない (ビジュアルリグレッションテストなどを導入していない場合) 上に、ユーザ体験にクリティカル・ヒットするので怖いです。

Spacing は 4 を掛けよう

Chakra UI だけではなく Tailwind CSS もそうですが、最初は Spacing の数字がとっつきづらいと思います。「2 とか 4 とか 12 とかなんだそれ」という気持ちになって面倒くさくなる人も多いのではないかと思います。これだけ覚えると Chakra UI がぐっと楽になるので教えると、「4 を掛ければ px になる」です。2 => 8px, 4 => 16px といった具合に、Figma などのデザインを Chakra UI で実装するときはこれを覚えておくと楽になります。また、Chakra UI の Spacing は number 型で渡すよりも string 型で渡した方が吉です。これは推論が効くので、Default Theme の Spacing にあるかどうかわかるからです。Chakra UI の場合、Default Theme の Spacing に無い値を渡すと、px として解釈してしまうので思わぬデザイン崩れにつながることがあります。

まとめ

まだまだ書けることはたくさんあるのですが、ちょっと長くなりそうなので今日はここまでとします。以上、メンテモ内の古参ライブラリ Chakra UI についてのご紹介でした！