<p>明けましておめでとうございます。今年もよろしくお願いします！！ってことで今年初めてのブログはChakra UIです。<br><a href="https://chakra-ui.com/" target="_blank" rel="noopener noreferrer">https://chakra-ui.com/</a><br><br>以下の環境でChakra UIを使用しています。</p><ul><li>Next.js : 14.0.3</li><li>React : 18.0.0</li></ul><h2 id="h2295b759c0">対象者</h2><ul><li>Chakra UIって何？美味しいの？って状態の方。</li><li>Chakra UIを使ったことがない方。</li><li>Chakra UIを使ってみたい方。</li></ul><h2 id="hd8d793506b">インストール</h2><p>Chakra UIを使うためのモジュール群をインストールします。</p><pre><code>$ npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion</code></pre><p>Chakra UIはemotionとframer-motionに依存しているっぽいのでこれらも併せてインストールします。</p><h2 id="h31d727ccda">準備</h2><p>Chakra UIを使うためには、最も階層が上位（この場合、<code>app/layout.tsx</code>）に<code>&lt;ChakraProvider /&gt;</code> を設置する必要があります。必ずChakra UIを利用する際にはこのProviderを設定するようにしてください。</p><pre><code>// app/layout.tsx
・・・
import { ChakraProvider } from "@chakra-ui/react"; // 追加
・・・

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    &lt;html lang="en"&gt;
      &lt;body className={inter.className}&gt;
        &lt;ChakraProvider&gt;{children}&lt;/ChakraProvider&gt; {/* &lt;ChakraProvider /&gt;でラップする。 */}
      &lt;/body&gt;
    &lt;/html&gt;
  );
}</code></pre><p><br>ここまでくると、Chakra UIが使えますので実際に使っていきたいと思います。</p><pre><code>// app/page.tsx
import { Heading } from "@chakra-ui/react";

export default function Home() {
  return (
    &lt;Heading color={"red"} fontSize={"64px"}&gt;
      Next.js × Chakra UI
    &lt;/Heading&gt;
  )
}</code></pre><p><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/2c882a2e02ca4392bd26dc57dacc9528/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-26%2013.02.34.png" alt=""><br>ちなみに、ブラウザ上では<u>&lt;h2&gt;</u>でレンダリングされます。</p><h2 id="hdae3825bce">基本となるスタイルの付け方</h2><p>Chakra UIでは、<a href="https://github.com/styled-system/styled-system" target="_blank" rel="noopener noreferrer">styled-system</a>を基礎としている部分があるという特徴があるので、<u>コンポーネントのpropsに直接style属性を記述することでスタイリング</u>します。</p><pre><code>&lt;Box
  width={"100px"}
  height={"100px"}
  backgroundColor={"blue"}
  borderRadius={"50%"}
  padding={"8px"}
  margin={"8px"}
&gt;&lt;/Box&gt;</code></pre><h3 id="h29c2b42b1d">スタイルのショートハンドラ</h3><p>styleの値にはさまざまなショートハンドラが用意されています。<code>padding</code> なら<code>p</code>、<code>margin</code> なら<code>m</code>です。</p><pre><code>&lt;Box
  w={"100px"}
  h={"100px"} 
  bgColor={"blue"}
  rounded={"50%"}
  p={"8px"} 
  m={"8px"}
&gt;&lt;/Box&gt;</code></pre><p>また、縦方向・横方向をまとめて指定する<code>py(padding-top/padding-bottom)・px(padding-left/padding-right)</code> 、<code>my(margin-top/margin-bottom)・mx(margin-left/margin-right)</code> ことができます。</p><pre><code>&lt;Box px={"10px"} my={"10px"}&gt;・・・&lt;/Box&gt;</code></pre><p>何だかこの辺りは<a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">TailwindCSS</a>に近しい感じがしますね。</p><h2 id="h02e85881c2">Theme</h2><p>Chakra UIにも他のUIライブラリみたいにTheme機能があります。ここでは、デフォルトのTheme機能について解説します。<br><a href="https://chakra-ui.com/docs/styled-system/theme" target="_blank" rel="noopener noreferrer">https://chakra-ui.com/docs/styled-system/theme</a></p><h3 id="h6ca073dc9d">色のThemeの使い方</h3><p>色のThemeに関しては<code>色.50、100~900</code> のような指定で、50と100〜900の100刻みで計10段階あり、<u>50が一番薄く900が一番濃い</u>と言う感じです。<a href="https://chakra-ui.com/docs/styled-system/theme#colors" target="_blank" rel="noopener noreferrer">https://chakra-ui.com/docs/styled-system/theme#colors</a></p><pre><code>&lt;Box backgroundColor={"red.50"} borderColor={"blue.200"} color={"yellow.800"}&gt;・・・&lt;/Box&gt;</code></pre><h3 id="h0111671636">サイズ関連の使い方</h3><ul><li>font-size、letter-spacingなどのフォント系</li></ul><p><a href="https://chakra-ui.com/docs/styled-system/theme#typography" target="_blank" rel="noopener noreferrer">https://chakra-ui.com/docs/styled-system/theme#typography</a></p><pre><code>// 7xl = 72px
&lt;Heading fontSize={"7xl"}&gt;
  Next.js × Chakra UI
&lt;/Heading&gt;</code></pre><ul><li>margin、padding</li></ul><p><a href="https://chakra-ui.com/docs/styled-system/theme#spacing" target="_blank" rel="noopener noreferrer">https://chakra-ui.com/docs/styled-system/theme#spacing</a></p><pre><code>// 2=0.5rem=8pxのpaddingが付く。
&lt;Box p={2}&gt;・・・&lt;/Box&gt;

// そのまま2pxのpaddingが付く。
&lt;Box p={"2px"}&gt;・・・&lt;/Box&gt;</code></pre><ul><li>width、height</li></ul><p><a href="unsafe:[object Object]">https://chakra-ui.com/docs/styled-system/theme#sizes</a></p><pre><code>&lt;Box 
  w={"full"} // full=100%
  h={100} // 1=1pxなので、100=100px
&gt;・・・&lt;/Box&gt;</code></pre><h3 id="h0201d4f644">レスポンシブ</h3><p>propsの値に配列またはオブジェクトを渡すだけでレスポンシブすることができます。<br><a href="https://chakra-ui.com/docs/styled-system/responsive-styles#the-object-syntax" target="_blank" rel="noopener noreferrer">https://chakra-ui.com/docs/styled-system/responsive-styles#the-object-syntax</a></p><pre><code>&lt;Box bg={["red.500", "yellow.500", "green.500", "blue.500"]} &gt;
  ・・・
&lt;/Box&gt;</code></pre><p>このように、配列を渡すことでレスポンシブを指定することができます。<br>配列を渡した場合、左に書いた値が<code>sm</code>その右の値が<code>md</code>、<code>lg</code>そして一番右の値が<code>xl</code>となっています。</p><pre><code>sm: "30em", // 480px 
md: "48em", // 768px
lg: "62em", // 992px
xl: "80em", // 1280px</code></pre><p><a href="https://chakra-ui.com/docs/styled-system/theme#breakpoints" target="_blank" rel="noopener noreferrer">https://chakra-ui.com/docs/styled-system/theme#breakpoints</a><br><br>また、以下のようにオブジェクトを使って表現することもできます。</p><pre><code>&lt;Box bg={{ base: "red.500", sm: "yellow.500", md: "green.500", lg: "blue.500" }} &gt;
&nbsp; ・・・
&lt;/Box&gt;</code></pre><h2 id="h2d319ccfc7">疑似要素</h2><p>疑似要素を指定する場合、<code>_before</code> 、<code>_after</code> のように指定します。</p><pre><code>&lt;Box _before={{ content: "", ・・・ }}　_after={{ content: "", ・・・ }}&gt;・・・&lt;/Box&gt;</code></pre><p><br>hoverの時も同様に<code>_hover</code>と指定します。</p><pre><code>&lt;Heading color={"red"} fontSize={"7xl"} _hover={{ color: "blue" }}&gt;
  Next.js × Chakra UI
&lt;/Heading&gt;</code></pre><h2 id="h3bcda3e6b0">最後に</h2><p>今回はChakra UIの基本的な使い方についてご紹介しました。<br>大体この辺りを押さえておくといいかんじにChakraライフを過ごせるのではないかと思います。他に足りない部分であったり応用的な使い方などについてはタイミングが合えば、また書きたいと思います。<br><br><br><br><br><br></p>

T.W

Next.jsでChakra UIを使ってみる。