daisyUI(Tailwind CSSコンポーネントライブラリ)にNext.jsで入門してみた

# はじめに
研修内で模擬開発プログラムがあり、
自分はフロント側をメインでやることになりました。

そんな折に、
「そこそこ（当たり障りない程度）に今流行りのTailwind CSS使えるよ？」
って他グループの人に話したら、

「そういや、daisyUIって知ってる？Tailwindをめっちゃ短く書いて、UIコンポーネント爆速でできるよ！」
とおすすめされました。

そんなわけで、今回はdaisyUIにエントリして、フロントエンド開発を爆速にできるようにします。
また、現在はNext.jsの学習をメインにやっているため、Next.jsを使ってエントリしてみます。

# そもそもdaisyUIってなんぞや
「s」と「z」をよく間違えそうになるなあ…
日本語版documentにはこのように記載があります。
>最も人気のある無料のオープンソース
Tailwind CSS コンポーネントライブラリ

>Tailwind CSSのプラグイン

まとめると、
<b>Tailwind CSSにプラグインとして導入されて、爆速かつ便利にコンポーネントを作成できるようにするよ</b>
って感じのものです。

↓更にさっくりまとめてみる↓
![daisyui-position.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1047811/878b4518-8e82-4370-547c-7e0a3eb42c6c.png)


# Create-next-app + install tailwindcss
まずはプロジェクトを作って、Tailwind CSSを入れていきましょう。
https://tailwindcss.com/docs/installation/using-postcss
```
npx create-next-app daisy-with-next
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
tailwind.configをいじります
https://zenn.dev/shimakaze_soft/articles/0ce52691b6fc3e
```javascript:tailwind.config.js
module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',
     './components/**/*.{js,ts,jsx,tsx}'
   ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
このあとdocsの通りにcssファイルをいじっても、`Unknown at rule @tailwind`というメッセージが出るので、以下記事を参考にします。
https://qiita.com/P-man_Brown/items/bf05437afecde268ec15
```css:/styles/global.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "dtailwindcss/utilities";
```
これにて準備は完了です。
（各URLは参考記事です、ありがとうございました。）

一応スタック:
Next.js 12.2.2
react 18.2.0
tailwindcss 3.1.5
daisyui 2.19.0

# いざ、daisyUIへ
さあ本日の主役をインストールしていきましょう！！
https://daisyui.com/docs/install/
```
npm install -D daisyui
```
見事インストールされました。
```json:package.json
{
  "devDependencies": {
    "daisyui": "^2.19.0",
  }
}
```
tailwind.configに追加します。
```js:tailwind.config.js
module.exports = {
  //...
  plugins: [require("daisyui")],
}

```
準備完了！<b>え、これだけなの？</b>

# 実際に書いてみる
ここでは、以下記事を参考にして、ただ2つボタンが存在するだけのページを作ります。
https://daisyui.com/docs/use/

せっかくなので（？）propsで受け取ってコンポーネントとして表示する形式で記述します。
ということで、カレントディレクトリに`components`ディレクトリを作って`Button.jsx`として書いていきます。
```jsx:/pages/index.js
import { Button } from '../components/Button';

export default function Home() {
  return (
    <>
      <div className="flex mx-auto w-full justify-center">
        {/* 以下スタイルでほぼ同じ表示が出ます */}

        {/* Tailwind CSS */}
        <Button text="Tailwind" className="inline-block cursor-pointer rounded-md bg-gray-700 px-4 py-3 text-center text-sm font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-gray-900 example-button" />

        {/* daisyUI */}
        <Button text="daisy" className="btn example-button" />
      </div>
    </>
  );
}
```
```jsx:/components/Button.jsx
export const Button = (props) => {
  return <button className={props.className}>{props.text}</button>;
}
```
```css:/styles/global.css
/*
以下を追加
本当はscssで別のファイルで管理したりするほうがいいかもしれません
*/
@layer components{
  .example-button {
    @apply w-1/6 mx-auto mt-12 
  }
}
```

`btn`クラスのみで、Tailwindのめちゃ長いクラスとほぼ同じになるって革新的じゃないですか！？
また、Tailwindの`components`と`@apply`で統一したスタイルの調整をしています。
なお、今回は実装しておりませんが、<b>`@apply`でもdaisyUIのクラスが指定できます。</b>超便利。

以下が実装画面です、本当にほぼ同じだ、、、（語彙力）
<img width="800" alt="ボタンでも" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1047811/3a4a809d-1b57-d26a-2bdf-2f224bdc6370.png">

# もうちょっとだけいじってみる
せっかくなのでdrawerを作ってみたいと思います。
docsに複雑なUIコンポーネントが置いてあるのはありがたいですね。
https://daisyui.com/components/drawer/

まずは`pages`に`display-drawer.js`というファイルを作り、コンポーネントを呼び出します。

```jsx:/pages/display-drawer.js
import { Drawer } from "../components/Drawer.jsx";

export default function DiplayDrawer() {
  return (
    <>
      <Drawer items={[{ itemName: "example1" }, { itemName: "example2" }]} text="open Drawer" />
    </>
  );
}
```
`components`にドロワーを書いていきましょう。ファイル名は`Drawer.jsx`です。
```jsx:/components/Drawer.jsx
export const Drawer = (props) => {
  const items = props.items

  return (
    <>
      <div className="drawer">
        {/* サイドバーをトグル表示するために必要なinputタグ */}
        <input id="my-drawer" type="checkbox" className="drawer-toggle" />
        <div className="drawer-content flex justify-center items-center">
          {/* この中にはサイドバー外のコンテンツを書く */}
          <label htmlFor="my-drawer" className="btn btn-primary drawer-button">
            {props.text}
          </label>
        </div>
        {/* サイドバー */}
        <div className="drawer-side">
          {/* サイドバー表示時のオーバーレイ（影）を勝手にあててくれる */}
          <label htmlFor="my-drawer" className="drawer-overlay"></label>
          {/* サイドバーのアイテム */}
          <ul className="menu p-4 overflow-y-auto w-80 bg-base-100 text-base-content">
            {items.map((item, i) => <li key={i}><a>{item.itemName}</a></li>)}
          </ul>
        </div>
      </div>
    </>
  );
};
```
書き終わったら、ローカルホストで画面を開いてみましょう。
ドロワーが実装されたページが表示されます！（コンポーネント化含めて、10分もかかりませんでした）
[http://localhost:3000/display-drawer](http://localhost:3000/display-drawer)

以下が動作デモです。
![s56gb-ew2ev.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1047811/8448995c-d135-d293-d253-5e082eeb9b23.gif)

# 終わりに
daisyUIは、UIコンポーネントをCSSフレームワークで爆速で作る最高のTipsになりますね。
個人開発でフル活用できるように、ドキュメント読み込みます！！