ReactのUIコンポーネントライブラリ「Chakra UI」とは？ カスタマイズ性と生産性を両立しよう【前編】

現場で役立つ！ React向けライブラリ詳説 第6回

　UIをコンポーネント化（画面部品化）して、再利用性を高められるのは、Reactの大きな特徴のひとつです。この特徴を活かして、統一されたデザインを持ち、カスタマイズ性にも優れたUIライブラリが、数多く提供されています。本記事では、特に生産性とカスタマイズ性にフォーカスして作られた、Chakra UIというライブラリについて解説します。

対象読者

• JavaScriptとWeb開発の基礎に理解がある方
• Reactを用いたJavaScriptアプリケーション開発の経験者

前提環境

　筆者の検証環境は以下の通りです。

• macOS Big Sur 11.4
• Node.js 16.6.1／npm 7.20.3
• React 17.0.2
• react-scripts 4.0.3
• @chakra-ui/react 1.6.6

スタイルに一貫性を持たせる難しさ

　前回、前々回は、Material-UIについて解説しました。マテリアルデザインという一貫性のあるデザイン仕様に沿って作られたコンポーネント群は、ただ組み合わせるだけでも一定の美しさがありました。paddingやボタンの高さといったパラメータが、ある程度厳密に定められているため、私たち利用者がそれらをカスタマイズする機会は少なめです（色合いなどはカスタマイズすることが多いです）。

　さて、マテリアルデザインはUIデザインのガイドラインとして、一例でしかありません。世の中には、GUIアプリケーションがあまたあり、その数だけUIデザインが存在しています。何らかのガイドラインに沿っているものもあれば、沿っていないものもあるでしょう。その中で、美しいと評されるUIデザインには、共通点があります。それは、スタイルに一貫性があるということです。

• 重要度が同程度のテキストは、同じ大きさ・太さのフォントで表現される
• 特段の理由がなければ、marginやpaddingに使われる数値は同じものである
• 特段の理由がなければ、どのボタンも同じ高さになっている。

　そういった一定のルールの元で定義されたスタイルには、一貫性が感じられます。各UIコンポーネントのスタイルに、同じ数値を指定すればいいだけと考えると、簡単なことのように思えるかもしれません。ボタンAにheight: '48px'と書いたら、ボタンBのスタイルにもheight: '48px'と書けばいいのです。

　しかしこれが、意外と簡単なことではありません。1人の人間が短期間で作り上げ、すぐに使い捨てるシステムであれば、この方針でも大きく問題にはなりません。しかし、大人数が開発に携わったり、長期間のメンテナンスを行ったりする場合は話が別です。

　デザイン資料と見た目だけが合っていればいいだろうと考えた人たちが、同じ高さを表現するためにheight: '48px'と書くほか、height: '3rem'と書くかもしれません。「だいたい合っていればいいだろう」とheight: '46px'と書く人もいるかもしれません。その後も、チームメンバーの入れ替えや、繁忙期の突貫作業などによって、一貫性は失われていきます。

スタイル定義に使ってもよいパラメータを定める

　スタイルに一貫性を持たせるには、「使ってもよいパラメータ」を定数などの形で、あらかじめ定めておくのが有効です。

　一貫性のあるUIデザインを描くデザイナーの作業風景を見せてもらうと、「使ってもよいパラメータ」を組み合わせながらUIを組み立てていることが多いです。それは、次のような形で用意されます。

• 使ってもよい色を集めたカラーパレット
• paddingやmarginに使ってもよい長さを集めた自作の物差し
• widthやheightに使ってもよい長さを集めた自作の物差し
• fontSizeやfontWeightに使ってもよい大きさ・太さを集めたフォント集

　実際にブラウザ上でスタイルを指定するプログラマーも、同じように「使ってもよいパラメータ」を定めることで、スタイルに一貫性を持たせやすくなるのではないでしょうか。

　こういったパラメータを定数としてまとめたファイルを用意しておくと、システムに一貫性を持たせやすくなります。ただ、その仕組みを組み立てたり、チームメンバーに周知したり、一貫性を保ったままメンテナンスしていくには、大きな労力がかかります。

Chakra UIとは

　Chakra UI（チャクラユーアイ）は、スタイルを限られたパラメータから選んで指定するアプローチで、UIに一貫性を持たせやすくしたライブラリです（図1）。

図1：Chakra UIのWebサイト

　Webシステムで必要な各種コンポーネントが程よい粒度で提供されている点では、Material-UIと同じジャンルのUIライブラリといえるでしょう。

　また、W3Cで策定されたアクセシビリティ仕様であるWAI-ARIAのaria-*属性に、可能な限り配慮したDOMノードを生成するため、ブラウザから入力支援等の恩恵を受けやすくなっています。

セットアップ

　それでは、実際にどんなものなのか、触りながら確かめてみましょう。まずは動作環境をセットアップします。これまでと同様にCreate React Appを扱いますが、今回はChakra UIが公式テンプレートを用意しているので、使わせてもらいましょう。ターミナルでリスト1のコマンドを実行します。

［リスト1］Chakra UIをセットアップ

$ npx create-react-app chakra-ui-sample --template @chakra-ui

　これで、Chakra UIの利用に必要な各種ライブラリが含まれたプロジェクトがセットアップできました。もし自分で環境を整えてみたい場合は、公式チュートリアルを参照してください。