React、TypeScript、Next.jsとまぁまぁいい感じに勉強してきたので、アウトプットとして今この記事を投稿しているUnBlogというブログサイトのコピーサイトを作っていきたいと思います。

環境構築とかmicro-cmsのデータをfetchする方法とかはUnReactインターン生限定の仕様書に書いてあったのでその辺はあまり説明しないです。

今日話すことはこんな感じです。
・ドロワーメニュー実装
・microcmsで持ってきた画像がnext/imgeで使えない

作ってるコピーサイトはvercelにデプロイしてます。↓ (トップページの実装のみ)
https://micro-cms-git-main-sakai-141014.vercel.app/

ドロワーメニュー実装

ドロワーメニューっていうのはメニューボタンを押したら横からヒュッと出てくるアレです。
あれって何だか難しそうだからできるだけ楽して実装したいですよね。
そんな時にはchakra-uiです。

chakra-uiとは？

chakra-uiは、「ReactのUIコンポーネントライブラリ」です。
つまりドロワーメニューに限らず、ダイアログ(iphoneの充電が20%切った時に出るアレ)とか、トースト(したからスッと出るやつ)とか、そういった動きのあるUIが最初からコンポーネントとして用意されていて、めちゃ簡単に実装できるよ！みたいなやつです。

今回はchakra-uiを使用したドロワーメニューの作成方法をご紹介したいと思います。
完成形はこんな感じです。

右上の三本線を押すと、


左からメニューがスッと出てきます。


メニュー以外の部分(薄暗くなってる部分)を押せば戻ります。




それでは具体的な実装方法に入ります。
まずはchakra-uiをNext.jsプロジェクトにインストールします。

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

次にchakra-uiに用意されているChakraProviderをインポートしてルートコンポーネントを囲んでやります。

import { ChakraProvider } from "@chakra-ui/react";

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <div className="bg-gray-50">
        <Component {...pageProps} />
      </div>
    </ChakraProvider>
  );
}

これをすることでこの配下のコンポーネントでchakra-uiが使えるようになります。

次は実際にドロワーを実装していきます。
chakra-uiにドロワーを簡単に作るためのコンポーネントが用意されているのでそれらをインポートしてドロワーを作っていきます。

import { Drawer, DrawerBody, DrawerContent, DrawerOverlay　} from "@chakra-ui/react";

あらかた形を作って、オプションでドロワーが出てくる位置やサイズを指定します。

<Drawer placement="left" size="xs"> 
  <DrawerOverlay>
    <DrawerContent>
      <DrawerBody>
        <div>ここにドロワー内に表示したい内容を記述</div>
      </DrawerBody>
    </DrawerContent>
  </DrawerOverlay>
</Drawer>

開閉のロジックを作るときは、chakra-uiが用意しているuseDisclosureというフックを使用します。
これを使うと、コンポーネントの表示や非表示を行う関数を自分で作らなくても良くなります。
まずはインポートします。

import { useDisclosure } from "@chakra-ui/react";

機能を取り出します。

const { isOpen, onOpen, onClose } = useDisclosure();

これらをいい感じに割り当てます。

<Drawer placement="left" size="xs" onClose={onClose} isOpen={isOpen}>
  <DrawerOverlay>
    <DrawerContent>
      <DrawerBody>
        <div>ここにドロワー内に表示したい内容を記述</div>
      </DrawerBody>
    </DrawerContent>
  </DrawerOverlay>
</Drawer>

ボタンとかの要素のonClickにonOpenを割り当てます。

<button onClick={onOpen}>ボタン</button>

たったこれだけでドロワーが完成します。
いい感じです。

microcmsで持ってきた画像がnext/imgeで使えない

microcmsからfetchしてきた画像をnext/imageで使用するとこんなエラーが出ました。


「ホストネーム "images.microcms-assets.io "が、`next.config.js`のimagesの下に設定されていません。」こんな感じのことを言っているみたいです。

microcmdでfetchしてきた画像をnext/imageで扱うにはnext.cofig.jsで設定を行わなければならないようです。
以下を記述することで問題なく使用できるようになりました。

module.exports = {
  images: {
    domains: ["images.microcms-assets.io"],
  },
};

今日は一日中コピーサイトを作っていたのでサボり記事です。すいやせん。
getStaticPropsとかgetStaticPathsとかについてももっと理解するために記事書いていきたい！

最後までごらんいただきありがとうございました~!