Reactの開発、楽しいですよね!
しかし、イチからUIコンポーネントを作るというのはなかなかの労力が必要です。
昨今の開発ではなにかしらのコンポーネントライブラリを使ってUI開発にかけるコストは減らしているのではないでしょうか。
今回はそんなコンポーネントライブラリの中で筆者がよく使うChakra UIを紹介していきます。
- Chakra UIとはなにか
- コンポーネントの使い方
- レスポンシブデザイン
- カラーモードの切り替え
Chakra UIってなに?
React向けのコンポーネントライブラリです。
以下のようにChakra UIが提供しているコンポーネントを利用してUIを作成します。
スタイルを指定する際にはコンポーネントに指定可能なprops
を引数として渡します。
CSSを作らずコンポーネントレベルでスタイルを指定するため、パッと見て構造がわかりやすく直感的にUIを作成することができます。
Chakra UIの良いところは、コンポーネントライブラリでありながらカスマイズ性が高いというところだと思います。
提供されているコンポーネント自体も汎用性が高くアレンジしやすいですが、独自のテーマ(カスタムテーマ)を作成することでプロジェクト全体で同様のコンポーネントのスタイルを汎用的に使用するといったことが容易にできます。
このカスタマイズ性が絶妙でやりたいことができるように上手く設計されているなと感じます。
レスポンシブデザインへの対応はもちろん、カラーモード(ダークモード・ライトモード)の切り替えや汎用スタイルの定義(カスタムテーマ)などかゆいところにも手が届きます。
同様のコンポーネントライブラリにMUIがありますが、こちらは制限事項が多くカスタマイズしようとすると面倒であったりできないことが多い印象です。
思想や他ライブラリとの比較は公式に書かれていますので興味がある方は下記リンクをどうぞ。
セットアップ
本記事ではセットアップ手順については割愛します。
こちらの記事にてセットアップ手順を紹介していますのでぜひご覧ください。
どんなことができるの?
ここではChakra UIを使ってできることを一部紹介していきます。
Chakra UIコンポーネント
Chakra UIがデフォルトで提供しているコンポーネントはたっぷりとあります。
ボタンのような基本的なコンポーネント、動きを出したいときに使うコンポーネント、stateを使うと意外と面倒なこともChakra UIのコンポーネントを使うとあっさりできてしまったりもします。
Button
最初に示した例の通りButtonを使用することでボタンUIを作成できます。
さらにボタン内部にアイコンをつけることも簡単にできます。
Drawer
上から下から左右から表れるスライドも簡単に作れます。
Show
画面サイズが大きいときには表示したいけど、スマホ画面などのような小さいサイズのときは表示したくないような場合に使えるコンポーネントも用意されています。
※以下のサンプルは表示幅を変えると表示内容が変化します。
他にもたくさんのコンポーネントがありますので詳しくは公式サイトをご参照。
レスポンシブ
props
として指定可能な部分にオブジェクトもしくは配列形式で値を設定することでレスポンシブ対応が容易に行なえます。
コンポーネントのサイズを変えることはもちろん、色や装飾なども変更できます。
※以下のサンプルは表示幅を変えるとスタイルが変化します。
カラーモード
ダークモード好きは必見。カラーモードの実装も簡単です。
前述のコンポーネントとは異なり、ColorModeScript
というものを事前に実行しておく必要がありますがそれだけやっておけばOKです。
カラーモードを使用するために最低限必要なコードは以下のようになります。
最後に
サンプルコードの通りChakra UIを使うといろいろなことが簡単に実現できます。
ライブラリなのである程度の慣れが必要となってきますが、慣れてくるとUIが手早く作れて気持ちよくフロントエンド開発することができます。
他のコンポーネントライブラリと比べてカスタマイズ性が高くデザインも良い感じですので、ぜひ一度使ってみることをおすすめします!