CSSが苦手でも大丈夫！CSS弱者がChakra UIでそれっぽいUIが書けるようになった話

:::note info
この記事は[身の回りの困りごとを楽しく解決！ by Works Human Intelligence Advent Calendar 2022](https://qiita.com/advent-calendar/2022/works-hi-1)の4日目の記事です。
:::

# はじめに

初めまして！ゆっきーです！！普段は某社でサーバーサイドエンジニアをやっています。

さて、突然ですが、皆さんはCSSって書けますか？
僕は**大の苦手**です:sob:

どんなところが苦手かと言いますと、例えば
- **思った通りに反映されない**
  - text-align="center"でコンテンツが真ん中にこない
- **デバッグしにくい**
  - エラーが表示されない
  - キャッシュが残っていると最新の変更が反映されない
- **そもそもどんなプロパティがあるのかわかってない。プロパティの値すらわかってない**
- **ちゃんと解説してくれてる記事が少ない。[mozillaのページ](https://developer.mozilla.org/ja/)に辿り着くのにそこそこ経験値が必要**

などです。。
この苦手意識が原因で、約1年前まではフロントエンドに全く手が出せずにいました。そう、**Chakra UIに出会ったあの日までは、、**。

この記事では、そんな僕がChakra UIと出会ったことで、
- どうしてフロントエンドへの抵抗が消えたのか
- それっぽいUIが書けるようになったのか

を紹介します！

# 対象読者
- CSS苦手・わからないけどフロントエンド触ってみたいよって方
- Reactのチュートリアルやってみたけど次の一歩が踏み出せてないよって方
- Chakra UIが気になる方

:::note warn
Chakra UIはReactのためのライブラリです。Reactがわからなくても魅了が伝わるように善処しますが、より一層魅力を感じられるように[Reactのチュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)を終えてから本記事を読むことを勧めます。
:::

# Chakra UIって何？

さて、タイトルにもあるChakra UIって何でしょうか？
[公式サイト](https://chakra-ui.com/)では次のように説明されています。
> Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

deeplで訳してみるとこんな感じです

> Chakra UIは、Reactアプリケーションを構築するために必要なビルディングブロックを提供する、シンプルでモジュール化されたアクセス可能なコンポーネントライブラリです。

コンポーネントライブラリというのは既に整った見た目や機能が割り当てられた部品を提供してくれているライブラリのことで、CSSやbootstrap、tailwindowcssなどと違い、皆さんはDOM要素(HTMLのタグ)ごとに**styleを選択して割り当てる必要がありません！** 提供された扱いやすい部品を組み合わせるだけで、皆さんはそれっぽいWebページを作成することができるのです！！

# Chakra UIで解決した悩み

さて、前節で述べたように、Chakra UIはコンポーネントライブラリなため、導入することで**今までcssに感じていた多くの悩みを感じることなく、フロントエンドの開発が可能**になります！
実際の事例を見ていきましょう！

:::note warn
以下、コードの実行にはNext.jsを使用していますが、Next.jsの知識がなくても読めるようになっているのでご安心ください。
:::

## Case1: 並べ方、位置の調整がコンポーネントでできる

さて、次のようなコードがあったとします。

```typescript

import { Box } from "@chakra-ui/react"

const Sample = () => {
    const boxSize = {
        w: "40px",
        h: "40px"
    }
    return(
       <Box>
           <Box sx={boxSize} bgColor="red">hoge</Box>
           <Box sx={boxSize} bgColor="blue">huga</Box>
           <Box sx={boxSize} bgColor="yellow">piyo</Box>
       </Box>
    )
}
export default Sample

```
Chakra UIのBoxコンポーネントは最も基本的なコンポーネントで、通常は**divタグ**にレンダリングされます。
では、このコードはどういうコードかというと、縦横40pxの、それぞれ赤、青、黄色の領域を生成するコードです。実行すると以下のようになります。

![スクリーンショット 2022-12-03 22.38.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1091686/365855fc-7492-8b06-02fa-e70dcbee4ef2.png)

さて、この3つの四角形を**横並びにしたい**時、皆さんはどうしますか？
多くの場合、親要素のclassに頑張ってCSSを当てはめることになっていたと思います。その度にCSSがわからなくて、プロパティをググって、コピペして、でもなんか動かなくて、、そんな経験ありませんか？

**Chakra UIならそんな経験する必要ありません！一瞬で解決します！！**
以下のようにコードを編集してみます。

```diff_typescript

import { Box, HStack } from "@chakra-ui/react"

const Sample = () => {
    const boxSize = {
        w: "40px",
        h: "40px"
    }
    return(
-      <Box>
+      <HStack>
           <Box sx={boxSize} bgColor="red">hoge</Box>
           <Box sx={boxSize} bgColor="blue">huga</Box>
           <Box sx={boxSize} bgColor="yellow">piyo</Box>
-      </Box>       
+      </HStack>
    )
}
export default Sample

```

先程の3つのBoxの親要素をBoxコンポーネントからHStackコンポーネントに変えました。この時のコードを実行すると、、

![スクリーンショット 2022-12-03 22.51.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1091686/1377c972-d062-bcfa-21e3-404c9bd5868e.png)

横並びになってます！！たったこれだけしか変更してないのに！！！**すげぇ！！！！**

このHStackというコンポーネントは小要素を左詰めに、一定間隔で横並びにしてくれるコンポーネントです。もちろん間隔の長さの指定も可能！！

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

これ以外にも、Chakra UIには要素の並べ方を決めたり、位置を調整できるようなコンポーネントが充実しているため、**ユーザは要素並べ、位置調整のCSSに一歳悩む必要がありません！！**

これにより、自分は**要素の位置調整の苦悩から解放されました！**

## Case2: 変更が即座に反映される

Chakra UIはCSSファイルを使用しないため、CSSのキャッシングが行われません(というかキャッシングするものがありません)。
また、コンポーネント単位でデザインを保持するため、開発環境ではホットリロードによって変更が即座に反映されます！
従来のように、ブラウザのキャッシュを気にしながらデザインを書いていく必要がないんです！！**楽すぎる！！**

これにより、自分は**毎回要素が反映されないのがキャッシュのせいなのか、自分のせいなのかを気にする必要がなくなり、快適に開発できるようになりました！**

## Case3: IDEの力でプロパティの値の選択肢がわかるため、直感的なデザイン作成が可能

Chakra UIは本体がTypeScriptを使って書かれており、ほぼ全てのプロパティに対して適応可能な値がユニオン型で指定されています。
そのため、ユーザはプロパティの値として何を当てはめられるか知らなくても、**IDEが教えてくれる中からそれっぽいものを選ぶだけでスタイルを適応することができます**！！

以下の画像はVS CodeでBoxコンポーネントにjustifyContentプロパティを適応しようとした時の表示です。


![スクリーンショット 2022-12-03 23.04.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1091686/248ce6fe-3f7a-5709-fab2-523705d33232.png)

`-moz-initial`や`center`など適応可能な値が示されています。
そのため、ユーザはjustifyContentの詳しい値を知らなくても、英語の意味さえわかれば**どの値を適応すればよいのか、直感的に判別が可能です**！凄い！！

また、多くのユーザが悩みがちな色に関して、Chakra UIは同一の色に対して複数の明度が設定されており、数値で指定可能です！(画像は[Chakra UI公式サイト](https://chakra-ui.com/docs/styled-system/theme)のスクショ)

![スクリーンショット 2022-12-03 23.18.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1091686/e37fd83a-426c-0d04-91bb-f02bd39b8809.png)

こんな感じに使えます！

![スクリーンショット 2022-12-03 23.21.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1091686/3b78174b-b96d-261d-a80d-1f2e13f8ba1a.png)


色に関してもっと知りたい方はこちら↓

https://chakra-ui.com/docs/styled-system/theme

さらにさらに、Customize Theme機能を用いて、それぞれカラーコードを指定することでこれらの色・数値ごとの色の**デフォルトカラーを変更することも可能です**！

https://chakra-ui.com/docs/styled-system/customize-theme

これにより、自分は**IDEを生かした直感的なUI開発ができるようになりました！**

## Case4:ドキュメント・参照先が公式サイトだけで完結する

さて、先ほどから何度かChakra UI公式ドキュメントのリンクを貼っているため、既にお気づきの方もいるかもしれませんが、Chakra UIは**公式のドキュメントが懇切丁寧に作られており、大変わかりやすいです**！ 
なんと**検索ボックスまでついてます**！！
(日本語ドキュメントがない点は目を瞑りましょう、、:sob:)

https://chakra-ui.com/

[コンポーネント一覧ページ](https://chakra-ui.com/docs/components)から欲しい機能を実現できるコンポーネントはおおよそ検討がつきますし、それぞれのコンポーネントの解説ページではサンプルコード付きの詳しい解説をみることができます！
これまでのCSSを用いた開発のように、ググり方もわからずネットの海を彷徨う、、なんてことはもうしなくていいんです！
**大抵のことはこの[公式ドキュメント](https://chakra-ui.com/)で解決できます**！

公式ドキュメントを見ても解決できないことはGithubのissueやdiscordで相談できます！こちらは公式ドキュメント上部にリンクがあるため、そちらから覗いてみてください！

これにより、自分は**参照先で悩んで時間を潰したり、あやふやな情報を掴まされたり、ネットの海を彷徨うことがなくなりました！**

### そして、CSSによる悩みの多くが解決したため、フロントエンドの開発が楽しくなりました！！(一番重要)

# まとめ

この記事ではChakra UIを通じて自分が
- どうしてフロントエンドへの抵抗が消えたのか
- それっぽいUIが書けるようになったのか

について紹介しました！

さて、この記事で紹介したChakra UIですが、この記事だけでは**魅力の1%もお伝えすることができていません**:sob:
そもそもUIコンポーネントライブラリなのです。紹介しきれないほどの便利なコンポーネントが複数存在します。また、簡単にレスポンシブデザインを実現できる機能である**Break Point Value**や他コンポーネントをChakraコンポーネントに変えられる機能である**Chakra Factory**、めちゃくちゃ配慮されたアクセシビティなど、まだまだお伝えできていない魅力がたくさんあるんです、、。

これらはぜひ、自分の目で確かめていただきたいです、、！！

ぜひ、以下のページから初めてみてください！

https://chakra-ui.com/getting-started#framework-guide